/* A sala e o capítulo, numa cena só: a foto do hero vira desenho, a moldura
   se forma em volta dele e ele segue como o quadro do capítulo ("Um dia de
   consultório."). Tudo aqui começa com .capitulo / .cap-. O
   relógio, o desenho e a abertura estão em capitulo.js. Portado do protótipo
   com a caixa de rolagem trocada pela página: cqh → vh, cqi → vw, @container → @media.

   Computador (tela deitada, mais de 760 px): a seção começa uma tela ACIMA de
   onde apareceria (por cima do hero) e só mostra o que está abaixo dele
   (clip-path): é a cortina de sempre, a borda creme subindo sobre a foto. O
   palco (.cap-fixo) fica preso no topo, na largura toda, desde o primeiro
   pixel; nele, o quadro mora na coluna da direita e, na abertura, o JS o
   estica por transform até cobrir a tela, casado com a foto, e o traz de volta
   ao lugar enquanto a moldura se forma. O título e os passos rolam à esquerda,
   um por tela, por cima do palco.
   Celular (até 760 px) e tela em pé: a seção vem depois do hero, como as
   outras; cada passo com o seu quadro em cima do texto ("toca ao aparecer").
   O layout depende de .cap-js, que um script de uma linha no index.html põe
   antes da primeira pintura (a altura da página não muda quando o JS chega)
   e tira se capitulo.js não tiver rodado até o DOMContentLoaded.
   Sem JS: só o texto, inteiro, depois do hero. */
.capitulo {
  --h: max(100vh, 680px); /* a altura do hero: .cena tem 100vh e no mínimo 680px */
  --cap-topo: 64px; /* a barra fixa, já com fundo (.topo.rolado: 10 + 44 + 10; com o menu à mostra, 68) */
  --cap-rotulo: #4c584a; --cap-pac: #8a4424; --cap-borda: rgba(31, 42, 32, .16);
  /* a margem do trilho e o fio do dia: onde o texto começa (F) e onde o fio corre (X), a partir da borda do trilho */
  --cap-margem: clamp(20px, 4vw, 48px); --fio-F: 84px; --fio-X: 30px;
  padding: 0 0 clamp(40px, 8vh, 96px);
  color: var(--tinta); background: var(--creme);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Acima de 1100 px o menu aparece na barra e ela fica com 68 px (estilo.css). */
@media (min-width: 1101px) { .capitulo { --cap-topo: 68px; } }

/* Título do capítulo (no celular e sem JS: centrado, em cima dos passos) */
.cap-cabeca { padding: clamp(64px, 14vh, 160px) 24px 8px; text-align: center; }
.cap-cabeca h2 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.cap-cabeca p { margin: 0; font-size: 17px; color: var(--tinta-media); }

/* Capítulo: preso na tela */
.cap-trilho {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: clamp(28px, 4vw, 64px); padding: 0 var(--cap-margem);
  /* Em tela alta e larga (3440×1440) o quadro cresce com a altura da janela. */
  max-width: max(1680px, calc((100vh - var(--cap-topo)) * 1.6)); margin: 0 auto;
}
/* O palco: preso no topo, na largura do trilho, com as mesmas colunas (subgrid); o quadro na da direita,
   no meio da faixa entre a barra e o pé da tela. Por baixo do texto (que fica na .cap-coluna). */
.cap-fixo {
  grid-column: 1 / -1; grid-row: 1; align-self: start; position: sticky; top: 0; z-index: 1;
  height: 100vh; box-sizing: border-box; padding-top: var(--cap-topo);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-columns: subgrid; column-gap: inherit;
  align-items: center; pointer-events: none;
}
.cap-coluna { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.cap-passos { list-style: none; margin: 0; padding: 0; }
.cap-passo { position: relative; min-height: calc(100vh - var(--cap-topo)); display: flex; align-items: center; padding: 32px 0 32px var(--fio-F); }
/* Um respiro entre "23:58" e "Outra semana": é nessa rolagem que a noite vira
   manhã no desenho (a virada, em capitulo.js). Só com o desenho preso ao lado. */
.cap-js .cap-passo[data-passo="4"] { margin-top: 35vh; }
.cap-texto { position: relative; max-width: 420px; }

/* O fio que brota (proposta B do mockup de 26/09, trocou a roda em 01/10): um fio de nanquim corre pela margem
   da coluna e cresce com a rolagem até o meio da tela; em cada passo brota uma folha (capitulo.js põe os SVG
   dentro de .cap-texto). Murcha às 21:00 e às 23:58, volta a brotar com o Caderninho e termina em flor.
   Só transform e opacity, no compositor, com animation-timeline. Sem ele (Firefox estável) e com movimento
   parado (data-movimento="pausado", posto no <head> antes da primeira pintura) o fio fica inteiro e as folhas
   abertas: é o estado de base, e as animações só entram em cima dele. */
.cap-dia { position: relative; }
.cap-fio { display: none; }
.cap-js .cap-fio { display: block; position: absolute; top: 18vh; bottom: 30vh; left: calc(var(--fio-X) - 20px); width: 40px; pointer-events: none; view-timeline: --cap-fio block; }
.cap-fio-janela { position: absolute; inset: 0; overflow: hidden; }
.cap-fio-desenho { position: absolute; inset: 0; }
.cap-fio-desenho svg { display: block; width: 100%; height: 100%; }
.cap-fio-ponta { display: none; position: absolute; inset: 0; }
.cap-fio-ponta::before { content: ""; position: absolute; top: -5px; left: 15px; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--tinta); }
.cap-folha { position: absolute; top: 2px; left: calc(var(--fio-X) - var(--fio-F)); width: 54px; height: 34px; margin-top: -17px; transform-origin: 0 50%; transform: var(--gira); pointer-events: none; }
.cap-folha svg { display: block; width: 100%; height: 100%; overflow: visible; }
@supports (animation-timeline: view()) {
  :root:not([data-movimento="pausado"]) .cap-js .cap-fio-janela, :root:not([data-movimento="pausado"]) .cap-js .cap-fio-desenho, :root:not([data-movimento="pausado"]) .cap-js .cap-fio-ponta {
    animation: linear both; animation-timeline: --cap-fio; animation-range: cover 50vh cover calc(100% - 50vh);
  }
  :root:not([data-movimento="pausado"]) .cap-js .cap-fio-janela { animation-name: cap-fio-janela; }
  :root:not([data-movimento="pausado"]) .cap-js .cap-fio-desenho { animation-name: cap-fio-desenho; }
  :root:not([data-movimento="pausado"]) .cap-js .cap-fio-ponta { display: block; animation-name: cap-fio-ponta; }
  :root:not([data-movimento="pausado"]) .cap-js .cap-folha { animation: cap-brota linear both; animation-timeline: view(); animation-range: cover 22% cover 46%; }
}
@keyframes cap-fio-janela { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes cap-fio-desenho { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cap-fio-ponta { from { transform: none; } to { transform: translateY(100%); } }
@keyframes cap-brota { from { opacity: 0; transform: var(--gira) scale(.05); } 35% { opacity: 1; } to { opacity: 1; transform: var(--gira) scale(1); } }
.cap-slot { display: none; }

/* Texto: tinta sobre creme, fundo fixo */
.cap-hora, .cap-fala figcaption {
  margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cap-rotulo); font-variant-numeric: tabular-nums;
}
.cap-hora { margin-bottom: 12px; }
.cap-frase { margin: 0; font-size: clamp(26px, 2.9vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.cap-seg { display: block; margin-top: .22em; }
.cap-linha { margin: 12px 0 0; font-size: 18px; line-height: 1.45; max-width: 34ch; color: var(--tinta-media); text-wrap: pretty; } /* segunda frase, que entra quando a pílula acende */
.cap-conversa { display: grid; gap: 18px; margin: 0; }
.cap-trecho { gap: 14px; margin-top: 22px; } /* 14:00: o trecho da sessão, embaixo da frase */
.cap-fala { margin: 0; }
/* Falas em balões, no traço das cenas: linha parada de nanquim, borda um pouco torta, miolo de aguada.
   Helena à esquerda, em terra; você à direita, em sálvia. O rabinho são duas bordas de um quadrado girado. */
.cap-fala:not(.cap-fala-pac) { justify-self: end; }
.cap-fala:not(.cap-fala-pac) figcaption { text-align: right; margin-right: 6px; }
.cap-fala figcaption { margin-left: 6px; margin-bottom: 6px; }
.cap-fala blockquote {
  --cap-miolo: #d9e2d3; position: relative; padding: 10px 15px 11px;
  border: 1.5px solid var(--tinta); border-radius: 20px 26px 22px 18px / 18px 22px 26px 20px;
  background: linear-gradient(170deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), var(--cap-miolo);
}
.cap-fala-pac blockquote { --cap-miolo: #f0e0d2; }
.cap-fala blockquote::after {
  content: ""; position: absolute; bottom: -7.5px; right: 20px; width: 12px; height: 12px; background: var(--cap-miolo);
  border-right: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); transform: rotate(45deg) skew(-8deg, -8deg);
}
.cap-fala-pac blockquote::after { right: auto; left: 20px; transform: rotate(45deg) skew(8deg, 8deg); }
.cap-ficticia {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; margin-left: 4px; border-radius: 999px;
  border: 1px solid rgba(31, 42, 32, .28); background: rgba(255, 255, 255, .5); vertical-align: 1px;
  font-size: 12px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--tinta-media);
}
.cap-fala figcaption b { font-weight: 500; }
.cap-fala .cap-pac { color: var(--cap-pac); }
.cap-fala blockquote { margin: 0; }
.cap-fala p { margin: 0; font-size: 18px; line-height: 1.4; max-width: 30ch; text-wrap: pretty; }
.cap-consent { display: flex; gap: 10px; align-items: center; margin: 22px 0 0; font-size: 15px; font-weight: 500; }
.cap-consent svg { width: 22px; height: 22px; flex: none; overflow: visible; }
.cap-consent rect { fill: none; stroke: var(--tinta); stroke-width: 1.4; }
.cap-consent path { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cap-nota { margin: 20px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--tinta-media); }
.cap-nota a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cap-nota a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 2px; }
.cap-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Falas entram com a rolagem (só com capitulo.js rodando; o p de cada uma vai no style, por capitulo.js).
   cap-solta: a rolagem parou com ela no meio, e ela termina de entrar sozinha. */
.cap-anda .cap-entra { opacity: 0; transform: translateX(-16px); }
.cap-anda .cap-entra.cap-vista { opacity: 1; transform: none; }
.cap-anda .cap-entra.cap-solta { transition: opacity 300ms var(--saida), transform 300ms var(--saida); }
.cap-anda .cap-consent path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 400ms var(--saida) 100ms; }
.cap-anda .cap-consent.cap-vista path { stroke-dashoffset: 0; }

/* O desenho: sem moldura, a página é o papel (a borda se desfaz no creme) */
.cap-quadro { width: 100%; }
.cap-fixo .cap-quadro { grid-column: 2; justify-self: center; width: min(100%, calc((100vh - var(--cap-topo) - 110px) * 1.5)); pointer-events: auto; }
/* .cap-segue: o cena.js escreve o transform (a câmera do hero, de lado); aqui só a opacidade, que esmaece
   a abertura com movimento parado. */
.cap-segue { transition: opacity 180ms ease; }
/* A casa do quadro preso anda por transform na abertura (capitulo.js), a partir do canto de cima. */
#cap-casa-fixa { transform-origin: 0 0; }
.cap-casa {
  position: relative; width: 100%; aspect-ratio: 1276 / 850; overflow: hidden; isolation: isolate; background: var(--creme);
  -webkit-mask-position: center; mask-position: center; /* no celular, a máscara encolhe de fora da caixa até o lugar (a moldura se formando) */
  /* borda de aguada: a cena termina numa pincelada irregular e macia, e a página continua papel */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1000' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cpath d='M1452 500C1452 576 1449 684 1449 729C1449 775 1451 762 1452 774C1453 787 1454 796 1454 805C1454 814 1453 821 1452 828C1451 835 1452 841 1451 847C1450 853 1448 858 1447 863C1446 868 1445 873 1445 878C1444 883 1447 889 1446 893C1444 898 1440 900 1436 903C1433 905 1427 906 1423 909C1419 911 1416 914 1412 916C1408 918 1404 919 1400 922C1396 924 1394 927 1390 929C1387 932 1384 935 1380 937C1375 939 1369 939 1365 941C1360 943 1357 946 1353 949C1348 951 1345 954 1338 955C1332 957 1323 956 1314 956C1306 957 1298 957 1288 958C1279 958 1269 958 1258 958C1247 959 1236 959 1224 960C1211 961 1200 964 1182 965C1163 966 1185 965 1113 965C1041 965 871 963 750 963C629 963 460 964 388 964C316 964 339 963 320 963C301 963 288 962 275 962C262 961 250 961 240 960C230 959 222 957 213 956C205 955 195 956 187 955C179 955 170 955 165 953C159 951 157 947 153 944C150 941 147 938 143 935C140 932 137 930 134 927C130 925 128 922 124 920C119 918 113 918 109 916C105 914 102 912 99 909C95 907 93 903 89 901C85 899 79 898 75 896C70 894 67 891 64 888C62 884 60 880 58 876C56 872 53 868 51 864C49 859 49 854 46 849C44 843 40 839 37 833C34 827 29 821 28 813C27 804 30 794 30 781C31 768 32 783 32 736C33 689 32 578 32 500C33 422 34 312 34 265C35 218 33 232 34 220C34 208 35 199 36 191C37 182 39 176 40 168C40 161 37 153 38 147C39 141 40 136 43 132C46 128 51 125 55 122C59 119 62 116 66 113C70 110 74 108 77 105C80 102 82 99 84 96C86 92 86 88 89 85C92 82 98 82 102 80C106 78 110 76 113 73C117 71 119 67 123 65C127 63 132 62 137 60C142 58 147 57 152 55C158 54 164 52 170 51C177 50 184 49 191 48C198 46 202 43 210 41C218 40 227 39 239 39C250 39 264 42 279 42C294 43 307 43 327 44C346 44 325 45 396 46C466 46 631 46 750 45C868 45 1036 43 1106 43C1177 43 1154 44 1173 44C1192 44 1206 44 1220 43C1235 42 1249 40 1260 40C1272 40 1280 41 1289 42C1298 43 1305 44 1312 45C1320 46 1326 47 1333 49C1340 50 1345 52 1351 52C1358 53 1367 52 1373 53C1380 53 1386 54 1390 56C1394 58 1395 62 1399 65C1402 68 1406 69 1410 72C1413 74 1417 77 1420 80C1423 82 1425 86 1427 89C1430 92 1434 94 1437 97C1439 101 1439 105 1441 109C1443 113 1445 117 1448 121C1450 124 1456 127 1457 132C1458 137 1457 144 1456 150C1455 157 1452 165 1451 173C1450 181 1449 188 1448 197C1447 207 1445 216 1446 228C1446 240 1448 225 1449 270C1450 316 1452 424 1452 500Z' filter='url(%23b)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1000' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cpath d='M1452 500C1452 576 1449 684 1449 729C1449 775 1451 762 1452 774C1453 787 1454 796 1454 805C1454 814 1453 821 1452 828C1451 835 1452 841 1451 847C1450 853 1448 858 1447 863C1446 868 1445 873 1445 878C1444 883 1447 889 1446 893C1444 898 1440 900 1436 903C1433 905 1427 906 1423 909C1419 911 1416 914 1412 916C1408 918 1404 919 1400 922C1396 924 1394 927 1390 929C1387 932 1384 935 1380 937C1375 939 1369 939 1365 941C1360 943 1357 946 1353 949C1348 951 1345 954 1338 955C1332 957 1323 956 1314 956C1306 957 1298 957 1288 958C1279 958 1269 958 1258 958C1247 959 1236 959 1224 960C1211 961 1200 964 1182 965C1163 966 1185 965 1113 965C1041 965 871 963 750 963C629 963 460 964 388 964C316 964 339 963 320 963C301 963 288 962 275 962C262 961 250 961 240 960C230 959 222 957 213 956C205 955 195 956 187 955C179 955 170 955 165 953C159 951 157 947 153 944C150 941 147 938 143 935C140 932 137 930 134 927C130 925 128 922 124 920C119 918 113 918 109 916C105 914 102 912 99 909C95 907 93 903 89 901C85 899 79 898 75 896C70 894 67 891 64 888C62 884 60 880 58 876C56 872 53 868 51 864C49 859 49 854 46 849C44 843 40 839 37 833C34 827 29 821 28 813C27 804 30 794 30 781C31 768 32 783 32 736C33 689 32 578 32 500C33 422 34 312 34 265C35 218 33 232 34 220C34 208 35 199 36 191C37 182 39 176 40 168C40 161 37 153 38 147C39 141 40 136 43 132C46 128 51 125 55 122C59 119 62 116 66 113C70 110 74 108 77 105C80 102 82 99 84 96C86 92 86 88 89 85C92 82 98 82 102 80C106 78 110 76 113 73C117 71 119 67 123 65C127 63 132 62 137 60C142 58 147 57 152 55C158 54 164 52 170 51C177 50 184 49 191 48C198 46 202 43 210 41C218 40 227 39 239 39C250 39 264 42 279 42C294 43 307 43 327 44C346 44 325 45 396 46C466 46 631 46 750 45C868 45 1036 43 1106 43C1177 43 1154 44 1173 44C1192 44 1206 44 1220 43C1235 42 1249 40 1260 40C1272 40 1280 41 1289 42C1298 43 1305 44 1312 45C1320 46 1326 47 1333 49C1340 50 1345 52 1351 52C1358 53 1367 52 1373 53C1380 53 1386 54 1390 56C1394 58 1395 62 1399 65C1402 68 1406 69 1410 72C1413 74 1417 77 1420 80C1423 82 1425 86 1427 89C1430 92 1434 94 1437 97C1439 101 1439 105 1441 109C1443 113 1445 117 1448 121C1450 124 1456 127 1457 132C1458 137 1457 144 1456 150C1455 157 1452 165 1451 173C1450 181 1449 188 1448 197C1447 207 1445 216 1446 228C1446 240 1448 225 1449 270C1450 316 1452 424 1452 500Z' filter='url(%23b)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.cap-palco, .cap-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.cap-poster { display: block; object-fit: cover; }
.cap-poster[hidden] { display: none; }
.cap-palco { overflow: hidden; }
.cap-camara { position: absolute; inset: 0; transform-origin: 0 0; }
.cap-camara > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
/* Cada camada do desenho fica na própria camada de composição: o tique de 10 fps só repinta o que se mexe,
   e o fim de uma troca de luz ou de câmera não repinta o fundo na thread principal. */
.cap-palco .cap-camara > svg { will-change: opacity; }
.cap-c-luz { opacity: 0; visibility: hidden; mix-blend-mode: multiply; pointer-events: none; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.cap-c-luz.cap-on { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s linear 0s; }
.cap-l-brilho { mix-blend-mode: screen; }
.cap-l-ceu, .cap-l-aurora { mix-blend-mode: normal; }
.cap-c-acima [data-k="abajur"] { transition: opacity 600ms ease; }
.cap-sem-trans .cap-c-luz, .cap-sem-trans .cap-c-acima [data-k],
.cap-rola .cap-c-luz, .cap-rola .cap-c-acima [data-k] { transition: none; } /* cap-rola: na virada, a luz segue o t quadro a quadro */
/* Movimento parado: o quadro que sai (um retrato) esmaece por cima do que entra, sem câmera nem luz andando. */
.cap-veu { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 1; transition: opacity 500ms ease; }
.cap-veu.cap-some { opacity: 0; }
/* Traço novo (TRACO_NOVO, em capitulo.js). A luz fraca da esquerda, por cima de tudo na casa (desenho,
   pôster e véu), clareando (#fff6df de .32 a .08 a 0); é o gradiente do quadro 3 aprovado, de (0,0) a (1;0,55)
   da caixa, escrito em CSS. E o retrato com a aguada, que esmaece por cima do desenho quando a cena assenta. */
.cap-casa.cap-novo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(129.5deg, rgba(255, 246, 223, .32), rgba(255, 246, 223, .08) 38%, rgba(255, 246, 223, 0) 84%);
}
.cap-aguada { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 400ms ease; }
.cap-aguada.cap-on { opacity: 1; }

/* Embaixo do desenho: tocar / pausar / ver de novo e o selo */
.cap-sob { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 5% 0; }
.cap-tocar {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 15px 0 13px;
  border: 1px solid var(--cap-borda); border-radius: 999px; background: rgba(255, 255, 255, .42); color: var(--tinta);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform 160ms var(--saida), background-color 160ms ease;
}
.cap-tocar svg { width: 12px; height: 12px; flex: none; }
.cap-tocar::after { content: ""; position: absolute; inset: -6px; }
.cap-tocar:active { transform: scale(.97); }
.cap-tocar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cap-tocar:hover { background: #fff; } }
.cap-selo { margin: 0; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cap-borda); font-size: 12.5px; color: var(--tinta-media); background: rgba(255, 255, 255, .42); white-space: nowrap; }
/* Até capitulo.js rodar, o botão não fica ali sem fazer nada (sem mexer na altura). */
.cap-js:not(.cap-anda) .cap-sob { visibility: hidden; }
/* O botão e o selo do quadro preso só aparecem com a moldura pronta: na abertura (.cap-abrindo), o quadro
   ainda é a sala da foto, na tela inteira. */
.cap-fixo .cap-sob { transition: opacity 300ms ease, visibility 0s linear 0s; }
.cap-abrindo .cap-fixo .cap-sob { opacity: 0; visibility: hidden; transition: opacity 150ms ease, visibility 0s linear 150ms; }
/* Na abertura, casada com a foto, a câmera pode ver além do recorte do desenho (tela muito larga):
   o papel e o chão continuam além dele, em vez de uma emenda. */
.cap-abrindo #cap-casa-fixa { will-change: transform; }
.cap-abrindo #cap-casa-fixa .cap-c-fundo { overflow: visible; }

/* Computador: a cortina sobre o hero. A seção sobe uma tela (a altura do hero) e esconde essa tela;
   o título começa bem abaixo, para chegar ao meio da tela quando a moldura termina de se formar
   (capitulo.js mede o título: é ele que marca o fim da abertura). Mesmo corte de capitulo.js (mmCel), ao contrário. */
@media (width > 760px) and (orientation: landscape) {
  /* overflow-x: clip (não cria caixa de rolagem, o sticky continua): o quadro esticado na abertura passa
     da borda da tela e não pode virar rolagem de lado. */
  .capitulo.cap-js { margin-top: calc(var(--h) * -1); clip-path: inset(var(--h) 0 0 0); overflow-x: clip; }
  .cap-js .cap-cabeca {
    margin-top: calc(var(--h) + 110vh); min-height: 30vh; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 444px; padding: 0 0 0 var(--fio-F); text-align: left;
  }
}

/* Sem JS: só o texto, inteiro */
.capitulo:not(.cap-js) .cap-fixo, .capitulo:not(.cap-js) .cap-slot { display: none; }
.capitulo:not(.cap-js) .cap-trilho { grid-template-columns: minmax(0, 1fr); }
.capitulo:not(.cap-js) .cap-passo { min-height: 0; padding: 28px 0; }

/* Celular e tela em pé (tablet em pé, janela estreita e alta): toca ao aparecer.
   Um bloco por passo, o quadro em cima do texto. Preso numa tela em pé, o
   desenho ficava pequeno no meio da tela vazia (800×1280: 430 px de largura).
   O mesmo corte está em capitulo.js (mmCel). */
@media (max-width: 760px), (orientation: portrait) {
  .cap-trilho { display: block; }
  .cap-fixo { display: none; }
  .cap-passos { max-width: 880px; margin: 0 auto; }
  .cap-passo { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 18px; align-items: center; min-height: 0; padding: 6vh 0 6vh var(--fio-F); }
  .cap-js .cap-passo[data-passo="4"] { margin-top: 0; } /* aqui a virada toca no próprio quadro de "Outra semana" */
  .cap-js .cap-slot { display: block; order: -1; }
  /* o quadro na largura toda, por cima do fio; os botões embaixo dele começam onde o texto começa */
  .cap-js .cap-slot { width: auto; margin-left: calc(var(--fio-F) * -1); }
  .cap-js .cap-slot .cap-sob { margin-left: var(--fio-F); }
}
@media (max-width: 760px) {
  .capitulo { --cap-margem: 16px; --fio-F: 60px; --fio-X: 22px; }
  .cap-js .cap-fio { top: 6vh; bottom: 12vh; }
  .cap-folha { width: 38px; height: 24px; margin-top: -12px; }
  .cap-cabeca { padding: 64px 20px 8px; }
  .cap-frase { font-size: 26px; }
  .cap-fala p, .cap-linha { font-size: 17px; }
  .cap-sob { margin: 8px 2% 0; }
  .cap-tocar { min-height: 34px; font-size: 12.5px; }
  .cap-selo { font-size: 11.5px; }
}

/* Movimento parado (o sistema ou a pausa global): último quadro, parado; a luz troca sem transição.
   (Menos quem retomou pelo botão da barra: data-movimento="livre". :where() não soma especificidade.) */
@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-movimento="livre"])) .cap-anda .cap-entra { transition: none; }
  :where(:root:not([data-movimento="livre"])) .cap-anda .cap-consent path { stroke-dashoffset: 0; transition: none; }
  :where(:root:not([data-movimento="livre"])) .cap-c-luz,
  :where(:root:not([data-movimento="livre"])) .cap-c-acima [data-k],
  :where(:root:not([data-movimento="livre"])) .cap-passo::before,
  :where(:root:not([data-movimento="livre"])) .cap-tocar { transition: none; }
}
:root[data-movimento="pausado"] .cap-anda .cap-entra { transition: none; }
:root[data-movimento="pausado"] .cap-anda .cap-consent path { transition: none; }
:root[data-movimento="pausado"] .capitulo .cap-c-luz,
:root[data-movimento="pausado"] .capitulo .cap-c-acima [data-k],
:root[data-movimento="pausado"] .capitulo .cap-passo::before { transition: none; }