/* Cine Sertão Sustentável · luar do Sertão
   A abertura vai do pôr do sol à noite: Seu Didi entalha o céu e a logo do Cine fica gravada nas estrelas.
   Dali para baixo a página inteira é noite de lua, azul escuro e estrelada. */
.pg-luar{--noite:#0a1239;--noite-2:#070b24;--chao:#10111d;--brasa:#f6b24a;--luar:#dfe6ff;--f-logo:"Fredoka","Figtree",system-ui,sans-serif}
body.pg-luar{background:var(--noite-2)}
.pg-luar .nav{background:rgba(8,12,36,.72);border-bottom-color:rgba(223,230,255,.12)}
.pg-luar .kicker{color:#f2c074}
.pg-luar .rodape{background:#05081a;border-top-color:rgba(223,230,255,.1)}
.pg-luar .som-fixo{background:rgba(8,12,36,.86);border-color:rgba(223,230,255,.32)}

/* ===================== ABERTURA ===================== */
/* sem JavaScript ou com movimento reduzido: uma tela só, já de noite, com a logo pronta */
.ch{position:relative;background:var(--noite)}
.ch-palco{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.ch-quadros{position:absolute;inset:0}
.ch-q{position:absolute;inset:0;display:block;opacity:0;background:var(--topo,var(--noite))}
.ch-q:last-of-type{opacity:1}
.ch-q img,.ch-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ch-video{opacity:0;pointer-events:none;transition:opacity .6s linear}
/* o chão escurece e emenda com a página */
.ch-veu{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,36,0) 62%,rgba(7,11,36,.55) 86%,var(--noite-2))}

/* a logo: no computador o tamanho e o lugar vêm do quadro do vídeo (cine.js); parada, fica no alto do céu */
.ch-logo{position:absolute;z-index:3;left:var(--lx,41%);top:var(--ly,37%);width:var(--lw,min(32vw,56vh));aspect-ratio:1130/1050;transform:translate(-50%,-50%)}
/* iPhone antigo sem aspect-ratio: a caixa da logo ficava com altura zero */
@supports not (aspect-ratio:1){
  .ch-logo{height:calc(var(--lw,min(32vw,56vh)) * .9292)}
  @media (orientation:portrait){.ch-logo{height:calc(min(68vw,40vh) * .9292)}}
}
/* o brilho fica no botão: na imagem, a máscara de revelação cortava o brilho e desenhava um retângulo */
.ch-logo-bt{position:absolute;inset:0;display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 0 26px rgba(246,178,74,.28))}
.ch-logo-bt:focus-visible{outline:2px solid var(--brasa);outline-offset:8px}
.ch-logo-img,.ch-logo-brasa{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.ch-logo-brasa{opacity:0;pointer-events:none}
/* os dois rolos do projetor ficam por cima da logo, no mesmo lugar, prontos para girar */
.ch-rolo{position:absolute;height:auto;pointer-events:none;transform:translate(-50%,-50%)}
.ch-rolo-g{left:48.04%;top:9.44%;width:13.45%}
.ch-rolo-p{left:39.44%;top:12.86%;width:10.27%}
@keyframes ch-gira{to{transform:translate(-50%,-50%) rotate(360deg)}}
.ch.projeta .ch-rolo-g{animation:ch-gira 3.4s linear infinite}
.ch.projeta .ch-rolo-p{animation:ch-gira 2.3s linear infinite}

/* a luz do projetor: sai da ponta do facho da logo e abre no céu */
.ch-luz{position:absolute;left:82.6%;top:-4%;width:112%;height:41%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(255,214,128,.62),rgba(255,232,178,.3) 45%,rgba(255,238,200,.05) 92%,rgba(255,238,200,0));
  clip-path:polygon(0 23%,100% 0,100% 100%,0 98%);transition:opacity .5s var(--ease-out)}
.ch.projeta .ch-luz{opacity:1;animation:ch-treme 2.6s steps(1) infinite}
@keyframes ch-treme{0%,100%{opacity:1}8%{opacity:.86}11%{opacity:1}47%{opacity:.92}50%{opacity:1}83%{opacity:.88}86%{opacity:1}}
/* as três palavras, projetadas na luz */
.ch-palavras{position:absolute;left:109%;top:4.5%;width:86%;margin:0;padding:0;list-style:none;display:grid;gap:.2em;pointer-events:none}
.ch-palavras li{font:700 clamp(1.05rem,2.15vw,2.3rem)/1.08 var(--f-logo);letter-spacing:.005em;color:#fff6dc;text-shadow:0 0 18px rgba(255,206,120,.75),0 2px 10px rgba(7,11,36,.6);opacity:0;transform:translateX(-14px);filter:blur(5px);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out),filter .6s var(--ease-out)}
.ch-palavras li:nth-child(2){color:#ffd9a0}
.ch-palavras li:nth-child(3){color:#c8f0c0}
.ch.projeta .ch-palavras li{opacity:1;transform:none;filter:none}
.ch.projeta .ch-palavras li:nth-child(1){transition-delay:.25s}
.ch.projeta .ch-palavras li:nth-child(2){transition-delay:.55s}
.ch.projeta .ch-palavras li:nth-child(3){transition-delay:.85s}
.ch-dica{position:absolute;left:50%;top:104%;margin:0;transform:translateX(-50%);white-space:nowrap;font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#f2c074;opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.pg-luar .ch-dica{color:#f2c074}
.ch-dica-toque{display:none}
@media (hover:none){.ch-dica-mouse{display:none}.ch-dica-toque{display:inline}}

/* legendas da abertura */
.ch-faixa{display:none;position:relative;z-index:2;max-width:min(88vw,560px)}
.pg-luar .ch-t{font:800 clamp(1.7rem,3.5vw,3.1rem)/1.04 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.012em;color:#fff6e4;margin:0;text-wrap:balance;text-shadow:0 2px 20px rgba(7,11,36,.7)}
.pg-luar .ch-s{font:500 clamp(1rem,1.5vw,1.2rem)/1.4 var(--f-text);color:#f1e2c6;margin:.55em 0 0;text-shadow:0 1px 12px rgba(7,11,36,.8)}
.ch .kicker{margin-bottom:.8em;text-shadow:0 1px 10px rgba(7,11,36,.8)}
.ch-cue{display:none}
/* parada: só a frase final, embaixo */
.ch-f3{display:block;position:absolute;left:var(--gutter);bottom:clamp(34px,8vh,90px)}

/* com a rolagem ligada */
.ch.viva{height:520vh}
.ch.viva.leve{height:400vh}
/* celular: a abertura toca sozinha numa tela só; as pinturas se aproximam devagar e o convite para rolar volta no fim */
.ch.viva.auto{height:auto}
.ch.auto .ch-q img{transform-origin:50% 100%;animation:ch-perto 13s cubic-bezier(.2,.6,.3,1) both}
@keyframes ch-perto{from{transform:scale(1.1)}to{transform:none}}
.ch.viva.auto .ch-cue{opacity:0;transition:opacity .8s var(--ease-out)}
.ch.viva.auto.auto-fim .ch-cue{opacity:1}
.ch.viva .ch-palco{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.ch.viva .ch-q:last-of-type{opacity:0}
.ch.viva.com-filme .ch-video{opacity:1}
.ch.viva .ch-veu{opacity:var(--veu,0)}
.ch.viva .ch-faixa{display:block;position:absolute;left:var(--gutter);bottom:clamp(34px,8vh,90px);opacity:0;visibility:hidden;transform:translateY(14px);transition:transform .7s var(--ease-out)}
.ch.viva .ch-faixa.on{transform:none}
.pg-luar .ch-cue{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(34px,8vh,90px);margin:0;display:none;align-items:center;gap:10px;font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#fbe9c8;text-shadow:0 1px 10px rgba(7,11,36,.8)}
.ch.viva .ch-cue{display:flex;opacity:var(--cue,1)}
.ch-cue svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:ch-desce 1.8s var(--ease-io) infinite}
@keyframes ch-desce{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
/* a logo aparece conforme a goiva passa: um círculo de luz que cresce a partir da ponta da ferramenta */
.ch.viva .ch-logo-img{
  -webkit-mask-image:radial-gradient(circle farthest-corner at var(--ox,107%) var(--oy,19%),#000 calc(var(--r,0) * 124% - 14%),transparent calc(var(--r,0) * 124%));
  mask-image:radial-gradient(circle farthest-corner at var(--ox,107%) var(--oy,19%),#000 calc(var(--r,0) * 124% - 14%),transparent calc(var(--r,0) * 124%))}
.ch.viva .ch-logo-brasa{opacity:var(--b,0);filter:brightness(1.25) sepia(1) saturate(7) hue-rotate(-14deg) brightness(1.5) drop-shadow(0 0 10px rgba(255,190,90,.9));mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle farthest-corner at var(--ox,107%) var(--oy,19%),transparent calc(var(--r,0) * 124% - 17%),#000 calc(var(--r,0) * 124% - 9%),#000 calc(var(--r,0) * 124% - 3%),transparent calc(var(--r,0) * 124%));
  mask-image:radial-gradient(circle farthest-corner at var(--ox,107%) var(--oy,19%),transparent calc(var(--r,0) * 124% - 17%),#000 calc(var(--r,0) * 124% - 9%),#000 calc(var(--r,0) * 124% - 3%),transparent calc(var(--r,0) * 124%))}
.ch.viva .ch-rolo{opacity:0}
.ch.viva.pronta .ch-rolo{opacity:1}
.ch.viva .ch-logo-bt{pointer-events:none}
.ch.viva.pronta .ch-logo-bt{pointer-events:auto}
.ch.pronta:not(.projeta) .ch-dica,.ch:not(.viva):not(.projeta) .ch-dica{opacity:.9}

/* telas em pé (celular): o céu ganha altura, a logo vai para o alto e as palavras ficam ao lado do Seu Didi */
@media (orientation:portrait){
  .ch-q img{inset:auto 0 0 0;height:80%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%);mask-image:linear-gradient(180deg,transparent,#000 9%)}
  .ch-q:nth-of-type(1) img{object-position:50% 50%}
  .ch-q:nth-of-type(2) img{object-position:62% 50%}
  .ch-q:nth-of-type(3) img{object-position:74% 50%}
  .ch-logo{left:50%;top:27%;width:min(68vw,40vh);--ox:92%;--oy:104%}
  .ch-luz{display:none}
  .ch-palavras{left:-12%;top:122%;width:88%}
  .ch-palavras li{font-size:clamp(1.15rem,5.6vw,1.7rem)}
  .ch-dica{top:106%}
  .ch-f3{display:none}
  .ch.viva .ch-faixa{bottom:clamp(60px,11vh,110px)}
  .ch.viva .ch-f3{display:none}
  .pg-luar .ch-cue{right:0;left:0;bottom:18px;justify-content:center}
}

/* ===================== CORUJAS ===================== */
/* cinco posições de asa numa folha só; o bater de asas vai e volta: no alto, meio, abertas, meio, embaixo */
.coruja{position:fixed;z-index:44;left:0;top:0;width:clamp(120px,15vw,230px);aspect-ratio:360/258;pointer-events:none;visibility:hidden;
  background:url(cine/coruja.webp) 0 0/500% 100% no-repeat;will-change:transform;filter:drop-shadow(0 6px 14px rgba(3,6,22,.5))}
.coruja-longe{width:clamp(52px,6vw,96px);filter:brightness(.72) saturate(.8)}
.coruja.voa{visibility:visible;animation:coruja-asas .62s step-end infinite,coruja-cruza 4.6s cubic-bezier(.45,.05,.4,1) both}
.coruja-longe.voa{animation:coruja-asas .5s step-end infinite,coruja-cruza-longe 6.4s linear .9s both}
@keyframes coruja-asas{0%{background-position:0 0}12.5%{background-position:25% 0}25%{background-position:50% 0}37.5%{background-position:75% 0}50%{background-position:100% 0}62.5%{background-position:75% 0}75%{background-position:50% 0}87.5%{background-position:25% 0}}
@keyframes coruja-cruza{0%{transform:translate3d(104vw,9vh,0) scale(.72)}45%{transform:translate3d(46vw,30vh,0) scale(1.06)}70%{transform:translate3d(16vw,24vh,0) scale(1)}100%{transform:translate3d(-28vw,6vh,0) scale(.82)}}
@keyframes coruja-cruza-longe{0%{transform:translate3d(104vw,22vh,0)}100%{transform:translate3d(-16vw,10vh,0)}}

/* ===================== A NOITE (resto da página) ===================== */
.luar{position:relative;background:linear-gradient(180deg,var(--noite-2) 0,#0a1038 420px,#0b1140 38%,#080c2a 74%,#060919 100%);overflow:hidden}
.luar > .ceu{inset:0;height:100%}
.luar > .ceu .estrelas{background-size:900px 700px;background-repeat:repeat;opacity:.75}
.luar > .ceu .estrelas::after{background-size:1100px 820px;background-repeat:repeat}
.lsec{position:relative}
.pg-luar .luar p{color:#cdd0e6}
.pg-luar .luar .lede{color:#f1ecde}
.pg-luar .luar .sec-sub{color:#c3c7e0}
.pg-luar .luar .h2{color:#fbf3e3}
.pg-luar .luar .detalhe{color:#b9bdd8;border-color:var(--brasa)}
.pg-luar .luar .voltar{color:#aeb3d2}
.pg-luar .luar .voltar:hover{color:#f2c074}

/* o projeto */
/* o texto do projeto fica embaixo do título, numa coluna só */
.lgrid{display:grid;gap:clamp(18px,2.4vw,28px);max-width:720px}
.lgrid .h2{max-width:16ch;margin-bottom:0}
.lgrid .lede{margin-top:0}
.lgrid > div > p:last-child{margin-bottom:0}
.lsub{margin:clamp(44px,6vw,80px) 0 0;font:500 .74rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#f2c074}
.objetivos{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);counter-reset:obj}
.objetivos li{position:relative;counter-increment:obj;padding:24px 22px 26px;border-radius:14px;border:1px solid rgba(223,230,255,.16);background:linear-gradient(180deg,rgba(223,230,255,.07),rgba(223,230,255,.02));transition:transform .6s var(--ease-out),border-color .5s var(--ease-out)}
.objetivos li:hover{transform:translateY(-5px);border-color:rgba(246,178,74,.55)}
.objetivos li::after{content:"0" counter(obj);position:absolute;right:18px;top:16px;font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;color:#f2c074}
.objetivos svg{width:44px;height:44px;fill:none;stroke:#f6c98a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.objetivos h4{font:800 1.24rem/1.15 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:#fbf3e3;margin:0 0 8px;text-wrap:balance}
.objetivos p{margin:0;font-size:.97rem;line-height:1.5}

/* a sessão: a plateia de crianças e a vinheta na tela */
.sessao{position:relative;padding:clamp(20px,3vw,40px) 0 clamp(56px,7vw,100px)}
.sessao-cena{position:relative;margin:0 auto;width:min(100%,1500px);aspect-ratio:1920/1086;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.sessao-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* o pano da tela, na pintura: é ali que a vinheta passa */
.sessao-tela{position:absolute;left:29.65%;top:9.7%;width:36.8%;aspect-ratio:16/9;border-radius:2px;background:#f0deb4;box-shadow:0 0 60px 6px rgba(255,214,140,.22)}
.sessao-tela video{object-fit:cover}
.sessao-leg{position:relative;margin-top:clamp(-70px,-5vw,-30px);text-align:center}
.sessao-leg .h2{max-width:none;margin-inline:auto}
.sessao-leg p:last-child{margin:0}

/* as interseções: três retalhos de feltro costurados num pano de tela de cinema, como as letras da logo do Cine.
   Os retalhos se misturam por multiplicação, como tecido fino posto um sobre o outro */
.inter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,6vw,96px);align-items:center}
.luzes{--feltro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .2 0 0 0 0 .09 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:relative;isolation:isolate;width:min(100%,540px);aspect-ratio:1;margin-inline:auto;border-radius:22px;
  background:radial-gradient(ellipse 70% 62% at 50% 44%,rgba(255,250,236,.55),rgba(255,250,236,0) 70%),var(--feltro),repeating-linear-gradient(0deg,rgba(120,80,40,.05) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(120,80,40,.05) 0 1px,transparent 1px 4px),#eedfc0;
  box-shadow:0 0 0 5px #7a4520,0 0 0 7px rgba(7,11,36,.6),0 34px 70px rgba(2,4,20,.55),0 0 90px rgba(246,178,74,.16);transform:rotate(-1.2deg)}
/* a bainha costurada do pano */
.luzes::before{content:"";position:absolute;inset:11px;border:2px dashed rgba(122,69,32,.55);border-radius:14px;pointer-events:none;z-index:5}
.luz{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;mix-blend-mode:multiply;background:var(--feltro),var(--c);box-shadow:inset 0 0 0 3px rgba(74,38,14,.38),inset 0 -10px 22px rgba(60,30,10,.18);transition:transform 1.4s var(--ease-out) .15s,opacity .6s var(--ease-out)}
/* a costura em volta de cada retalho */
.luz::before{content:"";position:absolute;inset:9px;border:2px dashed rgba(255,247,228,.92);border-radius:50%}
.luz-av{--c:#f5bb4a;left:6%;top:7%;transform:translate(-12%,-8%) rotate(-8deg)}
.luz-lit{--c:#ea6a4b;left:38%;top:7%;transform:translate(12%,-8%) rotate(8deg)}
.luz-amb{--c:#62b072;left:22%;top:37%;transform:translateY(12%) rotate(6deg)}
.luzes.in .luz{transform:none}
.luz-ico{position:absolute;width:24%;height:24%;transform:translate(-50%,-50%);fill:none;stroke:#fff7e4;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.luz-av .luz-ico{left:31%;top:36%}
.luz-lit .luz-ico{left:69%;top:36%}
.luz-amb .luz-ico{left:50%;top:66%}
/* as etiquetas de pano com o nome de cada linguagem */
.luz-t{position:absolute;z-index:3;transform:translate(-50%,-50%) rotate(var(--g,0deg));padding:.42em .9em .46em;border-radius:999px;background:#fdf5e3;border:2px solid #8a5228;outline:1.5px dashed #c58a52;outline-offset:-6px;box-shadow:0 3px 0 rgba(74,42,20,.28);white-space:nowrap;font:700 clamp(.82rem,1.35vw,1.02rem)/1 var(--f-logo);color:#4a2a14;transition:opacity .5s var(--ease-out)}
.luz-t-av{left:23%;top:46%;--g:-4deg}
.luz-t-lit{left:77%;top:46%;--g:3deg}
.luz-t-amb{left:50%;top:86%;--g:-2deg}
/* no meio, onde as três se encontram: a etiqueta de papelão do território */
.luz-centro{position:absolute;z-index:4;left:50%;top:45%;width:27%;aspect-ratio:1;display:grid;place-items:center;padding:6%;border-radius:50%;transform:translate(-50%,-50%) rotate(-5deg) scale(.6);text-align:center;background:var(--feltro),#c9945a;border:2px solid #7a4520;box-shadow:inset 0 0 0 5px #c9945a,inset 0 0 0 7px rgba(255,244,222,.85),0 6px 16px rgba(40,20,6,.35);font:700 clamp(.66rem,1.1vw,.9rem)/1.12 var(--f-logo);color:#fff8e8;text-shadow:0 1px 0 rgba(74,38,14,.55);opacity:0;transition:opacity .8s var(--ease-out) 1s,transform .9s var(--ease-out) 1s}
.luzes.in .luz-centro{opacity:1;transform:translate(-50%,-50%) rotate(-5deg)}
/* passar o mouse (ou focar) numa linguagem desbota um pouco os outros dois retalhos */
.luzes[data-ativa] .luz,.luzes[data-ativa] .luz-t{opacity:.32}
.luzes[data-ativa="av"] .luz-av,.luzes[data-ativa="av"] .luz-t-av,.luzes[data-ativa="lit"] .luz-lit,.luzes[data-ativa="lit"] .luz-t-lit,.luzes[data-ativa="amb"] .luz-amb,.luzes[data-ativa="amb"] .luz-t-amb{opacity:1}
.inter-txt .h2{max-width:15ch}
.inter-lista{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:8px}
.inter-lista li{position:relative;padding:14px 16px 14px 44px;border-radius:12px;border:1px solid transparent;color:#cdd0e6;cursor:default;transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out)}
.inter-lista li::before{content:"";position:absolute;left:16px;top:19px;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(74,38,14,.35);outline:1.5px dashed rgba(251,243,227,.8);outline-offset:2px}
.inter-lista li[data-luz="av"]{--c:#f2b13c}
.inter-lista li[data-luz="lit"]{--c:#e4573b}
.inter-lista li[data-luz="amb"]{--c:#46a05f}
.inter-lista li:hover,.inter-lista li:focus-visible{background:rgba(223,230,255,.06);border-color:rgba(223,230,255,.18);outline:none}
.inter-lista strong{display:block;font:700 1.12rem/1.2 var(--f-logo);color:#fbf3e3;margin-bottom:3px}

/* ===================== O MÉDIA-METRAGEM ===================== */
.capitulo{position:relative}
/* o capítulo abre com um clarão de lua atrás do título */
.cap-topo::before{content:"";position:absolute;left:50%;top:0;width:min(1100px,96vw);height:100%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse 58% 62% at 50% 46%,rgba(223,230,255,.13),rgba(223,230,255,0) 70%)}
.cap-topo-in{position:relative;text-align:center}
.cap-topo-in .cap-titulo{max-width:19ch;margin-inline:auto;font-size:clamp(2.1rem,5vw,4rem)}
.cap-topo-in .lede{margin-inline:auto}
/* a faixa de realização (Governo de Pernambuco e PNAB): branca, de fora a fora, abre o capítulo do filme */
.realiza-faixa{position:relative;z-index:1;background:#fff;box-shadow:0 14px 40px rgba(3,6,24,.4)}
.realiza-in{width:min(100% - 2*var(--gutter),1240px);margin-inline:auto;display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding:clamp(16px,2.2vw,26px) 0}
.realiza-t{flex:none;align-self:stretch;display:flex;align-items:center;padding-right:clamp(18px,3vw,40px);border-right:1px solid #d9dbe6;font:600 clamp(.72rem,1vw,.86rem)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#3b4262}
.realiza-in img{display:block;flex:1;min-width:0;width:100%;max-width:1060px;height:auto;margin-inline:auto}
@media (max-width:640px){
  .realiza-in{flex-direction:column;gap:10px;padding:14px 0 16px}
  .realiza-t{align-self:center;padding:0 0 9px;border-right:0;border-bottom:1px solid #d9dbe6}
}
.ficha{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:28px 0 0}
.ficha div{padding:11px 18px 12px;border-radius:999px;border:1px solid rgba(223,230,255,.2);background:rgba(223,230,255,.05)}
.ficha dt{font:500 .62rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#f2c074;margin-bottom:5px}
.ficha dd{margin:0;font:600 .98rem/1.15 var(--f-text);color:#fbf3e3}
.pg-luar .manifesto strong{color:#fbf3e3}
.pg-luar .manifesto .manifesto-frase{color:#f6c98a}
.pg-luar .cartaz figcaption{color:#f2c074}
.pg-luar .cartaz a{box-shadow:0 36px 70px -34px rgba(0,0,0,.9),0 0 0 1px rgba(223,230,255,.16)}

/* personagens */
.elenco{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,36px)}
.ator{text-align:center}
.ator-palco{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;border-radius:50% 50% 16px 16px/36% 36% 16px 16px;overflow:hidden;cursor:pointer;background:radial-gradient(ellipse 80% 70% at 50% 30%,rgba(223,230,255,.2),rgba(223,230,255,.03));box-shadow:0 0 0 1px rgba(223,230,255,.18),0 30px 60px -34px rgba(0,0,0,.9);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);-webkit-tap-highlight-color:transparent}
.ator-palco:hover,.ator-palco:focus-visible{transform:translateY(-6px);box-shadow:0 0 0 2px var(--cor),0 0 44px -6px var(--cor),0 34px 60px -34px rgba(0,0,0,.9);outline:none}
.ator-palco img,.ator-palco canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.ator-palco video{background:#141c52}
.ator-palco::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 -60px 50px -40px rgba(7,11,36,.7);pointer-events:none}
.ator-palco.chamado{animation:ator-pula .9s var(--ease-out)}
@keyframes ator-pula{0%{transform:translateY(-6px)}30%{transform:translateY(-22px) rotate(-1.5deg)}60%{transform:translateY(-2px) rotate(1deg)}100%{transform:translateY(-6px)}}
.ator h3{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.05 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:#fbf3e3;margin:20px 0 4px}
.pg-luar .luar .ator-papel{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cor);margin:0 0 10px}
.ator p:last-child{margin:0 auto;max-width:32ch;font-size:.98rem;line-height:1.5}
.elenco-apoio{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.elenco-apoio li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:14px;border:1px solid rgba(223,230,255,.14);background:rgba(223,230,255,.04)}
.elenco-apoio img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.elenco-apoio strong{display:block;font:800 1.12rem/1.1 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:#fbf3e3;margin-bottom:4px}
.elenco-apoio span{display:block;font-size:.88rem;line-height:1.4;color:#c3c7e0}

/* cenas do média: tira de película */
.pelicula{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:26px 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border-radius:10px;background:
  radial-gradient(circle,#0a0e2a 4.2px,transparent 5px) 10px 7px/26px 12px repeat-x,
  radial-gradient(circle,#0a0e2a 4.2px,transparent 5px) 10px calc(100% - 7px)/26px 12px repeat-x,#1b1a26;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.pelicula figure{margin:0}
.pelicula video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#0b0f2a}
.pelicula figcaption{padding:10px 4px 0;font-size:.86rem;line-height:1.4;color:#c9c5b8}
.pg-luar .luar .cena-legenda h3{color:#fbf3e3}
.pg-luar .luar .cena-dica{color:#f2c074}
/* percurso e fecho, sobre a noite */
.pg-luar .percurso h3{color:#fbf3e3}
.pg-luar .percurso-n{color:#f2c074}
.pg-luar .percurso .capa{box-shadow:0 26px 50px -30px rgba(0,0,0,.9),0 0 0 1px rgba(223,230,255,.12)}
.pg-luar .luar .tres-fecho{margin-top:clamp(28px,4vw,44px);border-left-color:#7fbf6a;background:rgba(126,191,106,.1);color:#cdd0e6}
.pg-luar .luar .tres-fecho strong{color:#fbf3e3}
.pg-luar .luar .tres-fecho a{color:#a8e08f}
/* o termo dos educadores é uma folha de papel clara: volta para as cores de papel */
.pg-luar .educadores{color:#3d5254}
.pg-luar .educadores .kicker{color:var(--river)}
.pg-luar .luar .educadores .h2{color:#173f45}
.pg-luar .luar .educadores p{color:#3d5254}
.pg-luar .luar .educadores .termo-micro{color:#5f7173}
.pg-luar .luar .educadores .status{color:#9a4424}
.pg-luar .luar .educadores .termo-erro{color:#9a4424}
.pg-luar .luar .educadores .termo-ok p{color:#173f45}
.pg-luar .educadores{box-shadow:0 40px 80px -50px rgba(0,0,0,.9),0 0 0 1px rgba(223,230,255,.16)}

/* ===================== A CIRCULAÇÃO ===================== */
.circ-topo{margin-bottom:clamp(24px,3vw,40px)}
.circ-dica{margin:14px 0 0!important}
.album{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,22px)}
.album li{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden}
.album img,.album video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.album .vaga{display:grid;place-content:center;gap:8px;text-align:center;border:1.5px dashed rgba(223,230,255,.28);background:rgba(223,230,255,.035)}
.vaga-n{font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#f2c074}
.vaga-t{font:700 1.05rem/1.2 var(--f-logo);color:#aeb3d2}
.convite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 36px;align-items:center;margin-top:clamp(36px,5vw,64px);padding:clamp(24px,3.4vw,44px);border-radius:18px;border:1px solid rgba(246,178,74,.4);background:linear-gradient(120deg,rgba(246,178,74,.14),rgba(246,178,74,.03))}
.convite h3{font:800 clamp(1.4rem,2.6vw,2rem)/1.1 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:#fbf3e3;margin:0 0 6px;text-wrap:balance}
.convite p{margin:0}
.convite-acoes{display:flex;flex-wrap:wrap;gap:12px}
/* o horizonte da Caatinga fecha a página */
.horizonte{position:relative;height:clamp(70px,9vw,130px);margin-top:clamp(20px,3vw,40px);background:#05081a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V86c60-14 110-20 170-12 34 4 60 12 96 8V40c0-9 14-9 14 0v20c6 0 10-4 10-10V38c0-8 12-8 12 0v14c0 12-10 20-22 20v8c70-8 120-30 200-26 60 3 90 20 150 18V30c0-9 14-9 14 0v26c7 0 11-4 11-11V32c0-8 12-8 12 0v15c0 13-11 21-23 21v4c60-4 110-24 180-20 76 4 120 26 190 22V52c0-8 12-8 12 0v28c50-6 80-14 132-10v60z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V86c60-14 110-20 170-12 34 4 60 12 96 8V40c0-9 14-9 14 0v20c6 0 10-4 10-10V38c0-8 12-8 12 0v14c0 12-10 20-22 20v8c70-8 120-30 200-26 60 3 90 20 150 18V30c0-9 14-9 14 0v26c7 0 11-4 11-11V32c0-8 12-8 12 0v15c0 13-11 21-23 21v4c60-4 110-24 180-20 76 4 120 26 190 22V52c0-8 12-8 12 0v28c50-6 80-14 132-10v60z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ===================== A TRILHA DO CAPÍTULO E O ZÉ LIGEIRO ===================== */
.trilha{--tl:3vw;--tr:96px;position:fixed;z-index:43;left:0;right:0;bottom:0;height:62px;pointer-events:none;transition:opacity .45s var(--ease-out),transform .55s var(--ease-out)}
.trilha::before{content:"";position:absolute;inset:-26px 0 0;background:linear-gradient(180deg,rgba(5,8,26,0),rgba(5,8,26,.86) 58%);pointer-events:none}
.trilha[hidden]{display:block;opacity:0;transform:translateY(100%)}
.trilha-linha{position:absolute;left:var(--tl);right:var(--tr);bottom:20px;height:0;border-top:2px dashed rgba(242,192,116,.5)}
.trilha-paradas{position:absolute;left:var(--tl);right:var(--tr);bottom:20px;height:0;margin:0;padding:0;list-style:none}
.trilha-paradas li{position:absolute;left:var(--x);bottom:0;transform:translate(-50%,50%)}
.trilha-paradas button{position:relative;display:block;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto}
.trilha-paradas button::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#0a1239;border:2px solid #f2c074;transition:transform .3s var(--ease-out),background-color .3s}
.trilha-paradas button.feita::before{background:#f2c074}
.trilha-paradas button:hover::before,.trilha-paradas button:focus-visible::before{transform:scale(1.4)}
.trilha-paradas button:focus-visible{outline:2px solid var(--brasa);outline-offset:2px;border-radius:50%}
.trilha-paradas span{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;padding:6px 10px 7px;border-radius:9px;background:#fbf3e3;color:#1b2140;font:600 .76rem/1 var(--f-text);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.trilha-paradas button:hover span,.trilha-paradas button:focus-visible span{opacity:1}
.guia{position:absolute;left:0;bottom:18px;width:clamp(64px,5.6vw,84px);padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:translate3d(calc(var(--gx,3vw) - 50%),0,0);transition:transform .45s var(--ease-out);-webkit-tap-highlight-color:transparent}
.guia:focus-visible{outline:2px solid var(--brasa);outline-offset:2px;border-radius:10px}
/* três desenhos da ficha do Zé numa folha só: parado, galope esticado e galope recolhido */
.guia-vira{display:block;transition:transform .25s var(--ease-out)}
.guia.volta .guia-vira{transform:scaleX(-1)}
.guia-ze{display:block;width:100%;aspect-ratio:330/410;transform-origin:50% 100%;background:url(cine/ze-guia.webp) 0 100%/300% 100% no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.guia.anda .guia-ze{animation:guia-corre .36s step-end infinite,guia-pula .36s var(--ease-io) infinite}
@keyframes guia-corre{0%{background-position:50% 100%}50%{background-position:100% 100%}}
@keyframes guia-pula{0%,100%{transform:translateY(0)}50%{transform:translateY(-9%)}}
.guia-balao{position:absolute;left:12px;bottom:100%;transform:translate(0,6px);padding:8px 13px 9px;border-radius:12px;white-space:nowrap;background:#fbf3e3;color:#1b2140;font:600 .8rem/1.1 var(--f-text);box-shadow:0 12px 26px -12px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.guia-balao::after{content:"";position:absolute;left:18px;top:100%;border:7px solid transparent;border-top-color:#fbf3e3}
.guia:hover .guia-balao,.guia:focus-visible .guia-balao,.guia.fala .guia-balao{opacity:1;transform:translate(0,-4px)}
/* perto da borda direita o balão abre para a esquerda */
.guia.lado-dir .guia-balao{left:auto;right:12px}
.guia.lado-dir .guia-balao::after{left:auto;right:18px}
@media (max-width:600px){.trilha{--tr:78px}.trilha-paradas span{display:none}}

/* ===================== telas menores ===================== */
@media (max-width:1000px){
  .objetivos{grid-template-columns:1fr 1fr}
  .pelicula{grid-template-columns:1fr 1fr}
  .elenco-apoio{grid-template-columns:1fr}
}
@media (max-width:860px){
  .inter{grid-template-columns:1fr}
  .convite{grid-template-columns:1fr}
  .album{grid-template-columns:1fr 1fr}
  .sessao-cena{width:132%;margin-left:-16%}
  .sessao-leg{margin-top:-10px}
}
@media (max-width:560px){
  .objetivos{grid-template-columns:1fr}
  .elenco{grid-template-columns:1fr;max-width:330px;margin-inline:auto}
  .pelicula{padding:24px 10px}
}
@media (prefers-reduced-motion:reduce){
  .coruja{display:none}
  .ch-rolo,.ch-luz,.ch-cue svg,.guia-ze{animation:none!important}
}

/* sinopse do média-metragem, ao lado do cartaz e antes do texto sobre o universo */
.sinopse{margin:0 0 2em;padding:0 0 1.8em;border-bottom:2px dashed rgba(246,201,138,.3)}
.sinopse .kicker{margin-bottom:.7em}
.manifesto .sinopse-txt{margin:0;font:500 clamp(1.14rem,1.6vw,1.3rem)/1.7 var(--f-text);color:#fbf3e3;text-wrap:pretty}

/* o VT da Pedagogia da Semente (vertical, com som): o player é o mesmo da vinheta e a trilha da página dá passagem */
.pedagogia-vt{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:center}
.vt-pedagogia{aspect-ratio:9/16;width:100%;max-height:82vh;justify-self:center;border-radius:20px;box-shadow:0 0 0 1px rgba(251,243,227,.12),0 30px 60px -30px rgba(0,0,0,.9),0 0 80px -20px rgba(240,163,127,.25)}
.vt-pedagogia video{border-radius:20px}
.pedagogia-txt p{max-width:56ch}
.pedagogia-frase{margin:1.3em 0 0;font:800 clamp(1.25rem,2.2vw,1.6rem)/1.3 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:#fbf3e3}
.pedagogia-frase span{display:block;color:#f6c98a}
.movimentos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:mov}
.movimentos li{counter-increment:mov;padding:7px 14px 6px;border-radius:999px;border:1.5px dashed rgba(246,201,138,.45);font:600 .92rem/1.2 var(--f-text);color:#fbf3e3}
.movimentos li::before{content:counter(mov);margin-right:8px;font:500 .72rem/1 var(--f-mono);color:#f0a37f}
@media (max-width:900px){
  .pedagogia-vt{grid-template-columns:1fr}
  .pedagogia-txt{order:-1}
  .vt-pedagogia{width:min(100%,340px)}
}