/* /apresentacao — uma regra por seção. */

/* .ap-peca não usa o gate genérico de .sis-rv (css/sistema/shell.css) porque não é mais
   revelado por lá — ver js/apres/pecas.js e js/apres/shell.js. Sem isto, o card apareceria
   cheio antes do fade controlado por JS entrar (gsap.set roda antes de html.is-ready, então
   não pisca; ver App.ready() em js/app.js). */
html:not(.is-ready):not(.is-shot) .ap-peca{visibility:hidden}

/* 04 · uma semana */
.ap-semana__list{margin-top:calc(64 * var(--vhu)); border-top:1px solid #E8E8E8}
.ap-semana__list li{
  display:grid; grid-template-columns:calc(120 * var(--u)) 1fr; column-gap:calc(16 * var(--u));
  padding:calc(20 * var(--vhu)) 0; border-bottom:1px solid #E8E8E8;
}
.ap-semana__list .dia{font-size:calc(8 * var(--u)); color:#8A8A8A; padding-top:calc(4 * var(--vhu))}
.ap-semana__list .t{display:block; font-size:calc(20 * var(--u)); line-height:calc(24 * var(--vhu)); color:#0C0C0C}
.ap-semana__list .p{display:block; margin-top:calc(6 * var(--vhu)); max-width:calc(576 * var(--u)); font-size:calc(11.5 * var(--u)); line-height:calc(16 * var(--vhu)); color:#555}

/* 05 · as seis peças — a grade; os cards são montados por js/apres/pecas.js */
.ap-pecas__grid{margin-top:calc(64 * var(--vhu)); display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(16 * var(--u)) calc(16 * var(--u))}
.ap-peca__prev{position:relative; display:block; overflow:hidden; background:#151515; aspect-ratio:816/467}
.ap-peca__prev img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ap-peca:hover .ap-peca__prev img{transform:scale(1.03)}
.ap-peca__open{
  position:absolute; right:calc(8 * var(--u)); bottom:calc(8 * var(--vhu));
  padding:calc(4 * var(--vhu)) calc(8 * var(--u)); background:#0C0C0C; color:#fff;
  font-size:calc(7.5 * var(--u)); opacity:0; transition:opacity .3s;
}
.ap-peca:hover .ap-peca__open{opacity:1}
.ap-peca__chip{margin-top:calc(12 * var(--vhu))}
.ap-peca__t{margin-top:calc(8 * var(--vhu)); font-size:calc(20 * var(--u)); line-height:calc(22 * var(--vhu))}
.ap-peca__t a{color:#fff; text-decoration:none}
.ap-peca__t a:hover{color:#94F2CC}
.ap-peca__sub{margin-top:calc(4 * var(--vhu)); font-size:calc(10 * var(--u)); color:#8A8A8A}
.ap-peca__resolve{margin-top:calc(10 * var(--vhu)); font-size:calc(11 * var(--u)); line-height:calc(15 * var(--vhu)); color:#C2C2C2}
.ap-pecas__hub{display:inline-flex; margin-top:calc(48 * var(--vhu))}

/* 06 · o presente */

/* 07 · como isso continua */
.ap-frentes{margin-top:calc(64 * var(--vhu)); display:grid; grid-template-columns:1fr 1fr; column-gap:calc(48 * var(--u))}
.ap-frente{border-top:1px solid #fff; padding-top:calc(20 * var(--vhu))}
.ap-frente .k{font-size:calc(8 * var(--u)); color:#8A8A8A}
.ap-frente .t{margin-top:calc(12 * var(--vhu)); font-size:calc(26 * var(--u)); line-height:calc(28 * var(--vhu)); color:#fff}
.ap-frente .d{margin-top:calc(14 * var(--vhu)); font-size:calc(12 * var(--u)); line-height:calc(17 * var(--vhu)); color:#C2C2C2}
.ap-frente ul{margin-top:calc(18 * var(--vhu)); border-top:1px solid #222}
.ap-frente li{padding:calc(10 * var(--vhu)) 0; border-bottom:1px solid #222; font-size:calc(11 * var(--u)); line-height:calc(15 * var(--vhu)); color:#8A8A8A}
.ap-frente .r{margin-top:calc(18 * var(--vhu)); font-size:calc(8 * var(--u)); color:#94F2CC}

/* 07 · o plano — os dois programas, lado a lado */
.ap-quadros__grid{margin-top:calc(64 * var(--vhu)); display:grid; grid-template-columns:1fr 1fr; column-gap:calc(48 * var(--u))}
.ap-quadro{border-top:1px solid #fff; padding-top:calc(20 * var(--vhu))}
.ap-quadro .n{display:block; font-size:calc(22 * var(--u)); line-height:1; color:#3A3A3A}
.ap-quadro .nome{margin-top:calc(12 * var(--vhu)); font-size:calc(24 * var(--u)); line-height:calc(26 * var(--vhu)); color:#fff}
.ap-quadro .formato{margin-top:calc(10 * var(--vhu)); font-size:calc(8 * var(--u)); color:#94F2CC}
.ap-quadro .d{margin-top:calc(16 * var(--vhu)); font-size:calc(12 * var(--u)); line-height:calc(17 * var(--vhu)); color:#C2C2C2}
.ap-quadro .gera{margin-top:calc(18 * var(--vhu)); padding-top:calc(14 * var(--vhu)); border-top:1px solid #222; font-size:calc(11.5 * var(--u)); line-height:calc(16 * var(--vhu)); color:#8A8A8A}
.ap-quadro .gera .lbl{display:block; margin-bottom:calc(6 * var(--vhu)); font-size:calc(7.5 * var(--u)); color:#555}
.ap-quadros__remate{
  margin-top:calc(56 * var(--vhu)); max-width:calc(576 * var(--u));
  font-size:calc(13 * var(--u)); line-height:calc(19 * var(--vhu)); color:#fff;
}