/* /afiliado-precisa-de-cnpj — o que o kit não cobre na página da conta islâmica da a referência: o hero dividido (texto à esquerda, a peça
   com os três cartões de conta flutuando à direita), o bento de 2/3 + coluna de três com o celular e o interruptor, e a faixa do
   suporte com a peça no centro e os quatro selos dos lados.
   Celular copia a composição do computador: o bento fica lado a lado em 360px, com a copy resumida só nele; no hero, a peça desce
   para baixo do texto com os cartões sobre o lado esquerdo dela, como a a referência faz no celular.
   Só transform/opacity/translate na animação; menos movimento no fim. */

/* ---------- hero: a peça e os cartões de vidro ---------- */
.lp-hero--img{--hw:min(80vw,400px);--hb:64px;justify-content:flex-start;padding-top:104px;padding-bottom:calc(var(--hw)*2/3 + var(--hb) + 20px)}
.lp-hero--img::before{display:none}
.lp-hero--img .lp-hero-bg{inset:auto;left:50%;bottom:var(--hb);width:var(--hw);height:calc(var(--hw)*2/3);margin-left:calc(var(--hw)/-2);object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.p-cnpj-hc{position:absolute;left:calc(50% - var(--hw)/2 - 6px);bottom:var(--hb);height:calc(var(--hw)*2/3);display:grid;align-content:center;justify-items:start;gap:8px;pointer-events:none;text-align:left}
.p-cnpj-hc-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:212px;padding:8px 10px 8px 8px;border-radius:16px;color:#fff;
  background:linear-gradient(160deg,rgba(40,40,40,.72),rgba(14,14,14,.6));box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 18px 40px -16px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-cnpj-hc-c:nth-child(2){margin-left:28px}
.p-cnpj-hc-i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff}
.p-cnpj-hc-i .ic{width:16px;height:16px}
.p-cnpj-hc-c--x .p-cnpj-hc-i{background:rgba(255,255,255,.12);color:var(--lp-mut2)}
.p-cnpj-hc-t{display:grid;gap:2px;min-width:0}
.p-cnpj-hc-t small{font-size:.75rem;line-height:1.2;color:var(--lp-mut2)}
.p-cnpj-hc-t b{font-size:.9375rem;line-height:1.2;font-weight:600;white-space:nowrap}
.p-cnpj-hc-k{display:grid;gap:3px;padding:0 4px}
.p-cnpj-hc-k i{width:3px;height:3px;border-radius:50%;background:var(--lp-mut)}

/* ---------- o cartão da casa (borda clara em gradiente sobre o preto, o mesmo da conta-de-parceiro) ---------- */
.p-cnpj-big,.p-cnpj-c{position:relative;min-width:0;border:1px solid transparent;border-radius:22px;
  background:radial-gradient(120% 120% at 0 0,#171717 0,#0d0d0d 60%,#0a0a0a 100%) padding-box,linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1)) border-box}

/* ---------- 1. o bento: 2/3 com o celular + coluna de três ---------- */
.p-cnpj-bento{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
.p-cnpj-big{display:grid;grid-template-rows:auto 1fr;padding:28px 24px 0;overflow:hidden}
.p-cnpj-big-x{display:grid;gap:14px;align-content:start;justify-items:start}
.p-cnpj-big-x p{font-size:1rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
.p-cnpj-big-m{position:relative;align-self:end;margin-top:20px}
/* o celular sobe de baixo e é cortado pela borda do cartão, como o da a referência na mão */
.p-cnpj-cel{width:min(100%,320px);margin-inline:auto;aspect-ratio:878/1150;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
.p-cnpj-cel .lp-cel{width:100%}
.p-cnpj-vidro{position:absolute;left:0;bottom:22%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;color:#fff;
  background:linear-gradient(160deg,rgba(44,44,44,.78),rgba(16,16,16,.66));box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 20px 44px -14px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-cnpj-vidro-i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red)}
.p-cnpj-vidro-i .ic{width:18px;height:18px}
.p-cnpj-vidro span:last-child{display:grid;gap:2px}
.p-cnpj-vidro small{font-size:.75rem;line-height:1.2;color:var(--lp-mut2);white-space:nowrap}
.p-cnpj-vidro b{font-size:1rem;line-height:1.2;font-weight:600}
.p-cnpj-col{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:14px}
.p-cnpj-c{display:grid;align-content:start;padding:20px 24px}
.p-cnpj-c h3{font-size:1.25rem;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--lp-mut2);text-wrap:balance}
.p-cnpj-c h3 b{font-weight:600;color:#fff}
/* o 1º em cor (o cartão aceso da a referência) */
.p-cnpj-c--hl{background:linear-gradient(160deg,#c8261c,#9a1c14 60%,#6a140e) padding-box,linear-gradient(180deg,rgba(255,140,128,.6),rgba(255,84,72,.2)) border-box}
.p-cnpj-c--hl h3{color:rgba(255,255,255,.86)}
/* o interruptor do último cartão: liga quando o cartão entra na tela */
.p-cnpj-sw{display:block;width:52px;height:30px;margin-top:14px;padding:3px;border-radius:999px;background:var(--red);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.p-cnpj-sw i{display:block;width:24px;height:24px;border-radius:50%;background:#fff;transform:translateX(22px);transition:transform .5s var(--ease) .3s}

/* ---------- 2. a faixa do suporte: a peça no centro e os quatro selos dos lados ---------- */
.p-cnpj-sup{display:grid;justify-items:center;text-align:center;gap:clamp(8px,2vw,16px)}
.p-cnpj-sup-m{position:relative;width:min(100%,760px)}
.p-cnpj-sup-m img{display:block;width:78%;height:auto;margin-inline:auto;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent);mask-image:radial-gradient(closest-side,#000 64%,transparent)}
.p-cnpj-sup-t{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap;
  background:linear-gradient(160deg,rgba(44,44,44,.8),rgba(16,16,16,.7));box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 16px 36px -14px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-cnpj-sup-t .ic{width:28px;height:28px;padding:6px;border-radius:50%;background:rgba(217,45,32,.9)}
.p-cnpj-sup-t:nth-of-type(1){left:0;top:16%}
.p-cnpj-sup-t:nth-of-type(2){left:5%;top:62%}
.p-cnpj-sup-t:nth-of-type(3){right:0;top:22%}
.p-cnpj-sup-t:nth-of-type(4){right:5%;top:68%}
.p-cnpj-sup-x{display:grid;justify-items:center;gap:16px;max-width:640px}
.p-cnpj-sup-x .lp-h2 .g{display:block}
.p-cnpj-sup-x p{font-size:1rem;line-height:1.5;color:var(--lp-mut2);text-wrap:pretty}
/* o botão e o "Saiba mais" um sobre o outro, como na a referência */
.p-cnpj-cta{display:grid;justify-items:center;gap:6px;margin-top:4px}

/* ---------- 5. o que não fazemos: corpo de 16px ---------- */
#nao-fazemos .lp-ck li{font-size:1rem}

/* ---------- movimento (só transform/opacity/translate) ---------- */
@media (prefers-reduced-motion:no-preference){
  .p-cnpj-hc-c{animation:p-cnpj-entra .8s var(--ease) both,p-cnpj-flut 6s ease-in-out infinite;animation-delay:calc(.35s + var(--n)*.15s),calc(1.2s + var(--n)*-2s)}
  .p-cnpj-sup-t{animation:p-cnpj-flut 7s ease-in-out infinite;animation-delay:calc(var(--n)*-1.7s)}
  .js-ok .p-cnpj-big .p-cnpj-cel{transition:transform 1s var(--ease) .15s}
  .js-ok .p-cnpj-big:not(.in) .p-cnpj-cel{transform:translateY(48px)}
  .js-ok .p-cnpj-big .p-cnpj-vidro{transition:opacity .6s var(--ease) .6s,transform .8s var(--ease) .6s}
  .js-ok .p-cnpj-big:not(.in) .p-cnpj-vidro{opacity:0;transform:translateY(16px)}
  .js-ok .p-cnpj-c:not(.in) .p-cnpj-sw i{transform:none}
}
@keyframes p-cnpj-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes p-cnpj-flut{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ---------- tablet ---------- */
@media (min-width:600px){
  .lp-hero--img{--hw:min(64vw,460px)}
  .p-cnpj-hc-c{width:236px}
}

/* ---------- computador (a referência: hero dividido; cartões de raio 40, respiro de 40–64px) ---------- */
@media (min-width:1024px){
  .lp-hero--img{--hw:min(46vw,620px);--hx:max(var(--pad),calc(50% - 600px));justify-content:center;padding-top:112px;padding-bottom:96px}
  .lp-hero--img .lp-hero-c{width:min(100%,1200px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-items:start;text-align:left}
  .lp-hero--img .lp-hero-c>*{grid-column:1}
  .lp-hero--img .lp-bc,.lp-hero--img .hero-cta{justify-content:flex-start}
  .lp-hero--img .lp-hero-bg{left:auto;right:var(--hx);bottom:auto;top:50%;margin:calc(var(--hw)/-3 + 20px) 0 0}
  .lp-hero--img .lp-lede{max-width:30em}
  /* os cartões começam no meio da tela, sobre o lado esquerdo da peça, sem invadir a coluna do texto */
  .p-cnpj-hc{left:calc(50% + 12px);bottom:auto;top:50%;margin-top:calc(var(--hw)/-3 + 20px);gap:14px}
  .p-cnpj-hc-c{width:270px;padding:12px 12px 12px 10px;border-radius:20px}
  .p-cnpj-hc-c:nth-child(2){margin-left:56px}
  .p-cnpj-hc-i{width:40px;height:40px}
  .p-cnpj-hc-i .ic{width:20px;height:20px}
  .p-cnpj-hc-t small{font-size:.8125rem}
  .p-cnpj-hc-t b{font-size:1.0625rem}

  .p-cnpj-big,.p-cnpj-c{border-radius:40px}
  .p-cnpj-bento{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
  .p-cnpj-big{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;align-items:end;min-height:620px;padding:56px 0 0 56px}
  .p-cnpj-big-x{align-self:start;gap:20px}
  .p-cnpj-big-x .lp-h2{font-size:3rem}
  .p-cnpj-big-x p{font-size:1.125rem}
  .p-cnpj-big-m{margin-top:0}
  .p-cnpj-cel{width:min(100%,330px)}
  .p-cnpj-vidro{left:-36px}
  .p-cnpj-col{gap:20px}
  .p-cnpj-c{padding:32px;align-content:center}
  .p-cnpj-c h3{font-size:1.5rem}

  /* a referência: a peça larga, os quatro selos numa linha só à altura do rosto e o título subindo sobre o pé da peça */
  .p-cnpj-sup-m{width:min(100%,1040px)}
  .p-cnpj-sup-m img{width:60%}
  .p-cnpj-sup-t:nth-of-type(n){top:34%}
  .p-cnpj-sup-t:nth-of-type(1){left:0}
  .p-cnpj-sup-t:nth-of-type(2){left:19%}
  .p-cnpj-sup-t:nth-of-type(3){right:19%}
  .p-cnpj-sup-t:nth-of-type(4){right:0}
  .p-cnpj-sup-x{position:relative;max-width:900px;margin-top:-88px}
  .p-cnpj-sup-x .lp-h2{font-size:3rem}
  .p-cnpj-sup-t{padding:10px 18px 10px 10px;font-size:1.0625rem}
  .p-cnpj-sup-t .ic{width:36px;height:36px;padding:8px}
}

/* ---------- celular: a mesma composição, com a copy resumida e as colunas apertadas ---------- */
@media (max-width:37.49rem){
  /* a peça vai um pouco para a direita e os cartões encolhem: a moeda aparece inteira ao lado deles, como a pessoa da a referência */
  .lp-hero--img .lp-hero-bg{margin-left:calc(var(--hw)/-2 + 36px)}
  .p-cnpj-hc{left:var(--pad)}
  .p-cnpj-hc-c{width:184px;gap:8px;padding:7px 8px 7px 7px}
  .p-cnpj-hc-c:nth-child(2){margin-left:20px}
  .p-cnpj-hc-i{width:28px;height:28px}
  .p-cnpj-hc-i .ic{width:14px;height:14px}
  .p-cnpj-hc-t b{font-size:.875rem}
  .p-cnpj-bento,.p-cnpj-col{gap:8px}
  .p-cnpj-big{padding:18px 14px 0}
  .p-cnpj-big-x .lp-h2{font-size:1.375rem;line-height:1.05}
  .p-cnpj-big .btn{width:100%;padding:0 14px}
  .p-cnpj-big .btn .ic{display:none}
  .p-cnpj-so-pc{display:none}
  .p-cnpj-big-m{margin-top:14px}
  .p-cnpj-cel{width:100%}
  .p-cnpj-vidro{left:-6px;bottom:16%;gap:6px;padding:6px 10px 6px 6px;border-radius:12px}
  .p-cnpj-vidro-i{width:26px;height:26px}
  .p-cnpj-vidro-i .ic{width:14px;height:14px}
  .p-cnpj-vidro small{font-size:.6875rem}
  .p-cnpj-vidro b{font-size:.875rem}
  .p-cnpj-col{grid-template-rows:auto auto 1fr}
  .p-cnpj-c{padding:14px 12px}
  .p-cnpj-c h3{font-size:1rem;line-height:1.25}
  .p-cnpj-sw{margin-top:10px}

  .p-cnpj-sup-m img{width:84%}
  .p-cnpj-sup-t{gap:6px;padding:5px 10px 5px 5px;font-size:.8125rem}
  .p-cnpj-sup-t .ic{width:22px;height:22px;padding:4px}
  .p-cnpj-sup-t:nth-of-type(2){left:0}
  .p-cnpj-sup-t:nth-of-type(4){right:0}
  #nao-fazemos .lp-ck li{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:14px}
}

@media (prefers-reduced-motion:reduce){
  .p-cnpj-hc-c{animation:p-cnpj-some .3s linear both}
  .p-cnpj-sw i{transition:opacity .2s linear}
}
@keyframes p-cnpj-some{from{opacity:0}to{opacity:1}}