/* ===========================================================================
   Modo apresentação — palco fixo de 1600x900 escalado por JS.
   Pensado para projetor: título grande, pouca palavra, número enorme.
   Atalhos: A abre · setas navegam · F tela cheia · Esc sai
   =========================================================================== */

#deck{
  position:fixed;inset:0;z-index:100;background:#061B16;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  color:#fff;overflow:hidden;
}

/* o palco é sempre 1600x900 e encolhe junto; absolute+translate evita
   o vazamento à direita que o grid/place-items provoca */
#deck-palco{
  position:absolute;left:50%;top:50%;
  width:1600px;height:900px;transform-origin:center center;
  transform:translate(-50%,-50%) scale(1);
}

.slide{
  position:absolute;inset:0;display:none;
  background:#0A2820;color:#fff;overflow:hidden;
}
.slide.vendo{display:block}

.s-rot{
  font-family:'IBM Plex Mono',monospace;font-size:19px;letter-spacing:.17em;
  text-transform:uppercase;color:#7FD3BA;font-weight:500;
}
.s-pad{padding:76px 92px;height:100%;display:flex;flex-direction:column}
/* o miolo ocupa a sobra e fica centrado; o rodapé do slide cola embaixo */
.s-pad>.s-nums, .s-pad>.s-lista, .s-pad>.s-tab, .s-pad>.s-linha,
.s-pad>.s-barras, .s-pad>.s-espacos{margin-block:auto}
.s-pad h2{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:74px;line-height:1.02;
  letter-spacing:-.032em;margin:16px 0 40px;max-width:22ch;text-wrap:balance;
}
.s-pe{
  margin:auto 0 0;font-size:23px;color:#A9CEC2;line-height:1.45;max-width:92ch;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.15);
}
.s-pe b{color:#fff;font-weight:600}

/* ---- capa ---- */
.s-capa{
  height:100%;padding:96px 92px;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center 45%;
}
.s-capa h1{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:108px;line-height:.95;
  letter-spacing:-.038em;margin:20px 0 0;max-width:19ch;text-wrap:balance;
}
.s-capa h1 em{font-style:normal;color:#8FE0C6}
.s-capa p{font-size:30px;color:#CFE6DE;margin:24px 0 0;max-width:52ch;line-height:1.35}
.s-fita{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.s-fita b{
  font-family:'IBM Plex Mono',monospace;font-size:19px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);color:#EAF5F1;
}

/* ---- números ---- */
.s-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.s-nums.q4{grid-template-columns:repeat(4,1fr);gap:24px}
.s-nums>div{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:34px 30px;
}
.s-nums .v{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:66px;line-height:1;
  letter-spacing:-.038em;color:#8FE0C6;font-variant-numeric:tabular-nums;
  white-space:nowrap;                      /* R$ 121.510 não pode virar duas linhas */
}
.s-nums.q4 .v{font-size:49px}
.s-nums .k{
  font-family:'IBM Plex Mono',monospace;font-size:17px;letter-spacing:.11em;
  text-transform:uppercase;color:#fff;margin-top:16px;font-weight:500;
}
.s-nums .d{font-size:21px;color:#A9CEC2;margin-top:9px;line-height:1.35}

/* ---- lista ---- */
.s-lista{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.s-lista li{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:baseline;
  padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.13);
}
.s-lista li:last-child{border-bottom:0}
.s-lista b{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:38px;letter-spacing:-.022em;
  color:#fff;white-space:nowrap;
}
.s-lista span{font-size:25px;color:#B6D5CA;line-height:1.38}

/* ---- tabela ---- */
.s-tab{width:100%;border-collapse:collapse;font-size:27px}
.s-tab td{padding:19px 0;border-bottom:1px solid rgba(255,255,255,.14);vertical-align:baseline}
.s-tab td.c{color:#A9CEC2;font-size:23px;padding-left:26px}
.s-tab td.v{
  text-align:right;font-family:'Archivo',sans-serif;font-weight:700;font-size:34px;
  letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.s-tab tr.forte td{color:#8FE0C6;border-bottom:0;border-top:2px solid rgba(143,224,198,.5)}
.s-tab tr.forte td.v{font-size:40px;font-weight:800}

/* ---- linha do tempo ---- */
.s-linha{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;position:relative;padding-top:42px}
.s-linha::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(143,224,198,.32)}
.s-linha>div{position:relative;padding-right:14px}
.s-linha>div::before{
  content:"";position:absolute;left:0;top:-29px;width:15px;height:15px;border-radius:50%;
  background:#8FE0C6;border:3px solid #0A2820;
}
.s-linha .q{
  font-family:'IBM Plex Mono',monospace;font-size:17px;letter-spacing:.1em;
  text-transform:uppercase;color:#7FD3BA;
}
.s-linha .t{font-family:'Archivo',sans-serif;font-weight:700;font-size:31px;margin:13px 0 10px;line-height:1.12;letter-spacing:-.018em}
.s-linha .d{font-size:21px;color:#A9CEC2;line-height:1.4}

/* ---- foto cheia ---- */
.s-foto{
  height:100%;padding:92px;display:flex;align-items:flex-end;
  background-size:cover;background-position:center 45%;
}
.s-foto h2{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:76px;line-height:1.02;
  letter-spacing:-.033em;margin:18px 0 0;max-width:20ch;text-wrap:balance;
}
.s-foto p{font-size:27px;color:#D3E7E0;margin:22px 0 0;max-width:62ch;line-height:1.38}

/* ---- fecho / pedido ---- */
.s-fecho{
  height:100%;padding:82px 92px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,#0A4A3D 0%,#062A22 100%);
}
.s-fecho h1{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:76px;line-height:1;
  letter-spacing:-.035em;margin:16px 0 42px;max-width:22ch;text-wrap:balance;
}
.s-fecho h1 em{font-style:normal;color:#8FE0C6}
.s-pedidos{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.s-pedidos li{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  font-size:31px;line-height:1.32;color:#EAF5F1;
}
.s-pedidos span{
  width:52px;height:52px;border-radius:50%;background:#8FE0C6;color:#062A22;
  display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:26px;
}
.s-ass{margin:48px 0 0;font-size:22px;color:#9FC7BA;font-family:'IBM Plex Mono',monospace;letter-spacing:.05em}

/* ---- controles ---- */
.deck-barra-fora{position:fixed;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.12);z-index:102}
#deck-barra{height:100%;width:0;background:#8FE0C6;transition:width .2s ease-out}
.deck-ctrl{
  position:fixed;right:18px;bottom:16px;z-index:102;display:flex;align-items:center;gap:7px;
  background:rgba(6,27,22,.82);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px 9px;backdrop-filter:blur(8px);
}
.deck-bt{
  appearance:none;border:0;background:rgba(255,255,255,.1);color:#EAF5F1;cursor:pointer;
  width:34px;height:34px;border-radius:50%;font-size:19px;line-height:1;
  display:grid;place-items:center;transition:background .12s;
}
.deck-bt:hover{background:rgba(255,255,255,.22)}
.deck-bt.larga{width:auto;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:600}
.deck-conta{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#9FC7BA;padding:0 5px}
.deck-conta b{color:#fff;font-weight:600}
.deck-ctrl:hover{opacity:1}
@media (hover:hover){.deck-ctrl{opacity:.32;transition:opacity .2s}.deck-ctrl:hover{opacity:1}}

@media print{#deck{display:none !important}}

/* O palco de 1600x900 encolhe junto com a tela: num telefone o corpo do texto sai
   com 4 a 7 pixels. A apresentação é feita para projetor, e aqui isso é dito em vez
   de fingir que dá para ler. */
.deck-aviso{display:none}
@media (max-width:760px){
  .deck-aviso{
    display:block;position:fixed;left:12px;right:12px;bottom:62px;z-index:103;
    background:rgba(6,27,22,.92);border:1px solid rgba(143,224,198,.35);
    border-radius:10px;padding:11px 14px;color:#CFE6DE;font-size:13px;line-height:1.45;
    font-family:'IBM Plex Sans',system-ui,sans-serif;
  }
  .deck-aviso b{color:#8FE0C6;font-weight:600}
}


/* ===========================================================================
   ENTRADA DOS ELEMENTOS — o slide monta na frente de quem assiste, em cascata.
   Tudo por CSS: nada aqui depende de JavaScript rodando na hora certa.
   =========================================================================== */
@keyframes sobe-deck{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes surge{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes risca{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.slide.vendo .s-rot        {animation:sobe-deck .45s .04s backwards ease-out}
.slide.vendo h1,
.slide.vendo .s-pad>h2     {animation:sobe-deck .55s .10s backwards ease-out}
.slide.vendo .s-capa p,
.slide.vendo .s-foto p     {animation:sobe-deck .55s .26s backwards ease-out}
.slide.vendo .s-fita       {animation:sobe-deck .55s .38s backwards ease-out}
.slide.vendo .s-pe         {animation:sobe-deck .5s .55s backwards ease-out}

.slide.vendo .s-nums>div   {animation:surge .5s backwards ease-out;
                            animation-delay:calc(.20s + var(--i,0) * .09s)}
.slide.vendo .s-lista>li   {animation:sobe-deck .45s backwards ease-out;
                            animation-delay:calc(.18s + var(--i,0) * .06s)}
.slide.vendo .s-tab tr     {animation:sobe-deck .45s backwards ease-out;
                            animation-delay:calc(.18s + var(--i,0) * .07s)}
.slide.vendo .s-linha>div  {animation:sobe-deck .5s backwards ease-out;
                            animation-delay:calc(.28s + var(--i,0) * .10s)}
.slide.vendo .s-linha::before{animation:risca .9s .12s backwards ease-out;transform-origin:left center}
.slide.vendo .s-pedidos>li {animation:sobe-deck .5s backwards ease-out;
                            animation-delay:calc(.22s + var(--i,0) * .10s)}

@media (prefers-reduced-motion: reduce){
  .slide.vendo *{animation:none !important}
}

/* ---- gráfico de barras ---- */
.s-barras{display:grid;gap:30px;width:100%}
.s-bar{display:grid;grid-template-columns:340px 1fr 250px;gap:30px;align-items:center}
.s-bar .bk{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:27px;line-height:1.15;
  letter-spacing:-.018em;color:#fff;
}
.s-bar .bk span{
  display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:#7FD3BA;margin-top:6px;
}
.s-bar .bt{height:48px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden}
.s-bar .bt i{
  display:block;height:100%;width:var(--w);background:var(--c);border-radius:6px;
  transform-origin:left center;
}
.slide.vendo .s-bar .bt i{animation:cresce .85s backwards cubic-bezier(.22,1,.36,1);
                          animation-delay:calc(.30s + var(--i,0) * .10s)}
.s-bar .bv{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:37px;letter-spacing:-.028em;
  white-space:nowrap;font-variant-numeric:tabular-nums;color:#fff;text-align:right;
}
.s-bar.forte .bk,.s-bar.forte .bv{color:#8FE0C6}
.slide.vendo .s-bar{animation:sobe-deck .45s backwards ease-out;
                    animation-delay:calc(.16s + var(--i,0) * .08s)}

/* ---- grade de espaços ---- */
.s-espacos{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:stretch}
.s-espacos figure{margin:0;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);
                  border:1px solid rgba(255,255,255,.14)}
.s-espacos img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.s-espacos figcaption{padding:18px 18px 20px}
.s-espacos figcaption b{
  display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;
  line-height:1.12;letter-spacing:-.018em;color:#fff;
}
.s-espacos figcaption span{display:block;font-size:19px;color:#A9CEC2;margin-top:9px;line-height:1.32}
.slide.vendo .s-espacos figure{animation:surge .55s backwards ease-out;
                               animation-delay:calc(.22s + var(--i,0) * .10s)}


/* ===========================================================================
   ANTES E DEPOIS — o mesmo enquadramento, o espaço como ele é hoje e o espaço
   montado. O 'depois' nasceu da foto real que está do outro lado do divisor,
   então quem olha consegue conferir se a projeção respeitou o prédio.
   O divisor varre sozinho ao entrar no slide e depois obedece ao ponteiro.
   =========================================================================== */
.s-ad{
  height:100%;display:grid;grid-template-columns:0.62fr 1fr;gap:48px;
  padding:62px 74px;align-items:center;
}
.s-ad-txt h2{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:60px;line-height:1.02;
  letter-spacing:-.032em;margin:16px 0 26px;text-wrap:balance;
}
.s-ad-itens{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:13px}
.s-ad-itens li{
  position:relative;padding-left:34px;font-size:25px;color:#EAF5F1;line-height:1.3;
}
.s-ad-itens li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;border-radius:4px;
  background:#8FE0C6;
}
.s-ad-pe{font-size:21px;color:#A9CEC2;line-height:1.45;margin:0}
.s-ad-pe b{color:#fff;font-weight:600}

.s-ad-par{
  --corte:0%;
  position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  cursor:ew-resize;touch-action:none;user-select:none;justify-self:center;
}
.s-ad-par.retrato{aspect-ratio:3/4;max-height:770px;width:auto}
.s-ad-par img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s-ad-par .ad-corte{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 calc(100% - var(--corte)) 0 0);
}
.s-ad-par .ad-linha{
  position:absolute;top:0;bottom:0;left:var(--corte);width:3px;background:#8FE0C6;
  box-shadow:0 0 18px rgba(143,224,198,.8);pointer-events:none;
}
.s-ad-par .ad-linha i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#8FE0C6;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
.s-ad-par .ad-linha i::before,.s-ad-par .ad-linha i::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.s-ad-par .ad-linha i::before{left:11px;transform:translateY(-50%);border-right:10px solid #062A22}
.s-ad-par .ad-linha i::after{right:11px;transform:translateY(-50%);border-left:10px solid #062A22}
.s-ad-rot,.s-ad-par .ad-rot{
  position:absolute;bottom:18px;font-family:'IBM Plex Mono',monospace;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  background:rgba(6,27,22,.82);border:1px solid rgba(255,255,255,.2);
  padding:7px 14px;border-radius:999px;color:#EAF5F1;pointer-events:none;
}
.s-ad-par .ad-rot.esq{left:18px}
.s-ad-par .ad-rot.dir{right:18px;background:rgba(143,224,198,.9);color:#062A22;border-color:transparent}

/* varredura de entrada: mostra que dá para arrastar, sem precisar dizer */
@keyframes varre{
  0%{--corte:0%} 55%{--corte:78%} 100%{--corte:45%}
}
@property --corte{syntax:'<percentage>';inherits:true;initial-value:0%}
.slide.vendo .s-ad-par{animation:varre 2.1s .5s forwards cubic-bezier(.5,0,.2,1)}
.s-ad-par.mexendo{animation:none !important}
.slide.vendo .s-ad-txt h2{animation:sobe-deck .55s .10s backwards ease-out}
.slide.vendo .s-ad-itens li{animation:sobe-deck .45s backwards ease-out;
                            animation-delay:calc(.28s + var(--i,0) * .08s)}
.slide.vendo .s-ad-pe{animation:sobe-deck .5s .55s backwards ease-out}

@media (prefers-reduced-motion: reduce){
  .slide.vendo .s-ad-par{animation:none;--corte:45%}
}


/* ---- fileira de logos na capa ----------------------------------------------
   As marcas institucionais sao escuras sobre transparente: sobre o fundo escuro
   do slide elas sumiriam. Cada uma vai sobre uma placa branca, que e a pratica
   correta e preserva a cor de marca. */
.s-logos{display:flex;align-items:center;gap:16px;margin-top:40px;flex-wrap:wrap}
.s-logos span{
  background:#fff;border-radius:12px;padding:14px 20px;display:grid;place-items:center;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6);
}
.s-logos img{height:46px;width:auto;display:block}
.slide.vendo .s-logos span{animation:surge .5s backwards ease-out;
                           animation-delay:calc(.52s + var(--i,0) * .08s)}


/* ---- metas por agencia: tres colunas, tres metas cada ---------------------- */
.s-metas{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.s-meta-col{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:30px 28px;
}
.s-meta-col .cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.16);
}
.s-meta-col .cab b{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.025em;color:#8FE0C6;
}
.s-meta-col .cab span{
  font-family:'IBM Plex Mono',monospace;font-size:17px;color:#A9CEC2;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.s-meta-col ul{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.s-meta-col li i{
  display:block;font-style:normal;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:29px;line-height:1.1;letter-spacing:-.02em;color:#fff;
}
.s-meta-col li em{display:block;font-style:normal;font-size:19px;color:#A9CEC2;margin-top:7px;line-height:1.35}
.slide.vendo .s-meta-col{animation:sobe-deck .5s backwards ease-out;
                         animation-delay:calc(.20s + var(--i,0) * .12s)}

/* ---- frentes de apoio: grade de cartoes para escolher ---------------------- */
.s-frentes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.s-frente{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:13px;padding:26px 22px;
}
.s-frente>b{
  width:34px;height:34px;flex:none;border-radius:9px;background:#8FE0C6;color:#062A22;
  display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;
}
.s-frente i{
  display:block;font-style:normal;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:23px;line-height:1.12;letter-spacing:-.018em;color:#fff;
}
.s-frente em{display:block;font-style:normal;font-size:17px;color:#A9CEC2;margin-top:7px;line-height:1.3}
.slide.vendo .s-frente{animation:surge .45s backwards ease-out;
                       animation-delay:calc(.18s + var(--i,0) * .055s)}


/* ---- herói numérico com painel de foto -------------------------------------
   O número é o protagonista, não o título. A foto entra como lastro do que o
   número descreve, sempre com legenda factual dizendo de onde ela é. */
.s-nf{height:100%;display:grid;grid-template-columns:1fr .78fr;gap:52px;padding:68px 84px;align-items:center}
.s-nf.esq{grid-template-columns:.78fr 1fr}
.s-nf.esq .nf-txt{order:2}
.s-nf.esq .nf-foto{order:1}
.nf-txt h2{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:52px;line-height:1.04;
  letter-spacing:-.028em;margin:14px 0 34px;max-width:18ch;text-wrap:balance;
}
.nf-heroi{
  font-family:'Archivo',sans-serif;font-weight:800;line-height:.92;white-space:nowrap;
  letter-spacing:-.045em;color:#8FE0C6;font-variant-numeric:tabular-nums;
}
.nf-heroik{font-size:24px;color:#CFE6DE;margin-top:14px;line-height:1.3;max-width:30ch}
.nf-sat{
  display:flex;gap:44px;margin-top:34px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap;
}
.nf-sat b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:44px;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
}
.nf-sat span{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:.07em;
  text-transform:uppercase;color:#A9CEC2;margin-top:8px;max-width:22ch;line-height:1.35;
}
.nf-pe{font-size:21px;color:#A9CEC2;line-height:1.45;margin:30px 0 0;max-width:52ch}
.nf-pe b{color:#fff;font-weight:600}
.nf-foto{position:relative;margin:0;height:100%;max-height:740px;border-radius:14px;overflow:hidden}
.nf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.nf-foto figcaption{
  position:absolute;left:16px;bottom:16px;font-family:'IBM Plex Mono',monospace;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(6,27,22,.84);
  border:1px solid rgba(255,255,255,.2);padding:7px 13px;border-radius:999px;color:#EAF5F1;
}
.slide.vendo .nf-heroi{animation:sobe-deck .6s .18s backwards ease-out}
.slide.vendo .nf-heroik{animation:sobe-deck .5s .30s backwards ease-out}
.slide.vendo .nf-sat>div{animation:sobe-deck .5s backwards ease-out;
                         animation-delay:calc(.42s + var(--i,0) * .10s)}
.slide.vendo .nf-pe{animation:sobe-deck .5s .62s backwards ease-out}
.slide.vendo .nf-foto{animation:surge .7s .10s backwards ease-out}

/* ---- mosaico: uma foto ancora e ladrilhos tipograficos ---------------------
   As seis programacoes sem foto nao ganham ilustracao inventada: o nome e a
   imagem, e a faixa de cor agrupa as sete em tres familias de leitura. */
.s-pad-mos h2{margin-bottom:30px;font-size:62px}
.s-mos{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
       gap:16px;height:462px}
.mos-foto{position:relative;margin:0;grid-column:1/3;grid-row:1/3;border-radius:14px;overflow:hidden}
.mos-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mos-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:24px 22px 20px;
  background:linear-gradient(180deg,rgba(6,27,22,0),rgba(6,27,22,.92));
}
.mos-foto figcaption b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:32px;
  letter-spacing:-.022em;color:#fff;line-height:1.1;
}
.mos-foto figcaption span{display:block;font-size:19px;color:#CFE6DE;margin-top:6px}
.mos-cred{
  position:absolute;right:12px;top:12px;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#EAF5F1;
  background:rgba(6,27,22,.8);border:1px solid rgba(255,255,255,.2);padding:5px 10px;border-radius:999px;
}
.mos-tipo{
  position:relative;border-radius:13px;padding:26px 20px 20px;display:flex;
  flex-direction:column;justify-content:flex-end;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);overflow:hidden;
}
.mos-tipo::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--faixa)}
.mos-tipo b{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(20px,1.6vw,26px);
  line-height:1.1;letter-spacing:-.02em;color:#fff;
}
.mos-tipo span{display:block;font-size:17px;color:#A9CEC2;margin-top:8px;line-height:1.25}
.slide.vendo .mos-foto{animation:surge .6s .14s backwards ease-out}
.slide.vendo .mos-tipo{animation:sobe-deck .45s backwards ease-out;
                       animation-delay:calc(.22s + var(--i,0) * .07s)}


/* o fecho reencontra as tres marcas da capa: abre e fecha com quem assina */
.s-fecho .s-logos{margin-top:38px}