/* =============================================================================
   Myths' Valley — identidade "Crônica do Recôncavo" para a web
   Laca verde, talha dourada, creme e papel; Cinzel nas ações e Cormorant no texto.
   O quadro tem três faixas fixas (cabeçalho, palco rolável, paginador): o
   paginador nunca cobre o conteúdo, e cada seção ocupa a altura inteira do palco.
   ============================================================================= */

@font-face { font-family: Cinzel; src: url('/fonts/Cinzel-Variavel.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Cormorant; src: url('/fonts/CormorantGaramond-Variavel.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Cormorant; src: url('/fonts/CormorantGaramond-Italico-Variavel.ttf') format('truetype'); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
    --tinta: #0c1611;
    --laca: #13201a;
    --laca-2: #1a2a21;
    --laca-3: #233629;
    --ouro: #e8c46a;
    --ouro-claro: #f3dc98;
    --ouro-escuro: #9b692b;
    --ouro-linha: rgba(232, 196, 106, .3);
    --ouro-tenue: rgba(232, 196, 106, .1);
    --creme: #f6ead0;
    --texto: #ece2c8;
    --texto-suave: #c3b99f;
    --papel: #efe5cf;
    --papel-2: #e5d7b9;
    --papel-tinta: #20322a;
    --papel-suave: #55624f;
    --papel-linha: rgba(122, 86, 29, .3);
    --papel-ouro: #7c571c;
    --cobalto: #1d3f8f;
    --cobalto-claro: #53739f;
    --terra: #5b2620;
    --ok: #9fd89a;
    --fundo-cartao: rgba(255, 255, 255, .025);
    --sombra: 0 18px 50px rgba(0, 0, 0, .45);

    --header-h: 68px;
    --pager-h: 54px;
    --gutter: clamp(18px, 4.2vw, 72px);
    --conteudo: 1260px;

    --fs-corpo: clamp(16px, .28vw + .4vh + 10px, 18px);
    --fs-lead: clamp(17px, .4vw + .65vh + 6px, 21px);
    --fs-h1: clamp(29px, 1.4vw + 2.2vh, 58px);
    --fs-h2: clamp(25px, 1.05vw + 1.8vh, 46px);
    --fs-h3: clamp(18px, .4vw + .85vh + 5px, 25px);
    --fs-mini: clamp(10px, .15vw + .3vh + 7.5px, 12.5px);
    --fs-placa: clamp(10.5px, .2vw + .3vh + 7.5px, 13px);

    color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
    background: var(--tinta);
    color: var(--texto);
    font: 400 var(--fs-corpo)/1.55 Cormorant, Georgia, 'Times New Roman', serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 .85em; }
b, strong { font-weight: 600; }
h1, h2, h3, h4 { margin: 0; font-weight: 450; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
h4 { font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
h1 em, h2 em, h3 em { color: var(--ouro); font-weight: 450; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--ouro); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--laca); padding: 10px 16px; border: 1px solid var(--ouro); }
.pular:focus { top: 12px; }

/* ---------- quadro: cabeçalho / palco / paginador ---------- */
.quadro { height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--header-h) minmax(0, 1fr) var(--pager-h); }
.quadro.sem-paginador .paginador__controles, .quadro.sem-paginador .paginador__rotulo { display: none; }
.quadro.sem-paginador .paginador__utilidades { grid-column: -2 / -1; }
.palco { overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; scroll-snap-type: y proximity; overscroll-behavior-y: contain; position: relative; }
.palco:focus { outline: none; }
.palco { scrollbar-color: var(--ouro) transparent; }
@supports selector(::-webkit-scrollbar) {
    .palco { scrollbar-color: auto; }
    .palco::-webkit-scrollbar { width: 12px; background: transparent; }
    .palco::-webkit-scrollbar-track, .palco::-webkit-scrollbar-corner { background: transparent; }
    .palco::-webkit-scrollbar-thumb { background: var(--ouro); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
    .palco::-webkit-scrollbar-thumb:hover { background-color: var(--ouro-claro); }
    .palco::-webkit-scrollbar-button:single-button { display: block; height: 12px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 8px 5px; }
    .palco::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23e8c46a' d='M0 5 4 0 8 5Z'/%3E%3C/svg%3E"); }
    .palco::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23e8c46a' d='M0 0 4 5 8 0Z'/%3E%3C/svg%3E"); }
}

/* ---------- cabeçalho ---------- */
.cabecalho {
    position: relative; z-index: 40;
    display: flex; align-items: center; gap: clamp(14px, 2vw, 34px);
    padding: 0 var(--gutter);
    background: linear-gradient(180deg, #13201a, #101b16);
    border-bottom: 1px solid var(--ouro-linha);
}
.cabecalho__marca { display: flex; align-items: center; flex: 0 0 auto; }
.cabecalho__marca { gap: clamp(12px, 1.2vw, 18px); text-decoration: none; }
.cabecalho__marca img { height: clamp(20px, 1.6vh + 10px, 26px); width: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.cabecalho__lema { padding-left: clamp(12px, 1.2vw, 18px); border-left: 1px solid var(--ouro-linha); font: italic 500 calc(var(--fs-corpo) * .78)/1.2 Cormorant, serif; color: var(--texto-suave); white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 1121px) { .cabecalho__lema { display: none; } }
@media (max-width: 520px) { .cabecalho__lema { display: none; } }
.navegacao { display: flex; align-items: center; gap: clamp(6px, 1.4vw, 26px); margin-left: auto; }
.navegacao__grupo { position: relative; }
.navegacao__grupo > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
    font: 500 var(--fs-placa)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase;
    padding: 10px 6px; color: var(--texto);
}
.navegacao__grupo > summary::-webkit-details-marker { display: none; }
.navegacao__grupo > summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.navegacao__grupo[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.navegacao__grupo > summary:hover, .navegacao__grupo.atual > summary { color: var(--ouro); }
.navegacao__menu {
    position: absolute; top: calc(100% + 12px); right: -12px; min-width: 250px; padding: 8px;
    background: #15231c; border: 1px solid var(--ouro-linha); box-shadow: var(--sombra);
    display: grid;
}
.navegacao__menu::before { content: ''; position: absolute; top: -6px; right: 28px; width: 10px; height: 10px; background: #15231c; border-left: 1px solid var(--ouro-linha); border-top: 1px solid var(--ouro-linha); transform: rotate(45deg); }
.navegacao__menu a { display: flex; justify-content: space-between; gap: 28px; align-items: baseline; white-space: nowrap; padding: 11px 12px; text-decoration: none; font-size: calc(var(--fs-corpo) * .95); }
.navegacao__menu a small { color: var(--texto-suave); font-size: .8em; }
.navegacao__menu a:hover, .navegacao__menu a[aria-current] { background: var(--ouro-tenue); color: var(--ouro-claro); }
.cabecalho__acoes { display: flex; align-items: center; gap: 10px; }
.botao-som {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
    background: transparent; border: 1px solid var(--ouro-linha); color: var(--ouro); cursor: pointer;
    font: 500 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase;
}
.botao-som svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* desligado: alto-falante cortado; ligado: com as ondas */
.botao-som .onda { display: none; }
.botao-som[aria-pressed='true'] .onda { display: inline; }
.botao-som[aria-pressed='true'] .mudo { display: none; }
.botao-som[aria-pressed='true'] { border-color: var(--ouro); background: var(--ouro-tenue); }
.botao-som:hover { border-color: var(--ouro); }
.botao-menu { display: none; }
.navegacao__utilidades, .navegacao__legal { display: none; }
.cabecalho .rotulo-celular { display: none !important; }
.botao-conta {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--ouro-linha); color: var(--ouro); font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase;
}
.botao-conta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.botao-conta:hover { border-color: var(--ouro); color: var(--ouro-claro); }
.cabecalho__sair { margin: 0; display: flex; }
.navegacao__sair { display: inline; margin: 0; }
.navegacao__sair button { padding: 0; background: none; border: 0; color: var(--ouro); font: inherit; cursor: pointer; }
.seletor-idioma { position: relative; }
.seletor-idioma > summary {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; list-style: none; cursor: pointer;
    border: 1px solid var(--ouro-linha); color: var(--ouro); font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em;
}
.seletor-idioma > summary::-webkit-details-marker { display: none; }
.seletor-idioma > summary:hover, .seletor-idioma[open] > summary { border-color: var(--ouro); color: var(--ouro-claro); }
.seletor-idioma svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.seletor-idioma__seta { width: 12px !important; height: 12px !important; transition: transform .2s; }
.seletor-idioma[open] .seletor-idioma__seta { transform: rotate(180deg); }
.seletor-idioma__menu {
    position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; min-width: 190px; margin: 0; padding: 8px; list-style: none;
    background: #15231c; border: 1px solid var(--ouro-linha); box-shadow: var(--sombra);
}
.seletor-idioma__menu::before { content: ''; position: absolute; top: -6px; right: 22px; width: 10px; height: 10px; background: #15231c; border-left: 1px solid var(--ouro-linha); border-top: 1px solid var(--ouro-linha); transform: rotate(45deg); }
.seletor-idioma__menu a { display: block; padding: 10px 12px; text-decoration: none; white-space: nowrap; font-size: calc(var(--fs-corpo) * .95); }
.seletor-idioma__menu a:hover, .seletor-idioma__menu a[aria-current] { background: var(--ouro-tenue); color: var(--ouro-claro); }
.seletor-idioma__menu a[aria-current]::after { content: '◆'; float: right; margin-left: 14px; font-size: .6em; line-height: 2.2; color: var(--ouro); }

/* ---------- paginador (faixa própria, abaixo do palco) ---------- */
.paginador {
    position: relative; z-index: 30;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    padding: 0 var(--gutter);
    background: linear-gradient(0deg, #0f1914, #13201a);
    border-top: 1px solid var(--ouro-linha);
}
.paginador__rotulo { font: 500 var(--fs-mini)/1.2 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paginador__rotulo b { color: var(--ouro); font-weight: 600; }
.paginador__controles { display: flex; align-items: center; gap: 6px; }
.paginador__seta { width: 40px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; color: var(--ouro); cursor: pointer; transition: background .2s, border-color .2s; }
.paginador__seta:hover:not(:disabled) { background: var(--ouro-tenue); border-color: var(--ouro); }
.paginador__seta:disabled { opacity: .3; cursor: default; }
.paginador__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paginador__pontos { display: flex; align-items: center; padding: 0 6px; max-width: min(56vw, 520px); overflow: hidden; }
.paginador__ponto { width: 22px; height: 30px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; flex: 0 0 auto; }
.paginador__ponto::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1px solid var(--ouro-escuro); transform: translate(-50%, -50%) rotate(45deg); transition: background .2s, transform .2s; }
.paginador__ponto[aria-current]::after { background: var(--ouro); border-color: var(--ouro); transform: translate(-50%, -50%) rotate(45deg) scale(1.35); }
.paginador__ponto svg { display: none; }
.paginador__ponto--colecao { color: var(--ouro); }
.paginador__ponto--colecao::after { width: 20px; height: 20px; border: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.paginador__ponto--colecao[aria-current]::after { transform: translate(-50%, -50%); }
.paginador__ponto--colecao svg { display: block; position: relative; z-index: 1; width: 14px; height: 14px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paginador__ponto--colecao[aria-current] { color: var(--laca); }
.convite-navegacao { position: fixed; z-index: 31; left: 50%; bottom: calc(var(--pager-h) + 20px); margin: 0; color: var(--ouro); font: 600 var(--fs-mini)/1.5 Cinzel, serif; letter-spacing: .14em; text-align: center; text-transform: uppercase; white-space: nowrap; pointer-events: none; translate: -50% 0; transform-origin: center; animation: convite-flutuar 1.8s ease-in-out infinite; }
.convite-navegacao span { display: block; }
.convite-navegacao[hidden], .convite-navegacao.no-rodape { display: none !important; }
.convite-navegacao.no-papel { color: var(--ouro-escuro); }
.convite-navegacao.agradecendo { animation: convite-agradecer 1.3s ease-out forwards; }
.convite-navegacao.pulsando { animation: convite-flutuar 1.8s ease-in-out infinite, convite-pulsar .6s ease-in-out; }
.menu-aberto .convite-navegacao, body:has(dialog[open]) .convite-navegacao, body:has(.chat-lancador[aria-expanded="true"]) .convite-navegacao { visibility: hidden; }
@keyframes convite-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes convite-pulsar { 0%, 100% { scale: 1; } 45% { scale: 1.12; } }
@keyframes convite-agradecer { 0% { opacity: 1; scale: 1; } 35% { opacity: 1; scale: 1.2; } 100% { opacity: 0; scale: 1.5; } }
@media (pointer: coarse), (hover: none), (max-width: 1024px) { .convite-navegacao__teclado { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .convite-navegacao { animation: none !important; } }

/* ---------- seções (slides) ---------- */
.slide {
    position: relative; isolation: isolate;
    min-height: 100%;
    display: flex; align-items: center;
    scroll-snap-align: start;
    border-bottom: 1px solid var(--ouro-linha);
    background: var(--laca);
    overflow: hidden;
}
.slide--topo { align-items: flex-start; }
/* Mobile only: every section starts at the same point; eyebrow and title sit on a fixed top
   margin and the content only grows downwards (desktop stays vertically centred). */
@media (max-width: 760px) {
    :root { --topo-secao: clamp(18px, 4vh, 48px); }
    .slide:not(.entrada) { align-items: flex-start; }
    .palco > .slide:not(.entrada) > .slide__conteudo { padding-top: var(--topo-secao) !important; }
    .palco > .slide:not(.entrada) > .slide__conteudo > :is(.dividido, .teia-area) { align-items: start; }
    .palco > .slide:not(.entrada) .teia-editorial__texto { align-content: start; }
}
.slide__conteudo { width: min(var(--conteudo), 100%); margin: 0 auto; padding: clamp(26px, 5vh, 76px) var(--gutter); position: relative; z-index: 2; }
.slide__conteudo--estreito { width: min(900px, 100%); }
.slide__conteudo--largo { width: min(1480px, 100%); }
.slide__conteudo--total { width: 100%; }
.slide__fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.slide__fundo img, .slide__fundo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__fundo .slide__poster, .slide__fundo video[data-src] { position: absolute; inset: 0; }
.slide__fundo video[data-src] { opacity: 0; transition: opacity 1.2s ease; }
.slide__fundo video[data-src].ao-vivo { opacity: 1; }
.slide__carga { position: absolute; right: 18px; bottom: 16px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(240,228,200,.25); border-top-color: var(--ouro, #c9a24a); animation: slide-carga 1s linear infinite; }
.slide__carga[hidden] { display: none; }
@keyframes slide-carga { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .slide__carga { animation: none; } }
.slide--historia .slide__fundo img { object-position: center bottom; }
.slide--historia.slide--veu-esquerda .slide__fundo::after { background: linear-gradient(90deg, rgba(10,19,14,.92), rgba(10,19,14,.7) 38%, rgba(10,19,14,.12) 75%), linear-gradient(0deg, rgba(10,19,14,.35), transparent 35%); }
.slide__fundo::after { content: ''; position: absolute; inset: 0; z-index: 3; } /* acima dos vídeos que se alternam (z-index 1–2) */
.slide--veu-esquerda .slide__fundo::after { background: linear-gradient(90deg, rgba(10,19,14,.92) 0%, rgba(10,19,14,.7) 38%, rgba(10,19,14,.12) 75%), linear-gradient(0deg, rgba(10,19,14,.75), transparent 35%); }
.slide--veu-direita .slide__fundo::after { background: linear-gradient(270deg, rgba(10,19,14,.92) 0%, rgba(10,19,14,.7) 38%, rgba(10,19,14,.12) 75%), linear-gradient(0deg, rgba(10,19,14,.7), transparent 35%); }
.slide--veu-baixo .slide__fundo::after { background: linear-gradient(0deg, rgba(10,19,14,.94) 0%, rgba(10,19,14,.55) 45%, rgba(10,19,14,.1) 80%); }
.slide--veu-cheio .slide__fundo::after { background: rgba(10,19,14,.74); }
.slide--veu-leve .slide__fundo::after { background: linear-gradient(0deg, rgba(10,19,14,.55), transparent 40%); }
.slide--laca { background: radial-gradient(ellipse at 20% 0%, #1c2e24 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, #182a20 0%, transparent 50%), var(--laca); }
.slide--tinta { background: var(--tinta); }
.slide--noite { background: radial-gradient(ellipse at 70% 10%, #182a3a 0%, transparent 55%), #0b1316; }
.slide--papel {
    --texto: var(--papel-tinta); --texto-suave: var(--papel-suave); --ouro: var(--papel-ouro); --ouro-claro: #6a4a17;
    --ouro-linha: var(--papel-linha); --ouro-tenue: rgba(124, 87, 28, .08); --fundo-cartao: rgba(255, 255, 255, .38);
    color-scheme: light;
    color: var(--papel-tinta);
    background: radial-gradient(ellipse at 15% 10%, #f6eedb 0%, transparent 60%), radial-gradient(ellipse at 90% 95%, #e2d2b1 0%, transparent 55%), var(--papel);
}
.slide--papel .slide__conteudo::selection { background: var(--papel-ouro); color: var(--papel); }

/* ---------- tipografia de seção ---------- */
.olho { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(10px, 1.6vh, 18px); font: 600 var(--fs-mini)/1.35 Cinzel, serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.olho::before { content: ''; width: 8px; height: 8px; flex: 0 0 auto; border: 1px solid currentColor; transform: rotate(45deg); }
.olho--sem-losango::before { display: none; }
/* Numa grade de cartões, o olho reserva sempre duas linhas: os títulos ficam todos na mesma altura. */
.olho--duas-linhas { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.35em); }
.cabeca { max-width: 820px; margin-bottom: clamp(18px, 3.4vh, 40px); }
.cabeca--centro { margin-inline: auto; text-align: center; }
.cabeca--centro .olho { justify-content: center; }
.cabeca--centro .lead { margin-inline: auto; }
.cabeca h1, .cabeca h2 { margin-bottom: clamp(10px, 1.8vh, 20px); }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--texto); max-width: 68ch; text-wrap: balance; }
.suave { color: var(--texto-suave); }
.destaque { color: var(--ouro); font-weight: 600; }
.destaque--mito { font-family: Cinzel, serif; font-size: .82em; letter-spacing: .08em; text-transform: uppercase; color: var(--terra); padding: 0 .3em; background: linear-gradient(transparent 62%, rgba(232, 196, 106, .45) 62%); white-space: nowrap; }
.texto-coluna { max-width: 70ch; }
.texto-coluna p + p { margin-top: .2em; }
.nota-fonte { font-size: calc(var(--fs-corpo) * .82); color: var(--texto-suave); border-top: 1px solid var(--ouro-linha); padding-top: 12px; margin-top: clamp(16px, 3vh, 30px); max-width: 90ch; overflow-wrap: anywhere; }
.filete { display: flex; align-items: center; gap: 14px; color: var(--ouro); }
.filete::before, .filete::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ouro) 60%, var(--ouro)); }
.filete::after { transform: scaleX(-1); }
.filete span { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); flex: 0 0 auto; }
.versalete { font: 500 var(--fs-placa)/1.4 Cinzel, serif; letter-spacing: .18em; text-transform: uppercase; }
.italico { font-style: italic; }
.citacao { margin: 0; padding-left: 22px; border-left: 1px solid var(--ouro); font-size: calc(var(--fs-lead) * 1.08); font-style: italic; line-height: 1.4; }
.citacao cite { display: block; margin-top: 10px; font: 500 var(--fs-mini)/1.3 Cinzel, serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }

/* ---------- grades ---------- */
.grade { display: grid; gap: clamp(16px, 2.4vw, 34px); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dividido { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4.5vw, 80px); align-items: center; }
.dividido--imagem-esquerda { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.dividido--meio { grid-template-columns: 1fr 1fr; }
.dividido--lateral { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 340px); align-items: start; }
.dividido--rotulo { grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); align-items: start; }
.dividido--palco { grid-template-columns: minmax(0, 1.6fr) minmax(0, .6fr); }
.pilha { display: grid; gap: clamp(10px, 1.6vh, 18px); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(16px, 3vh, 30px); }

/* ---------- placas (botões do retábulo) ---------- */
.placa {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: .85em 1.5em;
    font: 600 var(--fs-placa)/1.15 Cinzel, serif; letter-spacing: .17em; text-transform: uppercase; text-decoration: none; text-align: center;
    color: var(--ouro-claro); cursor: pointer;
    background: linear-gradient(180deg, #213328, #15211b);
    border: 1px solid var(--ouro-escuro);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .25);
    transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.placa::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(232, 196, 106, .14); pointer-events: none; }
.placa:hover { border-color: var(--ouro); background: linear-gradient(180deg, #2a3f31, #1a281f); transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(232,196,106,.15); }
.placa--ouro { color: #1c1506; background: linear-gradient(180deg, #f6df9f, #d9ae55 55%, #c49340); border-color: #f8e7b4; text-shadow: 0 1px 0 rgba(255, 245, 210, .5); }
.placa--ouro::before { border-color: rgba(90, 60, 15, .35); }
.placa--ouro:hover { background: linear-gradient(180deg, #fbe7b1, #e3b964 55%, #cc9b48); border-color: #fff1c8; }
.placa--terra { background: linear-gradient(180deg, #4f2620, #3a1b17); }
.placa--larga { width: 100%; }
.placa--pequena { min-height: 38px; padding: .65em 1.05em; }
.placa[aria-disabled='true'] { opacity: .6; cursor: not-allowed; transform: none; }
.placa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: 0 0 auto; }
.slide--papel .placa:not(.placa--ouro) { color: #f3dc98; background: linear-gradient(180deg, #2a3f31, #1d2d23); border-color: #6b5427; }
.link-ouro { color: var(--ouro); font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.link-ouro::after { content: '→'; font-family: Georgia, serif; letter-spacing: 0; transition: transform .2s; }
.link-ouro:hover::after { transform: translateX(4px); }

/* ---------- etiquetas de estado ---------- */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font: 600 calc(var(--fs-mini) * .92)/1.2 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta--pronto { color: var(--ok); border-color: rgba(159, 216, 154, .4); }
.etiqueta--andamento { color: var(--ouro); border-color: var(--ouro-linha); }
.etiqueta--previsto { color: var(--texto-suave); border-color: rgba(195, 185, 159, .35); }
.slide--papel .etiqueta--pronto { color: #2f6b3a; border-color: rgba(47, 107, 58, .4); }

/* ---------- cartões ---------- */
.cartao { position: relative; padding: clamp(16px, 2.2vw, 28px); border: 1px solid var(--ouro-linha); background: var(--fundo-cartao); }
.cartao h3 { margin-bottom: 10px; }
.cartao p:last-child { margin-bottom: 0; }
.cartao--link { text-decoration: none; display: block; transition: border-color .2s, transform .2s, background .2s; }
.cartao--link:hover { border-color: var(--ouro); transform: translateY(-2px); background: var(--ouro-tenue); }
.cartao__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cartao__num { font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .16em; color: var(--ouro); }
.lista-filetes { list-style: none; }
.lista-filetes > li { padding: clamp(10px, 1.6vh, 16px) 0; border-top: 1px solid var(--ouro-linha); }
.lista-filetes > li:last-child { border-bottom: 1px solid var(--ouro-linha); }
.lista-losangos { list-style: none; display: grid; gap: 8px; }
.lista-losangos li { position: relative; padding-left: 22px; }
.lista-losangos li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border: 1px solid var(--ouro); transform: rotate(45deg); }

/* ---------- janelas de arte (imagens com moldura fina) ---------- */
.janela { margin: 0; position: relative; }
.janela__imagem { display: block; position: relative; padding: 6px; border: 1px solid var(--ouro-linha); background: rgba(0, 0, 0, .18); overflow: hidden; }
.slide--papel .janela__imagem { background: rgba(255, 255, 255, .4); }
.janela__imagem img, .janela__imagem video { display: block; width: 100%; height: 100%; object-fit: cover; }
.janela--169 .janela__imagem { aspect-ratio: 16 / 9; }
.janela--32 .janela__imagem { aspect-ratio: 3 / 2; }
.janela--45 .janela__imagem { aspect-ratio: 4 / 5; }
.janela--quadrada .janela__imagem { aspect-ratio: 1; }
.janela__imagem[data-ampliar] { cursor: zoom-in; }
.janela__imagem[data-ampliar] img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.janela__imagem[data-ampliar]:hover img { transform: scale(1.035); }
.janela figcaption { margin-top: 10px; font-size: calc(var(--fs-corpo) * .86); color: var(--texto-suave); line-height: 1.4; }
.janela figcaption b { color: var(--texto); font-weight: 600; }

/* ---------- moldura de talha (retábulo) ---------- */
.moldura { position: relative; isolation: isolate; padding: clamp(40px, 5.6vh, 60px) clamp(40px, 3.4vw, 58px); }
.moldura::before { content: ''; position: absolute; inset: 14px; z-index: -1; background: linear-gradient(150deg, rgba(28, 43, 34, .96), rgba(12, 22, 17, .97)); box-shadow: 0 14px 60px rgba(0, 0, 0, .5); }
.moldura__talha { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.moldura__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.moldura__trilho { width: calc(100% - 24px); height: calc(100% - 24px); }
.moldura__trilho--sombra { stroke: #5f421c; stroke-width: 6px; }
.moldura__trilho--ouro { stroke: url(#talha-ouro); stroke-width: 3px; }
.moldura__azulejo { width: calc(100% - 34px); height: calc(100% - 34px); stroke: var(--cobalto-claro); stroke-width: 1px; }
.moldura__interna { width: calc(100% - 42px); height: calc(100% - 42px); stroke: #c4a35b; stroke-opacity: .5; stroke-width: 1px; }
.moldura__canto { position: absolute; width: clamp(52px, 5vw, 72px); height: clamp(52px, 5vw, 72px); }
.moldura__canto--no { top: 0; left: 0; }
.moldura__canto--ne { top: 0; right: 0; transform: scaleX(-1); }
.moldura__canto--so { bottom: 0; left: 0; transform: scaleY(-1); }
.moldura__canto--se { bottom: 0; right: 0; transform: scale(-1); }

/* ---------- números ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ouro-linha); }
.numero { padding: clamp(14px, 2.6vh, 28px) clamp(12px, 1.6vw, 24px) clamp(14px, 2.4vh, 26px) 0; border-bottom: 1px solid var(--ouro-linha); }
.numero__valor { display: block; font: 500 clamp(28px, 1.4vw + 2.1vh, 54px)/1 Cinzel, serif; color: var(--ouro); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.numero__rotulo { display: block; margin-top: 8px; font-size: calc(var(--fs-corpo) * .95); line-height: 1.3; }
.numero__unidade { display: block; font-size: calc(var(--fs-corpo) * .8); color: var(--texto-suave); margin-top: 2px; }

/* ---------- player de áudio ---------- */
.player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--ouro-linha); background: var(--fundo-cartao); text-align: left; cursor: pointer; position: relative; transition: border-color .2s, background .2s; }
.player:hover { border-color: var(--ouro); }
.player__botao { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ouro); display: grid; place-items: center; color: var(--ouro); flex: 0 0 auto; }
.player__botao svg { width: 14px; height: 14px; fill: currentColor; }
.player__botao .pausa { display: none; }
.player.tocando .player__botao .play { display: none; }
.player.tocando .player__botao .pausa { display: block; }
.player.tocando { border-color: var(--ouro); background: var(--ouro-tenue); }
.player__texto { min-width: 0; }
.player__titulo { display: block; font-weight: 600; line-height: 1.25; }
.player__sub { display: block; font-size: calc(var(--fs-corpo) * .84); color: var(--texto-suave); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.player__tempo { font: 500 var(--fs-mini)/1 Cinzel, serif; color: var(--texto-suave); letter-spacing: .08em; }
.player__barra { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ouro); transition: width .25s linear; }
.lista-players { display: grid; gap: 8px; }
.igreja-wireframe img { display: block; width: 100%; height: min(58vh, 600px); object-fit: contain; filter: drop-shadow(0 2px 8px #0c1611); }
.slide--materiais .grade { gap: 16px 24px; }
.slide--materiais .janela__imagem { aspect-ratio: auto; height: clamp(90px, 14vh, 160px); }
.slide--materiais figcaption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.35; height: 2.7em; margin-top: 6px; }
.slide--sistemas-resumo .cabeca, .slide--sistemas-resumo .lead { max-width: none; }
.slide--sons .dividido { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 32px; }
.slide--sons .lista-players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slide--sons .player__sub { font-size: 14px; }
@media (min-width: 1100px) {
    .slide--sistemas-resumo .lead { white-space: nowrap; text-wrap: nowrap; }
}
@media (max-width: 760px) {
    .slide--materiais .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slide--sons .dividido, .slide--sons .lista-players { grid-template-columns: minmax(0, 1fr); }
    .igreja-wireframe img { height: 260px; }
}
@container quadro-chat (max-width: 1000px) {
    .slide--sistemas-resumo .lead { white-space: normal; text-wrap: pretty; }
    .slide--sons .dividido { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- visualizador 3D ---------- */
.visualizador { position: relative; border: 1px solid var(--ouro-linha); background: radial-gradient(ellipse at 50% 70%, #34442f 0%, #1a271f 55%, #111b15 100%); }
.slide--papel .visualizador { background: radial-gradient(ellipse at 50% 70%, #fbf4e2 0%, #e9dcc0 60%, #dccaa6 100%); }
.visualizador model-viewer { width: 100%; height: clamp(300px, 54vh, 680px); display: block; --poster-color: transparent; --progress-bar-color: var(--ouro); --progress-bar-height: 2px; background: transparent; }
.visualizador--baixo model-viewer { height: clamp(260px, 42vh, 520px); }
.visualizador__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ouro-linha); font-size: calc(var(--fs-corpo) * .85); color: var(--texto-suave); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5b996' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 36px; cursor: pointer; }
select:focus { outline: none; }
select:focus-visible { outline: 1px solid var(--texto-suave); outline-offset: 2px; }
.visualizador__barra select { background-color: var(--laca-2); color: var(--texto); border: 1px solid var(--ouro-linha); padding: 6px 36px 6px 10px; font: inherit; }
.slide--papel .visualizador__barra select { background-color: #f7efdc; }
.visualizador__dica { position: absolute; left: 14px; top: 12px; font: 500 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); pointer-events: none; }
.visualizador__carregando { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--texto-suave); font: 500 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; }
.vitrine { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.vitrine__lista { max-height: clamp(320px, 62vh, 760px); overflow-y: auto; border: 1px solid var(--ouro-linha); padding: 6px; scrollbar-width: thin; scrollbar-color: var(--ouro-escuro) transparent; }
.vitrine__item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--ouro-linha); cursor: pointer; text-align: left; }
.vitrine__item:last-child { border-bottom: 0; }
.vitrine__item b { font-weight: 600; }
.vitrine__item small { color: var(--texto-suave); font-size: .82em; }
.vitrine__item:hover, .vitrine__item[aria-pressed='true'] { background: var(--ouro-tenue); }
.vitrine__item[aria-pressed='true'] b { color: var(--ouro); }
.vitrine__info h3 { margin: 14px 0 6px; }
.vitrine--compacta .vitrine__info { display: none; }
.vitrine--unica { grid-template-columns: minmax(0, 1fr); }
.vitrine--compacta .vitrine__lista { max-height: calc(clamp(260px, 42vh, 520px) + 52px); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtro { padding: 7px 13px; border: 1px solid var(--ouro-linha); background: transparent; cursor: pointer; font: 600 var(--fs-mini)/1.2 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.filtro:hover { color: var(--texto); border-color: var(--ouro-escuro); }
.filtro[aria-pressed='true'] { color: var(--tinta); background: var(--ouro); border-color: var(--ouro); }
.slide--papel .filtro[aria-pressed='true'] { color: var(--papel); }

/* ---------- retratos ---------- */
.retratos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 26px); }
.audio-com-acoes { display: grid; width: fit-content; max-width: 100%; }
.audio-com-acoes .player { contain: inline-size; }
.audio-com-acoes .player__sub { display: block; }
.retratos--moradores .retrato__nome { white-space: nowrap; }
.retrato { text-decoration: none; display: block; }
.retrato__foto { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--ouro-linha); background: radial-gradient(ellipse at 50% 40%, #e9dcc0, #b8a27a); }
.retrato__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .4s; filter: saturate(.92); }
.retrato:hover .retrato__foto img { transform: scale(1.05); filter: saturate(1.05); }
.retrato__nome { display: block; margin-top: 10px; font-size: var(--fs-h3); line-height: 1.15; }
.retrato__papel { display: block; font-size: calc(var(--fs-corpo) * .86); color: var(--texto-suave); line-height: 1.35; margin-top: 4px; }
.retratos--compacto { grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 10vw, 160px), 1fr)); }
.retratos--compacto .retrato__nome { font-size: calc(var(--fs-corpo) * 1.02); }

/* ---------- linha do tempo ---------- */
.tempo { list-style: none; position: relative; display: grid; gap: clamp(12px, 2vh, 22px); }
.tempo::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--ouro), var(--ouro-linha)); }
.tempo > li { position: relative; padding-left: 34px; }
.tempo > li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 9px; height: 9px; background: var(--laca); border: 1px solid var(--ouro); transform: rotate(45deg); }
.slide--papel .tempo > li::before { background: var(--papel); }
.tempo__quando { font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); display: block; margin-bottom: 4px; }
.tempo--familia > li { container-type: inline-size; }
.tempo--familia .tempo__nomes { display: block; white-space: nowrap; font-size: min(1em, 3.8cqi); }

/* ---------- vídeo ---------- */
.video { position: relative; border: 1px solid var(--ouro-linha); background: #000; padding: 6px; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.video--vertical video { aspect-ratio: 9 / 16; max-height: 72vh; width: auto; margin: 0 auto; }

/* ---------- tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-corpo) * .92); }
.tabela th, .tabela td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ouro-linha); vertical-align: top; }
.tabela th { font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.tabela td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rolavel { overflow-x: auto; }

kbd { display: inline-block; min-width: 1.9em; padding: 4px 7px; text-align: center; font: 600 .78em/1 Cinzel, serif; letter-spacing: .04em; color: var(--texto); background: var(--fundo-cartao); border: 1px solid var(--ouro-linha); border-bottom-width: 3px; }
code { font-family: Consolas, 'Courier New', monospace; font-size: .82em; overflow-wrap: anywhere; }

/* ---------- avisos ---------- */
.aviso { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border: 1px solid var(--ouro-linha); border-left: 3px solid var(--ouro); background: var(--ouro-tenue); }
.aviso p:last-child { margin: 0; }
.aviso__icone { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ouro); margin-top: 2px; }
.revelacao summary { cursor: pointer; font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); padding: 12px 0; list-style: none; }
.revelacao summary::-webkit-details-marker { display: none; }
.revelacao summary::before { content: '+ '; }
.revelacao[open] summary::before { content: '− '; }

/* ---------- lightbox ---------- */
.ampliada { padding: 0; border: 1px solid var(--ouro-linha); background: #070d0a; max-width: min(94vw, 1800px); max-height: 92vh; color: var(--texto); }
.ampliada::backdrop { background: rgba(5, 10, 8, .88); }
.ampliada img { display: block; max-width: 100%; max-height: calc(92vh - 60px); margin: 0 auto; }
.ampliada__barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 14px; font-size: .9em; }
/* Fechar dos modais: um X discreto no canto superior direito, que acende no ouro ao passar. */
.modal-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--texto-suave); opacity: .75; cursor: pointer; transition: color .2s, opacity .2s; }
.modal-x:hover, .modal-x:focus-visible { color: var(--ouro); opacity: 1; }
.modal-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ampliada .modal-x { background: rgba(7, 13, 10, .6); border-radius: 50%; }
/* Num detalhe longo, que rola, o X fica preso no alto. */
.detalhe-modal .modal-x { position: sticky; top: -18px; float: right; margin: -18px -18px 0 8px; }

/* ---------- rodapé ---------- */
.rodape { padding: clamp(32px, 6vh, 64px) var(--gutter) clamp(26px, 4vh, 40px); background: #0a130f; border-top: 1px solid var(--ouro-linha); }
.rodape__grade { width: min(var(--conteudo), 100%); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.rodape__marca img { width: min(220px, 100%); height: auto; }
.rodape__marca p { color: var(--texto-suave); font-size: calc(var(--fs-corpo) * .9); margin-top: 12px; }
.rodape h4 { margin-bottom: 12px; }
.rodape nav ul { list-style: none; display: grid; gap: 7px; }
.rodape nav a { text-decoration: none; color: var(--texto-suave); }
.rodape nav a:hover { color: var(--ouro); }
.rodape__base { width: min(var(--conteudo), 100%); margin: clamp(22px, 4vh, 40px) auto 0; padding-top: 16px; border-top: 1px solid var(--ouro-linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: calc(var(--fs-corpo) * .82); color: var(--texto-suave); }

/* ============================================================================
   PÁGINAS
   ============================================================================ */

/* ---------- entrada (home) ---------- */
.entrada { align-items: stretch; }
.entrada .slide__conteudo { width: 100%; max-width: none; display: grid; grid-template-columns: clamp(330px, 33vw, 540px) 1fr; gap: clamp(20px, 4vw, 80px); align-items: center; padding-top: clamp(16px, 3.4vh, 40px); padding-bottom: clamp(16px, 3.4vh, 40px); }
.retabulo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.1vh, 14px); }
.retabulo__logo { width: 100%; max-height: 15vh; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)); }
.retabulo__lugar { width: 100%; font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .3em; text-transform: uppercase; color: var(--creme); }
.retabulo__lugar.filete::before, .retabulo__lugar.filete::after { max-width: 50px; }
.retabulo__lema { font-size: calc(var(--fs-lead) * 1.18); font-style: italic; line-height: 1.25; color: var(--creme); margin: 0; }
.retabulo__texto { font-size: calc(var(--fs-corpo) * .98); color: var(--texto-suave); margin: 0; max-width: 44ch; text-wrap: balance; }
.retabulo__placas { width: 100%; display: grid; gap: clamp(7px, 1.2vh, 12px); margin-top: clamp(4px, 1vh, 10px); }
.retabulo__dedicatoria { font-size: calc(var(--fs-corpo) * .88); font-style: italic; color: var(--texto-suave); margin: clamp(4px, 1vh, 10px) 0 0; }
.retabulo__dedicatoria b { color: var(--ouro); font-weight: 600; font-style: normal; }
.retabulo__versao { font: 500 calc(var(--fs-mini) * .95)/1 Cinzel, serif; letter-spacing: .14em; color: var(--texto-suave); text-transform: uppercase; }
.almanaque-canto { align-self: end; justify-self: end; max-width: 520px; text-align: right; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); padding-bottom: clamp(8px, 2vh, 24px); }
.almanaque-canto .olho { justify-content: flex-end; color: var(--ouro); }
.almanaque-canto p { font-size: calc(var(--fs-lead) * 1.02); font-style: italic; color: var(--creme); line-height: 1.35; margin: 0; transition: opacity .6s; min-height: 2.7em; }

/* a entrada cabe inteira na altura do palco, centralizada */
.entrada .slide__conteudo { min-height: 100%; align-content: center; }
.entrada .moldura { padding: clamp(40px, 6vh, 62px) clamp(28px, 2.6vw, 46px); }
.retabulo__placas .placa { min-height: clamp(36px, 4.4vh, 46px); padding-block: .55em; }
@media (max-height: 1000px) and (min-width: 761px) { .retabulo__placas > :nth-child(4) { display: none; } }

/* ---------- um dia no vale (tríptico) ---------- */
.triptico { --janela-altura: 50vh; --janela-proporcao: 1.3333333333; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.triptico .janela { width: min(100%, calc(var(--janela-altura) * var(--janela-proporcao))); }
.triptico .janela__imagem { aspect-ratio: 4 / 3; max-height: var(--janela-altura); }
.triptico .janela__hora { position: absolute; left: 6px; right: 6px; bottom: 6px; margin: 0; padding: 22px 12px 10px; color: var(--ouro); background: linear-gradient(transparent, rgba(12, 22, 17, .92)); white-space: nowrap; pointer-events: none; }

/* ---------- comparador captura × pintura ---------- */
.comparar { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--ouro-linha); --corte: 50%; user-select: none; }
.comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparar__antes { clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.comparar__linha { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; background: var(--ouro); transform: translateX(-1px); pointer-events: none; }
.comparar__linha::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--laca); color: var(--ouro); border: 1px solid var(--ouro); padding: 6px 10px; font: 600 14px/1 Georgia, serif; white-space: nowrap; }
.comparar input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparar__rotulo { position: absolute; top: 12px; padding: 4px 8px; background: rgba(10, 19, 14, .78); font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--creme); pointer-events: none; }
.comparar__rotulo--antes { left: 12px; }
.comparar__rotulo--depois { right: 12px; }

/* ---------- galeria de stills ---------- */
.stills { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 320px), 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.stills .janela__imagem { aspect-ratio: 16 / 9; padding: 4px; }
.stills figcaption { font-size: calc(var(--fs-corpo) * .82); margin-top: 6px; }

/* ---------- personagens ---------- */
.ficha-personagem { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3.6vw, 60px); align-items: start; }
.ficha-personagem__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ficha-personagem__fotos .janela__imagem { aspect-ratio: 3 / 4; background: radial-gradient(ellipse at 50% 40%, #efe3c8, #c2ad85); }
.ficha-personagem__fotos .janela__imagem img { object-fit: contain; }
.rotina { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--ouro-linha); }
.rotina > div { padding: 10px; border-right: 1px solid var(--ouro-linha); font-size: calc(var(--fs-corpo) * .84); line-height: 1.3; }
.rotina > div:last-child { border-right: 0; }
.rotina b { display: block; font: 600 var(--fs-mini)/1.2 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); margin-bottom: 5px; }
.dados-tripo { font-size: calc(var(--fs-corpo) * .85); }
.dados-tripo dt { font: 600 var(--fs-mini)/1.2 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); margin-top: 10px; }
.dados-tripo dd { margin: 3px 0 0; color: var(--texto-suave); }

/* ---------- almanaque ---------- */
.folheto { padding: clamp(18px, 2.4vw, 30px); background: linear-gradient(180deg, #f8f0dd, #ede0c2); color: #2a2418; border: 1px solid #c9b182; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); position: relative; }
.folheto::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(120, 90, 40, .3); pointer-events: none; }
.folheto h3 { font-family: Cinzel, serif; font-size: calc(var(--fs-h3) * .8); letter-spacing: .06em; text-align: center; margin-bottom: 4px; color: #3a2a12; }
.folheto__autor { text-align: center; font-style: italic; font-size: .85em; color: #6c5a3b; margin-bottom: 14px; }
.folheto__versos { font-size: calc(var(--fs-corpo) * 1.02); line-height: 1.45; text-align: center; font-style: italic; }
.folheto__versos p { margin: 0 0 .9em; }
.folheto__onde { font-size: .82em; color: #6c5a3b; border-top: 1px solid rgba(120, 90, 40, .3); padding-top: 10px; margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; }
.cordeis { columns: 3 300px; column-gap: clamp(14px, 2vw, 26px); }
.cordeis > * { break-inside: avoid; margin-bottom: clamp(14px, 2vw, 26px); }
.lapides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.lapide { padding: 18px 16px 16px; text-align: center; background: linear-gradient(180deg, #d9d2c3, #b9b09d); color: #2c2a24; border-radius: 46% 46% 4px 4px / 22% 22% 4px 4px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12), 0 6px 16px rgba(0, 0, 0, .25); }
.lapide b { display: block; font-family: Cinzel, serif; font-size: .82em; letter-spacing: .04em; line-height: 1.25; }
.lapide small { display: block; font-size: .78em; margin: 6px 0; color: #4b473d; }
.lapide p { font-size: .8em; line-height: 1.3; font-style: italic; margin: 0; }
.ficha { display: grid; gap: 6px; }
.ficha__cientifico { font-style: italic; color: var(--texto-suave); }

/* ---------- teia de talentos ---------- */
.teia { position: relative; border: 1px solid var(--ouro-linha); background: #0e1512; overflow: auto; max-height: 66vh; scrollbar-width: thin; scrollbar-color: var(--ouro-escuro) transparent; }
.teia svg { display: block; min-width: 900px; width: 100%; height: auto; }
.teia .no rect { fill: #17221c; stroke: #3f5340; stroke-width: 1; transition: fill .2s, stroke .2s; }
.teia .no text { fill: #e9dfc6; font: 600 12.5px Cormorant, serif; }
.teia .no .custo { fill: var(--ouro); font: 600 10px Cinzel, serif; }
.teia .no:hover rect, .teia .no.ativo rect, .teia .no:focus rect { fill: #23372a; stroke: var(--ouro); }
.teia .no { cursor: pointer; outline: none; }
.teia .fio { fill: none; stroke: #6c7a61; stroke-width: 1.4; }
.teia .raiz-titulo { fill: var(--ouro); font: 600 12px Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; }
.teia-ficha { min-height: 140px; }
.teia-ficha h3 { display: flex; align-items: center; gap: 10px; }
.teia-ficha img { width: 32px; height: 32px; image-rendering: pixelated; }

/* ---------- mapa ---------- */
.mapa-svg { position: relative; border: 1px solid var(--ouro-linha); background: #2c4a55; }
.mapa-svg svg { display: block; width: 100%; height: auto; }
.mapa-svg .terra { fill: #b9a876; stroke: #8a7a4a; stroke-width: 3; }
.mapa-svg .mata { fill: #4e6b3a; opacity: .55; }
.mapa-svg .vila { fill: #d8c690; stroke: #9a8650; stroke-width: 2; stroke-dasharray: 8 6; opacity: .9; }
.mapa-svg .rua { fill: none; stroke: #f0deb0; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.mapa-svg .rio { fill: none; stroke: #5a8fa6; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.mapa-svg .lugar circle { fill: var(--ouro); stroke: #1a1408; stroke-width: 3; cursor: pointer; transition: r .2s; }
.mapa-svg .lugar.previsto circle { fill: #c3b99f; stroke-dasharray: 3 3; }
.mapa-svg .lugar text { fill: #10170f; font: 600 30px Cormorant, serif; paint-order: stroke; stroke: rgba(245, 232, 200, .85); stroke-width: 6px; pointer-events: none; }
.mapa-svg .lugar:hover circle, .mapa-svg .lugar.ativo circle { fill: #fff3c4; }
.mapa-ficha { min-height: 150px; }

/* ---------- diário ---------- */
.dias { display: grid; gap: clamp(10px, 1.6vh, 18px); }
.dia { display: grid; grid-template-columns: clamp(92px, 9vw, 130px) minmax(0, 1fr) clamp(140px, 17vw, 260px); gap: clamp(14px, 2.2vw, 32px); align-items: center; padding: clamp(10px, 1.6vh, 18px) clamp(14px, 2vh, 22px); border: 1px solid var(--ouro-linha); background: var(--fundo-cartao); text-decoration: none; transition: border-color .2s, background .2s; }
.dia:hover { border-color: var(--ouro); background: var(--ouro-tenue); }
.dia__data { text-align: center; font-family: Cinzel, serif; color: var(--ouro); line-height: 1; }
.dia__data b { display: block; font-size: clamp(30px, 1.5vw + 2vh, 52px); font-weight: 500; }
.dia__data span { display: block; font-size: var(--fs-mini); letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; }
.dia h3 { margin-bottom: 6px; }
.dia p { margin: 0; color: var(--texto-suave); font-size: calc(var(--fs-corpo) * .94); }
.dia__img { aspect-ratio: 16 / 8; overflow: hidden; border: 1px solid var(--ouro-linha); }
.dia__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dia__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font: 500 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.slide--diario-resumo .cabeca { margin-bottom: 16px; }
.slide--diario-resumo .dias { gap: 10px; }
.slide--diario-resumo .dia { padding-block: 8px; grid-template-columns: clamp(68px, 7vw, 100px) minmax(0, 1fr) clamp(110px, 14vw, 210px); }
.slide--diario-resumo .dia__img { height: clamp(68px, 10vh, 108px); aspect-ratio: auto; }
.slide--diario-resumo .dia p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; }
.slide--diario-resumo .dia h3 { margin-bottom: 4px; }
.slide--diario-resumo .dia__meta { margin-top: 4px; }
.slide--jogar-convite .slide__conteudo--estreito { width: min(740px, 100%); }
.slide--jogar-convite .moldura { padding-block: clamp(52px, 8vh, 86px); }
@media (max-width: 600px) {
    .slide--diario-resumo .dia { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
    .slide--diario-resumo .dia__img { display: none; }
    .slide--jogar-convite .moldura { padding-inline: 30px; padding-block: 40px; }
}
.commits { list-style: none; display: grid; gap: 0; font-size: calc(var(--fs-corpo) * .9); }
.commits li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ouro-linha); }
.commits code { color: var(--ouro); }

/* ---------- texto em markdown (changelog) ---------- */
.markdown { font-size: calc(var(--fs-corpo) * .94); }
.markdown--colunas { columns: 2 340px; column-gap: clamp(20px, 3vw, 44px); }
.markdown ul { list-style: none; display: grid; gap: 10px; }
.markdown--colunas ul { display: block; }
.markdown--colunas li { margin-bottom: 10px; break-inside: avoid; }
.markdown li { position: relative; padding-left: 20px; }
.markdown li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border: 1px solid var(--ouro); transform: rotate(45deg); }
.markdown strong { color: var(--ouro-claro); font-weight: 600; }
.markdown code { color: var(--texto-suave); }
.markdown p { margin: 0 0 .7em; }

/* ---------- direção ---------- */
.principios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px) clamp(20px, 3vw, 48px); }
.principio { border-top: 1px solid var(--ouro-linha); padding-top: 14px; }
.principio h3 { font-size: calc(var(--fs-h3) * .9); margin-bottom: 8px; }
.principio p { color: var(--texto-suave); font-size: calc(var(--fs-corpo) * .95); margin: 0; }

/* ---------- alternância de idioma ---------- */
.sem-js [data-lingua="pt"] { display: block !important; }

/* ============================================================================
   MOVIMENTO
   ============================================================================ */
@keyframes kenburns { from { transform: scale(1.06) translate3d(-1%, 0, 0); } to { transform: scale(1.16) translate3d(1.2%, -1.2%, 0); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes desenhar { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes acender { from { opacity: 0; filter: drop-shadow(0 0 0 rgba(232, 196, 106, 0)) brightness(.6); } to { opacity: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)) brightness(1); } }
@keyframes respirar { 0%, 100% { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 0 rgba(232, 196, 106, 0)); } 50% { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(232, 196, 106, .28)); } }

.kenburns { animation: kenburns 28s ease-in-out infinite alternate; transform-origin: 60% 50%; will-change: transform; }
.entrada .moldura__trilho, .entrada .moldura__azulejo, .entrada .moldura__interna { stroke-dasharray: 100; animation: desenhar 1.8s cubic-bezier(.6, 0, .2, 1) both; }
.entrada .moldura__azulejo { animation-delay: .25s; }
.entrada .moldura__interna { animation-delay: .45s; }
.entrada .moldura__canto { animation: aparecer 1s .9s both; }
.entrada .moldura::before { animation: surgir 1s both; }
.entrada .retabulo__logo { animation: acender 1.4s .5s both, respirar 6s 2.4s ease-in-out infinite; }
.entrada .retabulo > :not(.retabulo__logo) { animation: surgir .9s both; }
.entrada .retabulo > :nth-child(2) { animation-delay: .9s; }
.entrada .retabulo > :nth-child(3) { animation-delay: 1.05s; }
.entrada .retabulo > :nth-child(4) { animation-delay: 1.2s; }
.entrada .retabulo__placas > * { animation: surgir .7s both; }
.entrada .retabulo__placas > :nth-child(1) { animation-delay: 1.35s; }
.entrada .retabulo__placas > :nth-child(2) { animation-delay: 1.45s; }
.entrada .retabulo__placas > :nth-child(3) { animation-delay: 1.55s; }
.entrada .retabulo__placas > :nth-child(4) { animation-delay: 1.65s; }
.entrada .retabulo__dedicatoria, .entrada .retabulo__versao { animation-delay: 1.85s !important; }
.entrada .almanaque-canto { animation: surgir 1.2s 2s both; }
.heroi-entrada > * { animation: surgir .9s both; }
.heroi-entrada > :nth-child(2) { animation-delay: .12s; }
.heroi-entrada > :nth-child(3) { animation-delay: .24s; }
.heroi-entrada > :nth-child(4) { animation-delay: .36s; }
.heroi-entrada > :nth-child(5) { animation-delay: .48s; }
.slide--download-centro .dividido { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.slide--download-centro .heroi-entrada { width: min(640px, 100%); text-align: center; }
.slide--download-centro .olho { justify-content: center; }
.slide--download-centro .lead { margin-inline: auto; }
.slide--download-centro .moldura { margin-inline: auto; }
.slide--download-centro .moldura .cartao__topo { text-align: left; }
.slide--download-centro .moldura .olho { justify-content: flex-start; }
.slide--requisitos .tabela tr:last-child :is(th, td) { border-bottom: 0; }
.slide--requisitos .nota-fonte { border-top: 0; padding-top: 0; margin-top: 12px; }

.revelar { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--atraso, 0s); }
.revelar.visivel { opacity: 1; transform: none; }
.sem-js .revelar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .revelar { opacity: 1; transform: none; }
}

/* ============================================================================
   RESPONSIVO
   ============================================================================ */
@media (max-width: 1280px) {
    .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grade-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
    :root { --header-h: 62px; }
    .navegacao { display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 50; background: #0f1a14; padding: 18px var(--gutter) 40px; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; }
    .menu-aberto .navegacao { display: flex; }
    .navegacao__grupo { border-bottom: 1px solid var(--ouro-linha); }
    .navegacao__grupo > summary { padding: 16px 0; font-size: 13px; }
    .navegacao__grupo > summary::after { display: none; }
    .navegacao__menu { position: static; box-shadow: none; border: 0; background: none; padding: 0 0 12px; min-width: 0; }
    .navegacao__menu::before { display: none; }
    .navegacao__menu a { padding: 10px 0; font-size: 18px; }
    .botao-menu { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: transparent; border: 1px solid var(--ouro-linha); color: var(--ouro); cursor: pointer; font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; }
    .botao-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
    .cabecalho__acoes { margin-left: auto; }
    .entrada .slide__conteudo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .entrada .moldura { width: min(520px, 100%); }
    .almanaque-canto { display: none; }
    .dividido, .dividido--imagem-esquerda, .dividido--lateral, .dividido--rotulo, .dividido--palco { grid-template-columns: minmax(0, 1fr); }
    .vitrine { grid-template-columns: minmax(0, 1fr); }
    .vitrine__lista { max-height: 300px; }
    .grade-4, .retratos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ficha-personagem { grid-template-columns: minmax(0, 1fr); }
    .ficha-personagem__fotos { grid-template-columns: repeat(2, minmax(0, 220px)); }
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .lapides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dia { grid-template-columns: clamp(80px, 12vw, 110px) minmax(0, 1fr); }
    .dia__img { display: none; }
}
@media (max-width: 760px) {
    :root { --pager-h: 50px; --gutter: 18px; }
    .slide--veu-esquerda .slide__fundo::after, .slide--veu-direita .slide__fundo::after, .slide--historia.slide--veu-esquerda .slide__fundo::after { background: linear-gradient(0deg, rgba(10,19,14,.92), rgba(10,19,14,.72)); }
    .teia svg { min-width: 760px; }
    .grade-2, .grade-3, .grade-4, .grade-5, .dividido--meio, .principios { grid-template-columns: minmax(0, 1fr); }
    .retratos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audio-com-acoes { width: 100%; }
    .audio-com-acoes .acoes { display: grid; grid-template-columns: minmax(0, 1fr); }
    .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .triptico { --janela-proporcao: 1.6; grid-template-columns: minmax(0, 1fr); }
    .triptico .janela__imagem { aspect-ratio: 16 / 10; }
    .rotina { grid-template-columns: minmax(0, 1fr); }
    .rotina > div { border-right: 0; border-bottom: 1px solid var(--ouro-linha); }
    .lapides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paginador { grid-template-columns: 1fr; }
    .paginador__rotulo { display: none; }
    .paginador__controles { justify-content: center; }
    .paginador__pontos { max-width: 52vw; }
    .cabecalho__acoes .placa span { display: none; }
    .cabecalho__acoes .placa { padding: .6em .8em; }
    .cabecalho__acoes .botao-conta { padding: 0 10px; }
    .cabecalho__acoes .botao-conta span { display: none; }
    .rodape__grade { grid-template-columns: minmax(0, 1fr); }
    .commits li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .dia { grid-template-columns: minmax(0, 1fr); }
    .dia__data { text-align: left; display: flex; align-items: baseline; gap: 10px; }
    .dia__data span { margin: 0; }
    .ficha-personagem__fotos { grid-template-columns: 1fr 1fr; }
    /* Celular: rápido e objetivo. Botões de ação só na primeira seção (e em formulários);
       Cookies e Chat moram no menu, e o rodapé fica só com as setas, centralizadas. */
    .palco > .slide:not(.entrada):not(.slide--jogar-convite) .acoes:not(:has([type="submit"])) { display: none; }
    .palco > .slide .cabeca + .placa, .palco > .slide .placa[data-detalhe] { display: none; }
    /* Introduções de até duas linhas (a primeira seção de cada página fica inteira). */
    /* Notas de rodapé e descrições de etapas saem para a seção caber. */
    .slide--teste-ia .nota-fonte, .animacoes__etapas p { display: none; }
    /* Áudio: a duração fica embaixo do play, liberando a largura para o texto. */
    /* Vale para todos os players do site (home, sons, trilha, moradores). */
    .quadro .palco .player { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto; align-items: start; column-gap: 10px; row-gap: 6px; }
    .quadro .palco .player__botao { grid-row: 1 !important; grid-column: 1 !important; }
    .quadro .palco .player__tempo { display: block !important; grid-row: 2 !important; grid-column: 1 !important; justify-self: center !important; font-size: 10px; }
    .quadro .palco .player__texto { grid-row: 1 / span 2 !important; grid-column: 2 !important; }
    /* Diário: mês e dia da semana numa linha, embaixo do número. */
    .palco [data-editorial] .dia { grid-template-columns: 58px minmax(0, 1fr); }
    .palco .dia__data { display: block; text-align: center; }
    .palco .dia__data span { margin-top: 4px; white-space: nowrap; font-size: 9px; letter-spacing: .06em; }
    /* Folhetos (cordéis): texto mais afastado da borda e cortado com reticências. */
    .palco [data-editorial] .folheto { padding: 16px 14px; }
    .palco [data-editorial] .folheto__onde > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    :where(.palco > .slide:not(:first-of-type)) .cabeca .lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .retabulo__texto { display: none; }
    .slide--mundo-abertura .acoes { display: none; }
    .palco > .slide .numeros { row-gap: 0; grid-auto-rows: 1fr; }
    .palco > .slide .numeros { border-top: 0; }
    /* Toda grade de números fica em 2 colunas; notas de fonte sem a linha acima. */
    .quadro .palco .numeros:not([style*="repeat(3"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .quadro .palco .numeros[style*="repeat(3"] > :nth-last-child(-n+3) { border-bottom: 0; }
    /* Fichas de espécie: nome, nome em inglês e nome científico em linhas próprias. */
    .palco .cartao:has(.ficha__cientifico) .cartao__topo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .palco .cartao:has(.ficha__cientifico) .cartao__topo > div { display: contents; }
    .palco .cartao:has(.ficha__cientifico) .cartao__topo h3 { order: 1; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .palco .cartao:has(.ficha__cientifico) .cartao__topo > .suave { order: 2; }
    .palco .cartao:has(.ficha__cientifico) .ficha__cientifico { order: 3; }
    .quadro .palco .nota-fonte { border-top: 0; padding-top: 0; }
    /* Olho longo: a primeira parte numa linha e o resto na de baixo, sem o ponto. */
    .quadro .olho--quebra .olho__sep { display: none; }
    .quadro .olho--quebra .olho__resto { display: block; }
    .palco > .slide .numeros > :nth-last-child(-n+2) { border-bottom: 0; }
    /* Convite final da home: moldura centralizada na tela, com um só botão (Jogar agora). */
    .palco > .slide.slide--jogar-convite { align-items: center; }
    .palco > .slide.slide--jogar-convite .acoes { display: flex !important; }
    .palco > .slide.slide--jogar-convite .acoes > :not(:first-child) { display: none; }
    .retabulo__dedicatoria span { display: block; }
    /* Texto (olho e título) sempre antes da mídia nas seções em duas colunas. */
    .palco > .slide:not(.entrada) > .slide__conteudo > .dividido > :has(> .cabeca, > .olho) { order: -1; }
    /* Menu do celular: Idioma, Som e Jogar como três botões iguais, lado a lado. */
    .quadro .navegacao .cabecalho__acoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .quadro .navegacao .cabecalho__sair { display: none; }
    .quadro .navegacao .cabecalho__acoes > * { width: 100%; min-width: 0; }
    .quadro .navegacao .cabecalho__acoes :is(.seletor-idioma > summary, .botao-som, .placa, .botao-conta) {
        width: 100%; height: 42px; min-height: 42px; padding: 0 8px; gap: 8px; justify-content: center;
        border: 1px solid var(--ouro-linha); background: transparent; color: var(--ouro); box-shadow: none; text-shadow: none;
        font: 600 11px/1 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase;
    }
    .quadro .navegacao .cabecalho__acoes :is(.seletor-idioma > summary, .botao-som, .placa, .botao-conta) svg { width: 16px; height: 16px; flex: 0 0 auto; }
    .quadro .navegacao .cabecalho__acoes .rotulo-celular { display: inline !important; }
    .quadro .navegacao .navegacao__grupo > summary { color: var(--ouro); }
    /* Item atual e hover com respiro: o fundo passa 12 px de cada lado, sem tirar o texto do alinhamento. */
    .quadro .navegacao .navegacao__menu a { padding: 10px 12px; margin-inline: -12px; }
    .quadro .navegacao .cabecalho__acoes .placa::before, .quadro .navegacao .cabecalho__acoes .placa::after { display: none; }
    /* A lista de idiomas abre dentro do menu, numa linha inteira abaixo dos três botões. */
    .quadro .navegacao .seletor-idioma { display: contents; }
    .quadro .navegacao .seletor-idioma__menu { position: static; order: 1; grid-column: 1 / -1; min-width: 0; padding: 4px 0 0; border: 0; background: none; box-shadow: none; }
    .quadro .navegacao .seletor-idioma__menu::before { display: none; }
    .quadro .navegacao .seletor-idioma::details-content { order: 1; grid-column: 1 / -1; }
    .quadro .navegacao .seletor-idioma__menu a { padding: 10px 12px; margin-inline: -12px; font-size: 18px; }
    .quadro .navegacao .seletor-idioma__menu .seletor-idioma__nota { margin-inline: 0; padding-inline: 0; }
    .quadro .navegacao .cabecalho__acoes :is(.seletor-idioma__codigo, .seletor-idioma__seta, .rotulo-desktop) { display: none !important; }
    .navegacao__utilidades { display: flex; gap: 10px; padding-top: 18px; }
    .navegacao__utilidades .placa { flex: 1; justify-content: center; }
    .navegacao__legal { display: block; margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--texto-suave); }
    .navegacao__legal a { color: var(--ouro); text-decoration: none; }
    /* Rodapé enxuto: logo centralizada, os três grupos em colunas e só a versão embaixo. */
    .quadro .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
    .quadro .rodape__marca { grid-column: 1 / -1; text-align: center; }
    .quadro .rodape__marca img { margin-inline: auto; }
    .quadro .rodape__marca p, .quadro .rodape__base > :not(:first-child) { display: none; }
    .quadro .rodape__grade nav li a { font-size: 15px; }
    .quadro .rodape__base { justify-content: center; text-align: center; }
    .paginador__utilidades { display: none; }
    .quadro .paginador { grid-template-columns: minmax(0, 1fr); }
    .quadro .paginador .paginador__pontos { max-width: 60vw; }
}
@media (max-height: 880px) and (min-width: 761px) {
    .retabulo__logo { max-height: 12vh; }
    .retabulo__placas > :nth-child(4) { display: none; }
    .cabeca { margin-bottom: clamp(14px, 2.6vh, 28px); }
    .triptico { --janela-altura: 42vh; }
}
@media (max-height: 720px) and (min-width: 761px) {
    :root { --header-h: 58px; --pager-h: 48px; }
    .slide__conteudo { padding-top: clamp(16px, 3.6vh, 34px); padding-bottom: clamp(16px, 3.6vh, 34px); }
    .cabeca { margin-bottom: 16px; }
    .placa { min-height: 40px; padding: .7em 1.2em; }
    .retabulo { gap: 6px; }
}
.nota-curta { font-size: .92em; margin: 0; }
.contador-linha { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ouro-linha); font-size: .92em; color: var(--texto-suave); }
.contador-linha b { font: 600 1.35em/1 Cinzel, serif; color: var(--ouro-claro); margin-right: 4px; }
/* a largura do retábulo da home, para cartões em destaque na entrada das páginas */
.moldura--retabulo { width: clamp(330px, 33vw, 540px); max-width: 100%; }

/* As peças (3D): a seção tem a altura da tela e a vitrine ocupa o que sobra do
   cabeçalho; o modelo estica e a lista rola dentro da própria coluna. */
@media (min-width: 761px) {
    .slide--vitrine { height: 100%; }
    .slide--vitrine .slide__conteudo { height: 100%; display: flex; flex-direction: column; padding-top: clamp(16px, 3vh, 40px); padding-bottom: clamp(16px, 3vh, 40px); }
    .slide--vitrine .cabeca { flex: none; margin-bottom: clamp(12px, 2.2vh, 26px); }
    .slide--vitrine .cabeca h2 { margin-bottom: clamp(6px, 1.2vh, 14px); }
    .slide--vitrine .vitrine { flex: 1; min-height: 0; align-items: stretch; }
    .slide--vitrine .visualizador { display: flex; flex-direction: column; min-height: 0; }
    .slide--vitrine .visualizador model-viewer { flex: 1; height: auto; min-height: 0; }
    .slide--vitrine .vitrine__painel { display: flex; flex-direction: column; min-height: 0; }
    .slide--vitrine .vitrine__lista { flex: 1; min-height: 0; max-height: none; }
    .slide--vitrine .vitrine__info { flex: none; }
    .slide--vitrine .vitrine__info h3 { margin-top: 10px; }
    /* o uso da peça em poucas linhas, para a lista não sumir */
    .slide--vitrine [data-vitrine-uso] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 0; }
}
@media (min-width: 761px) and (max-height: 860px) {
    .slide--vitrine .cabeca .lead { font-size: calc(var(--fs-lead) * .9); }
    .slide--vitrine .vitrine__info h3 { margin: 6px 0 2px; }
    .slide--vitrine .vitrine__info p { margin: 2px 0; font-size: .92em; }
    .slide--vitrine [data-vitrine-uso] { -webkit-line-clamp: 2; }
    .slide--vitrine .filtro { padding-block: 5px; }
}

/* Vitrine: setas no quadro do modelo, e o modo com a lista num modal (a coluna fica para os dados). */
.visualizador__seta {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
    background: rgba(12, 22, 17, .55); border: 1px solid var(--ouro-linha); color: var(--ouro);
    transition: background .2s, border-color .2s;
}
.visualizador__seta:hover, .visualizador__seta:focus-visible { background: rgba(12, 22, 17, .85); border-color: var(--ouro); color: var(--ouro-claro); }
.visualizador__seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.visualizador__seta--anterior { left: 12px; }
.visualizador__seta--proxima { right: 12px; }
.visualizador__posicao { font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .12em; color: var(--ouro); }
.vitrine--modal .vitrine__painel { display: flex; flex-direction: column; gap: 14px; }
.vitrine__abrir { justify-content: center; cursor: pointer; }
.vitrine__acoes { margin-top: 0; margin-bottom: 12px; gap: 8px; }
.vitrine__acoes .placa { flex: 1; padding-inline: 12px; font-size: var(--fs-mini); letter-spacing: .08em; }
.slide--vitrine .cabeca, .slide--vitrine .lead { max-width: none; }
@media (min-width: 1100px) {
    .slide--vitrine .lead { white-space: nowrap; text-wrap: nowrap; }
}
.slide--almanaque .cabeca { max-width: none; margin-bottom: 18px; }
.slide--almanaque .grade { gap: 22px; }
.slide--almanaque .cartao, .slide--almanaque .folheto { padding: 18px; line-height: 1.35; }
.slide--almanaque .grade p { margin-bottom: .6em; }
.slide--almanaque .grade p:last-child { margin-bottom: 0; }
.slide--almanaque .folheto__versos { line-height: 1.35; }
.slide--almanaque .acoes { margin-top: 20px; }
.vitrine__abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vitrine--modal .vitrine__info { border-top: 1px solid var(--ouro-linha); padding-top: 4px; }
.vitrine--modal .vitrine__info h3 { font-size: calc(var(--fs-h3) * 1.15); }
.vitrine__modal {
    width: min(1100px, 92vw); max-height: 86vh; padding: clamp(18px, 3vh, 30px) clamp(18px, 2.4vw, 34px);
    background: #15231c; color: var(--texto); border: 1px solid var(--ouro-linha); box-shadow: var(--sombra);
    display: none; flex-direction: column; gap: 14px; overflow: hidden;
}
.vitrine__modal[open] { display: flex; }
.vitrine__modal::backdrop { background: rgba(6, 12, 9, .72); }
.vitrine__modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vitrine__modal-topo h3 { margin: 0; }
.vitrine__fechar { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--texto-suave); opacity: .75; cursor: pointer; transition: color .2s, opacity .2s; }
.vitrine__fechar:hover, .vitrine__fechar:focus-visible { color: var(--ouro); opacity: 1; }
.vitrine__fechar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.vitrine__modal .filtros { margin: 0; }
.vitrine__modal .vitrine__lista { flex: 1; min-height: 0; max-height: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; align-content: start; }
/* no modal, cada peça em linhas que não quebram: nome e triângulos, e um trecho do prompt */
.vitrine__item-detalhe { display: none; }
.vitrine__modal .vitrine__item { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.vitrine__modal .vitrine__item b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitrine__modal .vitrine__item small { white-space: nowrap; }
.vitrine__modal .vitrine__item-detalhe { display: block; grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8em; font-style: italic; color: var(--texto-suave); }
@media (max-width: 1100px) { .vitrine__modal .vitrine__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vitrine__modal .vitrine__lista { grid-template-columns: minmax(0, 1fr); } }
.vitrine__prompt { margin-top: 14px; }
.vitrine__prompt .olho { margin-bottom: 6px; }
.vitrine__prompt p:last-child { margin: 0; }
/* texto que não quebra linha: corta com reticências (o title mostra inteiro) */
.linha-unica { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Teia de talentos: a seção tem a altura da tela, a teia (em colunas) ocupa a largura e a
   altura que sobram, e a ficha do nó abre num modal. */
/* a moldura abraça o desenho; ele cresce até bater na largura ou na altura que sobram */
.teia--colunas { max-height: none; overflow: hidden; padding: clamp(10px, 1.6vh, 18px); }
.teia--colunas svg { min-width: 0; height: auto; width: min(calc(100cqw - 2 * clamp(10px, 1.6vh, 18px) - 2px), calc((100cqh - 2 * clamp(10px, 1.6vh, 18px) - 2px) * var(--proporcao))); }
.teia-rodape { margin: 10px 0 0; font-size: .9em; }
@media (min-width: 761px) {
    .slide--teia { height: 100%; }
    .slide--teia .slide__conteudo { height: 100%; display: flex; flex-direction: column; padding-top: clamp(16px, 3vh, 40px); padding-bottom: clamp(16px, 3vh, 40px); }
    .slide--teia .cabeca { flex: none; max-width: none; margin-bottom: clamp(12px, 2.2vh, 24px); }
    .slide--teia .cabeca h2 { margin-bottom: clamp(6px, 1.2vh, 14px); }
    .slide--teia .teia-area { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
    /* a área da teia é o contêiner: 100cqh é a altura que ela tem para o desenho */
    .slide--teia .teia-pista { flex: 1; min-height: 0; container-type: size; display: flex; align-items: center; }
    .slide--teia .teia { width: fit-content; margin-inline: auto; }
}
@media (max-width: 760px) { .teia--colunas { overflow: auto; display: block; } .teia--colunas svg { width: 1100px; height: auto; max-width: none; } }
.ficha-modal {
    width: min(460px, 92vw); padding: clamp(22px, 3vh, 32px) clamp(22px, 2.4vw, 34px);
    background: #15231c; color: var(--texto); border: 1px solid var(--ouro-linha); box-shadow: var(--sombra);
}
.ficha-modal::backdrop { background: rgba(6, 12, 9, .66); }
.ficha-modal__fechar { position: absolute; top: 12px; right: 12px; }
.ficha-modal .teia-ficha h3 { padding-right: 44px; }

/* O menu do retábulo (Jogar): ícone e uma linha por botão. */
.menu-retabulo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vh, 24px) clamp(18px, 2.4vw, 36px); }
.menu-retabulo__item { display: flex; gap: 14px; align-items: flex-start; }
.menu-retabulo__item svg { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke: var(--ouro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.menu-retabulo__item .versalete { color: var(--ouro); margin: 0 0 2px; }
.menu-retabulo__item .suave { margin: 0; font-size: .95em; }
@media (max-width: 760px) { .menu-retabulo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* O tutorial do Pedro (Jogar): os nove passos em 3 × 3, numa tela. */
.passos-grade { list-style: none; margin: clamp(10px, 2vh, 22px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.8vh, 18px) clamp(14px, 1.6vw, 24px); max-width: 1480px; }
.passos-grade li { display: flex; gap: 14px; align-items: flex-start; padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1.2vw, 18px); background: rgba(10, 18, 14, .62); border: 1px solid var(--ouro-linha); backdrop-filter: blur(2px); }
.passos-grade__num { flex: none; font: 600 clamp(22px, 3.2vh, 32px)/1 Cinzel, serif; color: var(--ouro); min-width: 1.1em; }
.passos-grade li > div { min-width: 0; flex: 1; }
.passos-grade .passos-grade__icone { align-self: center; width: 30px; height: 30px; opacity: .85; }
.passos-grade .versalete { color: var(--ouro-claro); margin: 2px 0 4px; font-size: .82em; }
/* blocos iguais: todas as linhas da grade com a mesma altura e o texto sempre em 2 linhas */
.passos-grade { grid-auto-rows: 1fr; }
.passos-grade p:last-child { margin: 0; font-size: .9em; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.8em; }
@media (max-width: 1100px) { .passos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .passos-grade { grid-template-columns: minmax(0, 1fr); } }

/* Controles (Como jogar): ação e teclas numa linha. */
.tabela--teclas th { width: 42%; white-space: nowrap; vertical-align: middle; }
.tabela--teclas th, .tabela--teclas td { padding-top: clamp(6px, 1.1vh, 11px); padding-bottom: clamp(6px, 1.1vh, 11px); }
.tabela--teclas .teclas { display: flex; flex-wrap: wrap; gap: 4px; }
.tabela--teclas tr { cursor: help; }

/* Texto cortado em N linhas (o title traz o texto inteiro). */
.corta-2, .corta-3, .corta-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.corta-2 { -webkit-line-clamp: 2; }
.corta-3 { -webkit-line-clamp: 3; }
.corta-4 { -webkit-line-clamp: 4; }

/* Direção: os cursores do jogo; cada cartão usa o próprio cursor, e o botão, a mão. */
.cursores { grid-auto-rows: 1fr; }
.cursor-amostra { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.6vw, 20px); padding: clamp(12px, 1.8vh, 20px) clamp(14px, 1.6vw, 22px); transition: border-color .2s, background .2s; }
.cursor-amostra:hover { border-color: var(--ouro); background: var(--ouro-tenue); }
.cursor-amostra__figuras { display: flex; gap: 4px; padding: 6px; background: #0a110d; border: 1px solid var(--ouro-linha); }
.cursor-amostra__figuras img { display: block; width: clamp(44px, 3.6vw, 56px); height: auto; }
.cursor-amostra__texto { display: grid; gap: 2px; min-width: 0; }
.cursor-amostra__nome { font-size: calc(var(--fs-h3) * .9); line-height: 1.2; }
.cursor-amostra__nota { font-size: .9em; line-height: 1.3; min-height: 2.6em; }
.cursor-amostra__nome .olho { display: inline; margin: 0 0 0 8px; font-size: .5em; }
.cursor-amostra__clique { justify-self: start; margin-top: 6px; padding: 5px 12px; font: 600 var(--fs-mini)/1.2 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ouro); background: none; border: 1px solid var(--ouro-linha); }
.cursor-amostra__clique:hover { border-color: var(--ouro); background: var(--ouro-tenue); }
/* Dicas (Como jogar): 4 × 3 numa tela. */
.dicas-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vh, 22px) clamp(16px, 1.8vw, 28px); }
@media (max-width: 1100px) { .dicas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dicas-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 860px) and (min-width: 761px) { .dicas-grade .corta-4 { -webkit-line-clamp: 3; } .dicas-grade { row-gap: 10px; } .dicas-grade li { padding-top: 6px !important; } }
@media (min-width: 761px) { .slide--vitrine .vitrine ~ .acoes { flex: none; margin-top: clamp(10px, 1.8vh, 20px); } }

/* Changelog: o resumo do dia em blocos iguais (ícone, título e uma frase de até 2 linhas). */
.mudancas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(10px, 1.8vh, 18px) clamp(18px, 2vw, 32px); }
.mudancas li { display: flex; gap: 14px; align-items: flex-start; padding: clamp(10px, 1.6vh, 16px) 0; }
.icone { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--ouro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mudancas .icone { margin-top: 2px; }
.mudancas b { display: block; color: var(--ouro-claro); font-weight: 600; }
.mudancas p { margin: 3px 0 0; font-size: .95em; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.8em; }
.slide--papel .mudancas b { color: var(--ouro-escuro); }
@media (max-width: 760px) { .mudancas { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
.fala-original { display: block; margin-top: 4px; font-size: .88em; font-style: italic; color: var(--texto-suave); }

/* ---------- chinês ----------
   As fontes do site não têm caracteres chineses: os ideogramas vêm de uma fonte song (serifada)
   do sistema ou do Noto Serif SC, e só eles (unicode-range), sem trocar o latim. O chinês não
   tem itálico de verdade (o navegador só inclina) e não leva o espaçamento largo das versaletes. */
@font-face { font-family: Cinzel; src: local('Noto Serif SC'), local('Noto Serif CJK SC'), local('Source Han Serif SC'), local('Songti SC'), local('STSong'), local('Microsoft YaHei'); font-weight: 400 900; unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: Cormorant; src: local('Noto Serif SC'), local('Noto Serif CJK SC'), local('Source Han Serif SC'), local('Songti SC'), local('STSong'), local('Microsoft YaHei'); font-weight: 300 700; unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
:lang(zh) *:lang(zh) { font-style: normal !important; }
:lang(zh) :is(.olho, .versalete, .navegacao__grupo > summary, .placa, .etiqueta, .paginador__rotulo, .filtro, .cartao__num, .numero__rotulo, .tempo__quando, h4) { letter-spacing: .06em; }
:lang(zh) body { line-height: 1.75; }

/* A rolagem sobreposta deixa a imagem aparecer sob o trilho. */
.palco.palco--scroll-sobreposto { scrollbar-width: none; }
.palco.palco--scroll-sobreposto::-webkit-scrollbar { display: none; width: 0; }
.scroll-sobreposto { position: fixed; z-index: 25; width: 14px; display: flex; flex-direction: column; background: transparent; }
.scroll-sobreposto button { background: transparent; border: 0; color: var(--ouro); font: 16px/1 Arial, sans-serif; padding: 0; height: 18px; cursor: pointer; }
.scroll-sobreposto__trilho { flex: 1; min-height: 0; position: relative; background: transparent; }
.scroll-sobreposto__barra { position: absolute; top: 0; left: 4px; width: 6px; border-radius: 6px; background: var(--ouro); cursor: grab; touch-action: none; }
body:has(dialog[open]) .scroll-sobreposto, .menu-aberto .scroll-sobreposto { visibility: hidden; }
.tecla-com-condicao { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tecla-com-condicao kbd { display: block; width: 52px; padding: 9px 0; font-size: 20px; text-align: center; }
.tecla-com-condicao small { font-size: 12px; line-height: 1.1; color: var(--texto-suave); }
.dica h3 { display: flex; gap: 8px; align-items: center; font-size: 17px; line-height: 1.2; }
.dica h3 .icone { width: 18px; height: 18px; flex: none; color: var(--ouro); }
.dica p { font-size: 16px; line-height: 1.35; height: 2.7em; margin: 7px 0; }
.dica__titulo { display: flex; gap: 8px; align-items: center; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.dica__titulo:hover span { text-decoration: underline; text-underline-offset: 3px; }
.detalhe-modal { width: min(640px, 90vw); max-height: 85dvh; overflow: auto; background: var(--laca); color: var(--texto); padding: 28px; border: 1px solid var(--ouro-linha); }
.detalhe-modal::backdrop { background: rgba(0, 0, 0, .7); }
.detalhe-modal h2 { font-size: 28px; margin-bottom: 16px; padding-right: 32px; }
.detalhe-modal p { font-size: 18px; }
.slide--comparacao .cabeca, .slide--comparacao .lead { max-width: none; }
.slide--comparacao .lead { font-size: 16px; }
.slide--comparacao .grade { gap: 14px 24px; }
.slide--comparacao .comparar { height: clamp(100px, calc((100dvh - var(--header-h) - var(--pager-h) - 280px) / 2), 290px); aspect-ratio: auto; }
.slide--comparacao figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 5px; font-size: 14px; }
.carrossel__pagina { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; }
.carrossel .janela__imagem { aspect-ratio: auto; height: clamp(90px, 20vh, 200px); }
.carrossel figcaption { margin-top: 5px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrossel__controles { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 12px; color: var(--ouro); font-size: 14px; }
.carrossel__controles button { width: 36px; height: 32px; }
.slide--roadmap .cabeca, .slide--roadmap .lead { max-width: none; }
.slide--roadmap .lead { font-size: 18px; }
.carrossel--roadmap .carrossel__pagina { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; min-height: 300px; }
.carrossel--roadmap .cartao { padding: clamp(14px, 2vh, 22px); }
.carrossel--roadmap .cartao__topo { align-items: flex-start; gap: 10px; }
.carrossel--roadmap .cartao h3 { line-height: 1.25; }
.carrossel--roadmap .cartao p { margin-bottom: 0; line-height: 1.35; }
@media (max-width: 760px) {
    .slide--roadmap .slide__conteudo { padding-block: 12px; }
    .slide--roadmap .cabeca { margin-bottom: 12px; }
    .slide--roadmap .lead { font-size: 16px; }
    .carrossel--roadmap .carrossel__pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carrossel--roadmap .cartao__topo { flex-direction: column; gap: 4px; margin-bottom: 6px; }
    .carrossel--roadmap .cartao { padding: 8px; }
    .carrossel--roadmap .cartao h3 { font-size: 15px !important; margin: 0; min-height: 2.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .carrossel--roadmap .etiqueta { font-size: 9px; padding: 3px 5px; }
    .carrossel--roadmap .cartao p { font-size: 15px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
.slide--moradores-intro .lead { font-size: 16px; line-height: 1.35; max-width: none; text-wrap: pretty; }
@media (min-width: 1100px) { .slide--comparacao .lead { white-space: nowrap; text-wrap: nowrap; } }
@media (max-width: 760px) {
    .carrossel__pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carrossel .janela__imagem { height: 100px; }
    .slide--comparacao .comparar { height: 200px; }
}
@container quadro-chat (max-width: 1000px) { .slide--comparacao .lead { white-space: normal; } }

@media (min-width: 1100px) {
    .slide--moradores-intro .retratos { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 16px; }
}
@container quadro-chat (max-width: 1000px) {
    .slide--moradores-intro .retratos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .slide--moradores-intro .retrato__foto { max-height: 16vh; }
}

/* /jogar: duas builds lado a lado (padrão e edição Tripothon) */
.slide--download-duplo .heroi-entrada { width: min(980px, 100%); }
.jogar-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: stretch; }
.jogar-builds .moldura, .jogar-builds .pilha { height: 100%; }
.placa__tamanho::before { content: ' · '; }
@media (max-width: 760px) { .jogar-builds { grid-template-columns: minmax(0, 1fr); } }
.detalhe-modal__navegacao { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 16px 0; color: var(--ouro); }
[data-navegacao-integrada] > .carrossel__controles .paginador__seta,
.editorial-controles[data-navegacao-integrada] > button,
[data-navegacao-integrada] [data-mundo-ir],
[data-navegacao-integrada] [data-vitrine-ir] { display: none; }
.editorial-midia + .editorial-controles { grid-column: 2; }
.navegacao-carregando { position: relative; }
.navegacao-carregando::after, .carga-girando { content: ''; display: inline-block; width: 26px; height: 26px; border: 2px solid var(--ouro-linha); border-top-color: var(--ouro); border-radius: 50%; animation: carga-girar .8s linear infinite; }
.navegacao-carregando::after { position: absolute; left: calc(50% - 13px); top: calc(50% - 13px); }
@keyframes carga-girar { to { transform: rotate(360deg); } }
@container quadro-chat (max-width: 760px) { .editorial-midia + .editorial-controles { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .carga-girando, .navegacao-carregando::after { animation-duration: 2s; } }
.visualizador__carga { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; background: rgba(12, 22, 17, .8); padding: 24px; text-align: center; }
.visualizador__carregando { display: flex; gap: 12px; align-items: center; justify-content: center; color: var(--ouro); }
.convite-navegacao.com-colecao { visibility: hidden; }
/* Indicador da troca de página: só aparece se a espera passar de ~300 ms (o atraso é da própria animação). */
.pagina-carregando { display: none; position: fixed; inset: 0; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--ouro); background: rgba(12, 22, 17, .34); font: 600 var(--fs-mini, .78rem)/1 Cinzel, serif; letter-spacing: .32em; text-transform: uppercase; pointer-events: none; }
html[aria-busy="true"] .pagina-carregando { display: flex; opacity: 0; animation: pagina-carregando-entrar .35s ease .3s forwards; }
@keyframes pagina-carregando-entrar { to { opacity: 1; } }
.pagina-carregando__losango { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--ouro); transform: rotate(45deg); animation: pagina-carregando-pulso 1.8s ease-in-out infinite; }
.pagina-carregando__losango::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--ouro-linha); }
.pagina-carregando__losango::after { content: ''; position: absolute; inset: 8px; background: var(--ouro); }
@keyframes pagina-carregando-pulso { 0%, 100% { opacity: .55; transform: rotate(45deg) scale(.94); } 50% { opacity: 1; transform: rotate(45deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .pagina-carregando__losango { animation: none; } }

/* Dia sem miniatura (ou com a imagem quebrada): moldura com um losango em vez de uma caixa em branco */
.dia__img--vazia { background: var(--fundo-cartao); min-height: 64px; position: relative; }
.dia__img--vazia::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid var(--ouro); transform: rotate(45deg); opacity: .7; }