/* =========================================================================
   Exposição virtual · O que os objetos guardam?
   Cores dos painéis impressos; Cocogoose nos títulos; Instrument Sans no texto.
   Visual: Figma, página "05d · Exposição virtual · Visual".
   ========================================================================= */
@font-face { font-family: "Cocogoose"; src: url("../fontes/cocogoose-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cocogoose"; src: url("../fontes/cocogoose-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fontes/instrument-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fontes/instrument-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fontes/instrument-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fontes/instrument-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --vinho: #9C1B31; --vinho-profundo: #5C1422; --laranja: #F37121; --bege: #E7BD87; --papel: #EEEDE4; --escuro: #231F20; --cartao: #F8D1A4;
  --miolo: 1200px; --gutter: 24px;
  --margem-bloco: 100px;      /* distância do conteúdo até a faixa de divisão */
  --divisa: 60px;
  --titulo: "Cocogoose", "Instrument Sans", system-ui, sans-serif;
  --texto: "Instrument Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texto); color: var(--escuro); background: var(--papel); line-height: 1.55; font-size: 18px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.miolo { width: min(var(--miolo), 100% - 2 * var(--gutter)); margin-inline: auto; }
.ic { width: 0.85em; height: 0.85em; fill: currentColor; flex: none; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--laranja); color: var(--escuro); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.pular:focus { left: 8px; }
.etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px; opacity: .85; }
.nota { font-size: 14px; opacity: .8; }
.sub { font-size: 28px; margin: 0 0 20px; }
/* palavra do glossário no texto: pílula com contorno na cor do título do bloco (o sublinhado laranja sumia no bloco laranja); preenche ao passar o mouse */
.termo { color: inherit; text-decoration: none; border: 2px solid var(--tit, var(--vinho)); border-radius: 999px; padding: 0 .45em; margin: 0 .05em; font-weight: 600; white-space: nowrap; line-height: 1.3; display: inline-block; }
.termo:hover, .termo:focus-visible { background: var(--tit, var(--vinho)); color: var(--fundo, var(--papel)); }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 17px; line-height: 1; text-decoration: none; border: 2px solid transparent; transition: transform .15s ease, background .15s ease; }
.botao:hover { transform: translateY(-1px); }
.botao.primario { background: var(--laranja); color: var(--escuro); }
.botao.vinho { background: var(--vinho); color: var(--papel); }
.botao.contorno { border-color: var(--vinho); color: var(--vinho); }
.botao.contorno-claro { border-color: var(--papel); color: var(--papel); }
.botao.contorno-escuro { border-color: var(--escuro); color: var(--escuro); }

/* ---------- cabeçalho ---------- */
.cabecalho { background: var(--vinho); color: var(--papel); position: relative; }
.cabecalho.com-divisa { padding-bottom: calc(var(--divisa) / 2); }   /* a faixa de divisão da abertura entra por cima desta borda */
.cabecalho .miolo { display: flex; align-items: center; gap: 40px; min-height: 132px; }   /* mais alto para o logo respirar */
.logo-pequeno img { height: 88px; width: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.menu { margin-left: auto; }
.menu-item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; color: var(--papel); font-weight: 500; font-size: 16px; text-decoration: none; line-height: 1; white-space: nowrap; }
/* telas médias (tablet deitado, notebook pequeno): o menu inteiro numa linha, sem quebrar "Exposição virtual" e "Material educativo" */
@media (min-width: 901px) and (max-width: 1200px) { .cabecalho .miolo { gap: 20px; } .menu ul { gap: 0; } .menu-item { padding: 9px 10px; font-size: 15px; } }
.menu-item:hover, .menu-item[aria-expanded="true"] { background: rgba(238, 237, 228, .14); }
.menu-item[aria-current="page"] { background: var(--laranja); color: var(--escuro); font-weight: 700; }
.menu-item .ic { transition: transform .2s; }
.menu-item[aria-expanded="true"] .ic { transform: rotate(180deg); }
.menu-abrir, .menu-fechar { display: none; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--papel); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--papel); }
.tem-sub { position: relative; }
/* o submenu começa colado no botão (o vão de 18px é padding), para o mouse chegar nele sem ele sumir */
.submenu { position: absolute; left: 0; top: 100%; width: 620px; padding-top: 18px; display: none; z-index: 25; }
.submenu-caixa { background: var(--papel); color: var(--vinho); padding: 28px 36px 36px; clip-path: polygon(0 0, 100% 0, 100% 96%, 92% 100%, 80% 97%, 66% 100%, 50% 96%, 36% 100%, 20% 97%, 8% 100%, 0 96%); }
.tem-sub.aberto .submenu, .tem-sub:focus-within .submenu { display: block; }
@media (hover: hover) { .tem-sub:hover .submenu { display: block; } }
.submenu ul { display: block; }
.submenu li + li { border-top: 1px solid var(--bege); }
.submenu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: var(--titulo); font-size: 21px; text-decoration: none; color: var(--vinho); }
.submenu a:hover, .submenu a[aria-current="page"] { color: var(--laranja); }
.submenu .em-breve span { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: var(--titulo); font-size: 21px; opacity: .45; }
.submenu .em-breve small, .nav-mod-item.em-breve .rotulo { font-family: var(--texto); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; flex: none; }
.nav-mod-item.em-breve { opacity: .55; }
.cabecalho-capa { background: var(--vinho); }
.cabecalho-capa .miolo { justify-content: flex-end; }

/* ---------- capa ---------- */
/* o fundo da página (o que aparece no "elástico" da rolagem) é vinho na metade de cima e papel na de baixo, a cor do rodapé */
.pagina-capa { background: linear-gradient(to bottom, var(--vinho) 50%, var(--papel) 50%); }
.pagina-capa main { background: var(--vinho); }
/* a home é quase um splash: a página ocupa pelo menos uma tela inteira, a capa estica e centraliza o logo no que sobra,
   e o rodapé encosta no pé da tela (numa tela 4K não sobra vão abaixo dele). Em telas baixas, rola normalmente. */
.pagina-capa { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.pagina-capa main { flex: 1; display: flex; flex-direction: column; }
.pagina-capa .capa { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pagina-capa .capa .miolo { width: min(var(--miolo), 100% - 2 * var(--gutter)); padding-bottom: 64px; }   /* respiro menor que o dos painéis: em 1920×1080 a home cabe inteira */
.capa { color: var(--papel); padding: 40px 0 0; }
.capa .miolo { padding-bottom: var(--margem-bloco); }
.apresenta { margin: 0 0 32px; }
.apresenta span { display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; }
.logo-grande { max-width: 1080px; margin: 0; }
.logo-svg { width: 100%; height: auto; overflow: visible; }
.capa-botoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }
.divisa-capa { margin-top: calc(-1 * var(--divisa) / 2); position: relative; z-index: 2; }

/* animação do logo: os leques nascem um a um, depois as palavras, linha a linha */
/* a classe "animar" entra por JS quando a página carrega (e de novo ao tocar no logo); sem ela, tudo fica visível */
.animar .logo-svg .leque { transform-box: fill-box; transform-origin: center; animation: leque-nasce .5s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(.1s + var(--i) * .055s); }
.animar .logo-svg .letra { transform-box: fill-box; transform-origin: center bottom; animation: letra-sobe .4s cubic-bezier(.2, .9, .3, 1) backwards; }
.animar .logo-svg .linha-1 .letra { animation-delay: calc(.7s + var(--i) * .03s); }
.animar .logo-svg .linha-2 .letra { animation-delay: calc(.75s + var(--i) * .03s); }
.animar .logo-svg .linha-3 .letra { animation-delay: calc(.8s + var(--i) * .03s); }
.animar .logo-svg .subtitulo { animation: aparece .5s ease backwards; animation-delay: 1.3s; }
.animar .capa .apresenta { animation: aparece .4s ease backwards; animation-delay: 0s; }
.animar .capa .capa-botoes { animation: sobe .5s ease backwards; animation-delay: 1.55s; }
.logo-grande { cursor: pointer; }
/* teaser do domínio (teaser/, até o lançamento): "Em breve" no lugar dos botões da capa, entra junto com eles */
.em-breve-teaser { font-family: var(--titulo); font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); line-height: 1; color: var(--laranja); margin: 44px 0 0; }
.animar .capa .em-breve-teaser { animation: sobe .5s ease backwards; animation-delay: 1.55s; }
.pagina-teaser .rodape-lab { margin-left: 0; }
@keyframes leque-nasce { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes letra-sobe { from { transform: translateY(18px) scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-svg .leque, .logo-svg .letra, .logo-svg .subtitulo, .capa .apresenta, .capa .capa-botoes, .capa .em-breve-teaser { animation: none; } html { scroll-behavior: auto; } }

/* ---------- blocos (painéis) ---------- */
.cor-laranja { background: var(--laranja); color: var(--escuro); --fundo: var(--laranja); --tit: var(--escuro); --vs-fundo: var(--vinho); --vs-texto: var(--papel); --bt-cor: var(--escuro); }
.cor-bege { background: var(--bege); color: var(--escuro); --fundo: var(--bege); --tit: var(--vinho); --vs-fundo: var(--laranja); --vs-texto: var(--escuro); --bt-cor: var(--vinho); }
.cor-vinho { background: var(--vinho); color: var(--papel); --fundo: var(--vinho); --tit: var(--papel); --vs-fundo: var(--laranja); --vs-texto: var(--escuro); --bt-cor: var(--papel); }
.cor-papel { background: var(--papel); color: var(--escuro); --fundo: var(--papel); --tit: var(--vinho); --vs-fundo: var(--laranja); --vs-texto: var(--escuro); --bt-cor: var(--vinho); }
.painel { position: relative; padding: calc(var(--margem-bloco) + var(--divisa) / 2) 0; overflow: hidden; }
.painel h2, .painel h1 { color: var(--tit); font-size: clamp(30px, 3.4vw, 50px); max-width: 840px; margin-bottom: 36px; }
.painel-cab .etiqueta { color: var(--tit); }
.painel-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 80px; align-items: start; }
.painel-corpo.so-texto { grid-template-columns: minmax(0, 1fr); }
.painel-texto { font-size: 19px; line-height: 1.6; max-width: 72ch; }
.texto-largo { max-width: 78ch; }
.painel-figura { margin: 0; }
.painel-figura img { width: 100%; height: auto; border-radius: 20px; }   /* proporção natural: nada da foto ou ilustração se perde */
figcaption { font-size: 14px; font-weight: 500; margin-top: 12px; opacity: .85; line-height: 1.35; white-space: pre-line; }   /* legenda em linhas, como nas placas impressas */
/* leques: colados à direita da tela, sangrando 30px pela borda como no Figma, fora do container.
   Se a tela aperta, saem mais pela direita em vez de cobrir o título (840px + folga de 40px) */
.leques-contorno { position: absolute; right: min(-30px, 100% - 345px - 40px - 840px - max(var(--gutter), (100% - var(--miolo)) / 2)); top: calc(var(--divisa) / 2 - 30px); width: 345px; opacity: .95; pointer-events: none; }

/* divisão entre blocos: faixa estreita com as duas bordas recortadas */
.divisa { height: var(--divisa); margin: calc(-1 * var(--divisa) / 2) 0; position: relative; z-index: 3; pointer-events: none; }
.divisa svg { width: 100%; height: 100%; display: block; }
.divisa-bege polygon { fill: var(--bege); }
.divisa-papel polygon { fill: var(--papel); }
.divisa-laranja polygon { fill: var(--laranja); }

/* abertura do módulo */
.abertura { position: relative; padding: calc(64px + var(--divisa) / 2) 0 100px; overflow: hidden; }
.abertura h1 { color: var(--vinho); font-size: clamp(38px, 5.3vw, 76px); max-width: 800px; line-height: 1; margin: 0 0 24px; }
.abertura-resumo { font-size: 21px; max-width: 760px; margin: 0; }
.trilha { font-size: 14px; font-weight: 600; color: var(--vinho-profundo); display: flex; gap: 10px; margin: 0 0 22px; }
.trilha a { text-decoration: none; }

/* navegação do módulo, presa no topo */
.nav-modulo { background: var(--vinho-profundo); color: var(--papel); position: sticky; top: 0; z-index: 10; }
.nav-modulo ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; overflow-x: auto; scrollbar-width: none; }
.nav-modulo ul::-webkit-scrollbar { display: none; }
.nav-modulo a { display: flex; align-items: center; gap: 12px; padding: 20px 0; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; opacity: .85; }
.nav-modulo a.ativo, .nav-modulo a:hover { opacity: 1; font-weight: 700; }
.disco { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--papel); position: relative; flex: none; }
.disco::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--papel); }
.nav-modulo a.ativo .disco { background: var(--laranja); border-color: var(--laranja); }
.nav-modulo a.ativo .disco::after { background: var(--vinho); }

/* você sabia */
.voce-sabia { margin-top: 28px; }
.vs-botao { display: inline-flex; align-items: center; gap: 10px; background: var(--vs-fundo); color: var(--vs-texto); padding: 8px 18px 8px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.vs-icone { width: 28px; height: 28px; border-radius: 50%; background: var(--vs-texto); color: var(--vs-fundo); display: grid; place-items: center; font-size: 16px; }
.vs-caixa { background: var(--vs-fundo); color: var(--vs-texto); border-radius: 22px; padding: 26px 30px; margin-top: 12px; font-size: 17px; font-weight: 500; }
.vs-rotulo { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.vs-fechar { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-top: 10px; }
.vs-caixa.com-figura { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; align-items: start; }   /* o retrato do Curt dentro do Você sabia (Letícia, 05/11) */
.vs-figura { margin: 0; }
.vs-figura .galeria-item { border-radius: 16px; }
.vs-figura img { width: 100%; height: auto; aspect-ratio: auto; display: block; }
.vs-figura figcaption { font-size: 13px; line-height: 1.4; margin-top: 10px; opacity: .85; white-space: pre-line; }

/* ---------- acervo: fotos dos objetos nos painéis (conteudo/site/acervo.json) ---------- */
/* cartões: as fotos do conjunto em cima, dentro do cartão, e a etiqueta de museu embaixo; dois por linha,
   e conjuntos com três objetos ou mais ocupam a linha toda */
.acervo-painel { margin-top: 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.acervo-vitrine .acervo-painel { margin-top: 0; }
/* página Objetos: barra fixa com os lugares (atalhos) e o filtro de material; cada lugar é uma seção com os cartões em três colunas */
.obj-barra { background: var(--vinho-profundo); color: var(--papel); position: sticky; top: 0; z-index: 10; }
.obj-barra .miolo { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.obj-ancoras { display: flex; gap: 24px; font-weight: 700; font-size: 15px; overflow-x: auto; scrollbar-width: none; }
.obj-ancoras::-webkit-scrollbar, .obj-chips::-webkit-scrollbar { display: none; }
.obj-ancoras a { color: var(--papel); text-decoration: none; white-space: nowrap; }
.obj-ancoras a.ativo, .obj-ancoras a:hover { color: var(--laranja); }
.obj-ancoras a[hidden] { display: none; }
.obj-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.obj-chips button { font: inherit; font-weight: 600; font-size: 15px; white-space: nowrap; border-radius: 999px; padding: 8px 16px; border: 2px solid var(--papel); background: transparent; color: var(--papel); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.obj-chips button small { font-size: 12px; opacity: .75; }
.obj-chips button:hover { border-color: var(--laranja); }
.obj-chips button[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--escuro); }
.obj-lugar { scroll-margin-top: 70px; }
.obj-lugar[hidden], .obj-grade .acv-cartao[hidden] { display: none; }
.obj-lugar-tit { color: var(--tit); font-size: clamp(28px, 3vw, 42px); margin: 0 0 32px; }
.obj-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.obj-grade .acv-etiqueta { margin: 20px 24px 24px; padding-top: 16px; font-size: 13.5px; }
.obj-grade .acv-etiqueta b { font-size: 16.5px; }
@media (max-width: 1000px) { .obj-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acv-cartao { margin: 0; min-width: 0; border-radius: 28px; background: var(--papel); color: var(--escuro); display: flex; flex-direction: column; }
.cor-papel .acv-cartao { background: var(--bege); }
/* a capa: um quadro 3:2 com até quatro fotos */
.acv-fotos { display: grid; gap: 4px; margin: 12px 12px 0; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; }
.acv-fotos.n2 { grid-template-columns: 1fr 1fr; }
.acv-fotos.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.acv-fotos.n3 > :first-child { grid-row: span 2; }
.acv-fotos.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.acv-abrir { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; overflow: hidden; background: #EDEDEB; cursor: zoom-in; container-type: inline-size; }
.acv-destaque .acv-abrir, .destaque-foto .acv-abrir { border-radius: 18px; height: auto; }
.acv-abrir img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.destaque-foto .acv-abrir img { height: auto; aspect-ratio: 3 / 2; }
.acv-mais { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(35, 31, 32, .55); color: var(--papel); font-family: var(--titulo); font-size: clamp(22px, 14cqi, 44px); }
.acv-abrir:hover img { transform: scale(1.03); }
.acv-abrir.com-rotulos:hover img { transform: none; }
.acv-abrir:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.acv-qtd { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--escuro); color: var(--papel); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acv-qtd .ic { width: 11px; height: 11px; fill: currentColor; }
.acv-etiqueta { margin: 28px 32px 32px; padding-top: 20px; border-top: 1.5px solid rgba(35, 31, 32, .3); font-size: 14.5px; line-height: 1.5; }
.acv-etiqueta b { display: block; font-weight: 600; font-size: 18px; line-height: 1.3; margin-bottom: 8px; text-wrap: balance; }
.acv-etiqueta span { display: block; opacity: .85; }
.acv-etiqueta span + span { margin-top: 10px; }
/* sementes: o nome ao lado de cada uma, sempre visível, sem cobrir o objeto */
.acv-rotulo { position: absolute; transform: translateY(-50%); display: flex; align-items: center; gap: .5em; font-size: clamp(10px, 2.2cqi, 14px); font-weight: 600; line-height: 1.1; color: var(--escuro); white-space: nowrap; pointer-events: none; text-align: left; }
.acv-rotulo.e { flex-direction: row-reverse; text-align: right; }
.acv-rotulo.b { transform: translateX(-50%); flex-direction: column; gap: .3em; text-align: center; }
.acv-rotulo.b::before { width: 1.5px; height: .8em; }
.acv-rotulo::before { content: ""; width: 1.3em; height: 1.5px; background: currentColor; opacity: .6; flex: none; }
.acv-fotos .acv-rotulo { white-space: normal; width: max-content; max-width: 19cqi; }   /* nome longo (castanha-do-pará) quebra no hífen em vez de sair da foto */

/* fotos do acervo ao lado do texto de um painel (disco perfurado), com a logomarca pequena embaixo, sem ampliar */
.destaque-acervo { display: grid; gap: 24px; }
.destaque-foto { margin: 0; display: grid; gap: 10px; }
.destaque-foto figcaption { font-size: 14px; line-height: 1.45; font-weight: 600; }
.logo-painel { margin: 4px 0 0; display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1.5px solid rgba(35, 31, 32, .3); }
.logo-painel img { width: 100px; height: auto; flex: none; }   /* 72 px ficou pequeno demais: +40 % (Michel, 6/nov) */
.logo-painel figcaption { font-size: 13px; line-height: 1.4; opacity: .85; }

/* lightbox do acervo: várias fotos por objeto, zoom com duplo clique, pinça ou roda do mouse */
.acv-lb { position: fixed; inset: 0; z-index: 60; background: var(--escuro); color: var(--papel); display: none; grid-template-rows: auto minmax(0, 1fr) auto; }
.acv-lb.aberto { display: grid; }
.acv-lb [hidden] { display: none !important; }   /* setas e miniaturas somem quando o objeto tem uma foto só */
.acv-topo { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.acv-cont { font-size: 15px; font-variant-numeric: tabular-nums; margin-right: auto; }
.acv-lb button { font: inherit; color: var(--papel); background: none; border: 0; cursor: pointer; }
.acv-zoom { display: flex; gap: 8px; }
.acv-zoom button, .acv-lb .acv-fechar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--papel); border-radius: 999px; min-width: 44px; height: 44px; padding: 0 14px; font-weight: 700; }
.acv-lb .acv-zoom button { padding: 0; font-size: 22px; line-height: 1; }
.acv-zoom button:disabled { opacity: .35; cursor: default; }
.acv-palco { position: relative; overflow: hidden; touch-action: none; display: grid; place-items: center; user-select: none; -webkit-user-select: none; }
.acv-alvo { position: relative; transform-origin: center center; will-change: transform; }
.acv-alvo img { display: block; width: 100%; height: 100%; border-radius: 10px; background: #fff; -webkit-user-drag: none; }
.acv-palco.zoom .acv-alvo { cursor: grab; } .acv-palco.arrastando .acv-alvo { cursor: grabbing; }
.acv-palco:not(.zoom) .acv-alvo { cursor: zoom-in; }
.acv-alvo .acv-rotulo { font-size: 15px; transform: translateY(-50%) scale(calc(1 / var(--s, 1))); transform-origin: left center; }
.acv-alvo .acv-rotulo.e { transform-origin: right center; }
.acv-alvo .acv-rotulo.b { transform: translateX(-50%) scale(calc(1 / var(--s, 1))); transform-origin: center top; }
.acv-lb .acv-ant, .acv-lb .acv-prox { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--papel); background: rgba(35, 31, 32, .6); display: grid; place-items: center; z-index: 2; }
.acv-ant { left: 16px; } .acv-prox { right: 16px; }
.acv-ant .ic, .acv-prox .ic, .acv-fechar .ic { width: 16px; height: 16px; fill: currentColor; }
.acv-palco.zoom .acv-ant, .acv-palco.zoom .acv-prox { display: none; }
.acv-base { padding: 14px 20px 20px; display: grid; gap: 12px; max-height: 34vh; overflow: auto; }
.acv-miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 2px; min-height: 56px; flex: none; }
.acv-lb .acv-miniaturas button { flex: none; width: 72px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; opacity: .6; }
.acv-lb .acv-miniaturas button[aria-current="true"] { border-color: var(--laranja); opacity: 1; }
.acv-miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acv-leg { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.5; max-width: 80ch; }
.acv-lb button:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
@media (max-width: 700px) {
  .acervo-painel { grid-template-columns: minmax(0, 1fr); margin-top: 44px; gap: 16px; }
  .obj-barra .miolo { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .obj-chips button { font-size: 14px; padding: 6px 14px; }
  .obj-lugar { scroll-margin-top: 104px; }
  .obj-grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .acv-cartao { border-radius: 20px; }
  .acv-fotos { margin: 8px 8px 0; border-radius: 14px; }
  .acv-etiqueta { margin: 20px 22px 24px; padding-top: 16px; font-size: 14px; }
  .acv-etiqueta b { font-size: 17px; }
  .acv-qtd { right: 6px; bottom: 6px; padding: 3px 8px; font-size: 12px; }
  .acv-topo { padding: 10px 12px; } .acv-zoom { display: none; }
  .acv-lb .acv-ant, .acv-lb .acv-prox { width: 44px; height: 44px; } .acv-ant { left: 8px; } .acv-prox { right: 8px; }
  .acv-base { padding: 10px 12px 14px; }
}

/* galeria e lightbox */
.galeria-fotos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.galeria-item { padding: 0; border-radius: 20px; overflow: hidden; display: block; cursor: zoom-in; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .3s; }
.galeria-item:hover img { transform: scale(1.03); }
.galeria-fotos .galeria-item:first-child { grid-row: span 2; }
.galeria-fotos .galeria-item:first-child img { aspect-ratio: auto; height: 100%; }
/* uma ou duas fotos: uma abaixo da outra, na proporção natural, para ficarem maiores */
.galeria-coluna { grid-template-columns: 1fr; gap: 16px; }
.galeria-coluna .galeria-item { grid-row: auto; }
.galeria-coluna .galeria-item img { aspect-ratio: auto; height: auto; }
/* figura única de um painel: o botão abre o lightbox */
.figura-botao { width: 100%; }
.figura-botao img { aspect-ratio: auto; height: auto; object-fit: contain; border-radius: 0; }
.etapas { margin: 48px 0 0; }
.etapas-fotos { grid-template-columns: 2fr 1fr 1fr; }
.etapas-fotos .galeria-item:first-child { grid-row: auto; }
.etapas-fotos .galeria-item img { aspect-ratio: 4 / 3; }
.lightbox { position: fixed; inset: 0; background: rgba(35, 31, 32, .92); display: none; place-items: center; z-index: 50; padding: 24px; }
.lightbox.aberto { display: grid; }
.lightbox img { max-width: min(1400px, 100%); max-height: 86vh; width: auto; height: auto; border-radius: 12px; }
.lightbox figcaption { color: var(--papel); text-align: center; }
.lightbox.com-fundo img { background: var(--cartao); padding: 32px; max-height: 80vh; }
.lightbox-fechar { position: absolute; top: 20px; right: 20px; color: var(--papel); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; border: 2px solid var(--papel); border-radius: 999px; padding: 10px 16px; }

/* pigmentos, etapas, lado a lado, passos, pessoas, cartões */
.pig-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; font-weight: 600; font-size: 14px; }
.pig-lista strong { display: block; }
.pig-lista small { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; opacity: .85; }
.pig-cor { display: block; aspect-ratio: 1; border-radius: 20px; border: 2px solid var(--escuro); margin-bottom: 8px; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.lado { background: var(--papel); border-radius: 24px; padding: 24px; }
.lado-foto img, .sem-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.sem-foto { display: grid; place-items: center; background: var(--bege); color: var(--vinho-profundo); font-weight: 600; }
.lado h3 { color: var(--vinho); font-size: 26px; margin: 18px 0 10px; }
.passos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.passos li { display: flex; gap: 14px; }
.passo-n { width: 40px; height: 40px; border-radius: 50%; background: var(--laranja); color: var(--escuro); display: grid; place-items: center; font-family: var(--titulo); font-size: 20px; flex: none; }
.passos h3 { font-size: 22px; margin-bottom: 8px; }
.passos p { font-size: 15px; }
.passos-fim { margin-top: 28px; }
.pessoas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pessoa { display: flex; gap: 14px; align-items: flex-start; }
.pessoa img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; flex: none; }
.pessoa h3, .pessoa h4 { font-size: 19px; margin-bottom: 4px; }
.pessoa p { font-size: 15px; margin: 0; }
.acervo-bloco { margin-top: 40px; }
.acervo-bloco .sub { margin-top: 40px; }
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cartoes li { background: var(--papel); border-radius: 20px; padding: 24px; }
.cartoes h3 { color: var(--vinho); font-size: 22px; margin-bottom: 8px; }
.cartoes p { font-size: 16px; }
/* colunas corridas, não grade: os grupos se empilham sem o vão que a linha da grade deixava ao lado do grupo mais alto (pedido da Expomus) */
.creditos-grade { columns: 3; column-gap: 36px; }
.credito { break-inside: avoid; margin-bottom: 28px; }
.credito h3 { font-family: var(--texto); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--vinho-profundo); margin-bottom: 6px; }
.credito p { font-size: 15px; font-weight: 700; white-space: pre-line; line-height: 1.4; }   /* nomes sempre em negrito, com ou sem função */
.credito-item { margin: 0 0 7px; }
.credito-funcao, .credito-nome { display: block; }
.credito-funcao { font-size: 12px; font-weight: 500; color: var(--vinho-profundo); line-height: 1.3; }
.credito-nome { font-weight: 700; }

/* ---------- linha do tempo ---------- */
.linha-do-tempo { margin-top: 48px; }
.lt-instrucao { font-weight: 600; font-size: 15px; color: var(--vinho-profundo); margin: 0 0 16px; }
.lt-rolagem { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
.lt-visao { min-width: 960px; height: 320px; position: relative; }
.lt-eixo { position: absolute; left: 0; right: 0; top: 50%; height: 0; touch-action: pan-y; cursor: ew-resize; }
.lt-eixo-base { position: absolute; left: 4%; right: 4%; top: -4px; height: 8px; background: var(--escuro); }
.lt-eixo-vinho { position: absolute; right: 4%; top: -4px; height: 8px; background: var(--vinho); }
/* cada marco é um ponto no eixo; traço, ano e miniatura se posicionam a partir dele.
   Cartão acima = ano abaixo, e vice-versa; marcos sem cartão alternam o lado do ano. */
.lt-marco { position: absolute; left: var(--x); top: 0; width: 0; height: 0; overflow: visible; cursor: pointer; }
.lt-traco { position: absolute; left: -2px; top: -14px; width: 4px; height: 28px; background: var(--escuro); }
.lt-ano { position: absolute; left: 0; transform: translateX(-50%); font-family: var(--titulo); font-size: 18px; color: var(--escuro); white-space: nowrap; line-height: 1; }
.lt-vinho .lt-ano { color: var(--vinho); }
.lt-mini { position: absolute; left: 0; transform: translateX(-50%); width: 92px; height: 92px; background: var(--cartao); clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%); }
.lt-mini::before { content: ""; position: absolute; left: calc(50% - 1px); width: 2px; height: 40px; background: var(--escuro); }
.lt-mini img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.lt-acima .lt-mini { bottom: 54px; }
.lt-acima .lt-mini::before { top: 100%; }
.lt-acima .lt-ano { top: 24px; }
.lt-abaixo .lt-mini { top: 54px; }
.lt-abaixo .lt-mini::before { bottom: 100%; }
.lt-abaixo .lt-ano { bottom: 24px; }
.lt-so-ano.lt-acima .lt-ano { bottom: 24px; top: auto; }
.lt-so-ano.lt-abaixo .lt-ano { top: 24px; bottom: auto; }
.lt-marco:focus-visible { outline: none; }
.lt-marco:focus-visible .lt-traco { outline: 3px solid var(--laranja); outline-offset: 3px; }
.lt-marco.ativo .lt-traco { background: var(--laranja); width: 6px; }
.lt-marco.ativo .lt-ano { color: var(--laranja); }
.lt-marco.ativo .lt-mini { outline: 3px solid var(--laranja); outline-offset: -3px; }
.lt-mudo { pointer-events: none; }   /* ano sem informação no painel: fica no eixo como referência, não abre nada */
.lt-mudo .lt-ano { opacity: .6; }
.lt-detalhe { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: center; background: var(--cartao); padding: 36px; margin-top: 28px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.lt-detalhe.sem-img { grid-template-columns: minmax(0, 1fr); }
.lt-detalhe .lt-img { width: 100%; border-radius: 12px; }
.lt-detalhe .lt-img img { width: 100%; height: auto; max-height: 300px; aspect-ratio: auto; object-fit: contain; }
.lt-detalhe.sem-img .lt-img { display: none; }
.lt-rotulo { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vinho-profundo); margin: 0 0 8px; }
.lt-ano-grande { font-family: var(--titulo); font-size: 56px; line-height: 1; margin: 0 0 8px; }
.lt-titulo { color: var(--vinho); font-size: 28px; line-height: 1.12; margin-bottom: 20px; }
.lt-botoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- encaixe das pinturas ---------- */
.encaixe { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; margin-top: 40px; }
.enc-instrucao { grid-column: 1 / -1; font-weight: 600; font-size: 15px; color: var(--vinho-profundo); margin: 0; }
.enc-rolagem { overflow: visible; }
/* só as peças soltas travam o toque (touch-action: none); no resto da parede a página rola normalmente */
.enc-parede { position: relative; aspect-ratio: var(--prop); user-select: none; -webkit-user-select: none; container-type: inline-size; }
.enc-item { position: absolute; padding: 0; display: block; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.enc-item svg { width: 100%; height: 100%; }
.enc-bloco { cursor: default; }
.enc-fixo { opacity: .45; }   /* os desenhos fixos ficam apagados, para não parecerem peças (pedido da Expomus) */
.enc-recomecar { margin-top: 18px; }
.enc-recomecar[hidden] { display: none; }
.enc-titulo { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--titulo); font-size: clamp(8px, 0.8vw, 11px); letter-spacing: -0.02em; color: var(--escuro); pointer-events: none; padding: 10%; text-align: center; line-height: 1.05; hyphens: manual; -webkit-hyphens: manual; }
@supports (font-size: 1cqw) { .enc-titulo { font-size: min(11px, var(--fs, 11cqw)); } }   /* --fs vem do gerador, em % da largura da parede: o título cabe no bloco */
.enc-bloco.alvo .fundo { fill: var(--cartao); }
.enc-bloco.errado svg { animation: treme .4s; }
.enc-bloco.cheio .enc-titulo { opacity: 0; }
.enc-peca { cursor: grab; touch-action: none; transition: left .35s ease, top .35s ease, transform .45s ease; will-change: transform; z-index: 2; }
.enc-peca.encaixada { touch-action: auto; }
.enc-peca.arrastando { cursor: grabbing; transition: none; z-index: 5; }
.enc-peca.selecionada { outline: 3px solid var(--vinho); outline-offset: 4px; border-radius: 12px; }
/* encaixada: a silhueta fica laranja como o bloco vazio e o desenho continua vinho; tocar nela mostra o texto do grupo de novo */
.enc-peca.encaixada { cursor: pointer; z-index: 3; }
.enc-peca.encaixada .silhueta { fill: var(--laranja); }
/* as peças soltas balançam de leve (wiggle), cada uma no seu ritmo */
.enc-peca:not(.encaixada):not(.arrastando) svg { transform-origin: 50% 55%; animation: balanca calc(6.5s + var(--i, 0) * 1.3s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * -2.1s); }
@keyframes balanca { 0%, 100% { transform: rotate(-2.5deg) translate(0, 0); } 30% { transform: rotate(2deg) translate(4px, -3px); } 55% { transform: rotate(-1deg) translate(-3px, 4px); } 80% { transform: rotate(2.5deg) translate(2px, 2px); } }
@media (prefers-reduced-motion: reduce) { .enc-peca svg { animation: none; } }
.enc-fixo { pointer-events: none; }
@keyframes treme { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.enc-caixa { background: var(--cartao); padding: 32px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.enc-contador { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vinho-profundo); margin: 0 0 10px; }
.enc-grupo { color: var(--vinho); font-size: 32px; margin-bottom: 14px; overflow-wrap: anywhere; }   /* "Antropomorfo" cabe nos 296px internos da caixa */
.enc-texto { font-size: 17px; }
.enc-caixa.completo { background: var(--laranja); }

/* ---------- peça que gira 180° (duplo antropozoomorfo): um toque vira a foto e mostra a outra leitura ---------- */
.painel-coluna { display: grid; gap: 40px; align-content: start; }
.girar { margin: 0; display: grid; }
.girar-foto { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #EDEDEB; cursor: pointer; }
.girar-foto img { display: block; width: 100%; height: auto; transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
.girar-foto[aria-pressed="true"] img { transform: rotate(180deg); }
.girar-pilula { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; background: var(--escuro); color: var(--papel); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.girar-pilula .ic { width: 15px; height: 15px; transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
.girar-foto[aria-pressed="true"] .girar-pilula .ic { transform: rotate(180deg); }
.girar-foto:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.girar .acv-etiqueta { margin: 18px 0 0; }

/* ---------- material educativo: a capa de cada PDF e o botão de baixar ---------- */
.mat-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.mat-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.mat-capa { display: block; border-radius: 20px; overflow: hidden; background: var(--bege); }
.mat-capa img { width: 100%; height: auto; transition: transform .3s; }
.mat-capa:hover img { transform: scale(1.02); }
.mat-info h2 { color: var(--vinho); font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 16px; }
.mat-sub { font-size: 20px; line-height: 1.45; max-width: 36ch; }
.mat-lista { margin: 0 0 28px; padding-left: 1.2em; font-size: 18px; line-height: 1.7; }
.mat-info .botao { margin-top: 12px; }
.mat-tam { font-weight: 500; opacity: .8; }
.mat-item:nth-child(1) .mat-capa { max-width: 420px; }   /* caderno em pé: não precisa ocupar a coluna toda */

/* ---------- guardiões: o mapa da estação 1 (vinho, rios em vinho profundo) e a ficha da comunidade com os cartões da página Vídeos ---------- */
.guardioes { margin-top: 40px; }
.mapa { position: relative; aspect-ratio: var(--prop); background: var(--vinho); border-radius: 24px; overflow: hidden; container-type: inline-size; }
.mapa-fundo { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-marcas span { position: absolute; color: var(--papel); white-space: nowrap; pointer-events: none; }
.mapa-cidade { transform: translate(-6px, -50%); display: flex; align-items: center; gap: 8px; font-size: clamp(11px, 1.4cqi, 17px); font-weight: 600; }
.mapa-cidade::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--papel); box-shadow: 0 0 0 3px var(--vinho-profundo); flex: none; }
.mapa-cidade.principal { font-size: clamp(12px, 1.6cqi, 20px); transform: translate(-9px, -50%); }
.mapa-cidade.principal::before { width: 16px; height: 16px; }
.mapa-cidade.esquerda { flex-direction: row-reverse; transform: translate(calc(-100% - 22px), -50%); }   /* Alter do Chão: o nome à esquerda, longe do pino de Caranazal */
.mapa-rio { transform: rotate(var(--giro, 0deg)); transform-origin: left center; font-size: clamp(11px, 1.35cqi, 16px); font-style: italic; font-weight: 500; opacity: .7; letter-spacing: .02em; }
.pin { position: absolute; transform: translate(-14px, -50%); display: flex; align-items: center; gap: 8px; }
.pin.lado-abaixo { flex-direction: column; gap: 6px; transform: translate(-50%, -14px); }
.pin-disco { width: 28px; height: 28px; border-radius: 50%; background: var(--laranja); position: relative; flex: none; }
.pin-disco::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--vinho); }
.pin-nome { background: var(--papel); color: var(--vinho); font-weight: 700; font-size: clamp(11px, 1.15cqi, 15px); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.pin[aria-expanded="true"] .pin-nome, .pin:hover .pin-nome { background: var(--laranja); color: var(--escuro); }
.pin[aria-expanded="true"] .pin-disco { box-shadow: 0 0 0 4px var(--papel); }
.mapa-chips { display: none; list-style: none; margin: 16px 0 0; padding: 0; flex-wrap: wrap; gap: 8px; }
.mapa-chips .pin { position: static; transform: none; }
.mapa-chips .pin-disco { display: none; }
.mapa-chips .pin-nome { background: var(--vinho); color: var(--papel); font-size: 14px; padding: 8px 14px; }
.com-card { background: var(--papel); border-radius: 24px; padding: 32px; margin-top: 20px; }
.com-card h3 { color: var(--vinho); font-size: 30px; margin-bottom: 14px; }
.com-card .videos-grade { margin-top: 28px; }

/* pense nisso / mural */
.pense-nisso { margin-top: 48px; background: var(--papel); color: var(--escuro); border-radius: 28px; padding: 40px; }
.pense-nisso h3 { color: var(--vinho); font-size: 34px; margin-bottom: 16px; }
.mural-form { display: grid; gap: 8px; max-width: 640px; margin-top: 20px; }
.mural-form label { font-weight: 600; font-size: 15px; margin-top: 8px; }
.mural-form textarea, .mural-form input { font: inherit; padding: 12px 14px; border: 2px solid var(--bege); border-radius: 14px; background: #fff; }
.mural-form .botao { justify-self: start; margin-top: 8px; }
.mural { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mural li { background: var(--bege); border-radius: 18px; padding: 18px; font-size: 16px; }
.mural li small { display: block; margin-top: 8px; color: var(--vinho-profundo); font-weight: 600; }

/* navegação entre módulos */
.nav-modulos { padding: calc(var(--margem-bloco) / 2 + var(--divisa) / 2) 0 56px; }
.nav-modulos .miolo { display: flex; justify-content: space-between; gap: 24px; }
.nav-mod-item { text-decoration: none; display: grid; gap: 8px; max-width: 48%; }
.nav-mod-item .rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vinho-profundo); }
.nav-mod-item.dir { text-align: right; justify-items: end; }
.nav-mod-titulo { font-family: var(--titulo); font-size: 26px; color: var(--vinho); line-height: 1.1; }

/* ---------- vídeos: galeria de retratos (opção A do Figma) ---------- */
.videos-grade { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.videos-grade.acervo { grid-template-columns: repeat(3, 1fr); }
.video-painel { max-width: 340px; margin: 0 auto; }   /* a janela do vídeo ao lado do texto do painel: etiqueta, retrato, nome, tema e a chamada */
.video-painel .videos-grade { grid-template-columns: 1fr; margin: 0; }
.video-painel .video-cartao h3 { color: var(--tit); }
.video-chamada { margin-top: 18px; }
.video-chamada .ic { width: 14px; height: 14px; }
.video-chamada.em-breve { opacity: .55; }
.video-cartao h3 { font-size: 20px; color: var(--vinho); margin: 14px 0 4px; line-height: 1.15; }
.videos-grade.acervo .video-cartao h3 { font-size: 24px; }
.video-cartao p { font-size: 15px; opacity: .85; margin: 0; }
.video-abrir, .video-foto-caixa { position: relative; display: block; width: 100%; padding: 0; }
.video-abrir { cursor: pointer; }
/* a foto em arco: cantos de cima redondos como um semicírculo, de baixo com 16px, como na estação */
.video-foto { display: block; aspect-ratio: 282 / 300; overflow: hidden; background: var(--bege); border-radius: 50% 50% 16px 16px / 47% 47% 16px 16px; }
.video-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-abrir:hover .video-foto img { transform: scale(1.03); }
.video-play { position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: var(--laranja); color: var(--escuro); display: grid; place-items: center; }
.video-play .ic { width: 18px; height: 18px; margin-left: 3px; }
.video-breve { position: absolute; left: 16px; bottom: 16px; background: var(--vinho); color: var(--papel); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; }
/* player de vídeo: tela cheia escura, como o lightbox do acervo */
.pop-video { border: 0; padding: 0; margin: 0; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--escuro); color: var(--papel); display: none; grid-template-rows: auto minmax(0, 1fr) auto; }
.pop-video[open] { display: grid; }
.pop-video::backdrop { background: var(--escuro); }
.pop-video-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); }
.pop-video-quem { min-width: 0; }
.pop-video-nome { font-family: var(--texto); font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: 0; }
.pop-video-sub { margin: 2px 0 0; font-size: 14px; color: var(--bege); }
.pop-video .pop-fechar { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 2px solid var(--papel); border-radius: 999px; background: none; color: var(--papel); font-weight: 700; }
.pop-video .pop-fechar .ic { width: 14px; height: 14px; fill: currentColor; transition: transform .2s; }
.pop-video .pop-fechar:hover { background: var(--papel); color: var(--escuro); }
.pop-video-palco { display: grid; place-items: center; min-height: 0; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); }
.pop-video-quadro { width: min(100%, 1600px, (100dvh - 150px) * 16 / 9); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.pop-video-quadro iframe { width: 100%; height: 100%; border: 0; display: block; }
.pop-video-nota { margin: 0; padding: 12px 20px max(18px, env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 13px; opacity: .7; }
.pop-video-nota a { color: var(--bege); }

/* ---------- glossário (mesmo desenho da estação 2), objetos ---------- */
.glossario-tela { overflow: hidden; }
.nuvem { margin: 44px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative; }
.nuvem-linha { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
.palavra { font-family: var(--titulo); font-weight: 700; line-height: 1; border-radius: 80px; padding: .45em .8em; font-size: calc(var(--tam) * 1px * var(--escala-nuvem, 1)); white-space: nowrap; transition: background .4s, color .4s, box-shadow .4s, transform .12s; }
.palavra:hover { transform: translateY(-2px); }
.palavra:active { transform: scale(.96); }
.palavra.e0 { background: var(--laranja); color: var(--escuro); }
.palavra.e1 { background: var(--vinho); color: var(--papel); }
.palavra.e2 { box-shadow: inset 0 0 0 3px var(--vinho); color: var(--vinho); }
.palavra.e3 { background: var(--bege); color: var(--vinho); }
.pop-verbete { border: 0; padding: 0; margin: auto; background: var(--bege); color: var(--vinho); border-radius: 36px; width: min(1100px, 100% - 48px); max-height: min(100% - 48px, 92vh); overflow: auto; }
.pop-verbete::backdrop { background: rgba(35, 31, 32, .62); }
.pop-miolo { padding: 36px 44px 44px; display: grid; gap: 22px; }
.pop-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pop-topo .etiqueta { margin: 0; color: var(--vinho-profundo); }
/* verbete: termo e definição; com o VLibras ligado entra a Libras gravada, à direita no computador e, no celular,
   entre o termo e a definição (a pessoa vê o sinal logo que abre). As áreas da grade fazem a troca de lugar. */
.pop-corpo { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "termo" "def"; column-gap: 40px; align-items: start; }
.pop-texto { display: contents; }
.pop-corpo .pop-termo { grid-area: termo; } .pop-corpo .pop-def { grid-area: def; }
.pop-termo { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; margin-bottom: 14px; }
.pop-def { font-size: 19px; line-height: 1.5; color: var(--escuro); }
/* a Libras gravada só aparece com o widget do VLibras ligado (site.js marca body.libras-ativo) */
.pop-libras { grid-area: libras; display: none; background: var(--vinho-profundo); color: var(--papel); border-radius: 24px; overflow: hidden; }
body.libras-ativo .pop-verbete:not(.sem-libras) .pop-libras { display: block; }
body.libras-ativo .pop-verbete:not(.sem-libras) .pop-corpo { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "termo libras" "def libras"; grid-template-rows: auto 1fr; }
/* onde o toque não passa pelo VLibras (site.js: botões, palavras do glossário, pop-ups), sem o sublinhado e a mãozinha de
   "toque para traduzir" que ele põe; o :root e os ids no :is() vencem a regra dele, que também é !important */
html:root body :is(#verbete, #pop-video, #pop-encaixe, .acv-lb, button, a.termo):is(.vlibras--hover, .vlibras--active),
html:root body :is(#verbete, #pop-video, #pop-encaixe, .acv-lb, button, a.termo) :is(.vlibras--hover, .vlibras--active) { text-decoration: none !important; cursor: auto !important; }
html:root body :is(#verbete, #pop-video, #pop-encaixe, .acv-lb, button, a.termo):is(button, a).vlibras--hover,
html:root body :is(#verbete, #pop-video, #pop-encaixe, .acv-lb, button, a.termo) :is(button, a).vlibras--hover { cursor: pointer !important; }
.pop-libras video { width: 100%; aspect-ratio: 960 / 860; object-fit: cover; display: block; background: var(--vinho-profundo); }
.pop-libras p { margin: 0; padding: 12px 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.objetos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.objeto h3 { font-size: 24px; color: var(--vinho); margin: 14px 0 4px; }
.objeto p { font-size: 15px; }
.objeto .galeria-item img { aspect-ratio: 4 / 3; }

/* ---------- rodapé ---------- */
.rodape { background: var(--papel); color: var(--escuro); padding: 56px 0 48px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--vinho-profundo); font-size: 15px; font-weight: 600; }
.rodape-links a { color: var(--vinho); text-decoration: none; }
.rodape-lab { margin-left: auto; color: var(--vinho-profundo); font-weight: 500; }
.rodape-logos { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; margin-top: 40px; }
.logo-grupo p { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vinho-profundo); margin: 0 0 8px; }
.logo-grupo img { height: 50px; width: auto; }

/* VLibras: o botão do widget fica na lateral direita, no meio da tela */
[vw] { z-index: 40; }


/* =========================================================================
   movimento
   html.anima vem de um script no <head> (só sem "reduzir movimento"). Os blocos ficam invisíveis até chegarem
   à tela; site.js marca .visivel (com --d, a ordem na leva que apareceu junto) e, no fim da animação, troca por
   .revelado: o elemento volta ao estado natural, sem animação presa segurando transform (as peças do encaixe arrastam).
   A lista de alvos aqui é a mesma de site.js. Os leques não somem: o contorno se desenha.
   ========================================================================= */
.anima :where(.painel-cab, .painel-texto, .painel-figura .galeria-item, .painel-figura figcaption, .etapas .galeria-item, .etapas figcaption, .abertura h1, .abertura-resumo, .trilha, .lt-instrucao, .lt-detalhe, .enc-instrucao, .enc-item, .enc-caixa, .lado, .passos li, .pig-lista li, .pessoa, .cartoes li, .credito, .video-cartao, .palavra, .mapa, .com-card, .pense-nisso, .acervo-bloco > *, .nav-mod-item, .objeto, .acv-cartao):not(.visivel):not(.revelado) { opacity: 0; }
.anima .visivel { animation: revela .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 70ms); }
.anima :where(.enc-item, .palavra, .pig-lista li).visivel { animation-name: revela-pop; animation-duration: .6s; animation-timing-function: cubic-bezier(.2, 1.25, .4, 1); }
@keyframes revela { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes revela-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
/* linha do tempo: o eixo cresce da esquerda e os marcos brotam dele um a um (--k vem do gerador) */
.anima .lt-visao:not(.visivel):not(.revelado) :is(.lt-eixo-base, .lt-eixo-vinho, .lt-marco) { opacity: 0; }
.anima .lt-visao.visivel { animation: none; }
.anima .lt-visao.visivel :is(.lt-eixo-base, .lt-eixo-vinho) { animation: revela-eixo 1s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left center; }
.anima .lt-visao.visivel .lt-marco { animation: revela-pop .6s cubic-bezier(.2, 1.25, .4, 1) both; animation-delay: calc(.3s + var(--k, 0) * 60ms); }
@keyframes revela-eixo { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
/* leques: o contorno se desenha quando o bloco chega à tela */
.anima .leques-contorno path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anima .leques-contorno.visivel { animation: none; }
.anima .leques-contorno.visivel path { animation: desenha 2.2s cubic-bezier(.4, .2, .2, 1) both; animation-delay: .15s; }
.anima .leques-contorno.revelado path { stroke-dashoffset: 0; }
@keyframes desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* botões: sobem um pouco, a seta anda, o fundo muda; apertar encolhe */
.botao { transition: transform .2s cubic-bezier(.2, .9, .3, 1), background .2s, color .2s, border-color .2s; }
.botao .ic { transition: transform .25s cubic-bezier(.2, .9, .3, 1); }
.botao:hover { transform: translateY(-2px); }
.botao:hover .ic:last-child { transform: translateX(3px); }
.botao:hover .ic:first-child { transform: translateX(-3px); }
.botao:active { transform: translateY(0) scale(.97); }
.botao:disabled { opacity: .4; transform: none; pointer-events: none; }
.botao.primario:hover { background: #FF8A3D; }
.botao.vinho:hover { background: var(--vinho-profundo); }
.botao.contorno:hover { background: var(--vinho); color: var(--papel); }
.botao.contorno-claro:hover { background: var(--papel); color: var(--vinho); }
.botao.contorno-escuro:hover { background: var(--escuro); color: var(--papel); }
.pop-fechar:hover .ic, .lightbox-fechar:hover .ic, .menu-fechar:hover .ic, .vs-fechar:hover .ic { transform: rotate(90deg); }
.lightbox-fechar .ic, .menu-fechar .ic, .vs-fechar .ic { transition: transform .25s; }
.termo { transition: color .2s, background .2s; }

/* cabeçalho e navegações */
.menu-item { transition: background .2s, color .2s; }
.logo-pequeno img { transition: transform .3s cubic-bezier(.2, .9, .3, 1); }
.logo-pequeno:hover img { transform: scale(1.04); }
.submenu-caixa { animation: sobe .3s cubic-bezier(.2, .9, .3, 1); }
.menu.aberto { animation: aparece .25s; }
.disco { transition: transform .25s cubic-bezier(.2, 1.2, .4, 1), background .25s, border-color .25s; }
.nav-modulo a { transition: opacity .2s; }
.nav-modulo a.ativo .disco { transform: scale(1.2); }
.nav-mod-titulo { transition: color .2s; }
.nav-mod-item:hover .nav-mod-titulo { color: var(--laranja); }
.nav-mod-item .rotulo .ic { transition: transform .25s; }
.nav-mod-item:hover .rotulo .ic { transform: translateX(-3px); }
.nav-mod-item.dir:hover .rotulo .ic { transform: translateX(3px); }
.rodape-links a { transition: color .2s; }
.rodape-links a:hover { color: var(--laranja); }

/* cartões, fotos, pessoas */
.cartoes li, .lado { transition: transform .3s cubic-bezier(.2, .9, .3, 1); }
.cartoes li:hover, .lado:hover { transform: translateY(-4px); }
.galeria-item:hover img { transform: scale(1.04); }
.video-play { transition: transform .25s cubic-bezier(.2, 1.2, .4, 1); }
.video-abrir:hover .video-play { transform: scale(1.12); }
.video-abrir:hover .video-foto img { transform: scale(1.05); }
.pessoa img { transition: transform .3s cubic-bezier(.2, 1.2, .4, 1); }
.pessoa:hover img { transform: scale(1.06) rotate(-3deg); }
.palavra:hover { transform: translateY(-3px) scale(1.03); }

/* você sabia: o ponto de interrogação acena de vez em quando; a caixa sobe ao abrir */
.vs-botao { transition: transform .2s; }
.vs-botao:hover { transform: translateY(-2px); }
.vs-icone { animation: acena 6s ease-in-out infinite; }
@keyframes acena { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-14deg) scale(1.1); } 94% { transform: rotate(12deg) scale(1.1); } 98% { transform: rotate(-5deg); } }
.vs-caixa:not([hidden]) { animation: sobe .4s cubic-bezier(.2, .9, .3, 1); }

/* linha do tempo: marco cresce ao passar o mouse; o cartão troca de conteúdo com um deslize */
.lt-traco { transition: height .2s, top .2s, width .2s, background .2s; }
.lt-ano { transition: color .2s; }
.lt-mini { transition: transform .25s cubic-bezier(.2, 1.2, .4, 1); }
.lt-marco:hover .lt-traco, .lt-marco.ativo .lt-traco { height: 36px; top: -18px; }
.lt-marco:hover .lt-ano { color: var(--laranja); }
.lt-marco:hover .lt-mini { transform: translateX(-50%) scale(1.06); }
.lt-detalhe.troca .lt-img, .lt-detalhe.troca .lt-texto > * { animation: troca .45s cubic-bezier(.2, .8, .2, 1) both; }
.lt-detalhe.troca .lt-texto > :nth-child(2) { animation-delay: 60ms; }
.lt-detalhe.troca .lt-texto > :nth-child(3) { animation-delay: 120ms; }
.lt-detalhe.troca .lt-texto > :nth-child(4) { animation-delay: 180ms; }
@keyframes troca { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* encaixe: o bloco alvo cresce, a peça pulsa ao encaixar, a caixa troca o texto com um deslize */
.silhueta, .fundo { transition: fill .3s; }
.enc-bloco svg { transition: transform .2s; }
.enc-bloco.alvo svg { transform: scale(1.05); }
.enc-peca.encaixada svg { animation: encaixou .55s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes encaixou { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.enc-caixa { transition: background .4s; }
.enc-caixa.troca .enc-grupo, .enc-caixa.troca .enc-texto { animation: troca .45s cubic-bezier(.2, .8, .2, 1) both; }
.enc-caixa.troca .enc-texto { animation-delay: 70ms; }

/* mapa dos guardiões: os pinos pulsam convidando o toque; a ficha sobe ao abrir */
.pin-disco::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--laranja); opacity: 0; animation: pulsa 2.8s ease-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes pulsa { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.pin[aria-expanded="true"] .pin-disco::before { animation: none; }
.pin-disco { transition: transform .25s cubic-bezier(.2, 1.2, .4, 1); }
.pin:hover .pin-disco { transform: scale(1.15); }
.pin-nome { transition: background .2s, color .2s; }
.com-card:not([hidden]) { animation: sobe .4s cubic-bezier(.2, .9, .3, 1); }

/* lightbox e pop-ups abrem crescendo */
.lightbox.aberto { animation: aparece .25s; }
.lightbox.aberto figure { animation: amplia .35s cubic-bezier(.2, .9, .3, 1); }
dialog[open] { animation: amplia .35s cubic-bezier(.2, .9, .3, 1); }
dialog[open]::backdrop { animation: aparece .3s; }
.pop-video[open] { animation: aparece .25s; }   /* o player em tela cheia só aparece, sem crescer */
@keyframes amplia { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .vs-icone, .pin-disco::before, .submenu-caixa, .menu.aberto, .vs-caixa:not([hidden]), .com-card:not([hidden]), .lightbox.aberto, .lightbox.aberto figure, dialog[open], dialog[open]::backdrop, .enc-peca.encaixada svg { animation: none; }
  .botao, .cartoes li, .lado, .galeria-item img, .video-foto img, .pessoa img, .palavra, .lt-mini, .pin-disco, .girar-foto img, .girar-pilula .ic { transition: none; }
}
@media print { .anima :where(*):not(.visivel) { opacity: 1 !important; animation: none !important; } }

@media (max-width: 1100px) { .encaixe { grid-template-columns: 1fr; } }   /* a parede precisa de largura: a caixa vai para baixo */

/* ---------- celular ---------- */
@media (max-width: 900px) {
  body { font-size: 17px; }
  :root { --margem-bloco: 56px; --divisa: 44px; --gutter: 20px; }
  .cabecalho .miolo { min-height: 92px; gap: 16px; justify-content: space-between; }
  .logo-pequeno img { height: 60px; }
  .menu-abrir { display: inline-flex; }
  .menu { position: fixed; inset: 0; background: var(--vinho); z-index: 30; padding: 20px; overflow: auto; display: none; margin: 0; }
  .menu.aberto { display: block; }
  .menu-fechar { display: inline-flex; margin-left: auto; }
  .menu ul { display: block; margin-top: 24px; }
  /* como no desktop: sem linhas entre os itens e sem fundo no botão de Módulos (que fica aberto) */
  .menu-item { display: flex; width: 100%; padding: 16px 0; font-family: var(--titulo); font-size: 22px; border-radius: 0; justify-content: space-between; }
  .menu-item:hover, .menu-item[aria-expanded="true"] { background: none; }
  .menu-item[aria-current="page"] { background: none; color: var(--laranja); }
  .submenu { position: static; width: auto; padding: 0 0 12px 20px; }
  .submenu-caixa { background: none; color: var(--bege); padding: 0; clip-path: none; }
  .submenu li + li { border: 0; }
  .submenu a, .submenu .em-breve span { font-family: var(--texto); font-size: 16px; font-weight: 500; color: var(--bege); padding: 11px 0; }   /* links e "em breve" com a mesma fonte */
  .cabecalho-capa .miolo { justify-content: flex-end; }
  .capa { padding-top: 16px; }
  .painel h2, .painel h1 { font-size: 30px; margin-bottom: 20px; }
  .painel-corpo { grid-template-columns: 1fr; gap: 28px; }
  .vs-caixa.com-figura { grid-template-columns: 1fr; }
  .vs-figura { max-width: 220px; }
  .leques-contorno { width: 120px; right: -10px; }
  .abertura h1 { font-size: 38px; }
  .nav-modulo ul { gap: 24px; }
  .nav-modulo a { padding: 14px 0; font-size: 13px; }
  .lt-visao { height: 280px; }
  .lt-mini { width: 72px; height: 72px; }
  .lt-acima .lt-mini { bottom: 46px; } .lt-abaixo .lt-mini { top: 46px; } .lt-mini::before { height: 32px; }
  .lt-detalhe { grid-template-columns: 1fr; padding: 24px; }
  .lt-ano-grande { font-size: 40px; }
  .lt-titulo { font-size: 22px; }
  .encaixe { grid-template-columns: 1fr; }
  /* no celular a parede usa o arranjo próprio (encaixe.json, "celular"): mais alta, tudo visível, sem rolagem */
  .enc-parede { aspect-ratio: var(--prop-c); }
  .enc-item { left: var(--xc); top: var(--yc); width: var(--wc); height: var(--hc); }
  @supports (font-size: 1cqw) { .enc-titulo { font-size: min(11px, var(--fsc, 11cqw)); } }
  .galeria-fotos, .etapas-fotos { grid-template-columns: 1fr 1fr; }
  .lado-a-lado, .passos { grid-template-columns: 1fr; }
  .creditos-grade { columns: 1; }
  .videos-grade, .videos-grade.acervo { grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 24px; }
  .video-play { width: 44px; height: 44px; right: 10px; bottom: 10px; }
  .video-play .ic { width: 14px; height: 14px; }
  .video-breve { left: 10px; bottom: 10px; font-size: 10px; }
  .video-cartao h3 { font-size: 17px; }
  .videos-grade.acervo .video-cartao h3 { font-size: 19px; }
  .pop-video-topo { padding: 12px 12px 10px 16px; }
  .pop-video-palco { padding: 0; }
  .pop-video-quadro { width: 100%; border-radius: 0; }
  .pop-video-nome { font-size: 16px; }
  .nuvem { --escala-nuvem: .55; gap: 10px; margin-top: 24px; }
  .nuvem-linha { gap: 8px 10px; }
  .pop-verbete { border-radius: 24px; width: calc(100% - 24px); max-height: calc(100% - 24px); }
  .pop-miolo { padding: 22px 22px 28px; gap: 16px; }
  body.libras-ativo .pop-verbete:not(.sem-libras) .pop-corpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "termo" "libras" "def"; grid-template-rows: auto; }
  .pop-libras { width: 100%; max-width: 440px; margin: 4px 0 22px; border-radius: 18px; }
  .pop-libras p { padding: 10px 16px; }
  .pop-def { font-size: 17px; }
  .nav-modulos .miolo { flex-direction: column; }
  .nav-mod-item, .nav-mod-item.dir { max-width: none; text-align: left; justify-items: start; }
  .rodape-lab { margin-left: 0; width: 100%; }
  .rodape-logos { gap: 24px; }
  .mapa .pin-nome { display: none; }   /* no celular os nomes não cabem no mapa: ficam na lista de botões logo abaixo */
  .mapa .pin, .mapa .pin.lado-abaixo { transform: translate(-50%, -50%); }
  .mapa .pin-disco { width: 18px; height: 18px; } .mapa .pin-disco::after { inset: 5px; }
  .mapa-chips { display: flex; }
  .mat-item { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mat-itens { gap: 48px; }
  .mapa-rio, .mapa-cidade.esquerda { display: none; }   /* no mapa pequeno só fica Santarém de referência */
  .com-card { padding: 22px; border-radius: 20px; }
  .com-card h3 { font-size: 24px; }
}