/* Formato "reel" (vertical 9:16, palco 720x1280) das três animações (Como funciona / Como elegemos / Como decidimos).
   Activa com a classe .reel em #lp (listas.js): ecrãs estreitos (telemóvel) ou ?reel no endereço. Zonas seguras: 110px em cima, ~270px em baixo
   (o fundo fica para a legenda e para a interface das redes sociais). */
.lp.reel .lp-vista { aspect-ratio: 9 / 16; }
.lp.reel .lp-palco { width: 720px; height: 1280px;
  background: radial-gradient(900px 700px at 15% 0%, #123a7a 0%, transparent 60%), linear-gradient(170deg, #0b1d45, #07122E 70%); }
.lp.reel .cena { padding: 110px 44px 280px; gap: 26px; }
.lp.reel .lp-leg { left: 36px; right: 36px; bottom: 120px; min-height: 0; font-size: 34px; }
.lp.reel .t1 { font-size: 46px; }
.lp.reel .sub { font-size: 28px; }
.lp.reel .titulo { font-size: 80px; }
.lp.reel .c-titulo { padding-bottom: 300px; }
.lp.reel .duas { grid-template-columns: 1fr; gap: 26px; }
.lp.reel .fz { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
.lp.reel .fz-svg { max-width: 100%; height: auto; }
.lp.reel .fz-dir { width: 100%; }
.lp.reel .fz-larga .fz-svg { width: 100%; }

/* ?reel: só a animação, para gravar */
.reel-limpo .topo, .reel-limpo .rodape, .reel-limpo .listas-topo, .reel-limpo .lp-atalhos, .reel-limpo .fun-texto, .reel-limpo .listas-texto, .reel-limpo .saltar { display: none !important; }
.reel-limpo .conteudo { padding-top: 12px; padding-bottom: 12px; }
.reel-limpo .lp-caixa { width: min(100%, calc((100vh - 84px) * 9 / 16)); margin: 0 auto; }
.lp.reel .lp-caixa:fullscreen .lp-vista { width: min(100vw, 100vh * 9 / 16); }
.lp.reel .lp-caixa:-webkit-full-screen .lp-vista { width: min(100vw, 100vh * 9 / 16); }
.lp.reel .titulo { font-size: 68px; }
.lp.reel .fluxo { align-items: stretch; }

/* ajustes por tipo de cena (Como elegemos) */
.lp.reel .esq.alto { zoom: .8; }
.lp.reel .frac .n1 { font-size: 92px; }
.lp.reel .frac .leg.dest { font-size: 34px; }
.lp.reel .baralha { width: 1064px; transform: scale(.6); transform-origin: left center; margin-bottom: -50px; }
.lp.reel .eq { gap: 10px; justify-content: center; }
.lp.reel .eqi { padding: 6px 12px 8px; }
.lp.reel .eqi b, .lp.reel .eq.peq .eqi b, .lp.reel .eq.grande-eq .eqi b { font-size: 44px; }
.lp.reel .eqi small { font-size: 16px; }
.lp.reel .eqs { font-size: 44px; }
.lp.reel .frac .n1 { font-size: 72px; }
.lp.reel .boletim .bl { min-height: 32px; }