@charset "utf-8";
/* ============================================================
CD ALEGRIA DE VIVER — base
Direção: book-serif-index (leitor de arquivo), adaptado à arte do disco.
Regra que prevalece sobre tudo: o conteúdo existe no HTML desde o
carregamento. Animação só muda apresentação.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: calc(100% * var(--escala));
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--casca);
color: var(--tinta);
font-family: var(--fonte-texto);
font-size: var(--t-corpo);
line-height: 1.68;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
/* [hidden] precisa vencer qualquer display de componente (grid, flex...). Sem
isto o botao flutuante, com display:grid, aparecia mesmo escondido. */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
outline: var(--foco);
outline-offset: var(--foco-offset);
border-radius: var(--raio);
}
h1, h2, h3, h4 {
font-family: var(--fonte-display);
font-weight: 400;
line-height: 1.12;
text-wrap: balance;
margin: 0;
}
/* ---------- utilitários ---------- */
.so-leitor {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rotulo {
font-family: var(--fonte-rotulo);
font-size: var(--t-rotulo);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tinta-fraca);
}
/* ---------- pular para ---------- */
.pular {
position: absolute; left: var(--e4); top: -100%;
z-index: 200; background: var(--acento); color: #fff;
padding: var(--e3) var(--e5); font-family: var(--fonte-rotulo);
font-size: var(--t-micro); text-decoration: none;
}
.pular:focus { top: var(--e4); }
/* No alto contraste o --acento vira o amarelo #ffe234, e o branco fixo acima
cairia para 1,30:1 — o link de pular ficaria ilegivel justamente para quem
ligou o alto contraste. O .botao ja tinha esse par invertido; o .pular
tinha ficado de fora. Preto sobre o amarelo da 16,18:1. */
[data-contraste="alto"] .pular { background: #ffe234; color: #000; }
/* Os destinos dos links de pular tem tabindex="-1" para o foco realmente ir
para la. Mas eles sao blocos da largura da tela, e o contorno padrao, com
3px de folga, sairia do viewport e criaria barra de rolagem horizontal.
Mesmo recurso que a .parada ja usava: contorno para dentro. */
main[tabindex]:focus-visible,
.indice[tabindex]:focus-visible,
.vs-entrada[tabindex]:focus-visible { outline-offset: -4px; border-radius: 0; }
/* --calha: margem lateral das faixas de largura total (cabecalho, indice,
movimentos, paradas). Em tela larga ela cresce para o conteudo ficar com a
mesma largura e o mesmo alinhamento da barra de acessibilidade e do rodape
(--largura-pagina menos as margens); em tela estreita vale a --margem-borda.
O % e da largura do bloco pai, que e sempre a tela inteira aqui. */
:root { --calha: max(var(--margem-borda), calc((100% - var(--largura-pagina)) / 2 + var(--margem-borda))); }
/* ============================================================
BARRA DE ACESSIBILIDADE
============================================================ */
/* A barra NAO gruda no topo. No celular ela quebra em duas ou tres linhas e,
grudada, comia um terco da tela durante toda a leitura. Ela fica no alto da
pagina; quando sai de vista, o acessibilidade.js mostra um botao flutuante
(.a11y-flutuante) que abre os mesmos controles num painel. Sem JavaScript a
barra continua aqui em cima, inteira. */
.barra-a11y {
position: relative; z-index: 100;
background: var(--casca-alta);
border-bottom: 1px solid var(--casca-linha);
color: var(--casca-texto);
}
.barra-a11y__interno {
max-width: var(--largura-pagina); margin: 0 auto;
padding: var(--e2) var(--margem-borda);
display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
}
.barra-a11y__titulo {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .14em; text-transform: uppercase;
color: var(--casca-texto-fraco); margin-right: auto;
}
.barra-a11y__grupo { display: flex; align-items: center; gap: var(--e1); }
.barra-a11y__grupo + .barra-a11y__grupo { border-left: 1px solid var(--casca-linha); padding-left: var(--e4); }
.btn-a11y {
background: transparent; border: 1px solid var(--casca-controle-linha);
color: var(--casca-texto); padding: .35em .7em;
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .06em; cursor: pointer; border-radius: var(--raio);
transition: background var(--dur-controle) var(--curva),
border-color var(--dur-controle) var(--curva);
min-height: 2.25rem; display: inline-flex; align-items: center; gap: .4em;
text-decoration: none;
}
.btn-a11y:hover { background: var(--casca-linha); }
/* "Alto contraste" e um interruptor classico: nome fixo + aria-pressed. */
.btn-a11y[aria-pressed="true"] {
background: var(--acento-sobre-escuro); color: var(--casca); border-color: var(--acento-sobre-escuro);
}
[data-contraste="alto"] .btn-a11y[aria-pressed="true"] { background: #ffe234; color: #000; border-color: #ffe234; }
/* ---------- botao flutuante + painel ----------
Canto inferior ESQUERDO: o direito e do VLibras. O painel e a mesma barra
(clonada pelo JS), so que empilhada num cartao. */
.a11y-flutuante {
position: fixed; z-index: 110;
left: max(var(--e4), env(safe-area-inset-left, 0px));
bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
width: 3.25rem; height: 3.25rem; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: var(--casca-alta); color: var(--casca-texto);
border: 2px solid var(--casca-controle-linha);
box-shadow: 0 6px 18px rgba(15, 11, 8, .35);
transition: opacity var(--dur-controle) var(--curva), transform var(--dur-controle) var(--curva);
}
.a11y-flutuante svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.a11y-flutuante:hover { border-color: var(--acento-sobre-escuro); }
.a11y-flutuante[aria-expanded="true"] { border-color: var(--acento-sobre-escuro); }
/* Entra deslizando de baixo; [hidden] tira de vez da arvore de acessibilidade. */
.a11y-flutuante.entrando { opacity: 0; transform: translateY(.75rem); }
.a11y-painel {
position: fixed; z-index: 109;
left: max(var(--e4), env(safe-area-inset-left, 0px));
bottom: calc(var(--e4) + 3.25rem + var(--e3) + env(safe-area-inset-bottom, 0px));
width: min(22rem, calc(100vw - 2 * var(--e4)));
max-height: calc(100vh - 7rem); overflow-y: auto;
border: 1px solid var(--casca-controle-linha); border-radius: calc(var(--raio) * 2);
box-shadow: 0 10px 30px rgba(15, 11, 8, .4);
}
.a11y-painel .barra-a11y__interno { flex-direction: column; align-items: stretch; padding: var(--e4); gap: var(--e3); }
.a11y-painel .barra-a11y__titulo { margin: 0; }
.a11y-painel .barra-a11y__grupo { flex-wrap: wrap; }
.a11y-painel .barra-a11y__grupo + .barra-a11y__grupo { border-left: 0; padding-left: 0; border-top: 1px solid var(--casca-linha); padding-top: var(--e3); }
@media (prefers-reduced-motion: reduce) { .a11y-flutuante { transition: none; } }
[data-contraste="alto"] .a11y-flutuante { background: #000; color: #fff; border-color: #ffe234; box-shadow: none; }
[data-contraste="alto"] .a11y-painel { border-color: #fff; box-shadow: none; }
@media print { .a11y-flutuante, .a11y-painel { display: none !important; } }
/* ============================================================
MOLDURA / FOLHA DE PAPEL
============================================================ */
/* A folha ocupa a tela toda. Ela ja teve largura maxima, com a casca escura
aparecendo dos lados como uma mesa sob o encarte — era so estetica do preset,
sem funcao, e na pratica parecia o site encolhido. Agora o papel vai de
borda a borda e quem limita a largura e o CONTEUDO, pela --calha abaixo. */
.folha {
background: var(--papel);
}
/* Textura de papel: gradientes, zero bytes de imagem.
background-size limita a pintura ao topo da folha — um gradiente
esticado por 10.000px não rasteriza em navegadores reais. */
.folha {
background-image:
radial-gradient(ellipse 80% 70% at 15% 0%, rgba(240,227,189,.55), transparent 60%),
radial-gradient(ellipse 60% 55% at 90% 25%, rgba(214,201,180,.35), transparent 65%);
background-size: 100% 1400px;
background-repeat: no-repeat;
background-position: top center;
}
[data-contraste="alto"] .folha { background-image: none; }
.cabecalho {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--e4); flex-wrap: wrap;
padding: var(--e5) var(--calha);
border-bottom: var(--borda-fina);
}
.cabecalho__marca {
font-family: var(--fonte-display); font-size: var(--t-corpo-g);
letter-spacing: .02em; text-decoration: none;
}
.cabecalho__marca b { font-weight: 400; }
.cabecalho__pronac { font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); color: var(--tinta-fraca); }
.indice { padding: 0 var(--calha); }
.indice__lista {
list-style: none; margin: 0; padding: var(--e4) 0;
display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
justify-content: space-between;
border-bottom: var(--borda-fina);
}
/* Numero e nome em familias diferentes, separados por um fio. Os dois juntos
na mesma fonte mono ("II O VIOLINISTA") se liam como uma palavra so. O
numeral vai em serifa italica, como numeracao de capitulo; o nome continua
no rotulo em caixa alta. O numeral e aria-hidden: o leitor de tela ouve o
nome, e o titulo de cada secao ja diz "Movimento II". */
.indice__lista a {
display: inline-flex; align-items: center; gap: .6em;
text-decoration: none; color: var(--tinta-media);
padding: .3em 0; border-bottom: 1px solid transparent;
transition: color var(--dur-controle) var(--curva), border-color var(--dur-controle) var(--curva);
}
.indice__lista .num {
font-family: var(--fonte-display); font-style: italic; font-size: 1.05rem;
color: var(--ouro); min-width: 1.6em; text-align: right;
padding-right: .6em; border-right: 1px solid var(--papel-linha);
line-height: 1.1;
}
.indice__nome {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .1em; text-transform: uppercase;
}
.indice__lista a:hover,
.indice__lista a[aria-current="true"] { color: var(--acento); border-bottom-color: var(--acento); }
/* ============================================================
MOVIMENTOS (seções)
============================================================ */
.movimento {
padding: var(--e8) var(--calha);
border-bottom: var(--borda-fina);
position: relative;
}
.movimento__cabeca {
display: flex; align-items: baseline; gap: var(--e4);
flex-wrap: wrap; margin-bottom: var(--e5);
}
.movimento__num {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .18em; color: var(--ouro);
border: 1px solid var(--papel-linha); padding: .3em .7em; border-radius: var(--raio);
}
.movimento__titulo { font-size: var(--t-h2); max-width: 20ch; }
.movimento__chamada {
font-size: var(--t-corpo-g); color: var(--tinta-media);
max-width: var(--largura-texto); margin: var(--e4) 0 0;
}
.prosa { max-width: var(--largura-texto); }
.prosa p { margin: 0 0 var(--e5); }
.prosa p:last-child { margin-bottom: 0; }
.prosa--capitular > p:first-of-type::first-letter {
font-family: var(--fonte-display); float: left;
font-size: 3.4em; line-height: .82; padding: .06em .12em 0 0;
color: var(--acento);
}
.nota-margem {
font-size: var(--t-micro); color: var(--tinta-fraca);
border-left: 2px solid var(--ouro-claro);
padding: var(--e2) 0 var(--e2) var(--e4);
margin: var(--e5) 0; max-width: 28rem;
}
.nota-margem strong { color: var(--tinta-media); font-weight: 400; }
/* ---------- Movimento I — abertura ---------- */
.abertura { padding-top: var(--e7); }
.abertura__grade {
display: grid; gap: var(--e7);
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
@media (min-width: 56rem) {
.abertura__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e8); }
}
.abertura__capa { position: relative; }
.abertura__capa img {
width: 100%; border: 1px solid var(--papel-linha);
box-shadow: 0 2px 4px rgba(28,21,16,.10), 0 28px 60px -34px rgba(28,21,16,.6);
}
.abertura h1 { font-size: var(--t-h1); letter-spacing: -.012em; }
.abertura__sub {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .2em; text-transform: uppercase;
color: var(--tinta-fraca); margin: 0 0 var(--e4);
}
.abertura__linha { font-size: var(--t-corpo-g); color: var(--tinta-media); max-width: 32ch; margin: var(--e5) 0 var(--e6); }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }
/* ---------- botões ---------- */
.botao {
display: inline-flex; align-items: center; gap: .6em;
background: var(--acento); color: #fff; text-decoration: none;
border: 1px solid var(--acento); border-radius: var(--raio);
padding: .7em 1.2em; cursor: pointer;
font-family: var(--fonte-rotulo); font-size: var(--t-micro);
letter-spacing: .08em; text-transform: uppercase;
transition: background var(--dur-controle) var(--curva);
min-height: 2.75rem;
}
.botao:hover { background: var(--tinta); border-color: var(--tinta); }
.botao--vazado { background: transparent; color: var(--tinta); border-color: var(--tinta-fraca); }
.botao--vazado:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
[data-contraste="alto"] .botao { background: #ffe234; color: #000; border-color: #ffe234; }
[data-contraste="alto"] .botao--vazado { background: #000; color: #ffe234; border-color: #ffe234; }
/* ---------- ouvir seção ---------- */
.ouvir {
display: inline-flex; align-items: center; gap: .55em;
background: transparent; border: 1px solid var(--controle-linha);
border-radius: 999px; padding: .4em .9em; cursor: pointer;
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-media);
min-height: 2.25rem;
transition: border-color var(--dur-controle) var(--curva), color var(--dur-controle) var(--curva);
}
.ouvir:hover { border-color: var(--acento); color: var(--acento); }
.ouvir__icone { width: .85em; height: .85em; fill: currentColor; flex: none; }
/* ---------- figura + audiodescrição ---------- */
figure { margin: 0; }
.figura img { width: 100%; border: 1px solid var(--papel-linha); background: var(--papel-fundo); }
.figura figcaption { font-size: var(--t-micro); color: var(--tinta-fraca); margin-top: var(--e3); }
.audiodesc { margin-top: var(--e2); }
.audiodesc > summary {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .08em; text-transform: uppercase;
color: var(--tinta-media); cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .4em; padding: .3em 0;
}
.audiodesc > summary::-webkit-details-marker { display: none; }
.audiodesc > summary::before { content: "＋"; color: var(--ouro); }
.audiodesc[open] > summary::before { content: "−"; }
.audiodesc__corpo {
font-size: var(--t-micro); color: var(--tinta-media);
border-left: 2px solid var(--papel-linha); padding-left: var(--e4); margin-top: var(--e2);
}
/* ---------- grades de mídia ---------- */
.galeria {
display: grid; gap: var(--e4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.galeria--duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* ---------- fachada de vídeo ---------- */
.fachada { position: relative; border: 1px solid var(--papel-linha); background: var(--tinta-forte); }
.fachada img { width: 100%; display: block; }
.fachada__play {
position: absolute; inset: 0; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center; gap: .7em;
background: linear-gradient(to top, rgba(15,11,8,.72), rgba(15,11,8,.12));
border: 0; cursor: pointer; color: #fff;
font-family: var(--fonte-rotulo); font-size: var(--t-micro);
letter-spacing: .1em; text-transform: uppercase;
}
.fachada__play svg { width: 3.2rem; height: 3.2rem; fill: #fff; flex: none;
transition: transform var(--dur-controle) var(--curva); }
.fachada__play:hover svg { transform: scale(1.06); }
.fachada__aviso { font-size: var(--t-micro); color: var(--tinta-fraca); margin-top: var(--e3); }
/* ============================================================
LIBRAS — tradutor automatico VLibras, sob demanda
============================================================ */
.libras {
margin-top: var(--e7);
border: 1px solid var(--papel-linha);
border-left: 3px solid var(--acento);
background: var(--papel-alto);
padding: var(--e5);
border-radius: var(--raio);
}
.libras__titulo {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca);
margin: 0 0 var(--e3);
}
.libras__texto { color: var(--tinta-media); margin: 0 0 var(--e4); max-width: 46rem; }
.libras__acao { display: none; margin: 0; }
/* Sem JavaScript o botao nao teria o que disparar — o plugin do VLibras e
JavaScript puro. Controle morto nao aparece. */
.js .libras__acao { display: block; }
/* Desabilitado aqui significa "ja ativado", nao erro: continua legivel em vez
de desbotar ate o cinza de campo bloqueado. */
.botao[data-vlibras][disabled] { cursor: default; background: transparent; color: var(--tinta-media); border-color: var(--controle-linha); }
.ouvir[disabled] { cursor: default; border-color: var(--controle-linha); color: var(--tinta-media); }
.ouvir[disabled]:hover { border-color: var(--controle-linha); color: var(--tinta-media); }
.btn-a11y[data-vlibras][disabled] { cursor: default; opacity: 1; }
/* ============================================================
DISCO — índice de faixas
============================================================ */
.faixas { list-style: none; margin: var(--e6) 0 0; padding: 0; border-top: var(--borda-fina); }
.faixa {
display: grid; align-items: center; gap: var(--e2) var(--e4);
grid-template-columns: 2.5rem minmax(0,1fr) auto;
padding: var(--e4) 0; border-bottom: var(--borda-fina);
}
.faixa__num { font-family: var(--fonte-rotulo); font-size: var(--t-micro); color: var(--ouro); }
.faixa__nome { font-family: var(--fonte-display); font-size: var(--t-h3); }
.faixa__meta { font-size: var(--t-micro); color: var(--tinta-fraca); grid-column: 2; margin-top: -.2em; }
.faixa__dur { font-family: var(--fonte-rotulo); font-size: var(--t-micro); color: var(--tinta-fraca); }
.faixa__acoes { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
@media (min-width: 46rem) {
.faixa { grid-template-columns: 2.5rem minmax(0,1fr) auto auto; }
.faixa__acoes { grid-column: 3; margin-top: 0; }
.faixa__dur { grid-column: 4; text-align: right; }
}
.faixa[data-tocando="true"] { background: var(--ouro-tenue); }
[data-contraste="alto"] .faixa[data-tocando="true"] { background: #000; outline: 2px solid #ffe234; }
.faixa__bonus { font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); color: var(--acento); letter-spacing: .1em; }
/* ============================================================
APRESENTAÇÕES — tabela
============================================================ */
.tabela-envolve { overflow-x: auto; margin-top: var(--e6); }
table.registro { width: 100%; border-collapse: collapse; font-size: var(--t-micro); min-width: 34rem; }
table.registro caption { text-align: left; color: var(--tinta-fraca); font-size: var(--t-micro); padding-bottom: var(--e3); }
table.registro th, table.registro td { text-align: left; padding: var(--e3) var(--e4) var(--e3) 0; border-bottom: var(--borda-fina); vertical-align: top; }
table.registro th { font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 400; }
table.registro td.num { font-family: var(--fonte-rotulo); text-align: right; white-space: nowrap; }
table.registro tfoot td { font-family: var(--fonte-rotulo); border-bottom: 0; padding-top: var(--e4); }
/* ============================================================
FICHA TÉCNICA E MARCAS
============================================================ */
.ficha { display: grid; gap: var(--e5) var(--e7); grid-template-columns: minmax(0,1fr); }
@media (min-width: 46rem) { .ficha { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ficha dl { margin: 0; }
.ficha dt { font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); margin-top: var(--e4); }
.ficha dt:first-child { margin-top: 0; }
.ficha dd { margin: var(--e1) 0 0; }
.marcas { margin-top: var(--e7); padding-top: var(--e6); border-top: var(--borda-fina); }
.marcas__bloco img { width: 100%; max-width: 46rem; margin-top: var(--e4); }
/* ============================================================
VISITA SENSORIAL
Percurso linear. Todas as paradas existem no HTML e são
legíveis sem JavaScript — a navegação é por âncora. O JS
apenas acrescenta as setas do teclado e o indicador de
posição; ele nunca esconde parada nenhuma.
============================================================ */
/* A barra da visita gruda no topo no computador. No celular ela rola junto:
a navegacao fica com os botoes de cada parada, que existem sempre, e a tela
pequena fica inteira para o conteudo. */
.visita-barra {
position: static; z-index: 90;
background: var(--casca-alta); color: var(--casca-texto);
border-bottom: 1px solid var(--casca-linha);
}
@media (min-width: 54rem) {
.visita-barra { position: sticky; top: 0; }
}
.visita-barra__interno {
max-width: var(--largura-pagina); margin: 0 auto;
padding: var(--e3) var(--margem-borda);
display: flex; align-items: center; gap: var(--e2) var(--e4); flex-wrap: wrap;
}
.visita-barra__titulo {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .14em; text-transform: uppercase;
color: var(--casca-texto-fraco); margin-right: auto;
}
.vs-entrada { padding: var(--e8) var(--calha) var(--e7); border-bottom: var(--borda-fina); scroll-margin-top: 1rem; }
@media (min-width: 54rem) { .vs-entrada { scroll-margin-top: 4.5rem; } }
.vs-entrada h1 { font-size: var(--t-h1); max-width: 16ch; }
.vs-entrada__linha { font-size: var(--t-corpo-g); color: var(--tinta-media); max-width: var(--largura-texto); margin: var(--e5) 0 var(--e6); }
.vs-entrada__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.vs-instrucoes {
margin-top: var(--e6); padding: var(--e5);
background: var(--papel-alto); border: 1px solid var(--papel-linha);
border-radius: var(--raio); max-width: var(--largura-texto);
}
.vs-instrucoes h2 { font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: var(--e3); }
.vs-instrucoes ul { margin: 0; padding-left: 1.1em; font-size: var(--t-micro); color: var(--tinta-media); }
.vs-instrucoes li { margin-bottom: var(--e2); }
.vs-instrucoes kbd {
font-family: var(--fonte-rotulo); font-size: .92em;
border: 1px solid var(--papel-linha); border-bottom-width: 2px;
border-radius: 3px; padding: .1em .45em; background: var(--papel-fundo);
}
/* ---------- uma parada ---------- */
.parada {
padding: var(--e8) var(--calha);
border-bottom: var(--borda-fina);
scroll-margin-top: 1rem;
}
@media (min-width: 54rem) {
.parada { scroll-margin-top: 4.5rem; }
}
.parada:focus { outline: none; }
.parada:focus-visible { outline: var(--foco); outline-offset: -4px; }
.parada__progresso {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .18em; text-transform: uppercase; color: var(--ouro);
margin: 0 0 var(--e3);
}
.parada__titulo { font-size: var(--t-h2); margin-bottom: var(--e5); }
.parada__corpo { display: grid; gap: var(--e6) var(--e7); grid-template-columns: minmax(0,1fr); }
@media (min-width: 52rem) { .parada__corpo { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.parada__bloco h3 {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca);
margin-bottom: var(--e3);
}
.parada__bloco p { margin: 0 0 var(--e4); max-width: 42ch; }
.parada__bloco p:last-child { margin-bottom: 0; }
.parada__escuta {
margin-top: var(--e6); padding: var(--e5);
border: 1px solid var(--papel-linha); border-left: 3px solid var(--acento);
background: var(--papel-alto); border-radius: var(--raio);
}
.parada__escuta h3 { font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: var(--e3); }
.parada__escuta p { font-size: var(--t-micro); color: var(--tinta-media); margin: 0 0 var(--e4); max-width: 52ch; }
.parada__escuta .ouvir + .ouvir { margin-left: var(--e2); }
.parada__nav {
display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center;
margin-top: var(--e7); padding-top: var(--e5); border-top: var(--borda-fina);
}
.parada__nav .espaco { margin-left: auto; }
/* ============================================================
RODAPÉ
============================================================ */
.rodape { background: var(--casca); color: var(--casca-texto); }
.rodape__interno {
max-width: var(--largura-pagina); margin: 0 auto;
padding: var(--e7) var(--margem-borda);
display: grid; gap: var(--e6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.rodape h2 { font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--casca-texto-fraco); margin-bottom: var(--e3); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: var(--e2); }
.rodape a { color: var(--casca-texto); text-decoration: none; border-bottom: 1px solid transparent; }
.rodape a:hover { border-bottom-color: var(--acento-sobre-escuro); }
.rodape__legal {
max-width: var(--largura-pagina); margin: 0 auto;
padding: var(--e5) var(--margem-borda) var(--e7);
border-top: 1px solid var(--casca-linha);
font-size: var(--t-micro); color: var(--casca-texto-fraco);
}
/* ============================================================
MOTION — só com JS ligado e só se o usuário permitir.
Sem JS, nada aqui se aplica: o conteúdo já está visível.
============================================================ */
.js [data-entra] { opacity: 0; transform: translate3d(0, 14px, 0); }
.js [data-entra].visivel {
opacity: 1; transform: none;
transition: opacity var(--dur-entrada) var(--curva),
transform var(--dur-entrada) var(--curva);
}
.js [data-entra].visivel:nth-child(2) { transition-delay: 55ms; }
.js [data-entra].visivel:nth-child(3) { transition-delay: 110ms; }
.js [data-entra].visivel:nth-child(4) { transition-delay: 165ms; }
@media (prefers-reduced-motion: reduce) {
.js [data-entra] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
.barra-a11y, .ouvir, .fachada__play, [vw] { display: none !important; }
body { background: #fff; }
}
/* ---------- Movimentos II e III — faixa de marcos + texto com foto ----------
Substitui a antiga coluna de destaques (.movimento__grade / .destaques /
.rota). Ela punha o texto numa coluna estreita a esquerda e os numeros numa
coluna fina colada na borda direita: sobrava um vazio enorme no meio, os
numeros desciam alem do texto e os icones eram pequenos e finos demais.
Agora a leitura e de cima para baixo:
1. titulo e botao de audio;
2. uma faixa de ponta a ponta com os numeros da trajetoria — no II, uma
linha do tempo (cinco marcos ligados por um fio); no III, uma tabela
de numeros, para as duas secoes seguidas nao parecerem a mesma pagina;
3. o texto na largura de leitura ao lado de uma foto real do projeto, que
estica ate a altura do texto. No II a foto fica a direita; no III, a
esquerda (so por grid-column: a ordem do HTML continua texto, foto).
Tudo troca de forma por CONTAINER QUERY, e nao por largura de tela: no
modo folheto a secao vira uma folha de no maximo 62rem mesmo com a janela
larga, e o layout obedece a folha, nao a janela.
< 40rem celular: faixa em grade 2 x 2 compacta, sem fio e sem frase;
texto e, depois dele, a foto (4:3)
40-48rem tablet em pe: faixa 2 x 2 com a frase; texto em largura total
(corpo maior) e a foto larga (16:9) embaixo
48rem+ texto | foto lado a lado (a folha do folheto tem ~53rem)
50rem+ linha do tempo do II numa fila so, com o fio
64rem+ tabela do III em 4 colunas; numeros e frases no corpo maior */
.percurso {
container: percurso / inline-size;
margin-top: var(--e6);
}
/* Linha de cima da faixa: o que e, a esquerda; por onde passou, a direita. */
.percurso__cabeca {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--e2) var(--e5); margin: 0 0 var(--e5);
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca);
}
.percurso__lugares { letter-spacing: .1em; }
/* No celular a lista de lugares quebraria em duas linhas e empurraria o
texto para baixo; os rotulos dos marcos ja dizem onde. */
@container percurso (max-width: 39.99rem) { .percurso__lugares { display: none; } }
/* A volta em miniatura: BERNA - - aviao - - LONDRINA. O aviao no acento. */
.percurso__rota { display: inline-flex; align-items: center; gap: .6em; }
.percurso__rota-fio { display: inline-flex; align-items: center; gap: .4em; color: var(--acento); }
.percurso__rota-fio::before,
.percurso__rota-fio::after {
content: ""; width: 2.25rem; height: 1px;
background: repeating-linear-gradient(90deg, var(--tinta-fraca) 0 4px, transparent 4px 8px);
}
.percurso__rota-fio svg {
width: 1.25rem; height: 1.25rem;
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
/* Faixa emoldurada por dois fios, como um quadro de encarte: o de cima mais
escuro abre o bloco, o de baixo e o fio comum. */
.marcos, .numeros {
border-top: 1px solid var(--tinta-fraca);
border-bottom: var(--borda-fina);
padding: var(--e4) 0 var(--e5);
}
.marcos__lista, .numeros__lista { list-style: none; margin: 0; padding: 0; }
/* Medalhao: disco cheio de papel tingido de ouro, sem aro; o icone (Lucide,
traco 1.75) vai no acento, 5,72:1 sobre o disco. Em currentColor, o alto
contraste troca a cor sozinho; la o disco fica preto com aro branco. */
.medalhao {
flex: none; position: relative; z-index: 1;
display: grid; place-items: center;
width: 2.75rem; height: 2.75rem; border-radius: 50%;
background: var(--ouro-tenue); color: var(--acento);
}
.medalhao svg {
width: 1.375rem; height: 1.375rem;
fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round;
}
/* A bandeira precisa de um pouco mais de area para as tres faixas lerem. */
.medalhao--bandeira svg { width: 1.5rem; height: 1.5rem; }
/* O numero e o que se le de relance: serifa de livro, grande, no acento.
lining-nums deixa os algarismos na altura das maiusculas. */
.marco__num, .numero__valor {
display: block; font-family: var(--fonte-display); font-weight: 400;
font-size: 1.6rem; line-height: 1.05; color: var(--acento);
font-variant-numeric: lining-nums; white-space: nowrap; letter-spacing: -.005em;
}
/* Lugar/epoca do marco: rotulo mono em ouro (4,77:1; so 12px, como os outros
rotulos do site). */
.marco__onde {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); line-height: 1.35;
}
/* Rotulo da tabela do III: mono em caixa alta, tinta media (8,73:1). */
.numero__rotulo {
display: block; margin-top: var(--e1);
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); line-height: 1.35;
letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-media);
}
.marco__texto, .numero__detalhe {
display: block; font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-media);
}
/* ---------- II: linha do tempo ----------
Celular e tablet em pe: grade 2 x 2 compacta, medalhao a esquerda do
rotulo e do numero, sem fio. O primeiro marco (6 anos) sai ate a fila
caber inteira: e o menos forte dos cinco, e o texto logo abaixo o conta. */
.marcos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e4); }
.marco {
display: grid; grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "eixo onde" "eixo num" "eixo texto";
column-gap: var(--e3); align-content: start;
}
.marco:first-child { display: none; }
.marco__onde { grid-area: onde; }
.marco__eixo { grid-area: eixo; align-self: start; }
.marco__num { grid-area: num; margin-top: var(--e1); }
.marco__texto { grid-area: texto; margin-top: var(--e1); display: none; }
@container percurso (min-width: 40rem) {
.marcos__lista { gap: var(--e5) var(--e6); }
.marco__texto { display: block; max-width: 30ch; }
.medalhao { width: 3.75rem; height: 3.75rem; }
.medalhao svg { width: 1.75rem; height: 1.75rem; }
.medalhao--bandeira svg { width: 1.9rem; height: 1.9rem; }
}
/* 50rem ou mais: os cinco marcos numa fila so, ligados por um fio que sai
de cada medalhao e encosta no seguinte. subgrid: rotulo, medalhao, numero
e frase de todos os marcos ficam na mesma altura, mesmo quando um rotulo
quebra em duas linhas; o rotulo encosta embaixo (min-height de duas linhas
e flex-end garantem o mesmo onde nao houver subgrid). Medalhoes e fio numa
reta so. */
@container percurso (min-width: 50rem) {
.marco:first-child { display: grid; }
.marcos__lista {
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(4, auto);
gap: 0 var(--e5);
}
.marco {
display: grid; grid-row: span 4; grid-template-rows: subgrid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "onde" "eixo" "num" "texto";
}
.marco__onde {
min-height: 2lh; display: flex; align-items: flex-end;
align-self: end; margin-bottom: var(--e3);
}
.marco__eixo { display: flex; align-items: center; align-self: center; }
.marco__eixo::after {
content: ""; flex: 1; height: 1px; background: var(--controle-linha);
margin-right: calc(-1 * var(--e5));
}
/* Ponta de seta no fim do ultimo fio: diz "segue", sem texto. */
.marco:last-child .marco__eixo::after {
height: 9px; margin-right: 0;
clip-path: polygon(0 4px, calc(100% - 8px) 4px, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 5px, 0 5px);
}
.marco__num { margin-top: var(--e4); font-size: clamp(1.9rem, 3.4cqi, 2.6rem); }
.marco__texto { margin-top: var(--e2); max-width: 26ch; }
}
@container percurso (min-width: 64rem) {
.marco__num { font-size: 2.6rem; }
.marco__texto { font-size: .9375rem; }
}
/* ---------- III: tabela de numeros ----------
Medalhao ao lado do numero; fios finos entre as celulas, nunca na borda
(nada de fio solto). Celular: 2 x 2 so com numero e rotulo. */
.numeros__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numero {
display: flex; align-items: flex-start; gap: var(--e3);
padding: var(--e4) var(--e3) var(--e4) 0;
}
.numero:nth-child(even) { border-left: var(--borda-fina); padding-left: var(--e3); padding-right: 0; }
.numero:nth-child(n+3) { border-top: var(--borda-fina); }
.numero:nth-child(-n+2) { padding-top: 0; }
.numero:nth-child(n+3) { padding-bottom: 0; }
.numero__corpo { min-width: 0; }
.numero__detalhe { display: none; }
/* Celular (< 40rem): medalhao EM CIMA do numero, nao ao lado. Ao lado ele
comia ~55px da meia coluna e "PROFISSIONAIS" (mono, caixa alta, palavra
unica) passava da calha e criava rolagem horizontal em 320-360px. Em cima,
a celula inteira fica para o texto; o rotulo ainda pode quebrar como
protecao em telas minusculas. */
@container percurso (max-width: 39.99rem) {
.numero { flex-direction: column; gap: var(--e2); }
.numero .medalhao { width: 2.5rem; height: 2.5rem; }
.numero .medalhao svg { width: 1.25rem; height: 1.25rem; }
.numero__rotulo { letter-spacing: .08em; overflow-wrap: anywhere; }
.numero__valor { font-size: clamp(1.3rem, 8cqi, 1.6rem); }
}
@container percurso (min-width: 40rem) {
.numero { gap: var(--e4); padding: var(--e5) var(--e5) var(--e5) 0; }
.numero:nth-child(even) { padding-left: var(--e5); }
.numero:nth-child(-n+2) { padding-top: 0; }
.numero:nth-child(n+3) { padding-bottom: 0; }
.numero__detalhe { display: block; margin-top: var(--e2); max-width: 30ch; }
.numero__valor { font-size: clamp(1.9rem, 3.4cqi, 2.6rem); }
}
@container percurso (min-width: 64rem) {
.numeros__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numero,
.numero:nth-child(even) { padding: 0 var(--e5); border-left: 0; }
.numero:nth-child(n+3) { border-top: 0; }
.numero + .numero { border-left: var(--borda-fina); }
.numero:first-child { padding-left: 0; }
.numero:last-child { padding-right: 0; }
.numero__valor { font-size: 2.6rem; }
.numero__detalhe { font-size: .9375rem; }
}
/* ---------- texto + foto ---------- */
.percurso__corpo { margin-top: var(--e7); display: grid; gap: var(--e6); }
.percurso__foto { margin: 0; display: flex; flex-direction: column; }
/* A foto e recortada pelo CSS (object-fit), entao o quadro e quem tem a
proporcao; o ![]()
continua com width/height no HTML para o navegador
reservar o espaco. Recorte puxado para cima (20%) para nao cortar cabeca. */
.percurso__quadro {
position: relative; overflow: hidden; aspect-ratio: 4 / 3;
background: var(--papel-fundo); border: 1px solid var(--papel-linha);
}
.percurso__quadro img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 20%;
}
/* No show o rosto esta a esquerda do centro; na escola, Roney a direita. */
.percurso__quadro--show img { object-position: 38% 20%; }
.percurso__quadro--escola img { object-position: 62% 30%; }
.percurso__foto figcaption {
font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-fraca);
margin-top: var(--e3);
}
/* --ouro em 12px: 4,77:1 sobre o papel. */
.percurso__legenda-rotulo {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .12em; text-transform: uppercase; color: var(--ouro);
margin-right: .6em;
}
/* Citacao do texto sobre a foto, como num encarte: papel claro, fio do
verniz a esquerda, serifa italica. No celular cobriria meia foto: so
aparece com a foto grande. No show fica embaixo a direita (paleto escuro);
na escola, no alto a esquerda (parede lisa), longe dos rostos. */
.percurso__citacao { display: none; }
@container percurso (min-width: 40rem) {
.percurso__quadro { aspect-ratio: 16 / 9; }
.percurso__corpo .prosa { max-width: 40rem; font-size: var(--t-corpo-g); }
}
/* A citacao depende da largura da propria foto, nao da secao: na folha do
folheto a foto ao lado do texto fica estreita (~16rem) e o cartao a
cobriria quase inteira. Por isso a figura e um container tambem. */
.percurso__foto { container: foto / inline-size; }
@container foto (min-width: 24rem) {
.percurso__citacao {
display: block; position: absolute; z-index: 1;
right: var(--e4); bottom: var(--e4);
max-width: min(15rem, calc(100% - 2 * var(--e4))); margin: 0;
padding: var(--e3) var(--e4);
background: var(--papel-alto); border-left: 3px solid var(--acento);
font-family: var(--fonte-display); font-style: italic;
font-size: 1.0625rem; line-height: 1.4; color: var(--tinta);
text-wrap: balance;
box-shadow: 0 10px 30px -14px rgba(15, 11, 8, .55);
}
.percurso__quadro--escola .percurso__citacao { right: auto; bottom: auto; left: var(--e4); top: var(--e4); }
}
/* Foto da escola estreita AO LADO do texto (folha do folheto, ~16rem): o
quadro esticado ficava alto e fino, e nenhum recorte cabia o menino do
microfone e Roney juntos. Ali o quadro fica quadrado, sem esticar, e o
recorte pega os dois. No celular (foto embaixo do texto, 4:3) nada muda. */
@container percurso (min-width: 48rem) {
@container foto (max-width: 23.99rem) {
.percurso__foto .percurso__quadro--escola { flex: none; aspect-ratio: 1 / 1; min-height: 0; }
.percurso__quadro--escola img { object-position: 64% 50%; }
}
}
/* 48rem ou mais (inclui a folha do folheto): texto na largura de leitura e a
foto ocupando o resto, esticada ate o fim da ultima linha do texto. Nada de
texto em duas colunas nem de vazio do lado. No III a foto vai para a
esquerda. */
@container percurso (min-width: 48rem) {
.percurso__corpo {
grid-template-columns: minmax(0, var(--largura-texto)) minmax(0, 1fr);
column-gap: clamp(var(--e5), 5cqi, var(--e8));
align-items: stretch;
}
.percurso__corpo .prosa { max-width: var(--largura-texto); font-size: inherit; }
.percurso__quadro { aspect-ratio: auto; flex: 1 1 auto; min-height: 18rem; }
.percurso--espelho .percurso__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, var(--largura-texto)); }
.percurso--espelho .prosa { grid-column: 2; grid-row: 1; }
.percurso--espelho .percurso__foto { grid-column: 1; grid-row: 1; }
}
/* Cabecalho do III: o botao Ouvir vem logo depois da chamada; o mesmo
respiro que tem no II (abaixo do titulo). */
#volta .movimento__chamada + .ouvir { margin-top: var(--e5); }
/* ---------- alto contraste ----------
As cores ja vem das variaveis (papel preto, linhas brancas, acento
amarelo; o disco do medalhao fica preto). Falta o aro branco do medalhao,
a faixa preta da bandeira (sumiria no disco preto) e a citacao, que perde
a sombra e ganha borda branca para nao se fundir com a foto. */
[data-contraste="alto"] .medalhao { box-shadow: inset 0 0 0 1px #fff; }
[data-contraste="alto"] .medalhao--bandeira rect:first-child { fill: #6b6b6b; }
[data-contraste="alto"] .percurso__quadro { border-color: #fff; }
[data-contraste="alto"] .percurso__citacao { box-shadow: none; border: 1px solid #fff; border-left: 3px solid #ffe234; }
[data-contraste="alto"] .percurso__rota-fio::before,
[data-contraste="alto"] .percurso__rota-fio::after { background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px); }
/* ---------- entrada ----------
Marcos e numeros aparecem um depois do outro quando a secao entra na tela
(a mesma classe .visivel do resto do site; o folheto.js a poe em todas as
folhas ao abrir). So transform/opacity; sem JavaScript, ou com movimento
reduzido, nada disso existe e tudo ja esta la. Na impressao, forca visivel. */
@media (prefers-reduced-motion: no-preference) {
.js [data-entra] .marco,
.js [data-entra] .numero { opacity: 0; transform: translate3d(0, 10px, 0); }
.js [data-entra].visivel .marco,
.js [data-entra].visivel .numero {
opacity: 1; transform: none;
transition: opacity var(--dur-entrada) var(--curva), transform var(--dur-entrada) var(--curva);
}
.js [data-entra].visivel :is(.marco, .numero):nth-child(2) { transition-delay: 90ms; }
.js [data-entra].visivel :is(.marco, .numero):nth-child(3) { transition-delay: 180ms; }
.js [data-entra].visivel :is(.marco, .numero):nth-child(4) { transition-delay: 270ms; }
.js [data-entra].visivel :is(.marco, .numero):nth-child(5) { transition-delay: 360ms; }
}
@media print {
.js [data-entra] .marco,
.js [data-entra] .numero { opacity: 1 !important; transform: none !important; }
.percurso__quadro { aspect-ratio: 3 / 2; }
}
/* ---------- capitulos do video ----------
Todas as caixas com a mesma altura e nada quebrando linha: o nome da musica
numa linha, o autor na de baixo (a reticencia e so protecao). A segunda
linha tem altura fixa, entao a caixa da "Peca instrumental", que nao tem
autor, fica igual as outras. As colunas tem no minimo 19rem, o bastante
para o autor mais longo caber inteiro; no celular, uma coluna so. */
.capitulos { margin-top: var(--e5); }
.capitulos__titulo {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); font-weight: 400;
letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca);
margin: 0 0 var(--e3);
}
.capitulos ol {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
column-gap: var(--e5);
border-top: var(--borda-fina);
}
.capitulos a {
display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
grid-template-rows: auto calc(var(--t-micro) * 1.45);
column-gap: var(--e3); align-content: center;
padding: var(--e3) var(--e2); text-decoration: none; color: var(--tinta);
border-bottom: var(--borda-fina); min-height: 2.75rem; line-height: 1.4;
transition: background var(--dur-controle) var(--curva), color var(--dur-controle) var(--curva);
}
.capitulos a:hover { background: var(--papel-alto); color: var(--acento); }
.capitulos a[aria-current="true"] { background: var(--papel-alto); box-shadow: inset 3px 0 0 var(--acento); }
.capitulos__tempo { grid-row: span 2; font-family: var(--fonte-rotulo); font-size: var(--t-micro); color: var(--ouro); padding-top: .15em; }
.capitulos__nome, .capitulos__autor { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capitulos__nome { font-family: var(--fonte-display); }
.capitulos__autor { font-size: var(--t-micro); line-height: 1.45; color: var(--tinta-fraca); }
[data-contraste="alto"] .capitulos a[aria-current="true"] { box-shadow: inset 3px 0 0 #ffe234; }
/* Lista muito estreita (celular de 320px, ou desktop com zoom de 400%): ai o
nome ou o autor mais longo nao cabe numa linha, e a reticencia esconderia
informacao. So nesse caso a linha quebra e a caixa cresce; nas larguras
comuns tudo continua numa linha, com a mesma altura. */
.capitulos { container: capitulos / inline-size; }
@container capitulos (max-width: 22rem) {
.capitulos__nome, .capitulos__autor { white-space: normal; overflow: visible; text-overflow: clip; }
.capitulos a { grid-template-rows: auto minmax(calc(var(--t-micro) * 1.45), auto); }
}
/* ============================================================
GALERIAS — carrossel do show, albuns das escolas e visor
O carrossel e rolagem horizontal nativa com scroll-snap: arrasta no dedo,
rola no trackpad, funciona sem JavaScript. O JS so acrescenta as setas e
o visor em tela cheia. Nenhuma rolagem e sequestrada.
============================================================ */
.galeria__titulo {
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); font-weight: 400;
letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca);
margin: var(--e7) 0 var(--e4);
}
.carrossel { position: relative; }
.carrossel__trilho {
list-style: none; margin: 0; padding: 0 0 var(--e3);
display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 26rem);
gap: var(--e4); overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.carrossel__trilho:focus-visible { outline: var(--foco); outline-offset: 4px; }
.carrossel__item { scroll-snap-align: start; margin: 0; }
.carrossel__item a, .album-grade a, .escola__capa { display: block; position: relative; cursor: zoom-in; }
.carrossel__item img, .album-grade img, .escola__capa img {
width: 100%; height: auto; display: block; background: var(--papel-fundo);
border: 1px solid var(--papel-linha);
}
.carrossel__item img { aspect-ratio: 16 / 9; object-fit: cover; }
.galeria__descricao { font-size: var(--t-micro); color: var(--tinta-media); max-width: var(--largura-texto); margin: var(--e4) 0 0; }
.carrossel__controles { display: flex; gap: var(--e2); justify-content: flex-end; margin-bottom: var(--e3); }
.carrossel__seta {
width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer;
background: var(--papel-alto); color: var(--tinta); border: 1px solid var(--controle-linha);
display: grid; place-items: center; font-size: 1.25rem; line-height: 1;
}
.carrossel__seta:hover { border-color: var(--acento); color: var(--acento); }
.carrossel__seta[disabled] { opacity: .45; cursor: default; }
.escolas {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--e7) var(--e6);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.escola__capa img { aspect-ratio: 3 / 2; object-fit: cover; }
.escola__contagem {
position: absolute; left: var(--e3); bottom: var(--e3);
background: rgba(15, 11, 8, .82); color: #fff; padding: .3em .7em; border-radius: var(--raio);
font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); letter-spacing: .06em;
}
.escola__nome { font-size: var(--t-corpo-g); margin: var(--e3) 0 var(--e1); }
.escola__meta { font-size: var(--t-micro); color: var(--tinta-fraca); margin: 0; }
.escola__album { margin-top: var(--e3); }
.escola__album > summary {
cursor: pointer; font-family: var(--fonte-rotulo); font-size: var(--t-rotulo);
letter-spacing: .08em; text-transform: uppercase; color: var(--acento);
min-height: 2.25rem; display: inline-flex; align-items: center;
}
.album-grade {
list-style: none; margin: var(--e3) 0 0; padding: 0;
display: grid; gap: var(--e2); grid-template-columns: repeat(3, 1fr);
}
.album-grade img { aspect-ratio: 1; object-fit: cover; }
.album__selo {
position: absolute; left: 4px; bottom: 4px; background: rgba(15, 11, 8, .85); color: #fff;
font-family: var(--fonte-rotulo); font-size: .68rem; padding: .15em .45em; border-radius: 3px;
}
.album__video::after {
content: ""; position: absolute; inset: 0; margin: auto; width: 2.2rem; height: 2.2rem;
border-radius: 50%; background: rgba(15, 11, 8, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M5 3v10l8-5z'/%3E%3C/svg%3E") center / 55% no-repeat;
}
/* ---------- visor em tela cheia (