/* Corredor Escola: a mesma identidade do Corredor (papel pontilhado, tinta azul-noite,
   verde-petróleo e âmbar), com os sete personagens próprios da Chegada no palco. */
:root {
  --fundo: #f6f4ee; --sup: #ffffff; --sup2: #efebe2; --tinta: #14213d; --tinta2: #4a5568; --fraco: #6b6f76;
  --linha: #d9d4c7; --cor: #0f766e; --cor-t: #ffffff; --cor2: #ffb020;
  --esc: #14213d; --esc-t: #f6f4ee; --esc-f: rgba(246, 244, 238, .74);
  --raio: 6px; --raio-p: 4px; --sombra: 0 12px 32px rgba(20, 33, 61, .16);
  --f-tit: 'Bricolage Grotesque', system-ui, sans-serif; --f-txt: 'Hanken Grotesk', system-ui, sans-serif; --f-mono: 'DM Mono', ui-monospace, monospace;
  --tit-peso: 800; --tit-esp: -.03em;
  --sinal-s: #ddf3ef; --ambar-s: #fff4d6; --coral: #e4572e; --azul: #2e86ab; --roxo: #7b4b94; --verde: #3bb273; --rosa: #e84a8a; --laranja: #f26430;
  --pontos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%2314213D' fill-opacity='.10'/%3E%3C/svg%3E");
  --pontos-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23F6F4EE' fill-opacity='.10'/%3E%3C/svg%3E");
  color-scheme: light;
}
body { background: var(--fundo) var(--pontos); font-feature-settings: "tnum" 1; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -.032em; font-variation-settings: "opsz" 96; }
h2 { letter-spacing: -.035em; font-variation-settings: "opsz" 72; }
h3 { font-family: var(--f-tit); font-weight: 700; letter-spacing: -.01em; }
h1 em { color: var(--cor); font-style: normal; text-decoration: underline dashed var(--cor2); text-decoration-thickness: 3px; text-underline-offset: .14em; }
h2 em { color: var(--cor); }
h1 .nq { white-space: nowrap; }
::selection { background: var(--cor2); color: var(--tinta); }

.topo { background: color-mix(in srgb, var(--fundo) 92%, transparent); border-bottom: 1px solid var(--linha); }
.cassi { font: 800 1.05rem var(--f-tit); }
.prod { display: inline-flex; align-items: center; gap: 7px; font: 800 1rem var(--f-tit); letter-spacing: -.02em; }
.simbolo { width: 24px; height: 24px; flex: none; }
.links a { font-weight: 500; }
.idiomas { border-radius: 999px; }
.idiomas a[aria-current] { background: var(--tinta); color: var(--fundo); }
.btn { font-weight: 700; border-color: var(--tinta); }
.btn:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--tinta); }
.btn-p { border-color: var(--cor); }
.btn-p:hover { box-shadow: 3px 3px 0 var(--tinta); }
.sobre { font: 500 .72rem var(--f-mono); letter-spacing: .12em; color: var(--cor); }
.sobre::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cor2); margin-right: 9px; vertical-align: 1px; }
.lede { color: var(--tinta2); }

@media (min-width: 721px) { .palco { aspect-ratio: 16 / 13; } }
@media (min-width: 1081px) { .heroi { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.palco { border: 1px solid var(--tinta); border-radius: var(--raio); box-shadow: 10px 10px 0 var(--sup2), 10px 10px 0 1px var(--linha); background: var(--fundo) var(--pontos); }
.ilus { font-family: var(--f-mono); }

/* Títulos abrem a conversa: a página não usa rótulo de seção. */
.sobre:empty { display: none; }
.vert { color: var(--cor); margin-left: 4px; }
@media (max-width: 720px) { .palco { height: min(150vw, 600px); } }

.cn { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(12px, 2.4vw, 20px); background: var(--fundo) var(--pontos); font-family: var(--f-txt); color: var(--tinta); }
.cn-t small { display: block; font: 500 .62rem var(--f-mono); letter-spacing: .12em; color: var(--cor); }
.cn-t b { font: 800 clamp(1rem, 2vw, 1.3rem) var(--f-tit); letter-spacing: -.02em; }
.cn-c { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; }
.fi { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.fi.ok { opacity: 1; transform: none; }

.kp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kp .cn-c b { display: block; font: 800 clamp(1.1rem, 2.4vw, 1.6rem) var(--f-tit); }
.kp .cn-c span { font: 400 .62rem var(--f-mono); color: var(--tinta2); }
.gr { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gr svg { flex: 1; min-height: 0; width: 100%; }
.gr text { font: 500 11px 'DM Mono', monospace; fill: #4a5568; }
.gr .lt { fill: none; stroke: #0f766e; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s ease-out; }
.gr .le { fill: none; stroke: #14213d; stroke-width: 2; opacity: .4; stroke-linejoin: round; }
.gr .la { stroke: #b45309; stroke-width: 1.5; stroke-dasharray: 6 5; }
.gr.ok .lt { stroke-dashoffset: 0; }
.pe { display: flex; justify-content: space-between; gap: 8px; font: 400 .64rem var(--f-mono); color: var(--tinta2); }
.pe b { color: #b45309; font-weight: 500; }

.pj { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pj div { text-align: center; padding: 6px 2px; border-radius: var(--raio); border: 1px solid transparent; font: 500 .6rem var(--f-mono); transition: background .25s, border-color .25s; }
.pj img { display: block; width: 100%; max-width: 64px; aspect-ratio: 1; margin: 0 auto 3px; }
@media (min-width: 721px) { .pj { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .pj div { font-size: .54rem; padding: 6px 0; } }
.pj div.sel { background: var(--sup); border-color: var(--tinta); }
.pj.fim div:not(.sel) { opacity: .35; }
.ch { display: flex; flex-direction: column; gap: 8px; }
.ch p { margin: 0; font-size: .78rem; }
.ch .op { display: flex; gap: 6px; flex-wrap: wrap; }
.ch .op span { font: 700 .72rem var(--f-txt); padding: 6px 12px; border: 1px solid var(--tinta); border-radius: 999px; background: var(--sup); transition: background .25s, color .25s; }
.ch .op span.sel { background: var(--cor); border-color: var(--cor); color: var(--cor-t); }
.ch .env { font: 500 .7rem var(--f-mono); color: var(--cor); }

.es { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.es-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.es-l b { font: 700 .86rem var(--f-tit); }
.es-l small { grid-column: 1; font: 400 .64rem var(--f-mono); color: var(--tinta2); }
.es-l em { grid-row: 1 / 3; grid-column: 2; font: 500 .64rem var(--f-mono); font-style: normal; color: #b45309; text-align: right; }
.es-l:first-child { border-color: var(--tinta); }
.es-b { justify-self: start; font: 700 .72rem var(--f-txt); padding: 6px 12px; border-radius: 999px; background: var(--cor); color: var(--cor-t); transition: background .25s; }
.es-b.ok2 { background: var(--sinal-s); color: var(--cor); }
.es-r { margin-top: auto; font: 400 .64rem var(--f-mono); color: var(--tinta2); }

.mx { position: relative; flex: 1; min-height: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--sup); overflow: hidden; }
.mx::before, .mx::after { content: ""; position: absolute; background: var(--linha); }
.mx::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.mx::after { top: 50%; left: 0; right: 0; height: 1px; }
.mx-q { position: absolute; font: 500 .58rem var(--f-mono); color: var(--tinta2); padding: 6px 8px; max-width: 48%; }
.mx-q.c { color: #b45309; font-weight: 500; }
.bo { position: absolute; width: clamp(32px, 6.4vw, 46px); aspect-ratio: 1; margin: calc(clamp(32px, 6.4vw, 46px) / -2) 0 0 calc(clamp(32px, 6.4vw, 46px) / -2); display: grid; place-items: center; border-radius: 50%; background: var(--sinal-s); border: 1.5px solid var(--cor); font: 500 .56rem var(--f-mono); z-index: 1; transition: left 1.6s ease-out, background .3s; }
.bo.foco { background: var(--cor2); border-color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .fi, .gr .lt, .bo { transition: none; } }

.mts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.mt { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.mt h3 { margin: 0 0 2px; font-size: 1.04rem; }
.mt p { margin: 8px 0 0; font-size: .92rem; color: var(--tinta2); }
.mt .mt-b { margin-top: 0; font: 500 .68rem var(--f-mono); color: var(--cor); }
.mt .mt-p { color: var(--tinta); font-weight: 600; }
.pbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.pb { border-top: 3px solid var(--cor2); padding-top: 12px; }
.pb h3 { margin: 0; font-size: 1.04rem; }
.pb p { margin: 8px 0 0; font-size: .92rem; color: var(--tinta2); }
@media (max-width: 1080px) { .mts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mts, .pbs { grid-template-columns: minmax(0, 1fr); } }

.ems, .fxs, .qs { list-style: none; margin: 0; padding: 0; }
.ems { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.em { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 6px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); text-align: center; }
.em img { width: 100%; max-width: 96px; height: auto; margin-bottom: 6px; }
.em b { font: 700 1rem var(--f-tit); }
.em span { font-size: .86rem; color: var(--tinta2); }
.fxs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--tinta); }
.fx { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.fx b { font: 800 1.1rem var(--f-tit); }
.fx span { font: 500 .72rem var(--f-mono); }
.fx-alta { background: #ddf3ef; } .fx-bem { background: #eef7ee; } .fx-osc { background: #fff4d6; } .fx-ate { background: #fce7df; }
.qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.qs li { font-weight: 600; font-size: .96rem; }
.nt { margin-top: 16px; font-size: .86rem; color: var(--tinta2); }
@media (max-width: 1080px) { .ems { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fxs, .qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ems { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qs { grid-template-columns: minmax(0, 1fr); } }

.qds { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--tinta); border-radius: var(--raio); overflow: hidden; }
.qd { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--sup); }
.qd b { font: 800 1.1rem var(--f-tit); }
.qd span { font-size: .94rem; color: var(--tinta2); }
.qd.foco { background: var(--ambar-s); }

.gr-c { margin: 24px 0 0; padding: 16px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); }
.gf { display: block; width: 100%; height: auto; }
.gf text { font: 500 11px 'DM Mono', monospace; fill: #4a5568; }
.gr-c figcaption { margin-top: 10px; font-size: .86rem; color: var(--tinta2); }
.lg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; font: 500 .7rem var(--f-mono); }
.lg li { display: flex; align-items: center; gap: 6px; }
.lg i { width: 10px; height: 10px; border-radius: 2px; }
.fl { list-style: none; counter-reset: fl; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 28px 0 0; padding: 0; }
.fl li { counter-increment: fl; position: relative; padding: 14px; background: var(--tinta); color: var(--fundo); font: 700 .92rem var(--f-tit); }
.fl li::before { content: counter(fl); display: block; font: 500 .7rem var(--f-mono); color: var(--cor2); margin-bottom: 6px; }
.fl li:nth-child(4) { background: var(--cor); }
.fl li:first-child { border-radius: var(--raio) 0 0 var(--raio); } .fl li:last-child { border-radius: 0 var(--raio) var(--raio) 0; }
.tls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.tls.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl { margin: 0; display: flex; flex-direction: column; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tl-j { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.tl-j img { display: block; width: 100%; height: auto; }
.tl figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.tl figcaption span { font: 500 .66rem var(--f-mono); color: var(--cor); letter-spacing: .04em; }
.tl figcaption b { font: 800 1.02rem var(--f-tit); }
.tl figcaption p { margin: 2px 0 0; font-size: .88rem; color: var(--tinta2); }
.ars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.ar h3 { margin: 0 0 10px; font-size: 1.04rem; }
.ar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ar li { font: 500 .72rem var(--f-mono); padding: 5px 9px; border: 1px solid var(--tinta); border-radius: 999px; background: var(--sup); }
@media (max-width: 1080px) { .tls, .tls.t3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl { grid-template-columns: minmax(0, 1fr); } .fl li, .fl li:first-child, .fl li:last-child { border-radius: var(--raio); } .ars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tls, .tls.t3, .ars, .qs { grid-template-columns: minmax(0, 1fr); } }

.fos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; margin-top: 24px; }
.fo { margin: 0; text-align: center; }
.fo-c { max-width: 220px; margin: 0 auto; aspect-ratio: 500 / 767; border: 6px solid var(--tinta); border-radius: 22px; overflow: hidden; background: var(--sup); }
.fo-c img { display: block; width: 100%; height: auto; }
.fo figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 1px; }
.fo figcaption span { font: 500 .66rem var(--f-mono); color: var(--cor); }
.fo figcaption b { font: 800 .98rem var(--f-tit); }
.tls.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .fos, .tls.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; } .tls.t2 { grid-template-columns: minmax(0, 1fr); } }

/* O vídeo do topo: as telas reais passando, por papel. */
.vd { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(10px, 2vw, 16px); background: var(--fundo) var(--pontos); }
.vd-t { position: relative; flex: 1; min-height: 0; }
.vd-f { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .5s; }
.vd-f.on { opacity: 1; }
.vd-j { width: 100%; height: 100%; border: 1px solid var(--tinta); border-radius: var(--raio); overflow: hidden; background: var(--sup); }
.vd-f img { display: block; width: 100%; }
.vd-f.on .vd-j img { animation: desce var(--t, 3s) linear forwards; }
@keyframes desce { from { transform: translateY(0); } to { transform: translateY(var(--d, 0)); } }
.vd-fo { height: 100%; aspect-ratio: 500 / 767; max-width: 100%; border: 5px solid var(--tinta); border-radius: 20px; overflow: hidden; background: var(--sup); }
.vd-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vd-l b { font: 800 clamp(.92rem, 1.8vw, 1.15rem) var(--f-tit); color: var(--tinta); }
.vd-l span { font: 500 .64rem var(--f-mono); color: var(--tinta2); white-space: nowrap; }
.vd-p { display: flex; gap: 3px; }
.vd-p i { flex: 1; height: 3px; border-radius: 2px; background: var(--linha); }
.vd-p i.on { background: var(--cor); }
@media (prefers-reduced-motion: reduce) { .vd-f, .vd-f.on .vd-j img { transition: none; animation: none; } }

.ld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.ld > div { padding: 18px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); }
.ld h3 { margin: 0; font-size: 1.2rem; }
.ld > div > p { margin: 4px 0 14px; font-size: .92rem; color: var(--tinta2); }
.ld-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ld-f .fo-c { border-width: 4px; border-radius: 14px; max-width: none; }
.lg i.o { background: #fff; border: 2px solid var(--tinta); border-radius: 50%; }
@media (max-width: 900px) { .ld { grid-template-columns: minmax(0, 1fr); } }