@font-face{font-family:Dela;src:url(../fonts/dela-gothic-one.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Blinker;src:url(../fonts/blinker-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Blinker;src:url(../fonts/blinker-600.woff2) format("woff2");font-weight:600;font-display:block}
@font-face{font-family:Blinker;src:url(../fonts/blinker-700.woff2) format("woff2");font-weight:700;font-display:block}

:root{
  --marinho:#002A68;--azul:#036FF4;--azul-texto:#0252BC;--claro:#ACC9E2;--bruma:#E6EFF7;--branco:#fff;
  --tinta:#0B1B33;--mudo:#34507A;--fio:#B9CDE2;
  --bs-body-font-family:Blinker,Arial,sans-serif;
  --saida:cubic-bezier(.16,1,.3,1);
}
html{font-size:min(calc(100vw / 96),calc(100vh / 54));scroll-snap-type:y mandatory}
body{margin:0;background:var(--bruma);color:var(--marinho);font-family:Blinker,Arial,sans-serif;font-size:1.15rem;line-height:1.35;-webkit-font-smoothing:antialiased}
::selection{background:var(--azul);color:#fff}

/* Navegação */
.topo{position:fixed;inset:0 0 auto;z-index:30;height:3rem;display:flex;align-items:center;gap:2rem;padding:0 3rem;color:var(--marinho);font-weight:600;transition:color .3s}
.topo a{color:inherit;text-decoration:none}
.topo-nome{font-size:.85rem}
.topo-links{gap:1.4rem;margin-left:auto;font-size:.85rem}
.topo-links a{padding:.25rem 0;border-bottom:2px solid transparent}
.topo-links a.ativo{font-weight:700;border-color:currentColor}
.topo-links a:hover{border-color:var(--claro)}
.topo a:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.topo-conta{font-size:.85rem;min-width:3.4rem;text-align:right;font-variant-numeric:tabular-nums}
body.tema-escuro .topo{color:#fff}
body.no-filme .topo,body.no-filme .progresso{opacity:0;pointer-events:none}
.progresso{position:fixed;inset:0 0 auto;height:4px;z-index:31}
.progresso span{display:block;height:100%;width:0;background:var(--azul);transition:width .4s var(--saida)}

/* Telas */
.tela{height:100vh;min-height:54rem;scroll-snap-align:start;display:flex;align-items:center;overflow:hidden;position:relative;background:var(--bruma)}
.tela.escura{background:var(--marinho);color:#fff}
.palco{position:relative;z-index:2;width:100%;max-width:86rem;margin:0 auto;padding:3.6rem 1rem 1.4rem}
.forma{position:absolute;z-index:0;pointer-events:none}
.forma.azul{color:var(--azul)}
.forma.clara{color:var(--claro)}
.mancha-ct{top:0;right:0;width:32rem;height:30rem;transform:scaleY(-1)}
.mancha-te{top:0;left:0;width:18rem;height:14.4rem}
.mancha-bd{bottom:0;right:0;width:36rem;height:29rem}
.mancha-bd.alta{width:44rem;height:38rem}
.nuvem-be{left:-2rem;bottom:-.5rem;width:30rem;height:12rem;color:var(--branco)}
.escura .nuvem-be{color:#fff}
.nuvem-td{top:-.5rem;right:-2rem;width:27rem;height:11rem;color:var(--branco);transform:rotate(180deg)}
.confete{position:absolute;inset:0;width:100%;height:100%;z-index:1;color:var(--marinho);pointer-events:none}
.escura .confete{color:var(--claro)}

/* Tipografia */
.manchete,.titulo,.trilha h3,.prova h3{font-family:Dela,Arial,sans-serif;font-weight:400}
.manchete{font-size:3.4rem;line-height:1.12;margin:1rem 0 1.1rem;text-wrap:balance}
.titulo{font-size:2.6rem;line-height:1.16;margin:0 0 1.1rem;max-width:66rem;text-wrap:balance}
.titulo em,.manchete em{font-style:normal;color:var(--azul)}
.escura .titulo em,.escura .manchete em{color:var(--claro)}
.linha-fina{font-size:1.5rem;line-height:1.3;max-width:38rem;margin:0}
.assina{margin:1.6rem 0 0;font-size:1.15rem;font-weight:600;color:var(--claro)}
.apoio{font-size:1.5rem;margin:0 0 1.8rem;color:var(--mudo)}
.apoio.curto{margin:-.3rem 0 1.2rem;font-size:1.4rem}

/* Pílula: a unidade de informação */
.pilula{display:inline-block;background:var(--marinho);color:#fff;border-radius:99rem;padding:.42rem 1.25rem;font-weight:700;font-size:1.1rem;line-height:1.2;white-space:nowrap}
.pilula.forte{background:var(--azul);font-family:Dela,Arial,sans-serif;font-weight:400;font-size:1.3rem;padding:.55rem 1.5rem;background:var(--marinho)}
.pilula.clara{background:var(--claro);color:var(--marinho)}
.pilula.mini{padding:.2rem .85rem;font-size:1rem;min-width:5.2rem;text-align:center}

/* Personagens e adesivos */
.tela img{display:block}
.js .pessoa{opacity:0;transform:translateY(2.5rem)}
.js .ativa .pessoa{opacity:1;transform:none;transition:opacity .5s var(--saida),transform .8s var(--saida)}
.adesivo{position:absolute;z-index:1}
.balao-ad{top:5.5rem;right:6rem;width:9rem}

/* As 100 matérias */
.grade{display:grid;grid-template-columns:repeat(10,1fr);gap:.42rem}
.t{display:block;aspect-ratio:4/3;border-radius:.34rem;position:relative}
.t.ok{background:#fff}
.t.ok::after,.t.rec::after{content:"";position:absolute;left:16%;right:16%;top:26%;height:48%;background:linear-gradient(var(--azul) 0 34%,transparent 34% 58%,var(--claro) 58% 76%,transparent 76%)}
.t.kw{border:.17rem dashed var(--claro)}
.t.ve{border:.17rem dotted #7FB2F5;background:rgba(3,111,244,.28)}
.t.rec{background:var(--azul)}
.t.rec::after{background:linear-gradient(#fff 0 34%,transparent 34% 58%,#CFE2FF 58% 76%,transparent 76%)}
.js .grade .t{opacity:0;transform:scale(.72)}
.js .ativa .grade .t{opacity:1;transform:none;transition:opacity .25s,transform .4s var(--saida);transition-delay:calc(var(--i)*8ms)}
.painel{background:var(--marinho);border-radius:1.2rem;padding:1.3rem;color:#fff}
.grade-p{gap:.28rem}
.legenda{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.4rem;font-size:1.1rem}
.legenda li{display:flex;align-items:flex-start;gap:.6rem}
.legenda small{display:block;font-size:.98rem;line-height:1.25;color:var(--claro)}
.legenda .t{width:1.7rem;flex:none}
.painel-txt{margin:1rem 0 0;font-size:1.1rem;line-height:1.3}

/* Capa e fecho */
.capa-grade{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center}
#capa .linha-fina{text-wrap:balance}
.capa-arte{display:flex;align-items:flex-end;gap:.6rem}
.capa-arte .grade{flex:1;min-width:0}
.capa-pessoa{height:23rem;flex:none;margin-bottom:-2rem;margin-right:-2rem}
.fecho-arte{position:absolute;z-index:2;top:4.8rem;right:9.5rem;width:27rem}
.fecho-dupla{position:absolute;z-index:2;right:6rem;bottom:-1rem;height:23rem}
.fecho-nuvem{right:-4rem;bottom:-1rem;width:62rem;height:31rem;color:var(--claro)}
.fecho-nuvem.lobo{right:-13rem;width:42rem;height:29rem}

/* Recomendação */
.recom{display:grid;grid-template-columns:23rem 1fr;gap:2.5rem;align-items:center}
.rec-pessoa{height:30rem;margin-left:-1.5rem}
.rota{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;padding:0;margin:0;position:relative}
.rota::before{content:"";position:absolute;left:2rem;right:6rem;top:1.25rem;height:2px;background:var(--marinho)}
.rota li{position:relative}
.rota b{display:block;margin:.8rem 0 .15rem;font-size:1.15rem;color:var(--azul-texto)}
.rota p{margin:0;font-size:1.35rem;line-height:1.3}
.rota small{display:block;margin-top:.5rem;font-size:1.1rem;font-weight:700;color:var(--azul-texto)}

/* Dados */
.dados-grade{display:grid;grid-template-columns:30rem 1fr;gap:2.6rem;align-items:start}
.numeros{display:grid;grid-template-columns:.8fr 1.25fr .9fr;gap:1.5rem;align-items:center}
.numeros strong{display:block;font-family:Dela,Arial,sans-serif;font-weight:400;font-size:2.5rem;line-height:1.1;white-space:nowrap}
.numeros span:not(.pilula){display:block;font-size:1.05rem;line-height:1.3;color:var(--mudo);margin-top:.3rem}
.rosca-item{display:flex;align-items:center;gap:.8rem}
.rosca{width:5.4rem;flex:none}
.rosca circle{fill:none;stroke:var(--claro);stroke-width:20}
.rosca .v{stroke:var(--azul)}
.lista{margin:.7rem 0 0;padding-left:1.1rem;font-size:1.3rem;line-height:1.3}
.lista li{margin-bottom:.2rem}

/* Diagnóstico */
.sinais{list-style:none;display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:0;padding:0;margin:.4rem 0 1.8rem;border-top:1px solid rgba(172,201,226,.45);border-bottom:1px solid rgba(172,201,226,.45)}
.sinais li{padding:.75rem 1rem .85rem;border-left:1px solid rgba(172,201,226,.45)}
.sinais li:first-child{border-left:0;padding-left:0}
.sinais b{display:block;font-size:1.2rem;line-height:1.2}
.sinais span{display:block;font-size:1rem;font-weight:600;color:var(--claro);margin:.1rem 0 .35rem}
.sinais p{margin:0;font-size:1.12rem;line-height:1.28}
.sinais li.pesa{background:var(--claro);color:var(--marinho);border-left-color:var(--claro)}
.sinais li.pesa span{color:var(--marinho)}
.linha b{display:block;font-weight:400;font-size:1rem;color:var(--claro)}
.causas{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:64rem}
.causas p{margin:.6rem 0 0;font-size:1.32rem;line-height:1.3}
.nota{margin:1.3rem 0 0;font-size:1.4rem;font-weight:700;max-width:58rem}
.diag-pessoa{position:absolute;z-index:2;right:1rem;bottom:-1rem;height:20rem}

/* Plano */
.curto-grade{display:grid;grid-template-columns:1fr 23rem;gap:2.2rem;align-items:start}
.plano{--bs-table-bg:transparent;--bs-table-color:var(--marinho);font-size:1.3rem;margin-bottom:0}
.plano th{font-size:.95rem;color:var(--mudo);font-weight:700;border-color:var(--fio);padding:.3rem .5rem}
.plano td{border-color:var(--fio);padding:.55rem .5rem;line-height:1.3}
.plano tr.forte td{background:var(--branco);font-weight:700}
.curto-grade .plano td:last-child{white-space:nowrap}
.riscos .plano td:first-child{white-space:nowrap}
.trilha{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;padding:0;margin:2.2rem 0 0;max-width:68rem;position:relative}
.trilha::before{content:"";position:absolute;left:1rem;right:8rem;top:1.25rem;height:2px;background:var(--marinho)}
.trilha li{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.trilha h3{font-size:1.4rem;line-height:1.15;margin:1rem 0 .4rem}
.trilha p{font-size:1.35rem;line-height:1.3;margin:0 0 .5rem}
.trilha small{font-size:1rem;color:var(--mudo);font-weight:600}
.medio-pessoa{position:absolute;z-index:2;right:1.5rem;bottom:-1rem;height:27rem}

/* Comunicação */
.comun{display:grid;grid-template-columns:1fr 21rem;gap:1rem;align-items:end}
.publicos{list-style:none;padding:0;margin:.8rem 0 0;display:grid;gap:1.1rem}
.publicos li{display:grid;grid-template-columns:17rem 1fr;align-items:center;column-gap:1.4rem}
.publicos p{margin:0;font-size:1.4rem;font-weight:600;line-height:1.28}
.publicos small{grid-column:2;font-size:1.12rem;color:var(--mudo)}
.comun-pessoa{height:21rem;justify-self:end}
.regras{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:0;margin:1.2rem 0 0}
.regras li{background:var(--branco);border-radius:1rem;padding:.9rem 1.3rem;font-size:1.3rem;line-height:1.3}

/* Conversa */
.falas{margin-top:1.4rem;display:grid;gap:1.15rem;max-width:80rem}
.fala{display:grid;grid-template-columns:13rem 1fr;align-items:center;gap:1rem}
.fala .pilula{text-align:center}
.fala p{margin:0;font-size:1.65rem;line-height:1.32}

/* Valor */
.valor{display:grid;grid-template-columns:1fr 19rem;gap:2rem;align-items:center}
.respostas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.respostas .pilula{white-space:normal;border-radius:1.4rem}
.respostas p{margin:.6rem 0 .2rem;font-size:1.4rem;line-height:1.25;font-weight:700}
.respostas small{display:block;font-size:1.12rem;line-height:1.28;color:var(--claro)}
.prova{margin-top:1.5rem;border-top:1px solid var(--claro);padding-top:1rem}
.prova h3{font-size:1.1rem;margin:0 0 .6rem;color:var(--claro)}
.prova ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.prova li{font-size:1.25rem;line-height:1.3}
.valor-pessoa{height:28rem;justify-self:end}

/* Simulação */
.cena{height:100%;display:block;padding-top:3.6rem}
.cena-tit{margin-bottom:0}
.baloes{position:absolute;left:21rem;right:21rem;top:9rem;height:21rem}
.balao{position:absolute;inset:auto 0 0;background:var(--branco);border:2px solid var(--marinho);border-radius:2rem;padding:1.5rem 2rem}
.balao p{margin:0;font-size:1.7rem;line-height:1.32;font-weight:600}
.balao small{display:block;margin-top:.4rem;font-size:1rem;color:var(--mudo)}
.balao::after{content:"";position:absolute;bottom:-1.25rem;width:2.2rem;height:2.2rem;background:var(--branco);border:2px solid var(--marinho);border-top:0;border-left:0;transform:rotate(45deg)}
.balao.eu::after{left:3rem}
.balao.ela{background:var(--marinho);color:#fff}
.balao.ela small{color:var(--claro)}
.balao.ela::after{right:3rem;background:var(--marinho)}
.balao.bifurca{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.balao.bifurca .pilula{min-width:0;margin-bottom:.5rem}
.balao.bifurca p{font-size:1.32rem;font-weight:600;line-height:1.3}
.js .baloes .f{transform:scale(.97);transform-origin:bottom}
.js .baloes .f.on{opacity:0;transform:scale(.97);pointer-events:none}
.js .baloes .f.on.atual{opacity:1;transform:none;pointer-events:auto}
.cena-a,.cena-d{position:absolute;bottom:4.6rem;height:21rem}
.cena-a{left:0;height:21rem}
.cena-d{right:0;height:24rem}
.etapas{position:absolute;left:0;right:0;bottom:1.2rem;list-style:none;display:flex;justify-content:center;gap:.6rem;margin:0;padding:0}
.etapas li{background:var(--branco);color:var(--marinho);border-radius:99rem;padding:.3rem 1.2rem;font-weight:700;font-size:1.05rem}
.etapas li.ativa{background:var(--marinho);color:#fff}

/* +30% e papéis: o elenco fica de pé numa linha, e o que falta aparece vazio */
.perguntas{list-style:none;display:flex;gap:.7rem;padding:0;margin:0 0 .9rem}
.cenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem}
.elenco{display:flex;justify-content:center;align-items:flex-end;height:12.5rem;border-bottom:2px solid var(--marinho);overflow:hidden}
.elenco img{height:13rem;width:auto;flex:none;margin:0 -1.4rem -.5rem}
.elenco img.fantasma{filter:brightness(0) opacity(.09)}
.cenario .pilula,.papeis .pilula{margin-top:-1.05rem;position:relative}
.cenario h3{font-family:Dela,Arial,sans-serif;font-weight:400;font-size:1.4rem;line-height:1.2;margin:.8rem 0 .55rem}
.cenario dl{margin:0;display:grid;grid-template-columns:7rem 1fr;gap:.25rem .7rem;font-size:1.22rem;line-height:1.28}
.cenario dt{font-weight:400;color:var(--mudo)}
.cenario dd{margin:0;font-weight:600}
.papeis{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;padding:0;margin:.6rem 0 0}
.papeis .elenco{height:11.5rem}
.papeis .elenco img{height:11.5rem;margin:0}
.papeis h3{font-family:Dela,Arial,sans-serif;font-weight:400;font-size:1.25rem;line-height:1.2;margin:.8rem 0 .35rem}
.papeis p{margin:0;font-size:1.25rem;line-height:1.28}
.elenco.vazio{position:relative}
.elenco.vazio i{position:absolute;inset:3.2rem 0 auto;text-align:center;font-family:Dela,Arial,sans-serif;font-style:normal;font-size:4.2rem;line-height:1;color:var(--marinho)}
.descobrir{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;padding:1rem 0 0;margin:1.2rem 0 0;border-top:1px solid var(--fio)}
.descobrir li{display:flex;align-items:flex-start;gap:.8rem}
.descobrir .pilula{flex:none}
.descobrir p{margin:0;font-size:1.18rem;line-height:1.28}

/* Prioridades */
.prio td{padding:.8rem .7rem;font-size:1.42rem;line-height:1.25}
.prio td:nth-child(2){font-weight:700;white-space:nowrap}
.prio .ordem{width:3.2rem;font-family:Dela,Arial,sans-serif;font-size:2.1rem;line-height:1;color:var(--azul-texto);text-align:center}
.prio td:last-child{white-space:nowrap}
.prio .pilula.mini{min-width:0;font-size:.98rem;padding:.2rem .75rem;vertical-align:.08em}
.tipos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;padding:0;margin:1.5rem 0 0}
.tipos b{display:block;font-size:1.3rem;line-height:1.2}
.tipos span{font-size:1.2rem;color:var(--mudo)}

/* Dados na conversa */
.duas{table-layout:fixed;margin-top:.4rem}
.duas th:first-child{width:13rem}
.duas th{padding:.3rem .8rem .7rem}
.duas th .pilula{font-size:1.15rem}
.duas td{padding:.72rem .8rem;font-size:1.36rem;line-height:1.28}
.duas td:first-child{padding-left:0}
.duas td:first-child .pilula{display:block;text-align:center;font-size:1.2rem}

/* Riscos */
.riscos{display:grid;grid-template-columns:1fr 23rem;gap:2.4rem;align-items:start;max-width:80rem}
.nota.clara{font-size:1.25rem;margin-top:1rem}
.metas{list-style:none;padding:0;margin:.7rem 0 1rem;display:grid;gap:.45rem}
.metas li{font-size:1.35rem;line-height:1.3;font-weight:600;padding-bottom:.45rem;border-bottom:1px solid var(--fio)}
.metas b{font-family:Dela,Arial,sans-serif;font-weight:400;color:var(--azul-texto)}
.riscos-pessoa{position:absolute;z-index:2;right:.5rem;bottom:-1rem;height:17rem}

/* Vídeo */
#abertura{justify-content:center}
#filme{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--marinho)}
.filme-aviso{position:relative;z-index:2;font-size:1.3rem;font-weight:600;color:var(--claro);margin:0}
#abertura.tocando .filme-aviso,#abertura.pronto .filme-aviso{display:none}
#capa.emenda *{transition:none!important;animation:none!important}

/* Revelação */
.js .f{opacity:0;transform:translateY(.8rem);transition:opacity .35s var(--saida),transform .55s var(--saida)}
.js .f.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .f,.js .pessoa,.js .ativa .pessoa,.js .ativa .grade .t{transition:none;transition-delay:0s}
}
@media (max-width:767.98px){
  html{font-size:15px;scroll-snap-type:none}
  .tela{height:auto;min-height:100vh;overflow:hidden}
  .palco{padding:4rem 1.2rem 2rem}
  .topo-links{display:none}
  .topo{padding:0 1.2rem;justify-content:space-between}
  .manchete{font-size:2.3rem}
  .titulo{font-size:1.7rem}
  .capa-grade,.recom,.dados-grade,.curto-grade,.comun,.valor,.riscos,.cenarios,.papeis,.descobrir,.tipos,.sinais{grid-template-columns:1fr}
  .rota,.causas,.trilha,.regras,.respostas,.prova ul,.numeros{grid-template-columns:1fr}
  .rota::before,.trilha::before{display:none}
  .sinais li{border-left:0;padding-left:0}
  .fala,.publicos li{grid-template-columns:1fr}
  .diag-pessoa,.medio-pessoa,.riscos-pessoa,.balao-ad{position:static;height:14rem}
  .capa-pessoa,.fecho-dupla{position:static;height:14rem}
  .fecho-arte{position:static;width:100%;padding:0 1.2rem}
  .fecho-nuvem{display:none}
  .js .f,.js .grade .t,.js .pessoa{opacity:1;transform:none}
  .cena{height:auto}
  .baloes{position:static;height:auto;display:grid;gap:1rem}
  .balao,.js .baloes .f.on{position:relative;inset:auto;opacity:1;transform:none}
  .cena-a,.cena-d{position:static;height:12rem}
  .etapas{position:static;flex-wrap:wrap}
}
@page{size:1920px 1080px;margin:0}
@media print{
  html{font-size:20px;scroll-snap-type:none}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topo,.progresso,.sem-impressao{display:none!important}
  .tela{height:1080px;min-height:0;break-after:page}
  .js .f,.js .grade .t,.js .pessoa{opacity:1!important;transform:none!important;transition:none!important}
  .cena-a,.cena-d,.etapas{display:none!important}
  .baloes{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1rem}
  .balao,.js .baloes .f.on{position:relative;inset:auto;opacity:1!important;padding:.9rem 1.3rem}
  .balao p{font-size:1.2rem}
  .balao::after{display:none}
}