/* Priorizzi Fluxo · site público · priorizzifluxo.com.br
   Régua: vault/marca/priorizzi.md, seção 5b. Cara do app: escuro #080B14 e claro #F4F5F7. Inter, um vermelho por região.
   Faixas: topo e abertura escuros, problema branco, como funciona claro, o que você enxerga branco,
   dados claro, chamada final #111934, rodapé #080B14.
   Vermelhos: bloco da logo no topo, etiqueta da correção no desenho da tela, ponto do priorizzi. no rodapé.
   Mobile primeiro. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/inter-variable.woff2") format('woff2')}

:root{
  --bg:#FFFFFF;
  --light:#F4F5F7;
  --ink:#080B14;
  --weak:#59617C;
  --panel:#111934;
  --muted:#9AA3BD;
  --red:#E7152B;
  --red-bg:#FDE8EA;
  --amber:#92601A;
  --amber-bg:#FFF3DC;
  --gray-bg:#EDF1F6;
  --linha:#E3E6EC;
  --wa:#25D366;
  --wa-h:#1FBF5B;
  --inter:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1080px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(72px,12vw,140px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--inter);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.claro{background:var(--light)}
.escuro{background:var(--ink);color:#fff}
.painel{background:var(--panel);color:#fff}
.escuro .lead,.escuro .miuda,.painel .lead{color:var(--muted)}
.escuro .link{text-decoration-color:rgba(255,255,255,.35)}
.escuro .link:hover{text-decoration-color:#fff}
.escuro :focus-visible,.painel :focus-visible{outline-color:#fff}

/* textura da linha comercial do design system, só nas faixas escuras de cima e da chamada final.
   Grade de 64 px a 1,8% de branco e véu radial num canto, longe do texto. Pior contraste do apoio #9AA3BD
   no ponto mais claro (véu + linha da grade): 5,9:1 na abertura, 5,2:1 na chamada final. */
.topo,.abertura,.painel{
  --grade:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
}
.topo{background-image:var(--grade);background-size:64px 64px}
/* ponytail: 44px = 128 menos os 84 px do topo, para a grade seguir sem emenda; mudou a altura do topo, recalcular */
.abertura{background-image:radial-gradient(900px 560px at 100% 100%,rgba(255,255,255,.09),transparent 70%),var(--grade);background-size:100% 100%,64px 64px,64px 64px;background-position:0 0,0 44px,0 44px}
.painel{background-image:radial-gradient(760px 480px at 100% 0,rgba(255,255,255,.08),transparent 70%),var(--grade);background-size:100% 100%,64px 64px,64px 64px}

h1,h2{font-weight:700;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(2.25rem,6.5vw + .5rem,4rem);max-width:17ch}
h2{font-size:clamp(1.75rem,3vw + .75rem,2.5rem);max-width:20ch}
.lead{font-size:clamp(1.125rem,1vw + .8rem,1.3rem);line-height:1.55;color:var(--weak);max-width:44ch;margin-top:1.25rem}
.corpo{color:var(--weak);max-width:54ch;margin-top:1.5rem}
.corpo p + p{margin-top:1rem}
.miuda{font-size:.9375rem;color:var(--weak);margin-top:1.5rem;max-width:52ch}

/* botões e links */
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.85rem 1.6rem;border-radius:999px;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;transition:background .2s}
.btn--wa{background:var(--wa);color:var(--ink)}
.btn--wa:hover{background:var(--wa-h)}
.link{font-weight:600;text-decoration:underline;text-decoration-color:var(--linha);text-decoration-thickness:2px;text-underline-offset:5px}
.link:hover{text-decoration-color:var(--ink)}

/* topo */
.topo__in{display:flex;align-items:center;justify-content:space-between;height:84px}
.marca{display:inline-flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;text-decoration:none}
.marca img{width:42px;height:42px}
.topo .link{font-size:.95rem}

/* abertura */
.abertura{padding-top:clamp(56px,10vw,120px);padding-bottom:var(--sec)}

/* problema: sem título, a primeira frase faz o papel dele */
.abre{font-size:clamp(1.4rem,2.2vw + .8rem,2.1rem);font-weight:600;line-height:1.3;letter-spacing:-.02em;max-width:32ch}

/* como funciona */
.como{display:grid;gap:clamp(48px,7vw,72px)}
.passos{list-style:none;margin-top:2.25rem;display:grid;gap:1.5rem;counter-reset:p}
.passos li{counter-increment:p;display:grid;grid-template-columns:2rem 1fr;max-width:52ch}
.passos li::before{content:counter(p);font-weight:600;color:var(--weak)}

/* desenho da tela do app (HTML/CSS, dados fictícios) */
.tela{display:flex;background:#fff;border:1px solid var(--linha);border-radius:14px;overflow:hidden;font-size:.875rem;line-height:1.45;align-self:center}
.tela__menu{flex:0 0 52px;background:var(--ink);display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0}
.tela__menu img{width:22px;height:22px;margin-bottom:8px}
.tela__menu i{width:24px;height:6px;border-radius:3px;background:var(--panel)}
.tela__menu i:first-of-type{background:var(--muted)}
.tela__conteudo{flex:1;min-width:0;padding:.5rem 0}
.tela__linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:1.1rem 1.25rem}
.tela__linha + .tela__linha{border-top:1px solid var(--gray-bg)}
.tela__linha>div{flex:1 1 9rem}
.tela__linha b{display:block;font-weight:600}
.tela__linha span{display:block;color:var(--weak);font-size:.8125rem;margin-top:.15rem}
.tela__linha .etq{flex-shrink:0;margin-top:0;font-size:.75rem;font-weight:600;padding:.3rem .55rem;border-radius:5px;background:var(--gray-bg);color:var(--weak)}
.tela__linha .etq--ambar{background:var(--amber-bg);color:var(--amber)}
.tela__linha .etq--venc{background:var(--red-bg);color:var(--red)}

/* o que você enxerga */
.itens{list-style:none;margin-top:2.25rem;display:grid;gap:0 3rem}
.itens li{padding:1.5rem 0;border-top:1px solid var(--linha)}
.itens h3{font-size:1.2rem;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.itens p{color:var(--weak);margin-top:.35rem;max-width:42ch}

/* rodapé */
.rodape{padding-top:2.5rem;padding-bottom:2.5rem;font-size:.9375rem;color:var(--muted)}
.rodape__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
.rodape a{text-decoration:none}
.rodape a:hover{color:#fff}
.wm{font-weight:800;letter-spacing:-.04em;color:#fff}
.dot{color:var(--red)}

@media (min-width:720px){
  .itens{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .como{grid-template-columns:1fr 1fr;align-items:start}
}