/* brand.css — deck de páginas 16:9. Unidades em cqi (1 cqi = 1% da largura da folha). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; background: var(--neve); }
/* rolagem suave só depois de um clique ou foco (link do sumário): um link direto (…/brand#cracha) abre já na página,
   sem animar o deck inteiro. O teclado usa o behavior do brand.js, que também respeita o movimento reduzido */
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--fonte); font-weight: 400; color: var(--tinta); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; counter-reset: pg; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
.pular { position: absolute; left: -999px; top: 0; }
.pular:focus { left: 1rem; top: 1rem; background: var(--tinta); color: var(--branco); padding: .5rem 1rem; z-index: 10; }
/* valores técnicos: a Geist Mono (--fonte-mono) não tem tracking; só HEX e códigos levam o +30% da escala (p.29).
   Números de tabela, medidas, razões e porcentagens ficam sem tracking. */
.codigo { letter-spacing: .3em; margin-right: -.3em; } /* a margem devolve o tracking depois do último caractere */
/* troca de peça no celular: .so-folha some abaixo de 900 px e em retrato; .so-celular só aparece aí. Serve para a
   versão mini onde o layout de celular deixa a gema com 48 px ou menos (capa, encerramento, páginas 17, 38, 43, 54) */
.so-celular { display: none !important; }

/* página, folha e miolo */
.pg { position: relative; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: 100%; place-items: center; background: var(--fundo); color: var(--texto); counter-increment: pg; }
/* 100% e não 100vw: 100vw inclui a barra de rolagem clássica do Windows e gera rolagem horizontal */
.folha { position: relative; width: min(100%, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size; }
.miolo { position: absolute; inset: 0; padding: var(--margem) var(--margem) var(--margem-base); display: grid; grid-template-columns: var(--col-texto) 1fr; column-gap: 2.2cqi; font-size: 0.86cqi; line-height: 1.45; }
/* três colunas; a do meio começa junto da área visual (22.5cqi), como no rodapé do Outset */
.pg-rodape { position: absolute; left: var(--margem); right: var(--margem); bottom: 1.7cqi; display: grid; grid-template-columns: var(--col-texto) 1fr auto; column-gap: 2.2cqi; font-size: 0.78cqi; color: var(--texto-2); }
.pg-num::before { content: counter(pg); }

/* coluna de texto */
.pg-texto { align-self: start; }
.pg-texto h3 { margin: 0 0 0.9cqi; font-size: 1cqi; font-weight: 600; line-height: 1.3; }
.pg-texto p { margin: 0 0 0.9cqi; max-width: 32ch; }
.pg-texto ul { padding-left: 1.2cqi; }

/* área visual e cards */
.pg-visual { display: grid; gap: var(--gap); min-height: 0; }
.card { position: relative; margin: 0; background: var(--card); border-radius: var(--raio-card); box-shadow: var(--sombra); display: grid; place-items: center; padding: 2cqi; min-height: 0; overflow: hidden; }
.card > figcaption { position: absolute; left: 1cqi; top: 0.9cqi; font-size: 0.86cqi; color: var(--texto-2); }
.card.preto { background: var(--preto); color: var(--branco); }
.card.branco { background: var(--branco); }
.card.neve { background: var(--neve); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3x2 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.grid-4x2 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
.grid-4x3 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.split-1-2 { grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; }
.split-1-2 > .card:first-child { grid-row: 1 / 3; }
.stack-3 { grid-template-rows: repeat(3, 1fr); }

/* capa */
.pg-capa .miolo { grid-template-columns: 1fr; padding: var(--margem); }
.pg-marca { position: absolute; left: var(--margem); top: var(--margem); height: 3cqi; width: auto; }
.pg-url, .pg-ano { position: absolute; right: var(--margem); font-size: 0.78cqi; color: var(--texto-2); }
.pg-url { top: var(--margem); }
.pg-ano { bottom: var(--margem); }
.pg-titulo { position: absolute; left: var(--margem); bottom: var(--margem); font-family: var(--fonte-display); font-size: 8cqi; font-weight: 400; line-height: 0.95; letter-spacing: 0; }
.pg-titulo .linha { display: block; }
.pg-titulo .linha span { display: inline-block; opacity: 0; animation: letra .35s ease-out forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes letra { to { opacity: 1; } }
.orbitas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbitas .orb { transform-box: view-box; transform-origin: 1500px 540px; }
.orbitas .orb-1 { animation: gira 60s linear infinite; }
.orbitas .orb-2 { animation: gira 90s linear infinite reverse; }
.orbitas .orb-3 { animation: gira 120s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* duplo (dois painéis) */
.pg-duplo .miolo { grid-template-columns: 1fr; }
.paineis { display: grid; grid-template-columns: 66fr 29fr; gap: var(--gap); height: 100%; }
.paineis[data-split="50"] { grid-template-columns: 1fr 1fr; }
.painel { display: grid; place-items: center; align-content: center; text-align: center; padding: 3cqi; border-radius: var(--raio-card); }
.painel.preto { background: var(--preto); color: var(--branco); }
.painel.branco { background: var(--branco); color: var(--tinta); box-shadow: var(--sombra); }
/* painel com símbolo (boas-vindas): símbolo a um terço, texto a 54% e crédito embaixo, na mesma
   altura nos dois painéis, como no Outset p.2; sem símbolo o painel só centraliza o conteúdo */
.painel:has(> .simbolo) { grid-template-rows: 44fr 26fr 30fr; align-content: stretch; }
.painel .simbolo { height: 4.5cqi; width: auto; align-self: end; margin-bottom: 3cqi; }
.painel h2 { font-size: 2.2cqi; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.painel p { max-width: 34ch; margin: 0 0 1cqi; }
.painel .credito { color: var(--texto-2); }

/* sumário */
.pg-sumario .miolo { grid-template-columns: 1fr 39cqi; column-gap: 0; }
.pg-sumario h2 { font-family: var(--fonte-display); font-size: 3.1cqi; font-weight: 400; line-height: 1; display: flex; align-items: center; height: 6.7cqi; } /* altura de uma linha do sumário: título e item 01 na mesma altura */
.sumario { list-style: none; padding: 0; }
.sumario li { border-bottom: var(--hairline) solid var(--linha); }
.sumario a { display: grid; grid-template-columns: 3cqi 1fr auto; align-items: center; height: 6.7cqi; font-size: 1.33cqi; text-decoration: none; }
.sumario a:focus-visible { outline: var(--hairline) solid currentColor; outline-offset: 0.3cqi; }
.sumario .badge { width: 2.3cqi; height: 2.3cqi; border: var(--hairline) solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 0.78cqi; }

/* divisória */
.pg-divisoria .miolo { grid-template-columns: 1fr; }
.divisoria-titulo { position: absolute; left: var(--margem); top: calc(var(--margem) + 1.5cqi); font-family: var(--fonte-display); font-size: 5cqi; font-weight: 400; line-height: 1; }
.divisoria-numero { position: absolute; right: var(--margem); bottom: var(--margem-base); font-family: var(--fonte-display); font-size: 18cqi; font-weight: 400; line-height: 0.85; }
.orbitas-arco { position: absolute; right: 0; top: 0; height: 100%; width: 45%; pointer-events: none; }

/* frase */
.pg-frase .frase { margin: 0; background: var(--card); border-radius: var(--raio-card); box-shadow: var(--sombra); display: grid; align-content: center; padding: 4cqi; font-size: 3.2cqi; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }

/* full (foto ou mock ocupando a área visual) */
.full { position: relative; border-radius: var(--raio-card); overflow: hidden; background: var(--card); box-shadow: var(--sombra); min-height: 0; }
.full > img:not(.sobre) { width: 100%; height: 100%; object-fit: cover; } /* sem :not, o logo sobreposto esticava */
.full .sobre { position: absolute; }   /* posicione inline com left/top/width em % da figura */
.cinza { filter: grayscale(1); }         /* UI de terceiros; o logo fica fora deste container */

/* encerramento */
.pg-fim .miolo { grid-template-columns: 1fr; padding: var(--margem); }
/* centrados por inset + margin auto, não por translate(-50%): no PDF a caixa sem transform passava da
   borda da folha, o Chrome partia o disco em duas páginas e criava uma página a mais */
.disco { position: absolute; inset: 0; margin: auto; width: 45cqi; height: 45cqi; border-radius: 50%; background: var(--superficie); border: var(--hairline) solid var(--cinza-200); display: grid; place-items: center; }
.disco .simbolo { height: 5.85cqi; width: auto; }
/* a elipse é desenhada no tamanho real (60 x 24) para a hairline não afinar. O .giro é um círculo de 24
   esticado 2,5x na horizontal pela propriedade scale, que o navegador aplica depois do rotate da animação;
   um círculo de 60 achatado passaria da borda da folha e criaria uma página a mais no PDF */
.orbita-elipse { position: absolute; inset: 0; margin: auto; width: 60cqi; height: 24cqi; transform: rotate(-15deg); border: var(--hairline) solid var(--cinza-200); border-radius: 50%; pointer-events: none; }
.orbita-elipse .giro { position: absolute; inset: 0; margin: auto; width: 24cqi; height: 24cqi; scale: 2.5 1; animation: gira 8s linear infinite; }
/* o ponto gira ao contrário do .giro para não deformar; 0.28 x 0.7 esticado 2,5x vira um círculo de 0.7 */
.orbita-elipse .ponto { position: absolute; left: -0.14cqi; top: 50%; width: 0.28cqi; height: 0.7cqi; margin-top: -0.35cqi; border-radius: 50%; background: var(--tinta); animation: gira 8s linear infinite reverse; }
/* segunda cópia depois do .disco: só a metade de baixo, que passa na frente do disco (encerramento do vídeo X) */
.orbita-elipse.frente { clip-path: inset(50% -1cqi -1cqi -1cqi); } /* negativos: o ponto passa da borda da caixa */
.pg-frase-final { position: absolute; left: var(--margem); bottom: var(--margem); font-size: 3.2cqi; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; max-width: 40cqi; }

/* índice lateral */
.indice { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 5; mix-blend-mode: difference; }
.indice a { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #fff; display: block; }
.indice a.secao { width: 8px; height: 8px; margin-left: -1px; }
.indice a.ativo { background: #fff; }
.indice a:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .orbitas .orb, .orbita-elipse .giro, .orbita-elipse .ponto, .pg-titulo .linha span { animation: none; }
  .pg-titulo .linha span { opacity: 1; }
}

/* mobile e retrato: blocos empilhados, tamanhos em px */
/* "screen": na impressão o Chrome avalia a media query contra o papel padrão (retrato), e sem isso o
   layout de celular entrava no PDF, com uma página em branco no fim */
@media screen and (max-width: 900px), screen and (orientation: portrait) {
  html { scroll-snap-type: none; }
  .pg { height: auto; padding: 24px 16px; display: block; }
  .folha { width: 100%; aspect-ratio: auto; }
  /* .pg .miolo (e não .miolo) para vencer as regras de template, como .pg-sumario .miolo com 2 colunas */
  .pg .miolo { position: static; display: grid; grid-template-columns: 1fr; row-gap: 16px; padding: 0; font-size: 15px; line-height: 1.5; }
  .pg-rodape { position: static; margin-top: 16px; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
  .pg-texto h3 { font-size: 18px; margin-bottom: 8px; }
  .pg-texto p { max-width: none; margin-bottom: 8px; }
  .pg-visual { grid-template-columns: 1fr !important; grid-template-rows: auto !important; gap: 12px; }
  .split-1-2 > .card:first-child { grid-row: auto; }
  .card { min-height: 200px; padding: 24px; border-radius: 16px; }
  .card > figcaption { left: 12px; top: 10px; font-size: 12px; }
  .pg-marca, .pg-url, .pg-ano, .pg-titulo, .divisoria-titulo, .divisoria-numero, .disco, .orbita-elipse, .pg-frase-final { position: static; transform: none; }
  .pg-marca { height: 24px; }
  .so-folha { display: none !important; }
  .so-celular { display: block !important; }
  .pg-url, .pg-ano { font-size: 12px; }
  /* capa no celular: marca e URL no topo, título e ano embaixo, na altura da tela */
  .pg-capa .miolo { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: calc(100svh - 48px); }
  .pg-capa .pg-titulo { margin-top: auto; }
  .pg-titulo { font-size: 48px; }
  .orbitas, .orbitas-arco { display: none; }
  .paineis { grid-template-columns: 1fr !important; height: auto; }
  .painel { padding: 32px 24px; min-height: 260px; }
  .painel:has(> .simbolo) { grid-template-rows: none; align-content: center; }
  .painel .simbolo { height: 56px; margin-bottom: 24px; } /* acima de 48 px: o símbolo completo */
  .painel h2 { font-size: 22px; }
  .pg-sumario h2 { font-size: 32px; height: auto; margin-bottom: 16px; }
  .sumario a { grid-template-columns: 40px 1fr auto; height: 56px; font-size: 17px; }
  .sumario .badge { width: 28px; height: 28px; font-size: 12px; }
  .divisoria-titulo { font-size: 40px; }
  .divisoria-numero { font-size: 120px; text-align: right; }
  .pg-frase .frase { padding: 24px; font-size: 24px; border-radius: 16px; }
  .full { min-height: 240px; border-radius: 16px; }
  .disco { width: 240px; height: 240px; margin: 24px auto; }
  .disco .simbolo { height: 32px; }
  .orbita-elipse { display: none; }
  .pg-frase-final { font-size: 28px; max-width: none; }
  .indice { display: none; }
}

/* impressão: uma folha 1920x1080 por página */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html { scroll-snap-type: none; background: var(--neve); }
  .pg { height: 1080px; width: 1920px; break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .folha { width: 1920px; height: 1080px; aspect-ratio: auto; }
  .indice, .pular { display: none; }
  .pg-titulo .linha span { opacity: 1; animation: none; }
  .orbitas .orb, .orbita-elipse .giro, .orbita-elipse .ponto { animation: none; }
}