/* ==========================================================================
   Golden Cliff Hotel — goldencliffhotel.com
   Tema: obsidiana ao candeeiro. Noite fechada sobre a falesia ocre de
   Carvoeiro e um unico brilho de champanhe na pedra.

   O sistema e o mesmo da casa toda: os componentes, o ritmo e o conjunto de
   tokens nao mudam de dominio para dominio. Muda o bloco :root — e so ele.
   Nenhuma regra abaixo sabe se a paleta e clara ou escura: nao ha um preto
   nem um creme escrito fora dos tokens.

   Disciplina deste tema (e onde ele se afasta de uma paleta clara):
     - zero sombras, zero brilhos, zero desfocagens. A elevacao faz-se por
       hairline, sempre;
     - dois raios e mais nenhum: 4px (superficies) e 100px (pilulas);
     - o champanhe nunca enche uma area. Vive no hairline, no rotulo, na
       letra e no botao de accao. Mais nada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* -- Paleta: o unico bloco que muda de dominio para dominio -------------
     Contrastes medidos (WCAG 2.1), nao estimados a olho. */
  --bg: #000000;                            /* obsidiana */
  --surface: #0b0b0b;
  --surface-2: #131313;

  --text: #fff7dd;                          /* creme de vela — 19.60:1 sobre --bg */

  /* O cinza do tema (Ember Ash #66635f) da 3.51:1 sobre o preto e reprova AA.
     O texto secundario e, por isso, uma derivada do proprio creme:
       rgba(255,247,221,.66) = #a8a392 sobre --bg        8.32:1
                             = #aca796 sobre --surface   8.17:1
                             = #afa998 sobre --surface-2 7.92:1
     Passa nas tres camadas, que sao os tres fundos onde ele aparece. */
  --text-muted: rgba(255, 247, 221, 0.66);

  --border: rgba(200, 173, 134, 0.32);      /* hairline champanhe: 1.80:1 — nao e texto */

  --accent: #c8ad86;                        /* champanhe */
  --accent-ink: #000000;                    /* texto sobre o acento: 9.78:1 */
  --accent-hover: #dcc4a1;

  /* O fio do botao de accao. Sobre a canva obsidiana o champanhe destaca-se
     sozinho (9.78:1) e o fio nao existe; dentro do painel de creme o
     enchimento so da 2.0:1 contra o fundo e precisa de aresta propria. Mais
     um par de valores para a mesma regra. */
  --accent-edge: transparent;

  /* Numa paleta clara o acento-enchimento reprova como letra e o acento-letra
     tem de escurecer. Aqui e ao contrario, e e esse o teste do sistema: sobre
     a canva obsidiana o champanhe passa como letra sem retoque nenhum (9.78:1),
     e quem precisa de escurecer e o painel invertido — que nesta paleta e o
     momento CLARO da pagina. Dois valores, um por cada fundo:
       --accent-text        sobre a canva e as superficies   9.78:1 sobre --bg
       --accent-text-panel  dentro do painel de creme        5.35:1 sobre --panel
     Trocam-se os valores, as regras ficam onde estao. */
  --accent-text: var(--accent);
  --accent-text-panel: #855f28;             /* mesmo tom, escurecido: H 35.5deg */

  /* Painel invertido — Clube VIP e rodape. Numa paleta clara e o momento
     escuro; nesta, e o momento de luz. A estrutura nao muda. */
  --panel: #fff7dd;
  --panel-text: #0b0b0b;                    /* 18.37:1 sobre --panel */
  --panel-muted: #57534a;                   /* 7.15:1 sobre --panel */
  --panel-line: rgba(0, 0, 0, 0.2);
  --panel-field: #736e62;                   /* contorno de campo: 4.74:1 sobre --panel */

  /* Camada activa dentro de uma faixa (redefinida por .tier--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: 100px;
  --head-h: 64px;
  --tier-y: 72px;
  --pad: 24px;

  /* Altura do aviso de cookies, medida em JS — o botao de topo sobe por cima */
  --banner-h: 0px;
}

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

@media (min-width: 1024px) {
  :root {
    --head-h: 68px;
    --tier-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 {
  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;
}

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

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

.visually-hidden {
  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;
}

.bypass-link {
  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;
}

.bypass-link:focus {
  top: 12px;
}

/* Rotulo editorial — o degrau mais pequeno da escala. Champanhe: o rotulo e um
   dos quatro sitios onde o acento pode viver. */
.sigil {
  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(--accent-text);
}

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

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

.script-text {
  max-width: 62ch;
  color: var(--text-muted);
}

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

/* --------------------------------------------------------------------------
   4. MARCA — monograma e monolito
   -------------------------------------------------------------------------- */
.monogram {
  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;
}

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

.monogram__name {
  font-size: 14px;
  font-weight: var(--w-regular);
  letter-spacing: 0.1em;
  color: var(--text);
}

.monogram__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);
}

.monogram--inverse .monogram__name {
  color: var(--panel-text);
}

/* A assinatura so entra quando ha linha para ela. Medido: a assinatura desta
   casa pesa 278px — o dobro de um "Gaming Resort" seco —, e a marca inteira
   mais a navegacao mais o botao pedem 1247px contra os 1152px uteis do
   contentor. Ou seja: a partir dos 1024, quando a navegacao ocupa a linha, a
   assinatura nao cabe em largura nenhuma. Fica na faixa do burger, onde a
   linha esta livre. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .monogram__tag {
    display: inline-block;
  }
}

/* O monolito: a marca da casa fechada numa armadura de champanhe. Contorno,
   nunca enchimento. */
.monolith {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: clamp(168px, 46vw, 216px);
  height: clamp(184px, 50vw, 240px);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.monolith::before,
.monolith::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
}

.monolith::before {
  top: -5px;
  left: -5px;
  border-right: 0;
  border-bottom: 0;
}

.monolith::after {
  bottom: -5px;
  right: -5px;
  border-left: 0;
  border-top: 0;
}

.monolith__initials {
  font-family: var(--font-display);
  font-size: clamp(40px, 11vw, 56px);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--accent-text);
}

.monolith__rule {
  width: 44px;
  height: 1px;
  background-color: var(--border);
}

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

/* --------------------------------------------------------------------------
   5. CONTROLOS
   -------------------------------------------------------------------------- */
.key {
  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 em que o champanhe enche alguma coisa */
.key--accent {
  background-color: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent-edge);
}

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

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

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

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

.key--quiet:hover {
  background-color: var(--layer);
  border-color: var(--accent);
}

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

/* Selo 18+ */
.crest {
  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;
}

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

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

/* Fichas — contorno de champanhe, sem enchimento. Entram a seguir ao
   cabecalho da faixa, com a mesma folga que a grelha de cartoes. */
.chit-row {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chit {
  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;
}

/* Pilulas de documento */
.badge-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  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);
}

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

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

/* Sem sombra: assim que a pagina sai do topo, o hairline acende-se em
   champanhe. E a unica coisa que muda, e chega. */
.crown--lifted {
  border-bottom-color: var(--accent);
}

.crown__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* "GCH Golden Cliff Hotel" nao parte, por isso aos 320 a folga tem de ceder:
     246px de marca + 44px de burger nao cabem em 280px com 24 de intervalo */
  gap: 12px;
  min-height: var(--head-h);
}

@media (min-width: 768px) {
  .crown__inner {
    gap: 24px;
  }
}

.crown__nav {
  display: none;
}

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

.crown__cta {
  display: none;
}

.barlist__list {
  display: flex;
  align-items: center;
  gap: 22px;
}

.barlist__link {
  display: inline-block;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  /* 22.4px de linha + 2x11 de folga = 44px de alvo, com o fio colado ao texto */
  padding-block: 11px;
  border-bottom: 1px solid transparent;
  /* uma entrada de menu e uma linha; "Sala de Jogo" nunca parte ao meio */
  white-space: nowrap;
}

.barlist__link:hover {
  border-bottom-color: var(--accent);
}

.latch {
  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;
}

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

.crown--open .latch__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.crown--open .latch__bar:nth-child(2) {
  opacity: 0;
}

.crown--open .latch__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Painel movel — o mesmo <nav>, aberto por baixo do cabecalho */
.crown--open .crown__nav {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background-color: var(--surface);
  border-bottom: 1px solid var(--accent);
  padding: 12px var(--gutter) 24px;
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
}

.crown--open .barlist__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.crown--open .barlist__item {
  border-top: 1px solid var(--border);
}

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

.crown--open .barlist__item--cta {
  padding-top: 20px;
}

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

  .crown__cta {
    display: inline-flex;
  }

  .latch,
  .barlist__item--cta {
    display: none;
  }
}

/* Dos 1024 aos 1200 a linha do cabecalho esta no limite: "Golden Cliff Hotel"
   pede 969px contra os 961px uteis. O passo da navegacao aperta ate o
   contentor abrir. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .barlist__list {
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   7. STAGE — texto a esquerda, monolito e ficha tecnica a direita
   -------------------------------------------------------------------------- */
.stage {
  background-color: var(--surface);
  padding-block: 52px 64px;
  --layer: var(--surface-2);
}

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

.stage__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 */
.stage__accent {
  font-weight: var(--w-regular);
  color: var(--accent-text);
}

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

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

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

.stage__side {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

/* Ficha tecnica da casa */
.stage__fact {
  width: 100%;
  border-top: 1px solid var(--border);
}

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

.stage__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);
}

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

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

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

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

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

  .stage__main {
    grid-column: 1 / 8;
  }

  .stage__side {
    grid-column: 9 / 13;
    margin-top: 12px;
    align-self: end;
    gap: 40px;
  }

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

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

/* --------------------------------------------------------------------------
   8. TIER — ritmo unico de seccao: rotulo > titulo > lead > conteudo
   -------------------------------------------------------------------------- */
.tier {
  position: relative;
  padding-block: var(--tier-y);
  background-color: var(--bg);
  --layer: var(--surface);
}

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

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

.tier__sub {
  margin-top: 24px;
}

.tier__head {
  max-width: 62ch;
}

.tier__rule {
  margin-top: 16px;
}

/* Sub-seccao dentro de uma faixa: o mesmo ritmo, um degrau abaixo */
.tier__part {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.tier__part-head {
  max-width: 62ch;
}

.tier__part-title {
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.2;
}

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

.tier__stats {
  margin-top: 48px;
}

.tier__aside-note {
  margin-top: 16px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  max-width: 70ch;
}

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

@media (min-width: 1024px) {
  .tier__part {
    margin-top: 72px;
    padding-top: 48px;
  }

  .tier__head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: end;
    max-width: none;
  }

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

  .tier__head .tier__sub {
    grid-column: 7 / 13;
    margin-top: 0;
  }

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

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

  .tier__grid .docket {
    grid-column: 8 / 13;
    margin-top: 40px;
  }

  .tier__grid .stair {
    grid-column: 1 / 13;
    margin-top: 64px;
  }

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

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

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

  .tier__body,
  .tier__stats {
    grid-column: 6 / 13;
  }
}

/* --------------------------------------------------------------------------
   9. PLATE — a grelha de cartoes
   -------------------------------------------------------------------------- */
.plate-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

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

.plate__kicker {
  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;
}

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

.plate__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(--accent-text);
}

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

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

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

.plate__meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-variant-numeric: lining-nums tabular-nums;
}

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

.plate__foot {
  margin-top: 16px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Pares chave/valor dentro de um cartao — o mesmo idioma da ficha do stage */
.plate__facts {
  margin-top: 16px;
  border-top: 1px solid var(--border);
}

.plate__fact {
  display: grid;
  gap: 2px;
  padding-block: 10px;
  border-bottom: 1px solid var(--border);
}

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

.plate__fact-key {
  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);
}

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

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

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

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

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

/* --------------------------------------------------------------------------
   10. DOCKET — pares chave/valor em painel (distancias, regras de acesso)
   -------------------------------------------------------------------------- */
.docket {
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--layer);
  padding: var(--pad);
}

.docket__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);
}

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

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

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

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

/* --------------------------------------------------------------------------
   11. MARGIN-NOTE — bloco de fecho de seccao, fio grosso em cima
   -------------------------------------------------------------------------- */
.margin-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--text);
  max-width: 62ch;
}

.margin-note__label {
  color: var(--text);
}

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

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

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

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

.tally__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);
}

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

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

.tally__label--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) {
  .tally {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
  }

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

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

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

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

/* --------------------------------------------------------------------------
   13. STAIR — lista numerada sem caixa (alto limite, jogo responsavel)
   -------------------------------------------------------------------------- */
.stair {
  margin-top: 48px;
}

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

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

/* O ordinal fica em --text; o champanhe vai no tracinho, que nao e texto */
.riser__index {
  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);
}

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

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

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

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

  .riser__index {
    padding-top: 6px;
  }

  .riser__name {
    margin-top: 0;
  }
}

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

  .riser__text {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   14. BILL — o programa do palco
   -------------------------------------------------------------------------- */
.bill {
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.bill__row {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-bottom: 1px solid var(--border);
}

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

.bill__day {
  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);
}

.bill__time {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--w-semibold);
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent-text);
}

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

@media (min-width: 768px) {
  .bill__row {
    grid-template-columns: 96px 64px 1fr;
    column-gap: 16px;
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   15. PORTAL — a marca de idade
   -------------------------------------------------------------------------- */
.portal__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);
}

.portal__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);
}

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

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

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

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

  .portal__main .tier__title {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   16. ENROL — o painel invertido, o momento de luz da pagina
   -------------------------------------------------------------------------- */
/* O painel troca o fundo, por isso troca tambem o acento-letra e o foco */
.enrol__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);
  --accent-edge: var(--accent-text-panel);
}

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

.enrol__accent {
  font-weight: var(--w-regular);
  color: var(--accent-text);
}

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

.enrol__form {
  margin-top: 32px;
}

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

.enrol__field {
  display: block;
}

.enrol__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;
}

.enrol__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);
}

.enrol__input::placeholder {
  color: var(--panel-muted);
  opacity: 1;
}

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

.enrol__input:focus-visible {
  outline: 2px solid var(--panel-text);
  outline-offset: 1px;
  border-color: var(--panel-text);
}

.enrol__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= */
.enrol__check {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent-text-panel);
}

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

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

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

.enrol__small {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--panel-muted);
  max-width: 40ch;
}

.enrol__done {
  display: none;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--accent-text-panel);
  border-radius: var(--radius);
  max-width: 56ch;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--panel-text);
}

.enrol__done.is-visible {
  display: block;
}

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

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

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

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

/* --------------------------------------------------------------------------
   17. PLINTH — o rodape, o segundo momento de luz
   -------------------------------------------------------------------------- */
.plinth {
  background-color: var(--panel);
  color: var(--panel-muted);
  padding-block: 64px 32px;
  --focus: var(--panel-text);
  --accent-text: var(--accent-text-panel);
  --accent-edge: var(--accent-text-panel);
}

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

.plinth__col {
  min-width: 0;
}

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

.plinth__address {
  margin-top: 16px;
  font-style: normal;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--panel-muted);
}

.plinth__seal {
  margin-top: 20px;
}

.plinth__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;
}

/* A coluna dos contactos leva tambem a lista legal por baixo */
.plinth__title--legal {
  margin-top: 32px;
}

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

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

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

.plinth__contacts li + li {
  margin-top: 4px;
}

.plinth__contact-line {
  display: flex;
  align-items: center;
  width: fit-content;
  /* a coluna do rodape mede ~147px aos 768 e o endereco de e-mail pede 225px:
     tem de poder partir, senao empurra a pagina para o lado */
  max-width: 100%;
  overflow-wrap: anywhere;
  min-height: 44px;
  font-size: var(--fs-body);
  color: var(--panel-text);
  text-decoration-color: var(--panel-field);
}

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

.plinth__hours {
  margin-top: 8px;
  font-size: var(--fs-micro);
  color: var(--panel-muted);
}

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   18. CRUMB e ASCEND — aviso de cookies e botao de topo
   -------------------------------------------------------------------------- */
.crumb {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 120;
  background-color: var(--surface);
  border-top: 1px solid var(--text);
  padding-block: 16px;
  --layer: var(--surface-2);
}

.crumb[hidden] {
  display: none;
}

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

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

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

.crumb__actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.ascend {
  position: fixed;
  right: var(--gutter);
  bottom: calc(24px + var(--banner-h));
  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, bottom 0.18s ease;
}

.ascend svg {
  width: 16px;
  height: 16px;
  display: block;
}

.ascend:hover {
  background-color: var(--surface-2);
  border-color: var(--accent);
}

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

/* --------------------------------------------------------------------------
   19. CHARTER — paginas legais
   -------------------------------------------------------------------------- */
.charter {
  display: block;
  background-color: var(--surface);
  padding-block: 52px 80px;
  --layer: var(--surface-2);
}

.charter__head {
  max-width: 72ch;
}

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

.charter__updated {
  margin-top: 16px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.charter__intro {
  margin-top: 24px;
  color: var(--text-muted);
}

.charter__body {
  max-width: 72ch;
  margin-top: 40px;
}

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

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

.charter__h2-index {
  display: inline-block;
  margin-right: 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-variant-numeric: lining-nums tabular-nums;
  vertical-align: middle;
  color: var(--accent-text);
}

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

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

.charter__inline-link {
  color: var(--text);
}

.charter__list {
  margin-top: 16px;
}

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

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

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

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

.charter__row {
  padding-block: 14px;
  border-bottom: 1px solid var(--border);
}

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

.charter__row-key {
  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);
}

.charter__row-value {
  margin-top: 6px;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--text-muted);
}

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

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

  .charter__row {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 24px;
    align-items: baseline;
  }

  .charter__row-value {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   20. 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;
  }
}