/* =========================================================
   Open Educacao - Camada "scrollytelling" (cinematica)
   Carregue DEPOIS de style.css. Usa os mesmos tokens
   (--brand, --ink, --s-*, --r-*) definidos la.

   Todas as imagens vivem em: assets/img/cenas/
   ========================================================= */

/* =========================================================
   1. HEADER FLUTUANTE (so na home)
   Sobre a hero o header e transparente; ao rolar vira solido.
   A classe .is-solid e adicionada pelo app.js.
   ========================================================= */
.header--float{
  position:fixed; left:0; right:0; top:0;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background .35s ease, border-color .35s ease;
}
.header--float.is-solid{
  background:rgba(14,12,11,.78);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
}

/* Barra fina de progresso da rolagem */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  z-index:60; pointer-events:none;
}

/* =========================================================
   2. HERO CINEMATICA (100% da tela + zoom-in infinito)

   >>> IMAGEM DE FUNDO: assets/img/cenas/palco-construai.jpg
       (originalmente construai1.jpg)
       Para trocar, edite o <img> dentro de .hero-cine__bg no HTML.
   ========================================================= */
.hero-cine{
  position:relative;
  min-height:100vh;
  min-height:100svh;          /* evita o "pulo" da barra do navegador no celular */
  display:flex; align-items:center;
  overflow:hidden;
  /* Respiro no topo = altura do header (74px) + folga.
     Sem isso, em notebook (tela baixa) o texto encosta no menu. */
  padding:calc(74px + clamp(24px,5vh,56px)) 0 clamp(48px,9vh,96px);
}


.hero-cine__bg{ position:absolute; inset:0; z-index:0; background:var(--ink); }

/* Camada WebGL (constelacao) - entre a foto e o texto */
.hero-cine__fx{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;              /* o mouse ainda seleciona o texto/CTA */
  opacity:0; transition:opacity 1.2s ease .3s;
}
.hero-cine__fx.is-live{ opacity:1; }

/* O zoom lento, continuo e infinito.
   'alternate' faz a imagem voltar suavemente em vez de cortar seco. */
.hero-cine__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
  transform-origin:58% 45%;   /* mantem o palco no enquadramento durante o zoom */
  animation:slowZoom 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes slowZoom{
  from{ transform:scale(1); }
  to  { transform:scale(1.16); }
}

/* Escurecimento em camadas: mantem o texto legivel sobre qualquer foto */
.hero-cine__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top,    rgba(14,12,11,.96) 0%,  rgba(14,12,11,.30) 55%, rgba(14,12,11,.55) 100%),
    linear-gradient(to right,  rgba(14,12,11,.80) 0%,  rgba(14,12,11,.20) 62%, transparent 100%);
}

.hero-cine__content{ position:relative; z-index:2; max-width:900px; }
.hero-cine h1{
  font-size:clamp(34px, 5.6vw, 68px);
  line-height:1.06; margin-bottom:var(--s-5);
}
.hero-cine .lead{ font-size:clamp(16px,1.5vw,20px); max-width:56ch; margin-bottom:var(--s-7); }

/* Notebooks / telas baixas: reduz a tipografia para sobrar respiro em vez
   de espremer o conteudo contra o topo.
   IMPORTANTE: precisa vir DEPOIS das regras base acima - media query nao
   aumenta especificidade, entao a ultima declaracao e a que vale. */
@media (min-width:641px) and (max-height:900px){
  .hero-cine__content{ max-width:820px; }
  .hero-cine h1{ font-size:clamp(30px,4vw,54px); }
  .hero-cine .lead{ font-size:16px; margin-bottom:var(--s-6); }
  .hero-cine .hero__stats{ margin-top:var(--s-6); padding-top:var(--s-5); }
}

/* Entrada suave ao carregar a pagina (fade-in + leve subida), em cascata */
.fade-up{ opacity:0; animation:fadeUp 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
.fade-up--1{ animation-delay:.15s; }
.fade-up--2{ animation-delay:.40s; }
.fade-up--3{ animation-delay:.65s; }
.fade-up--4{ animation-delay:.90s; }
.fade-up--5{ animation-delay:1.15s; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}

/* Indicador "role para baixo" - fica na lateral direita para nao
   colidir com a barra de numeros da hero */
.scroll-cue{
  position:absolute; right:clamp(24px,4vw,56px); bottom:26px; z-index:3;
  display:grid; justify-items:center; gap:10px;
  font-family:var(--font-head); font-size:10px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
}
.scroll-cue::after{
  content:""; width:1px; height:44px;
  background:linear-gradient(to bottom, var(--brand), transparent);
  animation:cueDrop 2.4s ease-in-out infinite;
}
@keyframes cueDrop{
  0%,100%{ opacity:.25; transform:scaleY(.55); transform-origin:top; }
  50%    { opacity:1;   transform:scaleY(1);   transform-origin:top; }
}
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* =========================================================
   3. REVELACAO NA ROLAGEM (IntersectionObserver)
   Reaproveita a classe .reveal do style.css e acrescenta
   direcoes e atrasos. Sem JS, tudo continua visivel.
   ========================================================= */
.reveal-on .reveal--left { transform:translateX(-38px); }
.reveal-on .reveal--right{ transform:translateX(38px); }
.reveal-on .reveal--zoom { transform:scale(.94); }
.reveal-on .reveal--up   { transform:translateY(46px); }
.reveal-on .reveal.is-in{ transform:none; }

/* Atrasos para escalonar elementos vizinhos */
.reveal-on .reveal--d1{ transition-delay:.12s; }
.reveal-on .reveal--d2{ transition-delay:.24s; }
.reveal-on .reveal--d3{ transition-delay:.36s; }

/* Transicao um pouco mais longa para blocos grandes */
.reveal-on .reveal--slow{ transition-duration:1s; }

/* No celular tudo entra so de baixo para cima: o deslize lateral
   empurraria o conteudo para fora da tela durante a animacao. */
@media (max-width:900px){
  .reveal-on .reveal--left,
  .reveal-on .reveal--right{ transform:translateY(32px); }
}

/* =========================================================
   4. SECAO DE CONTEUDO DINAMICO (texto x imagem alternados)

   >>> IMAGENS: mapa-brasil.jpg (construai4)
                palestra-retrato.jpg (construai2)
                painel-conversa.jpg (construai5)
   ========================================================= */
.story{ display:grid; gap:clamp(28px,5vw,var(--s-9)); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.story + .story{ margin-top:clamp(64px,9vw,140px); }

/* Inverte a ordem visual sem mexer na ordem do HTML (bom para leitores de tela) */
.story--flip .story__media{ order:-1; }

.story__media{
  position:relative; overflow:hidden;
  border-radius:var(--r-4); border:1px solid var(--line);
  background:var(--surface);
}
.story__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.story__media--tall{ aspect-ratio:4 / 5; }
.story__media--wide{ aspect-ratio:4 / 3; }

/* Etiqueta flutuante sobre a foto (opcional) */
.story__badge{
  position:absolute; left:var(--s-5); bottom:var(--s-5); z-index:2;
  background:rgba(14,12,11,.62);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:9px 18px;
  font-family:var(--font-head); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt);
}
.story__num{
  font-family:var(--font-head); font-size:12px; font-weight:700;
  letter-spacing:.24em; color:var(--brand);
  display:block; margin-bottom:var(--s-4);
}

@media (max-width:900px){
  .story{ grid-template-columns:1fr; }
  /* No celular a foto vem SEMPRE antes do texto, inclusive nos blocos
     --flip. A regra de --flip precisa repetir o order:-1 porque ela tem
     especificidade maior que a regra generica abaixo: se ficasse em
     order:0, a foto do bloco "02 - Alavancas" caia embaixo do titulo. */
  .story--flip .story__media{ order:-1; }
  .story__media{ order:-1; }
  .story__media--tall{ aspect-ratio:4 / 3; }
}

/* =========================================================
   5. PARALLAX + GLASSMORPHISM (fachadas das lojas)

   >>> IMAGENS: fachada-medianeira.jpg / fachada-macri.jpg
       O caminho da foto fica direto no atributo
       style="background-image:url('...')" de cada
       <section class="parallax"> no HTML.

       (Importante: o caminho precisa ficar no HTML, e nao em uma
       variavel CSS - dentro do .css ele seria resolvido a partir
       da pasta assets/ e quebraria.)
   ========================================================= */
.parallax{
  position:relative;
  min-height:clamp(440px, 78vh, 720px);
  display:grid; place-items:center;
  padding:clamp(64px,10vw,120px) 0;

  background-size:cover;
  background-position:center;
  background-attachment:fixed;   /* o efeito parallax classico */
  /* Sem borda: a linha de 1px aparecia como um risco atravessando a foto.
     A transicao agora e feita pelo degrade do ::before. */
}
/* Veu escuro + dissolucao nas bordas.
   As duas primeiras camadas fazem a faixa "nascer" e "morrer" na cor do
   fundo, eliminando o corte seco no topo e na base da secao.
   A terceira e o veu que garante contraste para o texto sobre a fachada. */
.parallax::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(14,12,11,0) 24%),
    linear-gradient(to top,    var(--ink) 0%, rgba(14,12,11,0) 24%),
    linear-gradient(rgba(14,12,11,.80), rgba(14,12,11,.88));
}

/* background-attachment:fixed trava ou pisca no iOS/Android.
   Nesses aparelhos usamos rolagem normal - o visual continua bom. */
@media (hover:none), (max-width:900px){
  .parallax{ background-attachment:scroll; min-height:clamp(380px,62vh,520px); }
}

/* Bloco de vidro fosco centralizado */
.glass{
  position:relative; z-index:2;
  max-width:720px; margin:0 auto; text-align:center;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-4);
  padding:clamp(28px,4.5vw,var(--s-9));
}
.glass h2{ margin-bottom:var(--s-5); }
.glass p{ color:rgba(247,243,241,.86); max-width:56ch; margin:0 auto; }
.glass .eyebrow{ justify-content:center; }
.glass .btn{ margin-top:var(--s-7); }

/* Navegadores sem backdrop-filter (Firefox antigo): fundo solido */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgba(20,17,16,.90); }
  .story__badge{ background:rgba(20,17,16,.92); }
}

/* =========================================================
   6. CINEMAGRAPHS / VIDEOS EM LOOP (gerados por IA)

   >>> Cada <video> ja aponta para o "poster" (a foto estatica).
       Quando o MP4 estiver pronto, basta descomentar a linha
       <source src="..."> dentro do video no HTML.
   ========================================================= */
.cinegrid{ display:grid; gap:var(--s-6); grid-template-columns:repeat(3,minmax(0,1fr)); }
.cinegrid--feature{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
@media (max-width:960px){ .cinegrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .cinegrid,.cinegrid--feature{ grid-template-columns:1fr; }
}

.cinemagraph{
  position:relative; margin:0;
  /* Dentro do .cinegrid o figure e um item de grade e, por padrao,
     e esticado ate a altura da linha. Com isso a altura vira um valor
     fixo, o height:100% da midia consome ela inteira e a legenda sobra
     para FORA da caixa - foi o que fazia o texto ficar por baixo da
     imagem seguinte no celular. Com align-self:start a altura volta a
     ser calculada pelo conteudo e a legenda entra na conta. */
  align-self:start;
}
.cinemagraph video,
.cinemagraph img{
  width:100%; height:100%; display:block; object-fit:cover;
  border-radius:var(--r-3);
  border:1px solid var(--line);
  /* Sombra suave para destacar o movimento do video */
  box-shadow:0 18px 46px rgba(0,0,0,.45);
  background:var(--surface);
}
.cinemagraph--21x9 video,.cinemagraph--21x9 img{ aspect-ratio:21 / 9; }
.cinemagraph--16x9 video,.cinemagraph--16x9 img{ aspect-ratio:16 / 9; }
.cinemagraph--4x3  video,.cinemagraph--4x3  img { aspect-ratio:4 / 3; }
.cinemagraph--3x4  video,.cinemagraph--3x4  img { aspect-ratio:3 / 4; }
.cinemagraph--1x1  video,.cinemagraph--1x1  img { aspect-ratio:1 / 1; }

.cinemagraph figcaption{
  margin-top:var(--s-4);
  font-size:13px; color:var(--dim); line-height:1.5;
}
.cinemagraph figcaption b{
  display:block; font-family:var(--font-head); font-size:14px;
  font-weight:700; color:var(--txt); margin-bottom:3px;
}

/* Selo discreto de "em movimento" */
.cinemagraph__tag{
  position:absolute; top:var(--s-4); left:var(--s-4); z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(14,12,11,.60);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:6px 13px;
  font-family:var(--font-head); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.cinemagraph__tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--brand);
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* =========================================================
   7. FAIXA DE DESTAQUE COM FOTO LARGA (full-bleed)
   ========================================================= */
.showcase{ position:relative; overflow:hidden; }
.showcase img{ width:100%; height:clamp(300px,55vh,600px); object-fit:cover; display:block; opacity:.75; }
.showcase__over{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(28px,5vw,var(--s-9));
  background:linear-gradient(to top, rgba(14,12,11,.94), rgba(14,12,11,0));
}
.showcase__over h3{ margin-bottom:8px; }
.showcase__over p{ max-width:58ch; font-size:15px; }

/* =========================================================
   8. ACESSIBILIDADE - respeita "reduzir movimento" do sistema
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .hero-cine__bg img{ animation:none; transform:none; }
  .fade-up{ opacity:1; animation:none; }
  .scroll-cue::after{ animation:none; }
  .cinemagraph__tag::before{ animation:none; }
  .parallax{ background-attachment:scroll; }
  .progress{ transition:none; }
}

/* =========================================================
   9. AJUSTES DE CELULAR
   ========================================================= */
@media (max-width:560px){
  .hero-cine{ padding-bottom:var(--s-8); }
  .hero-cine h1{ font-size:clamp(30px,8.6vw,40px); }
  .hero-cine .lead{ font-size:16px; }
  .hero-cine .hero__actions{ width:100%; }
  .hero-cine .hero__actions .btn{ width:100%; }
  .story + .story{ margin-top:var(--s-9); }
  .story__badge{ left:var(--s-4); bottom:var(--s-4); font-size:11px; padding:8px 14px; }
  .glass{ padding:var(--s-6); }
  /* 21:9 fica fino demais no celular */
  .cinemagraph--21x9 video,.cinemagraph--21x9 img{ aspect-ratio:16 / 10; }
  .showcase__over{ padding:var(--s-5); }
  .showcase__over h3{ font-size:20px; }
  .cinemagraph video,.cinemagraph img{ box-shadow:0 10px 26px rgba(0,0,0,.4); }
}

/* =========================================================
   10. VIDEO NA TIPOGRAFIA (palavra recortada com mascara)
   A palavra e uma "janela": o video aparece so por dentro
   das letras. A chapa por fora usa a cor do fundo do site.
   ========================================================= */
.masktext{
  position:relative;
  padding:clamp(48px,8vw,110px) 0 clamp(40px,6vw,80px);
  text-align:center;
  overflow:hidden;
}
.masktext__stage{
  position:relative;
  width:min(92vw, var(--wrap));
  margin:0 auto;
  aspect-ratio:1000 / 360;   /* mesma proporcao do viewBox do SVG */
}
/* O video preenche o palco; a chapa SVG por cima esconde tudo,
   menos o interior das letras. */
.masktext__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  background:var(--ink-2);
  /* AJUSTE MANUAL DA FOTO DE "OPERAÇÃO REAL" - mexa só nos números abaixo:
     contrast()   1 = normal | menor que 1 = mais suave | maior que 1 = mais duro
     brightness() 1 = normal | maior que 1 = mais clara (ajuda a letra a aparecer)
     saturate()   1 = normal | 0 = preto e branco | maior que 1 = mais colorida
     Depois de mudar, rode: python build-mockup.py  (e Ctrl+F5 no navegador) */
  filter:contrast(0.9) brightness(0.85) saturate(0.90);
}
.masktext__cut{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.masktext__cut rect[mask]{
  /* fill via CSS garante a cor do fundo em todos os navegadores
     (var() em atributo SVG nao e suportado no Safari/Firefox) */
  fill:var(--ink);
}
/* Contorno das letras - da definicao sem competir com o texto */
.masktext__outline text{ stroke:rgba(255,255,255,.30); }
.masktext__cap{
  margin-top:var(--s-7);
  font-size:15px; color:var(--dim);
  max-width:52ch; margin-left:auto; margin-right:auto;
}
/* A palavra em texto de verdade. Fica escondida no desktop, onde a
   chapa PNG faz o trabalho melhor (contorno so por fora, do jeito que
   foi desenhado). */
.masktext__texto{ display:none; }

@media (max-width:640px){
  /* O PNG e uma chapa opaca com as letras vazadas. No desktop ela se
     confunde com o fundo; no celular, estreita e baixa, vira um
     retangulo escuro com cara de moldura. Aqui trocamos a tecnica: a
     foto entra DENTRO do texto e todo o resto fica transparente de
     verdade, sem chapa nenhuma. */
  .masktext__stage{ display:none; }

  .masktext{ padding:var(--s-8) 0 var(--s-7); }
  .masktext__cap{ font-size:14px; padding:0 var(--s-5); margin-top:var(--s-6); }

  .masktext__texto{
    display:block;
    font-family:var(--font-head);
    font-weight:800; text-transform:uppercase;
    font-size:clamp(38px,13.5vw,62px);
    line-height:.98; letter-spacing:.005em;
    padding:0 var(--s-5);
    color:var(--txt);   /* se o recorte nao for suportado, le como texto normal */
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .masktext__texto{
      background-image:url("img/cenas/plateia.jpg");
      background-size:cover; background-position:center 32%;
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent;
      -webkit-text-stroke:1px rgba(255,255,255,.30);
    }
  }
}


/* =========================================================
   14. REFORCO "O QUE NAO E x O QUE E" (dentro do bloco de vidro)
   ========================================================= */
.denylist{ display:grid; gap:9px; max-width:32ch; margin:0 auto; text-align:left; }
.denylist li{
  display:flex; align-items:center; gap:13px;
  font-family:var(--font-head); font-size:clamp(15px,1.5vw,18px); font-weight:600;
  color:var(--muted);
}
.denylist li::before{
  content:"\00d7"; flex:none;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--dim);
  font-size:15px; line-height:1;
}
.denylist .is-yes{ color:var(--txt); font-weight:800; margin-top:8px; }
.denylist .is-yes::before{
  content:"\2713"; background:var(--brand); border-color:var(--brand); color:#180a04;
}

/* =========================================================
   15. PARALLAX COM MURAL DE LOGOS (fundo de cases)
   A colagem ja vem dessaturada; aqui so o veu fica mais leve
   para os logos ainda aparecerem por tras do vidro.
   ========================================================= */
.parallax--mural{ background-size:cover; background-position:center; }
.parallax--mural::before{
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(14,12,11,0) 26%),
    linear-gradient(to top,    var(--ink) 0%, rgba(14,12,11,0) 26%),
    linear-gradient(rgba(14,12,11,.66), rgba(14,12,11,.78));
}

/* =========================================================
   16. SECAO DO APP
   ========================================================= */
.appsec{ position:relative; overflow:hidden; }
.appsec__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.appsec__bg img{ width:100%; height:100%; object-fit:cover; opacity:.20; }
.appsec__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(14,12,11,.55) 30%, rgba(14,12,11,.55) 70%, var(--ink) 100%);
}
.appsec .wrap{ position:relative; z-index:2; }

/* Faixa de parceiros oficiais */
.partners{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-4) var(--s-6);
  margin-top:var(--s-8); padding-top:var(--s-6);
  border-top:1px solid var(--line);
}
.partners span{
  font-family:var(--font-head); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.partners b{
  font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--txt);
  letter-spacing:-.01em;
}

/* =========================================================
   17. LOGO DO CLIENTE NO CARD DE CASE
   ========================================================= */
.case__logo{
  flex:none; width:56px; height:38px;
  background:#f4f2f0; border-radius:var(--r-1);
  display:grid; place-items:center; padding:5px;
}
.case__logo img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Nota de confidencialidade na legenda de um print */
.cinemagraph figcaption em{
  display:block; margin-top:6px;
  font-style:normal; font-size:12px; color:var(--dim);
}
.cinemagraph figcaption em::before{ content:"\1F512\00a0"; }


/* =========================================================
   16. PRINTS DO APP NO CELULAR

   As imagens do app sao capturas de tela de um painel largo.
   No desktop o corte 21:9 emoldura bem, mas no celular o
   object-fit:cover come as laterais e o topo - justamente
   onde estao os numeros. Aqui a regra muda para "mostrar a
   imagem inteira", cada uma na proporcao original dela.
   ========================================================= */
@media (max-width:640px){
  .appsec .cinemagraph img{
    /* aspect-ratio:auto faz a caixa nascer com altura zero e so ganhar
       tamanho quando a imagem chega. Os atributos width/height no HTML
       dao a proporcao exata de cada print desde o primeiro quadro, sem
       pulo de layout e sem chutar um corte. */
    aspect-ratio:auto; height:auto;
    object-fit:contain; object-position:center;
    background:var(--ink-2);
  }
  /* A segunda figura nasceu sem respiro em relacao a primeira */
  .appsec .cinemagraph + .cinemagraph{ margin-top:var(--s-7); }
}