/* Jornada de parceiros. Mesmos tokens da LP (a base neutra mora no :root; a marca redefine em /marca/tema.css). Celular primeiro (360/390 px). Fonte local (CSP: font-src 'self'). */
@font-face{font-family:"Plus Jakarta Sans";src:url("/fontes/PlusJakartaSans-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{
  color-scheme:light;
  /* Base NEUTRA (azul-cinza): nenhuma marca mora aqui. Cada marca redefine estas variáveis em marcas/<id>/tema.css (servido em /marca/tema.css). */
  --marfim:#F5F6F8; --marfim-2:#ECEEF2; --superficie:#FFFFFF;
  --grafite:#1B2330; --grafite-2:#273142;
  --texto:#1B2330; --texto-2:#5A6270; --texto-3:#666E7B; --texto-claro:#F5F6F8; --texto-claro-2:#BFC6D2;
  --borda:#D8DCE3; --borda-campo:#80889A;
  --laranja:#7FB2FF; --laranja-forte:#2F5FC4; --laranja-nevoa:#EAF2FF; --laranja-suave:#D6E6FF;
  --erro:#B3261E; --erro-fundo:#FDECEA; --ok:#0E7A41; --ok-fundo:#E8F6EE;
  --grafite-a06:rgb(27 35 48 / .06); --grafite-a12:rgb(27 35 48 / .12);
  --laranja-a24:rgb(127 178 255 / .24); --laranja-a14:rgb(127 178 255 / .14);
  --carregando-fundo:rgb(245 246 248 / .92); --roda-borda:rgb(127 178 255 / .22);
  --topo-fundo:var(--superficie); --topo-borda:var(--borda); --topo-passo:var(--texto-2); --logo-altura:28px;
  --sombra-1:0 1px 2px var(--grafite-a06),0 6px 16px var(--grafite-a06);
  --sombra-btn:0 10px 24px var(--laranja-a24),inset 0 -3px 0 rgb(0 0 0 / .12);
  --raio:14px; --raio-g:20px;
  --f:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --calha:clamp(16px,5vw,32px); --largura:1080px;
}
*{box-sizing:border-box}
[hidden]{display:none !important} /* tem de vencer qualquer display de classe (.tela, .video-falta…) */
html{background:var(--marfim);overflow-x:clip;-webkit-text-size-adjust:100%}
body{overflow-wrap:anywhere;margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--marfim);color:var(--texto);font-family:var(--f);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input{font-family:var(--f);font-size:inherit}
:focus-visible{outline:3px solid var(--grafite);outline-offset:3px;border-radius:8px}
.rodape :focus-visible{outline-color:var(--texto-claro)}
/* o h1 que recebe foco por código ao trocar de tela (tabindex=-1, para o leitor de tela) não mostra moldura; botões, links e campos mantêm o anel acima */
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none}
.wrap{width:100%;max-width:var(--largura);margin:0 auto;padding-inline:var(--calha)}
main{flex:1;padding-block:20px 40px}

/* topo e barra de passo */
.topo{background:var(--topo-fundo);border-bottom:1px solid var(--topo-borda)}
.topo-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:56px;padding-block:6px}
.marca{font-weight:800;font-size:17px;letter-spacing:-.01em}
.marca{min-width:0;grid-column:2;justify-self:center}
.marca img{display:block;height:var(--logo-altura);max-width:100%;object-fit:contain;object-position:center}
.passos{display:grid;gap:4px;justify-items:end;min-width:112px;grid-column:3;justify-self:end}
.passo-rotulo{font-size:13px;font-weight:700;color:var(--topo-passo)}
.barra{width:112px;height:6px;border-radius:99px;background:var(--marfim-2);overflow:hidden}
.barra i{display:block;height:100%;border-radius:inherit;background:var(--laranja);transition:width .25s ease}
.p1 .barra i{width:11.11%}
.p2 .barra i{width:22.22%}
.p3 .barra i{width:33.33%}
.p4 .barra i{width:44.44%}
.p5 .barra i{width:55.56%}
.p6 .barra i{width:66.67%}
.p7 .barra i{width:77.78%}
.p8 .barra i{width:88.89%}
.p9 .barra i{width:100.0%}
/* celular: topo empilhado (logo numa linha própria, centralizado; passo e barra embaixo). O logo tem a mesma regra em toda tela: escala pela largura, nunca é espremido ao lado do passo. */
@media (max-width:600px){
  .topo-in{grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px}
  .marca{grid-column:1;justify-self:center;max-width:100%}
  .marca img{height:auto;width:auto;max-width:100%;max-height:var(--logo-altura)}
  .passos{grid-column:1;justify-self:center;justify-items:center;min-width:0}
}

/* telas: uma por vez, troca por [hidden] */
.tela{display:grid;gap:16px;max-width:560px;margin:0 auto}
/* O que é, conflito e recebido: tudo no mesmo eixo, centralizado, na largura da .tela */
.tela-centro{justify-items:center;text-align:center}
.titulo{overflow-wrap:anywhere;font-size:clamp(28px,8vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.titulo-f{font-size:clamp(22px,6vw,28px);line-height:1.2;letter-spacing:-.01em}
.destaques{font-size:18px;font-weight:600;color:var(--texto-2);text-wrap:balance}
.chamada{font-weight:700}
.apoio{font-size:14px;line-height:1.45;color:var(--texto-3);text-align:center}
.icone-grande{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--laranja-nevoa);color:var(--laranja-forte)}
.icone-grande svg{width:40px;height:40px}

/* botão principal */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:14px 18px;border:0;border-radius:16px;background:var(--laranja);color:var(--grafite);font-weight:800;font-size:clamp(16px,4.5vw,18px);line-height:1.2;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;box-shadow:var(--sombra-btn);transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.7;cursor:progress;transform:none}
.btn-sec{min-height:48px;padding:10px 18px;border:2px solid var(--grafite);border-radius:14px;background:transparent;color:var(--grafite);font-weight:700;cursor:pointer}

/* tela do cadastro */
.form{display:grid;gap:16px}
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:15px}
.campo input{width:100%;min-width:0;min-height:52px;padding:12px 14px;border:2px solid var(--borda-campo);border-radius:var(--raio);background:var(--superficie);color:var(--texto)}
.campo input:focus-visible{border-color:var(--grafite);outline-offset:2px}
.campo input[aria-invalid="true"]{border-color:var(--erro)}
.erro{font-size:14px;font-weight:600;color:var(--erro)}
.erro-geral{display:grid;gap:10px;padding:14px;border-radius:var(--raio);background:var(--erro-fundo);color:var(--erro);font-weight:600}
.aceite{display:grid;gap:8px;font-size:14.5px;line-height:1.5;color:var(--texto-2)}
.aceite-rotulo{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer}
.aceite-rotulo input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--grafite)}
.politica{justify-self:start;font-weight:700;color:var(--texto)}
/* isca: sai da tela em vez de display:none, que robô costuma ignorar */
.isca{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* rodapé e aviso sem JavaScript */
.rodape{padding:24px 0 32px;background:var(--grafite);color:var(--texto-claro-2);font-size:12.5px;line-height:1.6}
.rodape .wrap{display:grid;gap:6px}
.tela p,.rodape p{overflow-wrap:anywhere}
.rodape a{color:var(--texto-claro)}
.noscript{margin:0;padding:14px var(--calha);background:var(--laranja-suave);color:var(--grafite);font-weight:700;text-align:center}

/* página /politica */
.texto{max-width:680px;margin:0 auto;display:grid;gap:14px}
.texto h2{margin-top:10px;font-size:20px;font-weight:800}
.texto ul{list-style:disc;padding-left:22px;display:grid;gap:4px}
.texto a{font-weight:700}

/* dono, 26/10: tela "fazendo a sua simulação" por cima do formulário */
.carregando{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--carregando-fundo)}
.carregando[hidden]{display:none}
.carregando-caixa{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:320px;text-align:center}
.carregando-caixa p{margin:0;font-weight:800;font-size:20px;line-height:1.3;color:var(--grafite)}
.carregando-roda{width:56px;height:56px;border-radius:50%;border:6px solid var(--roda-borda);border-top-color:var(--grafite);animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn,.barra i{transition:none}
  .btn:hover{transform:none}
}

/* ---- só da jornada de parceiros ---- */
.nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;margin-top:8px}
.nav .btn,.nav .btn-sec{width:100%}
.nav-sozinho{grid-template-columns:1fr}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn svg,.btn-sec svg{width:22px;height:22px;flex:none}
.kicker{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--laranja-forte)}
.icone-svg{display:block;width:100%;height:100%}
.aviso{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--raio);background:var(--ok-fundo);color:var(--ok);font-weight:600;font-size:15px;text-align:left}
.aviso svg{width:22px;height:22px;flex:none}
.aviso-atencao{background:var(--laranja-nevoa);color:var(--grafite)}
.lista{display:grid;gap:10px;text-align:left}
.lista li{position:relative;padding:12px 14px 12px 44px;border-radius:var(--raio);background:var(--superficie);border:1px solid var(--borda)}
.lista li::before{content:"";position:absolute;left:14px;top:17px;width:16px;height:16px;border-radius:50%;background:var(--laranja)}
.chips{display:grid;gap:10px;width:100%;text-align:left}
.chip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--raio);background:var(--superficie);border:1px solid var(--borda);font-weight:700}
.chip-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--laranja-nevoa);color:var(--laranja-forte)}
.chip-ico svg{width:24px;height:24px}
.titulo,.titulo-f,.destaques,.chamada,.apoio{max-width:100%}

/* tela 1: celular com PIX recebido, desenhado com formas */
.hero{position:relative;display:grid;place-items:center;width:min(100%,300px);aspect-ratio:1/1;border-radius:var(--raio-g);background:var(--laranja-nevoa);overflow:hidden}
.hero-selo{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:var(--grafite);color:var(--texto-claro);font-weight:800;font-size:13px;white-space:nowrap}
.hero-selo-ico{display:block;width:22px;height:22px;color:var(--laranja)}
.hero-celular{display:block;width:132px;height:190px;margin-top:40px;border:6px solid var(--grafite);border-radius:22px;background:var(--superficie);padding:14px 10px}
.hero-tela{display:grid;gap:8px;justify-items:center;align-content:center;height:100%}
.hero-ok{display:block;width:44px;height:44px;color:var(--ok)}
.hero-pix{font-weight:800;font-size:15px;color:var(--grafite)}
.hero-linha{display:block;width:88%;height:8px;border-radius:99px;background:var(--marfim-2)}
.hero-linha-curta{width:56%}
.hero-raio{position:absolute;right:18px;bottom:22px;display:block;width:44px;height:44px;color:var(--laranja-forte)}

/* vídeos e ícone no lugar do vídeo */
.midia{display:grid;gap:8px;justify-items:center}
.video-caixa{position:relative;width:auto;height:min(52vh,calc((100vw - 2*var(--calha))*16/9));max-width:100%;aspect-ratio:9/16;border-radius:var(--raio-g);overflow:hidden;background:var(--grafite);box-shadow:var(--sombra-1)}
.video,.tutorial{width:100%;height:100%;object-fit:contain}
.tutorial-caixa{width:auto;height:min(60vh,calc((100vw - 2*var(--calha))*16/9));max-width:100%;aspect-ratio:9/16;border-radius:var(--raio-g);overflow:hidden;background:var(--grafite);box-shadow:var(--sombra-1)}
.som{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border:0;border-radius:99px;background:var(--laranja);color:var(--grafite);font-weight:800;cursor:pointer;box-shadow:var(--sombra-1)}
.som svg{width:22px;height:22px}
.audio{font-size:12.5px;color:var(--texto-3)}

/* tela 5: carrossel */
.carrossel{display:grid;gap:12px;justify-items:center;width:100%}
.etapa{font-weight:800;font-size:15px;color:var(--texto-2)}
.cartoes{width:100%}
.cartao{display:grid;gap:10px;justify-items:center;text-align:center;padding:14px;border-radius:var(--raio-g);background:var(--superficie);border:1px solid var(--borda)}
.cartao-titulo{font-size:20px;font-weight:800}
.prints{display:flex;gap:8px;justify-content:center;width:100%}
.print{width:auto;max-width:100%;max-height:46vh;border-radius:var(--raio);border:1px solid var(--borda)}
.prints .print{max-width:48%}
.cartao .icone-grande{width:96px;height:96px}
.setas{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.seta{display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--grafite);border-radius:50%;background:var(--superficie);color:var(--grafite);cursor:pointer}
.seta svg{width:24px;height:24px}
.pontos{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ponto{display:block;width:10px;height:10px;border-radius:50%;background:var(--borda-campo)}
.ponto-atual{background:var(--grafite);transform:scale(1.25)}

/* tela 6: link, dados */
.link-caixa{display:grid;gap:8px;width:100%;text-align:left}
.rotulo-link{font-weight:700;font-size:15px}
.link{width:100%;min-width:0;min-height:52px;padding:12px 14px;border:2px solid var(--borda-campo);border-radius:var(--raio);background:var(--superficie);color:var(--texto);font-size:15px}
.acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acoes .btn-sec{width:100%}
.acoes [hidden]+.btn-sec,.acoes .btn-sec:only-child{grid-column:1/-1}
.dados{display:grid;gap:8px;width:100%;min-width:0;margin:0;text-align:left}
/* A3 N6: valor comprido (e-mail) desce para a linha de baixo e só então quebra, em qualquer ponto, sem estourar a caixa em 360/390 */
.dado{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;min-width:0;padding:10px 14px;border-radius:var(--raio);background:var(--superficie);border:1px solid var(--borda)}
.dado dt{font-weight:700;color:var(--texto-2)}
.dado dd{margin:0;min-width:0;max-width:100%;font-weight:800;text-align:right;overflow-wrap:anywhere}
.mensagem{display:grid;gap:8px;text-align:left}
.mensagem-texto{padding:12px 14px;border-radius:var(--raio);background:var(--superficie);border:1px solid var(--borda);white-space:pre-wrap}

/* telas 8 e 9 */
.bloco{display:grid;gap:10px;text-align:left}
.bloco h2{font-size:20px;font-weight:800}
.bloco-aviso .lista li::before{background:var(--erro)}
.suave{font-weight:600;color:var(--texto-2)}
.objecao{display:grid;gap:4px}
.cliente{font-weight:800}
.resposta{color:var(--texto-2)}
.perguntas{display:grid;gap:10px;text-align:left}
.pergunta{border-radius:var(--raio);background:var(--superficie);border:1px solid var(--borda);padding:4px 14px}
.pergunta summary{min-height:48px;display:flex;align-items:center;font-weight:800;cursor:pointer}
.pergunta p{padding-bottom:12px;color:var(--texto-2)}

@media (min-width:900px){
  main{padding-block:40px 64px}
  .titulo{font-size:48px}
}