/* ---------------------------------------------------------
   DECK — sistema de slides verticais com scroll-snap
   Cada .slide ocupa exatamente uma viewport (100dvh).
   O container .deck controla o snap; wheel/keyboard são
   interceptados pelo JS para forçar 1 slide por vez.
   --------------------------------------------------------- */

.deck {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  isolation: isolate;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

/* Slide — uma composição por viewport */
.slide {
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: grid;
  align-content: center;
  background: var(--bg);
  color: var(--text);
}

.slide--full { padding: 0; }
.slide--light { background: var(--bg-light); color: var(--faj-navy); }
.slide--navy  { background: var(--faj-navy); color: var(--faj-white); }
.slide--deep  { background: var(--faj-navy-deep); color: var(--faj-white); }
.slide--dark  { background: var(--faj-ink); color: var(--faj-white); }
.slide--white { background: var(--faj-white); color: var(--faj-navy); }

/* Identificador de capítulo (topo-esquerdo) */
.slide__ident {
  position: absolute;
  top: var(--panel-pad-y);
  left: var(--panel-pad-x);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-caption);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  z-index: 3;
  opacity: 0.65;
}
.slide--light .slide__ident,
.slide--white .slide__ident { color: var(--faj-navy); }
.slide__ident-num  { color: var(--accent); font-weight: 700; }
.slide__ident-line { width: 48px; height: 1px; background: currentColor; opacity: .4; }

/* Marcador de capítulo (rodapé-esquerdo, discreto) */
.slide__marker {
  position: absolute;
  bottom: var(--panel-pad-y);
  left: var(--panel-pad-x);
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.4;
  z-index: 3;
}

/* Conteúdo relativo dentro do slide */
.slide__content {
  position: relative;
  z-index: 4;
  max-width: 1400px;
  width: 100%;
}

/* Grid utilitário */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 32px);
  width: 100%;
  align-items: center;
}

/* Utilitário: esconder visualmente */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Aliases retro-compatíveis (para conteúdo herdado que ainda usa .panel/.panel__*) */
.panel,
.panel--wide,
.panel--xwide,
.panel--half {
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: grid;
  align-content: center;
  background: var(--bg);
  color: var(--text);
}
.panel--full-image { padding: 0; }
.panel--light { background: var(--bg-light); color: var(--faj-navy); }
.panel--navy  { background: var(--faj-navy); color: var(--faj-white); }
.panel--deep  { background: var(--faj-navy-deep); color: var(--faj-white); }
.panel--dark  { background: var(--faj-ink); color: var(--faj-white); }
.panel--white { background: var(--faj-white); color: var(--faj-navy); }
.panel--orange { background: var(--faj-orange); color: var(--faj-white); }

.panel__ident {
  position: absolute;
  top: var(--panel-pad-y);
  left: var(--panel-pad-x);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-caption);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  z-index: 3;
  opacity: 0.65;
}
.panel--light .panel__ident,
.panel--white .panel__ident { color: var(--faj-navy); }
.panel__ident-num { color: var(--accent); font-weight: 700; }
.panel__ident-line { width: 48px; height: 1px; background: currentColor; opacity: .4; }

.panel__marker {
  position: absolute;
  bottom: var(--panel-pad-y);
  left: var(--panel-pad-x);
  font-size: var(--fs-caption);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.4;
  z-index: 3;
}