/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DAS APRESENTAÇÕES — Via Traço
   assets/css/apresentacoes.css

   Carregado somente pelas páginas dentro de apresentacoes/, DEPOIS do
   <style> inline de cada apresentação. Vale para todas as apresentações
   de identidade visual, atuais e futuras.

   Contém:
   1. @font-face CS Clingan (a fonte existe em assets/fonts mas nunca
      havia sido declarada em nenhum CSS do projeto)
   2. Tipografia de interface/editorial das apresentações (CS Clingan)
      — com exceção estrutural: slides marcados com o atributo
      data-preservar-tipografia (capas e slides-espécime de tipografia)
      mantêm a fonte própria do projeto apresentado
   3. Menu compacto + drawer lateral (substitui a barra branca do site
      nas apresentações)
   4. Guardas contra colisão com o CSS global do site (#dots do viewer)
   5. Capas específicas: Brasilidades (arte centralizada) e Memorial
      (painel institucional com logo)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. CS CLINGAN ─────────────────────────────────────────────── */
@font-face {
  font-family: "CSClingan";
  src: url("../fonts/CSClingan-Regular.woff2") format("woff2"),
       url("../fonts/CSClingan-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CSClingan";
  src: url("../fonts/CSClingan-Italic.woff2") format("woff2"),
       url("../fonts/CSClingan-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* A fonte de interface/editorial das apresentações é a MESMA do site
   (Noto Sans). A CS Clingan fica declarada acima para usos pontuais,
   mas não é mais a fonte de leitura: em corpo pequeno ela era fina
   demais e comprometia a legibilidade dos textos. */
:root { --pr-interface: "Noto Sans", "Segoe UI", sans-serif; }

/* ── 2. TIPOGRAFIA DE INTERFACE / EDITORIAL ────────────────────────
   Regra: textos da moldura Via Traço e textos editoriais da
   apresentação = CS Clingan. Textos que fazem parte do projeto
   apresentado (capas, espécimes tipográficos) = fonte do projeto.
   A exceção é estrutural: qualquer slide com data-preservar-tipografia
   fica de fora — funciona para projetos futuros sem tocar neste CSS.
   O !important é necessário porque o typography.css global do site
   força h1/h2 com !important. O .vt-final (formulário + rodapé) não é
   .slide, portanto permanece com a tipografia padrão do site.        */
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) h1,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) h2,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) h3,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) p,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) li,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) small,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) span,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) blockquote,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) figcaption {
  font-family: var(--pr-interface) !important;
}

/* em/itálicos dentro de títulos editoriais: itálico da CS Clingan,
   cor herdada da apresentação (o typography.css global os pintaria
   de preto) */
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) h1 em,
body.apresentacao main#deck .slide:not([data-preservar-tipografia]) h2 em {
  font-family: var(--pr-interface) !important;
  font-style: italic !important;
  color: inherit !important;
}

/* Interface pura (aparece inclusive nas capas preservadas) */
body.apresentacao .contador,
body.apresentacao .scroll-hint,
body.apresentacao #lightbox,
body.apresentacao #lightbox figcaption {
  font-family: var(--pr-interface) !important;
}

/* ── 3. MENU COMPACTO + DRAWER ─────────────────────────────────── */

/* Botão de 3 linhas — discreto, canto superior direito */
.presentation-menu-button {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 1200;
  width: 46px;
  height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;      /* sem o cartão branco */
  border: none;
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
  transition: transform .25s ease;
  padding: 0;
}
.presentation-menu-button:hover {
  transform: translateY(-1px);
}
.presentation-menu-button span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: #1c1c1c;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, background .3s ease;
}
/* Sobre slides escuros o JS adiciona .sobre-escuro (mesma lógica das
   bolinhas de navegação): traços brancos com leve sombra. */
.presentation-menu-button.sobre-escuro span {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* Com o drawer aberto, o X fica sobre o painel claro: traços escuros. */
.presentation-menu-button.is-open span {
  background: #1c1c1c;
  box-shadow: none;
}
.presentation-menu-button.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.presentation-menu-button.is-open span:nth-child(2) { opacity: 0; }
.presentation-menu-button.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Véu escuro atrás do drawer */
.presentation-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: rgba(18, 18, 18, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.presentation-menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer lateral */
.presentation-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(320px, 86vw);
  z-index: 1210;
  background: #fdfcf9;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .16);
  transform: translateX(102%);
  transition: transform .34s cubic-bezier(.33, 1, .5, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.presentation-menu-drawer.is-open { transform: translateX(0); }

.presentation-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.presentation-menu-logo img { height: 26px; width: auto; display: block; }

.presentation-menu-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #1c1c1c;
  padding: 8px;
  border-radius: 8px;
  transition: background .2s ease;
}
.presentation-menu-close:hover { background: rgba(0, 0, 0, .05); }

.presentation-nav {
  display: flex;
  flex-direction: column;
  padding: 14px 8px 24px;
}
.presentation-nav a {
  font-family: var(--pr-interface);
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1c1c1c;
  text-decoration: none;
  padding: 13px 16px;
  border-radius: 10px;
  transition: background .2s ease, padding-left .2s ease;
}
.presentation-nav a:hover {
  background: rgba(0, 0, 0, .045);
  padding-left: 22px;
}

/* ── 4. GUARDAS CONTRA O CSS GLOBAL DO SITE ────────────────────────
   O viewer.css da home também define #dots (teatro de livros); regra
   de ID vence a classe .dots da apresentação e esparrama as bolinhas
   numa camada invisível que engole roda do mouse e cliques.          */
body.apresentacao #dots {
  position: fixed;
  right: 22px;
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  opacity: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Bolinhas e contador saem de cena sobre o formulário/rodapé */
body.apresentacao .dots.dots--oculto,
body.apresentacao .contador.contador--oculto {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ── 5a. BRASILIDADES — capa com a arte centralizada ───────────── */
/* A capa mostra a arte inteira (logo um pouco menor), com o fundo do
   slide na mesma cor do fundo da própria imagem (#acd0ab, amostrado
   dos cantos de b01.webp) para a emenda ficar invisível. */
body.apre-brasilidades #s1 {
  display: block;
  padding: 0;
  background: #acd0ab;
}
body.apre-brasilidades #s1 .capa-central {
  margin: 0;
  position: absolute;
  inset: 0;
}
body.apre-brasilidades #s1 .capa-central img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
  will-change: transform;
}
body.apre-brasilidades #s1 .scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── 5b. MEMORIAL — painel institucional com o logo ────────────── */
/* Metade direita 100% branca, com o logo expandido ocupando o campo,
   e tipografia serifada (Frank Ruhl Libre) que conversa com a marca. */
body.apre-memorial #s1 .campo.memorial-institucional {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  background: #ffffff;
  padding: clamp(28px, 5vw, 72px);
}
body.apre-memorial #s1 .memorial-logo {
  width: min(96%, 920px);
  height: auto;
  display: block;
  margin-bottom: 10px;
}
body.apresentacao.apre-memorial main#deck #s1 .memorial-lema {
  font-family: "Noto Sans", sans-serif !important;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: #1f3a52;
  margin: 0;
  max-width: 26ch;
}
body.apre-memorial #s1 .memorial-dados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.apre-memorial #s1 .memorial-dados li {
  font-family: var(--pr-interface) !important;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #2b5e8e;
}
body.apre-memorial #s1 .memorial-nota {
  font-family: var(--pr-interface) !important;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #33414e;
  margin: 4px 0 0;
  max-width: 38ch;
}

/* ── 6. RESPONSIVO ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .presentation-menu-button { top: 14px; right: 14px; }

  body.apre-brasilidades #s1 .capa-central { max-width: 92vw; }
  body.apre-brasilidades #s1 .capa-central img { max-height: 68vh; }

  body.apre-memorial #s1 .campo.memorial-institucional {
    padding: 34px 26px 56px;
  }
  body.apre-memorial #s1 .memorial-logo { width: min(96%, 920px); }
}

/* ── 7. TIPOGRAFIA PRESERVADA DOS PROJETOS ─────────────────────────
   Dentro dos slides marcados com data-preservar-tipografia (capas e
   espécimes tipográficos), vale a fonte do projeto — e é preciso
   reafirmá-la com !important porque o typography.css global do site
   força h1/h2 em Noto Sans. Cada apresentação declara sua fonte na
   variável --pr-projeto (títulos) e --pr-projeto-texto (apoios).     */
body.apre-cicero        { --pr-projeto: var(--lucida); }
body.apre-brasilidades  { --pr-projeto: var(--lucida); }
body.apre-memorial      { --pr-projeto: var(--lucida); }
body.apre-muhpan        { --pr-projeto: 'Amatic SC', cursive; --pr-projeto-texto: 'Archivo', sans-serif; }

body.apresentacao main#deck .slide[data-preservar-tipografia] h1,
body.apresentacao main#deck .slide[data-preservar-tipografia] h2,
body.apresentacao main#deck .slide[data-preservar-tipografia] h3 {
  font-family: var(--pr-projeto) !important;
}
body.apresentacao main#deck .slide[data-preservar-tipografia] p,
body.apresentacao main#deck .slide[data-preservar-tipografia] span,
body.apresentacao main#deck .slide[data-preservar-tipografia] small,
body.apresentacao main#deck .slide[data-preservar-tipografia] li,
body.apresentacao main#deck .slide[data-preservar-tipografia] figcaption {
  font-family: var(--pr-projeto-texto, var(--pr-projeto)) !important;
}
/* em/itálicos dos títulos preservados: herdam do projeto (o site os
   pintaria de preto itálico) */
body.apresentacao main#deck .slide[data-preservar-tipografia] h1 em,
body.apresentacao main#deck .slide[data-preservar-tipografia] h2 em {
  font-family: inherit !important;
  color: inherit !important;
}
/* A interface continua interface mesmo dentro de capa preservada */
body.apresentacao main#deck .slide[data-preservar-tipografia] .scroll-hint {
  font-family: var(--pr-interface) !important;
}

/* ── 8. LEGIBILIDADE GLOBAL DAS APRESENTAÇÕES ──────────────────────
   Corpo de texto maior e com mais contraste em todos os decks.
   Prefixo body.apresentacao garante vitória sobre o <style> inline. */
body.apresentacao .eyebrow { font-size: .8rem; }
body.apresentacao main#deck .slide .cab p,
body.apresentacao main#deck .slide .txt p,
body.apresentacao main#deck .slide .baixo p {
  font-size: 1.08rem;
  line-height: 1.75;
  font-weight: 300;
}
body.apresentacao .apresenta { font-size: .9rem; }

body.apresentacao .fato small { font-size: .68rem; }
body.apresentacao .fato span { font-size: 1rem; }

body.apresentacao .creditos small { font-size: .72rem; }
body.apresentacao .creditos span { font-size: .98rem; opacity: 1; }

body.apresentacao .livreto-linha small,
body.apresentacao .rosto-linha small { font-size: .68rem; }
body.apresentacao .livreto-linha p,
body.apresentacao .rosto-linha p { font-size: .96rem; line-height: 1.55; }

body.apresentacao .trio figcaption,
body.apresentacao .folheador .legenda-pg { font-size: .78rem; }
body.apresentacao .pg-contador { font-size: .78rem; }
body.apresentacao .parada small { font-size: .78rem; opacity: .95; }

/* Cartões de cor: rótulos maiores e anel sutil para o cartão nunca
   sumir quando a cor coincide com o fundo do slide. */
body.apresentacao .cor .nucleo { font-size: .68rem; opacity: .95; }
body.apresentacao .cor .nome { font-size: clamp(.9rem, 1.3vw, 1.1rem); }
body.apresentacao .cor {
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.4),
              inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Hover fluido na paleta: depois que a animação de entrada termina,
   o JS marca o slide com .pronto e as transições ficam curtas, sem os
   atrasos escalonados da entrada (que deixavam o hover "travado"). */
body.apresentacao .slide.pronto .cor {
  transition: transform .22s cubic-bezier(.22,.8,.24,1),
              opacity .3s ease !important;
  transition-delay: 0s !important;
}

/* Painéis de imagem um pouco maiores nos slides que pareciam vazios */
body.apresentacao .empilha-marca .painel img { max-height: 34vh; }
body.apresentacao .chegada-grade .painel img { max-height: 34vh; }
body.apresentacao .empilha-fachada .painel:first-child img { max-height: 24vh; }
body.apresentacao .empilha-fachada .painel:last-child img { max-height: 46vh; }

/* Faixa de fotos opcional sob a rota de itinerância/linha do tempo */
body.apresentacao .rota-foto { max-width: 1200px; width: 100%; margin: 3.5vh auto 0; }
body.apresentacao .rota-foto img { width: 100%; max-height: 40vh; object-fit: cover; }

/* ── 9. LIGHTBOX ────────────────────────────────────────────────────
   Acima do botão do menu (que tem z-index 1200) e com a imagem
   realmente ampliada, mesmo quando o arquivo original é pequeno.   */
body.apresentacao #lightbox { z-index: 1300; }
body.apresentacao #lightbox img {
  width: min(96vw, 1800px);
  height: auto;
  max-height: 92vh;
  object-fit: contain;
}

/* ── 10. FORMULÁRIO + RODAPÉ = TIPOGRAFIA DO SITE ──────────────────
   O bloco final (.vt-final) e o rodapé pertencem ao site, não ao
   projeto apresentado: Noto Sans em tudo, vencendo a fonte que o
   body de cada apresentação define para os slides.                 */
body.apresentacao .vt-final,
body.apresentacao .vt-final h2,
body.apresentacao .vt-final p,
body.apresentacao .vt-final a,
body.apresentacao .vt-final label,
body.apresentacao .vt-final input,
body.apresentacao .vt-final select,
body.apresentacao .vt-final textarea,
body.apresentacao .vt-final button,
body.apresentacao .vt-final small,
body.apresentacao .vt-final span,
body.apresentacao footer,
body.apresentacao footer a,
body.apresentacao footer li,
body.apresentacao footer span,
body.apresentacao footer small {
  font-family: "Noto Sans", sans-serif;
}


/* ── 11. TIPOGRAFIA DOS SLIDES = SITE PRINCIPAL ────────────────────
   O site usa Noto Sans: títulos ExtraLight 200, textos Light 300
   (typography.css/style.css). O style.css põe TODOS os h1–h4 em
   caixa alta — padrão do site principal que aqui é neutralizado:
   nos slides o título fica em caixa normal, e a palavra colorida
   ganha itálico (só nas apresentações).                           */
body.apresentacao main#deck .slide h2.titulo,
body.apresentacao main#deck .slide h2.rupestre,
body.apresentacao main#deck .slide .fim h2 {
  font-weight: 200 !important;
  text-transform: none !important;
}
body.apresentacao main#deck .slide h2.titulo strong,
body.apresentacao main#deck .slide h2.titulo b,
body.apresentacao main#deck .slide h2.rupestre em,
body.apresentacao main#deck .slide h2.rupestre strong,
body.apresentacao main#deck .slide .fim h2 em {
  font-weight: inherit !important;
  font-style: italic !important;
}

/* Dados de apoio: valores em Light 300, como os textos do site */
body.apresentacao .fato span,
body.apresentacao .creditos span,
body.apresentacao .cor .nome,
body.apresentacao .formas figcaption { font-weight: 300 !important; }
body.apresentacao .parada b { font-weight: 400 !important; }

/* Anos das amostras tipográficas: itálico no lugar do negrito */
body.apresentacao .linhas-tipo .amostra b {
  font-weight: 400 !important;
  font-style: italic;
}

/* Muhpan: títulos no mesmo corpo das demais apresentações */
body.apre-muhpan main#deck .slide h2.rupestre {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  letter-spacing: .04em;
}

/* ── 12. PAINÉIS SEM MOLDURA/FAIXA BRANCA ──────────────────────────
   O painel encolhe para o tamanho da imagem: some a faixa branca
   nas laterais (e o "branco ao redor" durante o carregamento).    */
body.apresentacao .duas .painel,
body.apresentacao .empilha-marca .painel,
body.apresentacao .empilha-fachada .painel,
body.apresentacao .painel.faixa-larga {
  background: transparent;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  align-self: center;
  margin-inline: auto;
}

/* ── 13. DUPLAS DE FOTOS LADO A LADO (com o parallax .drift) ───────*/
body.apresentacao .chegada-grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2vw;
  align-items: center;
}
body.apresentacao .chegada-grade .painel {
  background: transparent;
  width: 100%;
}
body.apresentacao .chegada-grade .painel img {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: cover;
  display: block;
}

/* Memorial: "role para navegar" em azul da marca (legível no branco) */
body.apre-memorial .scroll-hint { color: #2b5e8e; opacity: 1; }


/* ── 14. FORMULÁRIO/RODAPÉ LIMPOS ──────────────────────────────────
   Quando o bloco final entra em cena, as bolinhas de navegação e o
   botão de WhatsApp somem para não poluir nem cobrir o rodapé.    */
body.apresentacao .dots,
body.apresentacao .wha-btn { transition: opacity .35s ease; }
body.apresentacao.final-visivel .dots,
body.apresentacao.final-visivel #dots,
body.apresentacao.final-visivel .wha-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   Ajustes finais de apresentação solicitados
   ═══════════════════════════════════════════════════════════════ */

/* CTA final dentro das apresentações: seguir frase do site, não caixa alta. */
body.apresentacao .vt-final .cta-band h2,
body.apresentacao footer h2 {
  text-transform: none !important;
}

/* Brasilidades: primeira linha fechada em "Uma exposição sobre a" e respiro mais editorial. */
body.apre-brasilidades #s2 .titulo-brasilidades-s2 {
  letter-spacing: .025em !important;
  max-width: 11.8em;
}
body.apre-brasilidades #s2 .titulo-brasilidades-s2 strong {
  display: inline-block;
}

/* Memorial: dados da capa em leitura normal, sem caixa alta forçada. */
body.apre-memorial #s1 .memorial-dados li {
  text-transform: none !important;
  letter-spacing: .03em !important;
  font-weight: 300 !important;
}

/* Memorial: separa um pouco mais imagem e texto nas telas de narrativa. */
body.apre-memorial #s2 .duas,
body.apre-memorial #sm .duas {
  gap: clamp(48px, 5.5vw, 96px) !important;
}

/* Cícero Dias: fundo da chegada um pouco mais claro para o vermelho da antecâmara respirar. */
body.apre-cicero #s6 {
  background: #c6bd99 !important;
}

/* Cícero Dias: fachada com destaque legível sobre o fundo vermelho. */
body.apre-cicero #sf .eyebrow,
body.apre-cicero #sf .eyebrow.claro,
body.apre-cicero #sf h2.titulo strong {
  color: #F3E6CB !important;
}
body.apre-cicero #sf .eyebrow::before {
  background: #F3E6CB !important;
}
body.apre-cicero #sf h2.titulo strong {
  font-weight: 400 !important;
  font-style: italic !important;
}

/* Evita que títulos editoriais virem caixa alta por herança global. */
body.apresentacao main#deck .slide h2,
body.apresentacao main#deck .slide h3,
body.apresentacao main#deck .slide .fim h2 {
  text-transform: none !important;
}


/* Memorial: espaço entre o texto da narrativa visual e a imagem da parte 02/03. */
body.apre-memorial #sm .txt {
  margin-bottom: clamp(30px, 3.5vw, 58px) !important;
}
body.apre-memorial #sm .txt p {
  margin-bottom: 0 !important;
}