@font-face{font-family:"Enra";src:url("enra-rg.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Enra";src:url("enra-sb.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* A página tem layout próprio. Estas duas linhas impedem que sobras do tema
   vazem para dentro dela caso alguma folha de estilo escape do dequeue. */
body.dmlp{box-sizing:border-box;margin:0}
body.dmlp *{box-sizing:border-box}

body.dmlp{
  --navy:#0F1728; --navy2:#16203A; --navy3:#1B2C4C;
  --blue:#254F8E; --blue2:#5379C1; --blue-soft:rgba(83,121,193,.09);
  --zap:#25D366; --zap-hover:#1FBF5A; --zap-ink:#08281A;
  --blue-line:rgba(83,121,193,.28);
  /* O branco da página é o #F4F4F4 da marca. O fundo geral desceu junto:
     com os dois quase iguais, a alternância entre seções e o relevo dos
     cards desapareceriam, que é o que separa um bloco do outro. */
  --bg:#EAEAEA; --surf:#F4F4F4;
  --ink:#111111; --ink2:#505050; --ink3:#838383;
  --onnavy:#C4CDDE; --onnavy2:#8FA9DE;
  --line:rgba(17,17,17,.10);
  --r:16px; --mw:1120px;
  --f:"Enra",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
body.dmlp *{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.dmlp{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
body.dmlp .wrap{max-width:var(--mw);margin:0 auto;padding:0 20px}
body.dmlp h1,body.dmlp h2,body.dmlp h3{font-weight:600;letter-spacing:-.015em;line-height:1.18;margin:0}
body.dmlp h1{font-size:clamp(2rem,5.2vw,3.35rem)}
body.dmlp h2{font-size:clamp(1.5rem,3.4vw,2.15rem)}
body.dmlp h3{font-size:1.06rem}
body.dmlp p{margin:0}
body.dmlp a{color:var(--blue);text-decoration:none}
body.dmlp a:hover{text-decoration:underline}

body.dmlp /* ---------- topo ---------- */
.topo{background:var(--navy);padding:18px 0;position:sticky;top:0;z-index:20;
  border-bottom:1px solid rgba(255,255,255,.08)}
body.dmlp .topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* A marca nova é um monograma quase quadrado, não o logotipo deitado de
   antes. Nos 26px antigos as letras ficavam pequenas demais para a marca
   se ler. A altura do cabeçalho não muda: quem a define é o botão ao lado,
   com 41px, que continua sendo o elemento mais alto da barra. */
body.dmlp .topo img{height:32px;width:auto;display:block}
body.dmlp .topo a.mini{color:#fff;font-size:.9rem;border:1px solid rgba(255,255,255,.28);
  border-radius:8px;padding:8px 16px;white-space:nowrap}
body.dmlp .topo a.mini:hover{background:rgba(255,255,255,.1);text-decoration:none}

body.dmlp /* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy);color:#fff;
  padding:96px 0 104px;overflow:hidden}
body.dmlp .hero .fundo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%}
body.dmlp .hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(15,23,40,.96) 0%,rgba(15,23,40,.92) 42%,
    rgba(15,23,40,.62) 68%,rgba(15,23,40,.5) 100%),
    linear-gradient(180deg,rgba(15,23,40,.55) 0%,rgba(15,23,40,0) 30%,
    rgba(15,23,40,.4) 82%,var(--navy) 100%)}
body.dmlp .hero .wrap{position:relative}
body.dmlp .hero h1{color:#fff;max-width:15ch}
body.dmlp .resposta-curta{color:#E6EBF5;font-size:clamp(1.02rem,2.2vw,1.2rem);margin-top:20px;
  max-width:54ch}
body.dmlp .hero-etapas{list-style:none;margin:22px 0 0;padding:0;max-width:56ch}
body.dmlp .hero-etapas li{position:relative;padding-left:20px;margin-bottom:12px;
  color:var(--onnavy);font-size:.98rem;line-height:1.55}
body.dmlp .hero-etapas li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--blue2)}
body.dmlp .hero-etapas strong{color:#fff;font-weight:600}
body.dmlp .hero-fecho{color:#fff;font-size:1.02rem;margin-top:22px;max-width:52ch;
  padding-left:16px;border-left:2px solid var(--blue2)}
body.dmlp .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
body.dmlp .btn{display:inline-block;background:var(--blue);color:#fff;border-radius:8px;
  padding:14px 28px;font-size:1rem;font-weight:600;border:1px solid var(--blue);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
/* Sobre as faixas azul-escuras o preenchimento #254F8E quase não se separa do
   fundo (2,2:1). O texto branco continua legível, mas o contorno do botão se
   perderia, então nelas a borda sobe para o azul claro (4,2:1). */
body.dmlp .hero .btn,body.dmlp .fecho .btn{border-color:var(--blue2)}
/* Mesmo realce dos cards: o botão responde ao ponteiro em vez de nascer aceso.
   O halo usa o azul claro para aparecer tanto no fundo escuro quanto no claro. */
@media (hover:hover){
  body.dmlp .btn:hover{border-color:var(--blue2);text-decoration:none;
    box-shadow:0 0 0 3px rgba(83,121,193,.32),0 10px 26px rgba(15,23,40,.18);
    transform:translateY(-2px)}
}
body.dmlp .btn:active{border-color:var(--blue2);
  box-shadow:0 0 0 3px rgba(83,121,193,.4),0 4px 12px rgba(15,23,40,.16);
  transform:translateY(0) scale(.995)}
@media (prefers-reduced-motion:reduce){
  body.dmlp .btn{transition:none}
  body.dmlp .btn:hover,body.dmlp .btn:active{transform:none}
}
body.dmlp .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
body.dmlp .btn.ghost:hover{background:rgba(255,255,255,.08)}

body.dmlp /* ---------- seções ---------- */
section{padding:70px 0}
body.dmlp section.alt{background:var(--surf)}
body.dmlp .cab{max-width:64ch;margin-bottom:38px}
body.dmlp .cab p{color:var(--ink2);margin-top:14px}
/* Parceiros e Perguntas frequentes têm o cabeçalho centralizado: as duas
   seções são simétricas por baixo (a faixa de logos e a pilha de perguntas
   ocupam a largura toda), e um título encostado à esquerda ficaria solto.
   O max-width de 64ch continua valendo, daí o margin automático nas laterais:
   sem ele o bloco seguiria preso à esquerda e só o texto dentro dele é que
   centralizaria. O conteúdo abaixo do .cab não é afetado — as perguntas
   continuam alinhadas à esquerda, que é como se lê texto corrido. */
body.dmlp .parceiros .cab,
body.dmlp #perguntas .cab,
body.dmlp #como-funciona .cab{margin-left:auto;margin-right:auto;text-align:center}
body.dmlp .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
body.dmlp .grid.duas{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
body.dmlp .card,body.dmlp .svc{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}

/* O realce é resposta ao ponteiro, não um estado fixo: nenhum card nasce aceso.
   hover:hover exclui a tela de toque, onde o navegador deixa o :hover grudado
   depois do toque e o card ficaria aceso até a pessoa tocar em outro lugar. */
@media (hover:hover){
  body.dmlp .card:hover,body.dmlp .svc:hover,body.dmlp .q:hover{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(37,79,142,.14),0 10px 26px rgba(15,23,40,.10);
    transform:translateY(-2px)}
}
/* Toque: o retorno aparece enquanto o dedo está sobre o card e some ao soltar. */
body.dmlp .card:active,body.dmlp .svc:active,body.dmlp .q:active{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,79,142,.18),0 4px 12px rgba(15,23,40,.10);
  transform:translateY(0) scale(.995)}
body.dmlp .card,body.dmlp .svc,body.dmlp .q{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  body.dmlp .card,body.dmlp .svc,body.dmlp .q{transition:none}
  body.dmlp .card:hover,body.dmlp .svc:hover,body.dmlp .q:hover,
  body.dmlp .card:active,body.dmlp .svc:active,body.dmlp .q:active{transform:none}
}
body.dmlp section.alt .card,body.dmlp section.alt .svc{background:var(--bg)}
body.dmlp .card p{color:var(--ink2);font-size:.96rem;margin-top:10px}
body.dmlp .svc ul{margin:14px 0 0;padding-left:18px;color:var(--ink2);font-size:.96rem}
body.dmlp .svc li{margin-bottom:6px}
body.dmlp .svc h3{color:var(--blue)}

/* Selo do ícone: o mesmo formato de 42px usado na página de coprodução, para
   que as duas páginas tenham um vocabulário visual só. O fundo é um azul
   dessaturado que se separa do #F4F4F4 do card sem competir com o título. */
body.dmlp .selo{width:42px;height:42px;border-radius:10px;background:#E4EAF4;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
body.dmlp .selo svg{width:20px;height:20px;stroke:var(--blue);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

body.dmlp /* ---------- passos: linha do tempo horizontal ---------- */
/* As quatro etapas correm da esquerda para a direita, com o trilho passando
   pelos numeradores no alto. O trilho não é uma linha só esticada por cima de
   tudo: cada etapa desenha o segmento que vai do seu número até o da próxima,
   e a última não desenha nada. Assim a linha termina no 4 em vez de sobrar
   para fora, e nada se desalinha quando as colunas mudam de largura. */
ol.passos{list-style:none;margin:0;padding:48px 0 0;display:grid;gap:16px;
  grid-template-columns:repeat(4,1fr);position:relative}
body.dmlp .passo{position:relative;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body.dmlp section.alt .passo{background:var(--bg)}
body.dmlp .passo::before{content:"";position:absolute;top:-32px;left:50%;
  width:calc(100% + 16px);height:2px;background:var(--blue-line)}
body.dmlp .passo:last-child::before{display:none}
/* O número monta sobre o trilho. O anel na cor do fundo da seção abre um vão
   em volta dele, senão a linha passaria por baixo e encostaria no círculo. */
body.dmlp .num{position:absolute;top:-48px;left:50%;transform:translateX(-50%);
  width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.86rem;line-height:1;
  box-shadow:0 0 0 4px var(--bg)}
body.dmlp section.alt .num{box-shadow:0 0 0 4px var(--surf)}
body.dmlp .passo-topo{display:flex;align-items:flex-start;gap:11px}
body.dmlp .passo-topo svg{flex:0 0 auto;width:19px;height:19px;margin-top:2px;
  stroke:var(--blue2);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
body.dmlp .passo p{color:var(--ink2);font-size:.96rem;margin-top:8px}
/* Botão centralizado sob a fileira: o .acoes é flex, então quem o centraliza é
   o justify-content — o mesmo recurso usado no fecho e no rodapé. */
body.dmlp .passos + .acoes{margin-top:30px;justify-content:center}
@media (hover:hover){
  body.dmlp .passo:hover{border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(37,79,142,.14),0 10px 26px rgba(15,23,40,.10);
    transform:translateY(-2px)}
}
body.dmlp .passo:active{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,79,142,.18),0 4px 12px rgba(15,23,40,.10);
  transform:translateY(0) scale(.995)}
body.dmlp .passo{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){
  body.dmlp .passo{transition:none}
  body.dmlp .passo:hover,body.dmlp .passo:active{transform:none}
}
/* Em duas colunas o segmento da segunda etapa apontaria para uma etapa que
   está na linha de baixo, então ele some. */
@media (max-width:1000px){
  body.dmlp ol.passos{grid-template-columns:repeat(2,1fr);gap:56px 16px}
  body.dmlp .passo:nth-child(2n)::before{display:none}
}
/* Numa coluna só não há para onde a linha ir: o número sobe para cima do card
   e o trilho desaparece, em vez de virar um traço solto. */
@media (max-width:620px){
  body.dmlp ol.passos{grid-template-columns:1fr;gap:52px}
  body.dmlp .passo::before{display:none}
  body.dmlp .num{left:24px;transform:none;top:-42px}
}

body.dmlp /* ---------- faq ---------- */
.q{border:1px solid var(--line);border-radius:var(--r);background:var(--surf);
  padding:2px 22px;margin-bottom:10px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body.dmlp section.alt .q{background:var(--bg)}
body.dmlp .q summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;
  align-items:flex-start;justify-content:space-between;gap:16px}
body.dmlp .q summary::-webkit-details-marker{display:none}
body.dmlp .q summary h3{margin:0;font-size:1.02rem}
body.dmlp .q summary::after{content:"+";color:var(--blue2);font-size:1.4rem;line-height:1;
  flex:0 0 auto;transform:translateY(-1px)}
body.dmlp .q[open] summary::after{content:"–"}
body.dmlp .q p{color:var(--ink2);font-size:.97rem;padding:0 0 20px}

body.dmlp /* ---------- autor ---------- */
section.autor{position:relative;padding:0;background:var(--navy);color:#fff;overflow:hidden}
body.dmlp .autor .fundo{display:block;width:100%;height:auto;
  max-width:1600px;margin-left:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%);
  mask-image:linear-gradient(90deg,transparent 0,#000 11%)}
body.dmlp .autor::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(97deg,rgba(9,14,26,.94) 0%,rgba(9,14,26,.88) 30%,
    rgba(9,14,26,.6) 50%,rgba(9,14,26,.12) 68%,rgba(9,14,26,0) 82%)}
body.dmlp .autor .sobre{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
body.dmlp .autor .sobre .wrap{width:100%}
body.dmlp .autor .bloco{max-width:48ch}
body.dmlp .autor .olho{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--onnavy2);font-weight:400;margin:0 0 18px}
body.dmlp .autor .nome{color:#fff;font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:-.02em}
body.dmlp .autor p{color:#DDE4F1;margin-top:18px}

@media (max-width:900px){
  body.dmlp .autor::after{display:none}
  body.dmlp .autor .sobre{position:static;display:block}
  body.dmlp .autor .sobre .wrap{padding-top:30px;padding-bottom:40px}
  body.dmlp .autor .bloco{max-width:64ch}
}

body.dmlp /* ---------- parceiros ---------- */
.parceiros{text-align:left}
body.dmlp .parceiros .marquee{margin-top:0}
body.dmlp .marquee{position:relative;margin-top:42px;overflow:hidden;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
body.dmlp .mtrack{display:flex;align-items:center;width:max-content;
  animation:marq 44s linear infinite}
body.dmlp .marquee:hover .mtrack{animation-play-state:paused}
body.dmlp .mlogo{flex:0 0 auto;width:auto;margin:0 34px;opacity:.45;transition:opacity .3s ease}
body.dmlp .mlogo:hover{opacity:.8}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .mtrack{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

body.dmlp /* ---------- fecho ---------- */
.fecho{background:var(--navy);color:#fff;text-align:center;padding:78px 0}
body.dmlp .fecho h2{color:#fff;max-width:20ch;margin:0 auto}
body.dmlp .fecho p{color:var(--onnavy);margin:18px auto 0;max-width:56ch}
body.dmlp .fecho .acoes{justify-content:center}

body.dmlp /* ---------- rodapé ---------- */
footer{background:#0A101C;color:var(--onnavy);padding:44px 0 56px;font-size:.86rem}
body.dmlp footer a{color:var(--onnavy2)}
/* As duas fileiras do rodapé são centralizadas pelo justify-content, e não por
   text-align: elas são flex, então quem decide a posição horizontal dos itens
   é o eixo principal. Vale para qualquer quantidade de botões ou de linhas,
   inclusive quando quebram em mais de uma fileira no celular. */
body.dmlp footer .linhas{display:flex;flex-wrap:wrap;gap:10px 28px;
  justify-content:center;text-align:center}
body.dmlp .redes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px;
  justify-content:center}
body.dmlp a.rede{display:inline-flex;align-items:center;gap:9px;color:var(--onnavy);
  border:1px solid rgba(143,169,222,.26);border-radius:999px;padding:9px 18px 9px 15px;
  font-size:.88rem;line-height:1;transition:border-color .2s,color .2s,background .2s}
body.dmlp a.rede svg{flex:0 0 auto}
body.dmlp a.rede:hover{color:#fff;border-color:rgba(143,169,222,.55);
  background:rgba(143,169,222,.08);text-decoration:none}

@media (max-width:640px){
  body.dmlp{font-size:16px}
  body.dmlp section{padding:54px 0}
  body.dmlp .hero{padding:56px 0 64px}
  body.dmlp .hero .fundo{object-position:56% 46%}
  body.dmlp .hero::after{background:linear-gradient(180deg,rgba(15,23,40,.93) 0%,
    rgba(15,23,40,.88) 45%,rgba(15,23,40,.92) 85%,var(--navy) 100%)}
  body.dmlp .autor .sobre .wrap{padding-top:24px;padding-bottom:34px}
  body.dmlp .redes{gap:9px}
  body.dmlp a.rede{padding:8px 14px 8px 12px;font-size:.84rem}
  body.dmlp .marquee{margin-top:30px}
  body.dmlp .mlogo{margin:0 22px;transform:scale(.86)}
  body.dmlp .btn{width:100%;text-align:center}
}