/* ============================================================
   FONTES
   Auto-hospedadas em assets/fonts (sem CDN externo, mesmo
   princípio das fontes do produto em si). archivo.woff2 é a
   variável (pesos 400 a 700 num arquivo só, é assim que o Google
   Fonts também serve — por isso os quatro @font-face abaixo
   apontam pro mesmo arquivo, cada um só diz qual peso usar dele).
   ============================================================ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-black.woff2') format('woff2')}

/* ============================================================
   TOKENS
   Tema: escuro, travado para a página inteira.
   Acento: um só, o laranja da marca. O creme aparece
   exclusivamente como material da polaroid, nunca como acento.
   Raio: 14px em superfícies, pílula em controles. Regra única.
   ============================================================ */
:root{
  --preto:#0F0F10;
  --preto2:#151517;
  --sup:#1A1A1D;
  --linha:#26262B;
  --linha2:#33333A;
  --branco:#F4F2EF;
  --texto:#C9C6C2;
  --fraco:#8B8B93;
  --acento:#FF5A1F;
  --acento-esc:#E8430F;
  --creme:#FAF7F2;
  --r:14px;
  --pill:100px;
  --disp:'Archivo Black','Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --nav-h:68px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  background:var(--preto);color:var(--texto);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 22px}
@media(min-width:820px){.wrap{padding:0 40px}}

h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;color:var(--branco);line-height:1.02}
h2{font-size:clamp(30px,5.2vw,52px)}
h3{font-size:clamp(19px,2.4vw,24px);letter-spacing:-.025em;line-height:1.15}
p{max-width:62ch}

/* ---------- controles ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:var(--pill);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-1{background:var(--acento);color:#0F0F10}
.btn-1:hover{background:#FF6D38;transform:translateY(-2px)}
.btn-1:active{transform:translateY(0) scale(.985)}
.btn-2{background:transparent;color:var(--branco);border-color:var(--linha2)}
.btn-2:hover{border-color:#4A4A54;background:rgba(255,255,255,.04);transform:translateY(-2px)}
.btn-2:active{transform:translateY(0) scale(.985)}
.btn-sm{padding:11px 19px;font-size:14px}

/* ---------- navegação: uma linha, 68px ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(15,15,16,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease,background-color .25s ease;
}
nav.fixo{border-bottom-color:var(--linha);background:rgba(15,15,16,.94)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.selo{width:24px;height:24px;border-radius:7px;background:var(--acento);display:grid;place-items:center}
.selo b{width:7px;height:7px;border-radius:50%;background:#0F0F10;display:block}
.marca span{font-family:var(--disp);font-size:17px;color:var(--branco);letter-spacing:-.03em}
.links{display:flex;align-items:center;gap:28px}
.links a{font-size:14.5px;color:var(--texto);text-decoration:none;transition:color .16s}
.links a:hover{color:var(--branco)}
@media(max-width:900px){.links a:not(.btn){display:none}}

/* ---------- hero: split assimétrico, nunca centralizado ---------- */
.hero{padding:calc(var(--nav-h) + 46px) 0 60px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-24%;right:-12%;width:min(760px,88vw);height:min(760px,88vw);
  background:radial-gradient(circle,rgba(255,90,31,.17),transparent 62%);pointer-events:none;
}
.hero .wrap{position:relative;display:grid;gap:44px;align-items:center}
@media(min-width:960px){
  .hero{padding-top:calc(var(--nav-h) + 72px)}
  .hero .wrap{grid-template-columns:1.15fr .85fr;gap:64px}
}
.hero h1{font-size:clamp(42px,8.4vw,86px);line-height:.93;letter-spacing:-.05em}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero .sub{font-size:clamp(17px,2.1vw,20.5px);margin-top:24px;max-width:26ch;color:var(--texto)}
.hero .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
@media(max-width:640px){
  /* no celular o clipe precisa despontar acima da dobra, senão a prova fica escondida */
  .hero{padding-top:calc(var(--nav-h) + 26px);padding-bottom:38px}
  .hero .wrap{gap:30px}
  .hero .sub{margin-top:18px;max-width:30ch;font-size:17px}
  .hero .acoes{margin-top:26px;gap:10px}
  .hero .acoes .btn{flex:1 1 auto;padding:14px 18px;font-size:15px}
  .palco{max-height:440px;max-width:290px}
}

/* palco do vídeo, 9:16 */
.palco{
  position:relative;aspect-ratio:9/16;max-height:600px;width:100%;max-width:340px;
  margin-inline:auto;border-radius:24px;overflow:hidden;
  border:1px solid var(--linha2);background:var(--preto2);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.palco video{width:100%;height:100%;object-fit:cover}
.espera{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:30px;background:
    radial-gradient(120% 70% at 50% 0%,rgba(255,90,31,.13),transparent 60%),var(--preto2);
}
.espera .anel{width:46px;height:46px;border-radius:50%;border:2px solid var(--acento);display:grid;place-items:center}
.espera .anel b{width:11px;height:11px;border-radius:50%;background:var(--acento);display:block}
.espera p{font-size:13.5px;color:var(--fraco);max-width:24ch;line-height:1.5}

/* ---------- como funciona: sequência escalonada, não três cards iguais ---------- */
.passos{padding:86px 0 90px;border-top:1px solid var(--linha)}
.passos h2{max-width:16ch}
.trilha{margin-top:48px;display:grid;gap:36px;position:relative}
@media(min-width:900px){
  .trilha{grid-template-columns:repeat(3,1fr);gap:34px;align-items:start}
  .trilha::before{content:"";position:absolute;top:23px;left:7%;right:7%;height:1px;background:var(--linha2)}
  .trilha .passo:nth-child(2){margin-top:30px}
  .trilha .passo:nth-child(3){margin-top:60px}
}
.passo{position:relative}
.passo .n{
  width:46px;height:46px;border-radius:50%;background:var(--preto);border:1px solid var(--acento);
  color:var(--acento);font-family:var(--disp);font-size:16px;
  display:grid;place-items:center;position:relative;z-index:1;
}
.passo h3{margin:20px 0 9px}
.passo p{font-size:16px;max-width:34ch}

/* ---------- quadro de mídia -----------------------------------
   Cada slot tem o caminho do arquivo real em data-src. Enquanto o
   arquivo não existir, o quadro mostra um painel de espera desenhado.
   No dia em que o arquivo entrar na pasta, a foto aparece sozinha,
   sem tocar em uma linha de código.
   -------------------------------------------------------------- */
.quadro{position:relative;overflow:hidden;background:var(--sup);border:1px solid var(--linha);border-radius:var(--r)}
.quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.quadro img.ok{opacity:1}
.quadro.cheio .slot{display:none}
.slot{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:13px;
  text-align:center;padding:28px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,90,31,.09),transparent 62%);
}
.slot .anel{width:42px;height:42px;border-radius:50%;border:1px solid var(--acento);display:grid;place-items:center}
.slot .anel b{width:10px;height:10px;border-radius:50%;background:var(--acento);display:block}
.slot p{font-size:13.5px;color:var(--fraco);max-width:26ch;margin:0;line-height:1.5}

/* ---------- faixa cheia: mídia sangrando ---------- */
.faixa{position:relative}
.faixa figure{position:relative;height:clamp(300px,54vh,520px);overflow:hidden;background:var(--sup);border-block:1px solid var(--linha)}
.faixa .quadro{position:absolute;inset:0;border:0;border-radius:0}
.faixa img{filter:saturate(.9) contrast(1.05)}
.faixa figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,16,.72),rgba(15,15,16,.25) 42%,rgba(15,15,16,.94));
}
.faixa .legenda{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:34px;
}
.faixa .legenda p{
  font-family:var(--disp);font-size:clamp(20px,3.4vw,34px);color:var(--branco);
  letter-spacing:-.035em;line-height:1.1;max-width:20ch;
}

/* ---------- split de conteúdo ---------- */
.split{padding:92px 0;border-top:1px solid var(--linha)}
.split .wrap{display:grid;gap:40px;align-items:center}
@media(min-width:960px){
  .split .wrap{grid-template-columns:1fr 1fr;gap:70px}
  .split.midia-esq .texto{order:2}
  .split.midia-esq .midia{order:1}
}
.split p{font-size:17px;margin-top:20px}
.split h2{max-width:17ch}

.split .quadro{aspect-ratio:4/5;max-width:400px;margin-inline:auto}

/* ---------- polaroid: grade assimétrica ---------- */
.polaroid-sec{padding:92px 0;border-top:1px solid var(--linha)}
.pgrid{display:grid;gap:44px;margin-top:44px;align-items:center}
@media(min-width:960px){.pgrid{grid-template-columns:.85fr 1.15fr;gap:66px}}
.polaroid{
  background:var(--creme);padding:15px 15px 62px;border-radius:4px;max-width:320px;
  box-shadow:0 26px 70px rgba(0,0,0,.62);transform:rotate(-3.2deg);margin-inline:auto;
  position:relative;
}
.polaroid .quadro{aspect-ratio:1;border-radius:1px;border:0;background:#E6E1D8}
.polaroid .slot{background:none}
.polaroid .slot .anel{border-color:#B9B1A4}
.polaroid .slot .anel b{background:#B9B1A4}
.polaroid .slot p{color:#8A837A}
.polaroid .cap{
  position:absolute;left:15px;right:15px;bottom:16px;text-align:center;color:#2A2724;
}
.polaroid .cap i{
  display:block;font-family:'Brush Script MT','Segoe Script',cursive;font-style:normal;
  font-size:21px;line-height:1.15;
}
.polaroid .cap small{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8A837A}
.pontos{display:grid;gap:26px}
.ponto h3{font-size:19px;margin-bottom:7px}
.ponto p{font-size:16px;margin:0}

/* ---------- planos ---------- */
.planos{padding:92px 0;border-top:1px solid var(--linha)}
.planos h2{max-width:14ch}
.pcards{display:grid;gap:20px;margin-top:46px}
@media(min-width:900px){.pcards{grid-template-columns:.86fr 1.14fr;align-items:start}}
.plano{border:1px solid var(--linha);border-radius:var(--r);background:var(--sup);padding:32px 28px}
.plano.destaque{border-color:var(--acento);background:linear-gradient(180deg,rgba(255,90,31,.07),transparent 42%),var(--sup);position:relative}
.plano .tag{
  position:absolute;top:-11px;left:28px;background:var(--acento);color:#0F0F10;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--pill);
}
.plano h3{font-size:21px}
.plano .valor{font-family:var(--disp);font-size:clamp(34px,5vw,46px);color:var(--branco);letter-spacing:-.04em;margin:14px 0 3px;line-height:1}
.plano.destaque .valor{color:var(--acento)}
.plano .unidade{font-size:14px;color:var(--fraco);margin-bottom:22px}
.plano ul{list-style:none;display:grid;gap:11px;border-top:1px solid var(--linha);padding-top:20px}
.plano li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.45}
.plano li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:5px;
  border-left:1.5px solid var(--acento);border-bottom:1.5px solid var(--acento);transform:rotate(-45deg);
}
.plano .btn{margin-top:26px;width:100%}
.extras{margin-top:26px;display:grid;gap:9px}
.extras div{font-size:14.5px;color:var(--fraco)}
.extras b{color:var(--texto);font-weight:600}

/* ---------- perguntas ---------- */
.faq{padding:92px 0;border-top:1px solid var(--linha)}
.faq .wrap{display:grid;gap:34px}
@media(min-width:960px){.faq .wrap{grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}}
.faq h2{max-width:11ch}
details{border-bottom:1px solid var(--linha)}
details summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-weight:600;font-size:17.5px;color:var(--branco);line-height:1.35;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"";position:absolute;right:6px;top:31px;width:11px;height:11px;
  border-right:1.5px solid var(--acento);border-bottom:1.5px solid var(--acento);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
details[open] summary::after{transform:rotate(-135deg);top:34px}
details p{padding:0 0 24px;font-size:16.5px;max-width:64ch}
details:first-of-type{border-top:1px solid var(--linha)}

/* ---------- outros públicos: linhas, não cards ---------- */
.outros{padding:88px 0;border-top:1px solid var(--linha)}
.outros h2{font-size:clamp(24px,3.2vw,32px)}
.rotas{margin-top:34px;border-top:1px solid var(--linha)}
.rota{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:26px 4px;border-bottom:1px solid var(--linha);text-decoration:none;
  transition:padding-left .22s var(--ease),background-color .22s var(--ease);
}
.rota:hover{padding-left:16px;background:rgba(255,255,255,.02)}
.rota h3{font-size:20px;margin-bottom:5px}
.rota p{font-size:15.5px;margin:0;color:var(--fraco)}
.rota .seta{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--linha2);
  display:grid;place-items:center;color:var(--acento);transition:border-color .2s,transform .22s var(--ease);
}
.rota:hover .seta{border-color:var(--acento);transform:translateX(4px)}

/* ---------- fechamento ---------- */
.fim{padding:100px 0 108px;border-top:1px solid var(--linha);text-align:center;position:relative;overflow:hidden}
.fim::before{
  content:"";position:absolute;bottom:-58%;left:50%;transform:translateX(-50%);
  width:min(900px,120vw);height:min(900px,120vw);
  background:radial-gradient(circle,rgba(255,90,31,.15),transparent 60%);pointer-events:none;
}
.fim .wrap{position:relative}
.fim h2{font-size:clamp(32px,6vw,60px);margin-inline:auto;max-width:14ch}
.fim p{margin:22px auto 0;max-width:46ch;font-size:17.5px}
.fim .btn{margin-top:34px}
.fim .area{margin-top:22px;font-size:14.5px;color:var(--fraco);max-width:52ch;margin-inline:auto}

/* ---------- rodapé ---------- */
footer{border-top:1px solid var(--linha);padding:44px 0 60px;background:var(--preto2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:22px 40px;justify-content:space-between;align-items:center}
footer .fl{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
footer a{font-size:14px;color:var(--fraco);text-decoration:none}
footer a:hover{color:var(--texto)}
footer small{font-size:13.5px;color:var(--fraco)}

/* ---------- movimento ---------- */
.rev{opacity:0;transform:translateY(22px)}
.viu{opacity:1;transform:none;transition:opacity .72s var(--ease),transform .72s var(--ease)}
.hero h1,.hero .sub,.hero .acoes,.hero .midia{opacity:0;animation:sobe .82s var(--ease) forwards}
.hero h1{animation-delay:.06s}
.hero .sub{animation-delay:.16s}
.hero .acoes{animation-delay:.26s}
.hero .midia{animation-delay:.2s}
@keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  .hero h1,.hero .sub,.hero .acoes,.hero .midia{opacity:1}
  .polaroid{transform:none}
}

/* ============================================================
   COMPONENTES DAS PÁGINAS POR PÚBLICO
   /bares · /parceiros · /produtores
   Mesmos tokens, mesmas regras de forma e cor da home.
   ============================================================ */

/* ---------- faixa de afirmação: só tipografia, sem mídia ---------- */
.manifesto{padding:92px 0;border-top:1px solid var(--linha)}
.manifesto h2{max-width:15ch}
.manifesto .corpo{margin-top:26px;display:grid;gap:18px;max-width:60ch}
.manifesto .corpo p{font-size:18px}
.manifesto .corpo p.forte{
  font-family:var(--disp);font-size:clamp(19px,2.6vw,25px);line-height:1.24;
  letter-spacing:-.028em;color:var(--branco);border-left:3px solid var(--acento);
  padding-left:20px;max-width:26ch;
}

/* ---------- números em destaque ---------- */
.numeros{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;margin-top:40px}
@media(min-width:760px){.numeros{grid-template-columns:repeat(3,1fr)}}
.numeros div{background:var(--sup);padding:30px 26px}
.numeros b{display:block;font-family:var(--disp);font-size:clamp(30px,4.4vw,42px);letter-spacing:-.04em;line-height:1;color:var(--acento)}
.numeros span{display:block;margin-top:11px;font-size:14.5px;color:var(--fraco);line-height:1.45}

/* ---------- tabela de conta ---------- */
.conta{margin-top:40px;border:1px solid var(--linha);border-radius:var(--r);background:var(--sup);overflow-x:auto}
.conta table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:460px}
.conta th{
  text-align:left;padding:18px 20px;background:#1E1E22;border-bottom:1px solid var(--linha2);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--fraco);font-weight:700;white-space:nowrap;
}
.conta th:not(:first-child),.conta td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.conta td{padding:16px 20px;border-top:1px solid var(--linha);color:var(--texto)}
.conta tbody tr:first-child td{border-top:0}
.conta td:first-child{color:var(--fraco)}
.conta tr.total td{background:rgba(255,90,31,.07);color:var(--branco);font-weight:700;font-size:17px;border-top:1px solid var(--linha2)}
.conta tr.total td:first-child{color:var(--branco)}

/* ---------- blocos numerados de problema ---------- */
.problemas{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;margin-top:40px}
@media(min-width:820px){.problemas{grid-template-columns:repeat(3,1fr)}}
.problemas article{background:var(--sup);padding:34px 28px;border-top:2px solid var(--acento)}
.problemas h3{font-size:19px;margin-bottom:10px}
.problemas p{font-size:15.5px;margin:0}

/* ---------- linhas de cota ---------- */
.cotas{margin-top:40px;border-top:1px solid var(--linha)}
.cota{display:grid;gap:10px 34px;padding:28px 4px;border-bottom:1px solid var(--linha)}
@media(min-width:820px){.cota{grid-template-columns:200px 1fr;align-items:start}}
.cota .nome{display:flex;align-items:baseline;gap:11px}
.cota .nome h3{font-size:21px}
.cota .vagas{font-size:12.5px;color:var(--acento);font-weight:700;white-space:nowrap}
.cota ul{list-style:none;display:grid;gap:9px}
.cota li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.45}
.cota li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--acento)}

/* ---------- três planos ---------- */
.pcards.tres{gap:18px}
@media(min-width:960px){.pcards.tres{grid-template-columns:1fr 1.16fr 1fr;align-items:start}}
.plano .porte{font-size:13px;color:var(--acento);font-weight:700;letter-spacing:.04em;margin-bottom:4px}

/* ---------- faixa de oferta ---------- */
.oferta{padding:80px 0;border-top:1px solid var(--linha)}
.oferta .caixa{
  border:1px solid rgba(255,90,31,.34);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,90,31,.10),transparent 58%),var(--sup);
  padding:44px 34px;display:grid;gap:22px;
}
@media(min-width:900px){.oferta .caixa{grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;padding:52px 46px}}
.oferta h2{font-size:clamp(26px,3.8vw,40px);max-width:16ch}
.oferta p{margin-top:16px;font-size:17px}
.oferta .btn{width:100%}
@media(min-width:900px){.oferta .btn{width:auto;justify-self:end}}

/* ---------- grade de lembranças ---------- */
.grade{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:10px;max-width:430px;aspect-ratio:1;margin-inline:auto;
}
.grade .quadro{aspect-ratio:auto;max-width:none;margin-inline:0;width:100%;border-radius:9px;background:#1F1F24;border:1px solid #303038}
.grade .quadro:first-child{grid-column:span 2;grid-row:span 2}
.grade .quadro:nth-child(2){grid-column:3;grid-row:1}
.grade .quadro:nth-child(3){grid-column:3;grid-row:2}
.grade .slot{padding:14px;gap:9px;background:radial-gradient(120% 90% at 50% 0%,rgba(255,90,31,.10),transparent 66%)}
.grade .slot p{font-size:11.5px;max-width:17ch}
.grade .quadro:not(:first-child) .slot .anel{width:24px;height:24px}
.grade .quadro:not(:first-child) .slot .anel b{width:6px;height:6px}
.grade .quadro:not(:first-child) .slot p{display:none}

/* ---------- formulário ---------- */
.captura{padding:92px 0;border-top:1px solid var(--linha)}
.captura .wrap{display:grid;gap:40px}
@media(min-width:960px){.captura .wrap{grid-template-columns:1fr 1fr;gap:66px;align-items:start}}
.captura h2{max-width:14ch}
.captura .lista{margin-top:24px;display:grid;gap:14px}
.captura .lista li{list-style:none;position:relative;padding-left:26px;font-size:16px}
.captura .lista li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:5px;
  border-left:1.5px solid var(--acento);border-bottom:1.5px solid var(--acento);transform:rotate(-45deg);
}
form.cx{border:1px solid var(--linha);border-radius:var(--r);background:var(--sup);padding:30px 26px;display:grid;gap:18px}
.campo{display:grid;gap:7px}
.campo label{font-size:14px;font-weight:600;color:var(--branco)}
.campo input,.campo select{
  width:100%;padding:14px 15px;font-family:var(--sans);font-size:16px;
  color:var(--branco);background:#101013;border:1px solid var(--linha2);border-radius:10px;
  transition:border-color .16s;
}
.campo input::placeholder{color:#7A7A83}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--acento)}
.campo input.invalido,.campo select.invalido{border-color:var(--verm,#FF6B4A)}
.campo .erro{font-size:13px;color:#FF8A6B}
.campo .dica{font-size:13px;color:var(--fraco)}
form.cx .btn{width:100%;margin-top:4px}
form.cx .aviso{
  font-size:14px;color:var(--texto);background:rgba(255,90,31,.09);
  border:1px solid rgba(255,90,31,.3);border-radius:10px;padding:13px 15px;line-height:1.45;
}
form.cx .rodape{font-size:13px;color:var(--fraco);line-height:1.5}