/* LP Crédito Facilitado (Aline Digital). Tokens do brand book; toda cor mora no :root. Celular primeiro (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;
  --marfim:#F7F5F1; --marfim-2:#F1EEE8; --superficie:#FFFFFF;
  --grafite:#181818; --grafite-2:#242424;
  --texto:#181818; --texto-2:#5D6068; --texto-3:#6B6E76; --texto-claro:#F7F5F1; --texto-claro-2:#B9B6B0;
  --borda:#DEDBD5; --borda-campo:#8A8780;
  --laranja:#FF7617; --laranja-forte:#C75001; --laranja-nevoa:#FFF3EA; --laranja-suave:#FFE4D1;
  --erro:#B3261E; --erro-fundo:#FDECEA; --ok:#0E7A41; --ok-fundo:#E8F6EE;
  --grafite-a06:rgb(24 24 24 / .06); --grafite-a12:rgb(24 24 24 / .12);
  --laranja-a24:rgb(255 118 23 / .24); --laranja-a14:rgb(255 118 23 / .14);
  --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)}
.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(--superficie);border-bottom:1px solid var(--borda)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.marca{font-weight:800;font-size:17px;letter-spacing:-.01em}
.passos{display:grid;gap:4px;justify-items:end;min-width:112px}
.passo-rotulo{font-size:13px;font-weight:700;color:var(--texto-2)}
.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:50%} .p2 .barra i{width:100%}

/* telas: uma por vez, troca por [hidden] */
.tela{display:grid;gap:16px;max-width:560px;margin:0 auto}
.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: o único laranja da página */
.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 V: vídeo */
.video-caixa{position:relative;width:auto;height:min(52vh,calc((100vw - 2*var(--calha))*16/9));max-width:100%;margin:0 auto;aspect-ratio:9/16;justify-self:center;border-radius:var(--raio-g);overflow:hidden;background:var(--grafite);box-shadow:var(--sombra-1)}
.video{width:100%;height:100%;object-fit:contain}
.tutorial-caixa{width:auto;height:min(60vh,calc((100vw - 2*var(--calha))*16/9));max-width:100%;margin:0 auto;aspect-ratio:9/16;justify-self:center;border-radius:var(--raio-g);overflow:hidden;background:var(--grafite);box-shadow:var(--sombra-1)}
.tutorial{width:100%;height:100%;object-fit:contain}
.video-falta{position:absolute;inset:0;display:grid;place-items:center;background:var(--grafite-2);color:var(--texto-claro)}
.v-texto{display:grid;gap:14px;align-content:start}
.som{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:48px;padding:8px 16px;border:2px solid var(--grafite);border-radius:99px;background:var(--superficie);color:var(--grafite);font-weight:700;cursor:pointer}
.som svg{width:22px;height:22px}
.ouvir{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:10px 20px;border:0;border-radius:99px;background:var(--laranja);color:var(--grafite);font-weight:800;font-size:17px;white-space:nowrap;box-shadow:var(--sombra-1);cursor:pointer}
.ouvir svg{width:24px;height:24px}
.audio{font-size:12.5px;color:var(--texto-3)}

/* tela F: formulário */
.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}

/* tela R */
.passos-r{display:grid;gap:10px;counter-reset:passo}
.passos-r li{position:relative;padding:12px 14px 12px 52px;border-radius:var(--raio);background:var(--superficie);border:1px solid var(--borda);counter-increment:passo}
.passos-r li::before{content:counter(passo);position:absolute;left:14px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grafite);color:var(--texto-claro);font-weight:800;font-size:14px}
.como{font-size:20px;font-weight:800}
.aviso{padding:12px 14px;border-radius:var(--raio);background:var(--ok-fundo);color:var(--ok);font-weight:600;font-size:15px}
.suporte{font-size:14px;color:var(--texto-2)}

/* 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}

@media (min-width:900px){
  main{padding-block:40px 64px}
  .tela-v{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
  .video-caixa{width:100%;height:auto;max-width:none;aspect-ratio:1/1;margin:0}
  .titulo{font-size:48px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.barra i{transition:none}
  .btn:hover{transform:none}
}