/* ==========================================================================
   Atlantic Breeze Hotel — atlanticbreezehotel.com
   Tema: altitude — Voltage Blue (#2b7fff) sobre carbono. Paleta escura.

   O sistema vive nos tokens. A folha nao conhece a paleta: nao ha um unico
   branco, preto ou azul fora do bloco :root. Trocando os valores, a mesma
   folha serve um dominio claro — incluindo o painel invertido, que aqui e o
   momento claro da pagina e la seria o momento escuro.

   Ordem do ficheiro:
     1. Tokens        6. Marca          11. Gauge        16. Baseboard
     2. Base          7. Topbar         12. Protocol     17. Cookiebar
     3. Utilitarios   8. Intro          13. Threshold    18. Legal
     4. Longform      9. Zonas          14. Dtable       19. Movimento
     5. Controlos    10. Blocos         15. Register
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — o unico bloco que muda de dominio para dominio
   -------------------------------------------------------------------------- */
:root {
  /* Superficies e texto — tudo acromatico */
  --bg: #181818;
  --surface: #1f1f1f;
  --surface-2: #262626;
  --text: #eeeeee;
  --text-muted: #a4a19b;
  --border: #4b4b4b;

  /* Voltage Blue — o unico acento cromatico do sitio.
     Medido, nao adivinhado:
       branco sobre #2b7fff .......... 3.76:1  reprova AA
       #2b7fff como texto em #1f1f1f . 4.38:1  reprova AA
       #2b7fff como texto em #262626 . 4.02:1  reprova AA
       #2b7fff como texto em #eeeeee . 3.24:1  reprova AA
     Dai quatro valores em vez de um:
       --accent            so enche (botao, contorno, filete) — nunca e letra
       --accent-ink        a tinta POR CIMA do enchimento: #0a1633 = 4.75:1
                           (o branco daria 3.76:1 e reprovava)
       --accent-text       o acento como LETRA nas superficies escuras: #5b9bff
                           6.41:1 em --bg, 5.95:1 em --surface, 5.46:1 em --surface-2
       --accent-text-panel o acento como LETRA dentro do painel invertido, que
                           nesta paleta e o momento claro: #0b57d0 = 5.50:1
     Num dominio de paleta clara estes dois ultimos trocam de lado: o acento
     escurece na canva e clareia no painel. Trocam-se os valores, as regras ficam. */
  --accent: #2b7fff;
  --accent-ink: #0a1633;
  --accent-hover: #7cb0ff;
  --accent-text: #5b9bff;
  --accent-text-panel: #0b57d0;

  /* Painel invertido — Clube ABH e rodape */
  --panel: #eeeeee;
  --panel-text: #1f1f1f;
  --panel-muted: #4b4b4b;
  --panel-line: #cfcfcf;
  --panel-field: #6f6f6f;

  /* Camada activa dentro de uma zona (redefinida por .zone--surface) */
  --layer: var(--surface);
  --focus: var(--text);

  /* Tipografia — igual nos cinco dominios */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', Times, serif;
  --font-text: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  --fs-display: clamp(40px, 6.2vw, 64px);
  --lh-display: 1.05;
  --fs-h2: clamp(28px, 3.4vw, 34px);
  --lh-h2: 1.15;
  --fs-h3: 20px;
  --lh-h3: 1.25;
  --fs-body: 16px;
  --lh-body: 1.6;
  --fs-label: 12px;
  --ls-label: 0.12em;
  --fs-micro: 13px;
  --fs-num: clamp(44px, 7vw, 64px);
  --ls-display: -0.02em;

  /* Espaco e forma */
  --container: 1200px;
  --gutter: 20px;
  --gap: 24px;
  --radius: 4px;
  --radius-pill: 999px;
  --head-h: 64px;
  --zone-y: 72px;
  --pad: 24px;

  --shadow:
    rgba(0, 0, 0, 0.28) 0 4px 14px 0,
    rgba(0, 0, 0, 0.22) 0 1px 2px 0;
  /* sombra a subir — o aviso de cookies encosta ao fundo da janela */
  --shadow-up: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --zone-y: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --head-h: 68px;
    --zone-y: 120px;
    --fs-body: 17px;
  }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 24px);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-display);
  font-optical-sizing: auto;
}

p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dt,
dd {
  margin: 0;
}

strong,
b {
  font-weight: var(--w-semibold);
}

a {
  color: inherit;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

button {
  font: inherit;
  color: inherit;
}

svg {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   3. UTILITARIOS
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skiplink {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-micro);
  font-weight: var(--w-semibold);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: top 0.15s ease;
}

.skiplink:focus {
  top: 12px;
}

/* Rotulo editorial — o degrau mais pequeno da escala */
.overline {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  color: var(--text);
}

.overline--muted {
  color: var(--text-muted);
}

/* Filete com marca de acento — micro-detalhe, nao e texto */
.rule-line {
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  background:
    linear-gradient(to right, var(--accent) 0 28px, transparent 28px) no-repeat,
    var(--border);
}

/* A ligacao que se ve. Usa o acento-letra — que troca de valor no painel */
.link {
  color: var(--accent-text);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   4. LONGFORM — prosa
   -------------------------------------------------------------------------- */
.longform {
  max-width: 62ch;
  color: var(--text-muted);
}

.longform p + p {
  margin-top: 16px;
}

.longform strong {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   5. CONTROLOS — control, stamp, marker, paper
   -------------------------------------------------------------------------- */
.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: var(--w-semibold);
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* Accao primaria — o unico momento cromatico do sistema */
.control--accent {
  background-color: var(--accent);
  color: var(--accent-ink);
}

.control--accent:hover {
  background-color: var(--accent-hover);
}

.control--ink {
  background-color: var(--text);
  color: var(--bg);
}

.control--ink:hover {
  background-color: var(--text-muted);
}

.control--quiet {
  background-color: transparent;
  color: var(--text);
  border-color: var(--border);
}

.control--quiet:hover {
  background-color: var(--layer);
  border-color: var(--text);
}

.control--sm {
  min-height: 44px;
  padding: 8px 16px;
  font-size: var(--fs-micro);
}

.control__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Selo 18+ */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--text);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  white-space: nowrap;
}

.stamp--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  flex: none;
}

.stamp--outline {
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: var(--w-regular);
  letter-spacing: 0.04em;
  text-transform: none;
}

.stamp--inverse {
  border-color: var(--panel-line);
  color: var(--panel-text);
}

/* Markers — contorno de acento, sem enchimento. Entram a seguir ao cabecalho
   da zona, por isso guardam a mesma folga que a grelha de slabs. */
.marker-set {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.marker {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--w-medium);
  white-space: nowrap;
}

/* Papeis — documentos ao balcao */
.paper-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.paper {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--text);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--w-semibold);
}

.paper--off {
  border-color: var(--border);
  border-style: dashed;
  color: var(--text-muted);
  font-weight: var(--w-regular);
}

/* --------------------------------------------------------------------------
   6. MARCA
   -------------------------------------------------------------------------- */
.emblem {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  /* alvo de toque: a linha de base manda no alinhamento, o padding na altura */
  padding-block: 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* se a linha do topo apertar, e o nome que cede — nunca a navegacao */
  min-width: 0;
}

.emblem__initials {
  font-size: 20px;
  font-weight: var(--w-bold);
  letter-spacing: 0.01em;
  color: var(--accent-text);
}

.emblem__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: var(--w-regular);
  letter-spacing: 0.1em;
  color: var(--text);
}

.emblem__tag {
  display: none;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.emblem--inverse .emblem__name {
  color: var(--panel-text);
}

@media (min-width: 768px) {
  .emblem__tag {
    display: inline-block;
  }
}

/* Entre 1024 e 1200 a navegacao ocupa a linha toda — a assinatura sai */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .emblem__tag {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. TOPBAR
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar--lifted {
  box-shadow: var(--shadow);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--head-h);
}

.topbar__nav {
  display: none;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar__cta {
  display: none;
}

.topbar__list {
  display: flex;
  align-items: center;
  /* «Atlantic Breeze Hotel» e um nome longo: a folga entre itens cede primeiro,
     para a navegacao nunca partir em duas linhas entre 1024 e 1200 */
  column-gap: clamp(14px, 1.4vw, 22px);
  row-gap: 0;
}

.topbar__link {
  display: inline-block;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  /* 22,4px de linha + 2x11 de folga = 44px de alvo, com o filete colado ao texto */
  padding-block: 11px;
  border-bottom: 1px solid transparent;
}

.topbar__link:hover,
.topbar__link.is-active {
  border-bottom-color: var(--accent);
}

.topbar__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.topbar__burger-bar {
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--text);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.topbar--open .topbar__burger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.topbar--open .topbar__burger-bar:nth-child(2) {
  opacity: 0;
}

.topbar--open .topbar__burger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Painel movel */
.topbar--open .topbar__nav {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 12px var(--gutter) 24px;
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
}

.topbar--open .topbar__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.topbar--open .topbar__item {
  border-top: 1px solid var(--border);
}

.topbar--open .topbar__link {
  display: block;
  padding-block: 14px;
  font-size: var(--fs-body);
  border-bottom: 0;
}

.topbar--open .topbar__item--cta {
  padding-top: 20px;
  border-top: 0;
}

@media (min-width: 1024px) {
  .topbar__nav {
    display: block;
    flex: none;
  }

  .topbar__cta {
    display: inline-flex;
    flex: none;
  }

  .topbar__burger,
  .topbar__item--cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. INTRO — texto a esquerda, ficha da casa a direita
   -------------------------------------------------------------------------- */
.intro {
  background-color: var(--surface);
  padding-block: 52px 64px;
  --layer: var(--surface-2);
}

.intro__overline {
  color: var(--text-muted);
}

.intro__title {
  margin-top: 24px;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  max-width: 15ch;
  text-wrap: balance;
}

/* Contraste dentro da linha de display: peso 400 dentro de 600, cor de acento */
.intro__accent {
  font-weight: var(--w-regular);
  color: var(--accent-text);
}

.intro__lede {
  margin-top: 32px;
  max-width: 46ch;
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.intro__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.intro__note {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  max-width: 30ch;
}

/* Ficha da casa: o ano em corpo grande e quatro linhas rotulo/valor */
.intro__fact {
  margin-top: 48px;
}

.intro__fact-head {
  padding-bottom: 20px;
}

.intro__fact-label {
  color: var(--text-muted);
}

.intro__year {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-num);
  line-height: 0.85;
  letter-spacing: var(--ls-display);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}

.intro__year-note {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 30ch;
}

.intro__facts {
  border-top: 1px solid var(--border);
}

.intro__fact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
}

.intro__fact-key {
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
}

.intro__fact-val {
  font-size: var(--fs-body);
  color: var(--text);
}

@media (min-width: 768px) {
  .intro {
    padding-block: 64px 88px;
  }

  .intro__fact-row {
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: baseline;
  }
}

@media (min-width: 1024px) {
  .intro {
    padding-block: 80px 120px;
  }

  .intro__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
  }

  .intro__main {
    grid-column: 1 / 9;
  }

  .intro__fact {
    grid-column: 10 / 13;
    margin-top: 12px;
    align-self: end;
  }

  .intro__fact-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .intro__title {
    max-width: 13ch;
  }
}

/* --------------------------------------------------------------------------
   9. ZONAS — ritmo unico de seccao: overline > titulo > lead > conteudo
   -------------------------------------------------------------------------- */
.zone {
  position: relative;
  padding-block: var(--zone-y);
  background-color: var(--bg);
  --layer: var(--surface);
}

/* Zona levantada: o que la dentro assenta sobe tambem um degrau */
.zone--surface {
  background-color: var(--surface);
  --layer: var(--surface-2);
}

.zone__title {
  margin-top: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  max-width: 18ch;
  text-wrap: balance;
}

.zone__sub {
  margin-top: 24px;
}

.zone__head {
  max-width: 62ch;
}

.zone__rule-line {
  margin-top: 16px;
}

/* Bloco de texto solto dentro de uma zona */
.zone__block-title {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.zone__block-text {
  margin-top: 12px;
  max-width: 60ch;
  color: var(--text-muted);
}

.zone__block-text strong {
  color: var(--text);
}

.zone__gauge,
.zone__dossier,
.zone__table {
  margin-top: 48px;
}

.zone__tail {
  margin-top: 56px;
}

@media (max-width: 1023.98px) {
  .zone__aside {
    margin-bottom: 32px;
  }
}

@media (min-width: 1024px) {
  .zone__head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: end;
    max-width: none;
  }

  .zone__head-main {
    grid-column: 1 / 6;
  }

  .zone__head .zone__sub {
    grid-column: 7 / 13;
    margin-top: 0;
  }

  /* Prosa a esquerda, painel de dados a direita, nota por baixo */
  .zone__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }

  .zone__main {
    grid-column: 1 / 7;
  }

  .zone__grid .dossier {
    grid-column: 8 / 13;
    margin-top: 40px;
  }

  .zone__grid .footnote {
    grid-column: 1 / 8;
    margin-top: 64px;
  }

  /* No fim de uma zona a grelha entra sem o desnivel do cabecalho */
  .zone__tail .dossier {
    margin-top: 0;
  }

  /* Rotulo a esquerda, corpo estreito a direita */
  .zone__split {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
  }

  .zone__aside {
    grid-column: 1 / 5;
  }

  .zone__body,
  .zone__split .zone__gauge,
  .zone__split .footnote {
    grid-column: 6 / 13;
  }
}

/* --------------------------------------------------------------------------
   10. BLOCOS — dossier, footnote, slabs
   -------------------------------------------------------------------------- */

/* Dossier — pares chave/valor em painel (distancias, horarios, cronologia) */
.dossier {
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--layer);
  padding: var(--pad);
}

.dossier__title {
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.dossier__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
}

.dossier__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dossier__key {
  font-size: var(--fs-body);
  color: var(--text);
}

.dossier__val {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
}

/* Variante de cronologia: a chave e um ano e o valor e uma frase — a linha
   deixa de ser um par alinhado as pontas e passa a duas colunas. */
.dossier--timeline .dossier__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
}

.dossier--timeline .dossier__key {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  font-variant-numeric: lining-nums tabular-nums;
}

.dossier--timeline .dossier__val {
  font-size: var(--fs-micro);
  line-height: 1.5;
  text-align: left;
}

/* Footnote — bloco de rodape de zona, filete grosso em cima */
.footnote {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--text);
  max-width: 62ch;
}

.footnote__label {
  color: var(--text);
}

.footnote__text {
  margin-top: 12px;
  color: var(--text-muted);
}

.footnote__text + .footnote__text {
  margin-top: 16px;
}

.footnote__text strong {
  color: var(--text);
}

/* A voz de um hospede usa o mesmo bloco: o rotulo assina, a citacao fala */
.footnote__quote {
  margin-top: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.footnote__quote + .footnote__text {
  margin-top: 16px;
}

/* Grelha de slabs — 1 / 2 / 3 colunas */
.slab-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

.slab {
  background-color: var(--layer);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
}

.slab__overline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
}

.slab__dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  flex: none;
}

.slab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
}

.slab__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.slab__title {
  margin-top: 12px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.slab__text {
  margin-top: 12px;
  color: var(--text-muted);
}

.slab__text + .slab__text {
  margin-top: 12px;
}

.slab__list {
  margin-top: 12px;
}

.slab__list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.slab__list li + li {
  margin-top: 8px;
}

.slab__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background-color: var(--accent);
}

.slab__links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 768px) {
  .slab-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .slab--wide {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .slab-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .slab--wide {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   11. GAUGE — a estatistica e um recurso tipografico
   -------------------------------------------------------------------------- */
.gauge {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--text);
}

.gauge--quiet {
  border-top-color: var(--border);
}

/* dt precede dd na marcacao; column-reverse poe o numeral por cima do rotulo */
.gauge__item {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
}

.gauge__num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-num);
  line-height: 0.85;
  letter-spacing: var(--ls-display);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}

.gauge__num--sm {
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1;
}

.gauge__key {
  display: block;
  margin-top: 16px;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 26ch;
}

.gauge__key--caps {
  margin-top: 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
}

@media (min-width: 768px) {
  .gauge {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }

  .gauge--three {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gap);
  }
}

@media (min-width: 1024px) {
  .gauge {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gap);
  }

  .gauge--three {
    grid-template-columns: repeat(3, 1fr);
  }

  .gauge__item {
    padding-bottom: 32px;
  }
}

/* --------------------------------------------------------------------------
   12. PROTOCOL — lista ordenada sem caixa (passos)
   -------------------------------------------------------------------------- */
.protocol {
  margin-top: 48px;
}

.protocol__step {
  padding-block: 32px;
  border-top: 1px solid var(--border);
}

.protocol__step:last-child {
  border-bottom: 1px solid var(--border);
}

/* O ordinal fica em --text (AA); o acento vai no tracinho, que nao e texto */
.protocol__ord {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}

.protocol__ord::after {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  margin-top: 8px;
  background-color: var(--accent);
}

.protocol__name {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.2;
}

.protocol__text {
  margin-top: 12px;
  max-width: 62ch;
  color: var(--text-muted);
}

.protocol__text + .protocol__text {
  margin-top: 12px;
}

.protocol__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 768px) {
  .protocol__step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 24px;
  }

  .protocol__ord {
    padding-top: 6px;
  }

  .protocol__name {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .protocol__step {
    grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr);
    column-gap: 32px;
    align-items: start;
  }

  .protocol__body {
    grid-column: 3;
    grid-row: 1;
  }

  .protocol__body .protocol__text {
    margin-top: 0;
  }

  .protocol__body .protocol__text + .protocol__text {
    margin-top: 12px;
  }
}

/* --------------------------------------------------------------------------
   13. THRESHOLD — verificacao de idade
   -------------------------------------------------------------------------- */
.threshold__num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-num);
  line-height: 0.85;
  letter-spacing: var(--ls-display);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text);
}

.threshold__label {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text-muted);
}

.threshold__docs {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.threshold__docs + .threshold__docs {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 1024px) {
  .threshold__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }

  .threshold__figure {
    grid-column: 1 / 4;
    border-top: 1px solid var(--text);
    padding-top: 20px;
  }

  .threshold__main {
    grid-column: 5 / 12;
  }

  .threshold__main .zone__title {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   14. DTABLE — dados tabulares (servicos, inventario da sala, cookies)
   -------------------------------------------------------------------------- */
.dtable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dtable__caption {
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text-muted);
  text-align: left;
  margin-bottom: 16px;
}

.dtable__th {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text);
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--text);
  white-space: nowrap;
}

.dtable__cell {
  font-weight: var(--w-regular);
  text-align: left;
  color: var(--text);
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: var(--fs-micro);
  line-height: 1.5;
}

.dtable__cell--muted {
  color: var(--text-muted);
}

.dtable__th--num,
.dtable__cell--num,
.dtable__foot-cell--num {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.dtable__foot-cell {
  padding: 14px 16px 14px 0;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text);
  border-top: 1px solid var(--text);
}

/* Telemovel: a tabela desmancha-se em fichas — sem barra horizontal a 360px */
@media (max-width: 767.98px) {
  .dtable,
  .dtable tbody,
  .dtable tfoot,
  .dtable__row,
  .dtable__foot-row,
  .dtable__cell,
  .dtable__foot-cell {
    display: block;
  }

  /* numa tabela ja em block, a legenda deixa de ser table-caption: sem isto
     encolhe para a largura da palavra mais comprida */
  .dtable__caption {
    display: block;
  }

  .dtable__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .dtable__row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--layer);
    padding: 4px 16px;
  }

  .dtable__row + .dtable__row {
    margin-top: 12px;
  }

  .dtable__cell {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }

  .dtable__cell:last-child {
    border-bottom: 0;
  }

  .dtable__cell::before {
    content: attr(data-label);
    font-size: var(--fs-label);
    line-height: 1.4;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--w-semibold);
    color: var(--text-muted);
    flex: none;
  }

  .dtable__cell--num {
    text-align: right;
  }

  .dtable__foot-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 14px;
    border-top: 1px solid var(--text);
  }

  .dtable__foot-row + .dtable__foot-row {
    border-top: 1px solid var(--border);
  }

  .dtable__foot-cell {
    padding: 0;
    border-top: 0;
  }
}

@media (min-width: 768px) {
  .dtable__cell {
    font-size: var(--fs-body);
  }
}

/* --------------------------------------------------------------------------
   15. REGISTER — painel invertido, o momento claro do corpo
   -------------------------------------------------------------------------- */
/* O painel inverte o fundo, por isso inverte tambem o acento-letra e o foco */
.enlist__panel {
  background-color: var(--panel);
  border-radius: var(--radius);
  padding: 40px 24px;
  color: var(--panel-text);
  --focus: var(--panel-text);
  --accent-text: var(--accent-text-panel);
}

.enlist__overline {
  color: var(--panel-muted);
}

.enlist__title {
  margin-top: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--panel-text);
  max-width: 18ch;
}

.enlist__text {
  margin-top: 20px;
  max-width: 52ch;
  color: var(--panel-muted);
}

.enlist__perks {
  margin-top: 24px;
  max-width: 46ch;
}

.enlist__perk {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--panel-muted);
}

.enlist__perk + .enlist__perk {
  margin-top: 8px;
}

.enlist__perk::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background-color: var(--accent);
}

.enlist__form {
  margin-top: 32px;
}

.enlist__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.enlist__field {
  display: block;
}

.enlist__label {
  display: block;
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--panel-muted);
  margin-bottom: 8px;
}

.enlist__input {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  background-color: transparent;
  border: 1px solid var(--panel-field);
  border-radius: var(--radius);
  color: var(--panel-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
}

.enlist__input::placeholder {
  color: var(--panel-field);
}

.enlist__input:hover {
  border-color: var(--panel-text);
}

.enlist__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.enlist__consent {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 60ch;
}

/* A caixa mede 24px; o alvo util e a etiqueta ao lado, ligada por for= */
.enlist__check {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
}

.enlist__consent-text {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--panel-muted);
}

.enlist__consent-text a {
  color: var(--panel-text);
  text-decoration-color: var(--panel-field);
}

.enlist__row {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Subscrito: o botao apaga-se, mas continua legivel (10,6:1) */
.enlist__submit[disabled] {
  background-color: var(--panel-line);
  color: var(--panel-text);
  cursor: default;
}

.enlist__fine {
  margin-top: 20px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--panel-muted);
  max-width: 60ch;
}

.enlist__success {
  margin-top: 24px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  max-width: 56ch;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--panel-text);
}

.enlist__success[hidden] {
  display: none;
}

.enlist__success-icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--accent-text-panel);
}

@media (min-width: 768px) {
  .enlist__panel {
    padding: 64px 52px;
  }
}

@media (min-width: 1024px) {
  .enlist__panel {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    padding: 64px;
  }

  .enlist__head {
    grid-column: 1 / 5;
  }

  .enlist__form {
    grid-column: 6 / 13;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   16. BASEBOARD — rodape
   -------------------------------------------------------------------------- */
.baseboard {
  background-color: var(--panel);
  color: var(--panel-muted);
  padding-block: 64px 32px;
  --focus: var(--panel-text);
  --accent-text: var(--accent-text-panel);
}

.baseboard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.baseboard__col {
  min-width: 0;
}

.baseboard__tag {
  margin-top: 16px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--panel-muted);
  max-width: 32ch;
}

.baseboard__coords {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--panel-text);
}

.baseboard__stamps {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.baseboard__stamps .stamp--outline {
  border-color: var(--panel-line);
  color: var(--panel-muted);
}

.baseboard__title {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--panel-text);
  margin-bottom: 16px;
}

.baseboard__list li + li {
  margin-top: 12px;
}

.baseboard__link {
  font-size: var(--fs-body);
  color: var(--panel-muted);
  text-decoration: none;
}

.baseboard__link:hover {
  color: var(--panel-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.baseboard__contacts {
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--panel-muted);
}

.baseboard__contact-line {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  margin-top: 4px;
  color: var(--panel-text);
  text-decoration-color: var(--panel-field);
}

.baseboard__contact-line:hover {
  text-decoration-color: var(--panel-text);
}

.baseboard__hours {
  margin-top: 12px;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--panel-muted);
}

.baseboard__bottom {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--panel-line);
  display: grid;
  gap: 20px;
}

.baseboard__care {
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--panel-muted);
  max-width: 78ch;
}

.baseboard__care strong {
  color: var(--panel-text);
}

.baseboard__care a {
  color: var(--panel-text);
}

.baseboard__copy {
  font-size: var(--fs-micro);
  color: var(--panel-muted);
}

@media (min-width: 768px) {
  .baseboard {
    padding-block: 80px 32px;
  }

  .baseboard__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--gap);
  }

  .baseboard__bottom {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
  }
}

/* --------------------------------------------------------------------------
   17. AVISO DE COOKIES E BOTAO DE TOPO
   -------------------------------------------------------------------------- */
.consent-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 120;
  background-color: var(--surface);
  border-top: 1px solid var(--text);
  box-shadow: var(--shadow-up);
  padding-block: 16px;
  --layer: var(--surface-2);
}

.consent-bar[hidden] {
  display: none;
}

.consent-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.consent-bar__text {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 74ch;
}

.consent-bar__link {
  color: var(--text);
}

.consent-bar__actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.totop {
  position: fixed;
  right: var(--gutter);
  bottom: 24px;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--surface);
  border: 1px solid var(--text);
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.totop__icon {
  width: 16px;
  height: 16px;
  display: block;
}

.totop:hover {
  background-color: var(--surface-2);
}

.totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

body.has-consent-bar .totop {
  bottom: 96px;
}

/* --------------------------------------------------------------------------
   18. PAGINAS LEGAIS
   -------------------------------------------------------------------------- */
.edict {
  background-color: var(--surface);
  padding-block: 52px 80px;
  --layer: var(--surface-2);
}

.edict__head {
  max-width: 72ch;
}

.edict__label {
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text-muted);
}

.edict__title {
  margin-top: 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.edict__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.edict__back {
  margin-top: 32px;
}

.edict__body {
  max-width: 72ch;
}

.edict__section {
  margin-top: 40px;
}

.edict__h2 {
  font-size: 22px;
  line-height: 1.25;
}

.edict__h3 {
  margin-top: 24px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.edict__p {
  margin-top: 12px;
  color: var(--text-muted);
}

.edict__p--strong {
  color: var(--text);
}

.edict__list {
  margin-top: 16px;
}

.edict__li {
  position: relative;
  padding-left: 20px;
  color: var(--text-muted);
}

.edict__li + .edict__li {
  margin-top: 8px;
}

.edict__li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 1px;
  background-color: var(--accent);
}

.edict__li-key {
  color: var(--text);
  font-weight: var(--w-semibold);
}

.edict__list-wrap {
  margin-top: 20px;
}

.edict__box {
  margin-top: 24px;
  padding: var(--pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--layer);
}

.edict__box-title {
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--text);
}

.edict__reset {
  margin-top: 20px;
}

.edict__reset-msg {
  margin-top: 12px;
  font-size: var(--fs-micro);
  color: var(--accent-text);
}

.edict__reset-msg[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .edict {
    padding-block: 64px 120px;
  }
}

/* --------------------------------------------------------------------------
   19. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}