/* /conta-de-parceiro — o que o kit não cobre na página de conta da a referência: as duas colunas com o "+", o cartão grande com o painel
   de vidro, a selfie em 2/3 + coluna, os cartões de número/relógio/pílulas, a escada de quatro etapas e os recortes do Perfil.
   Celular copia a composição do computador (lado a lado em 360px), com a copy resumida só nele. Só transform/opacity na animação;
   menos movimento no fim. */

.p-conta-hero-nota{display:block;margin-top:6px;font-size:.8125rem;color:var(--lp-mut)}

/* o cartão da casa (borda clara em gradiente sobre o preto) */
.p-conta-alto,.p-conta-d,.p-conta-big,.p-conta-c,.p-conta-sf-big,.p-conta-sf-c,.p-conta-e{
  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}
.p-conta-alto h3,.p-conta-d h3,.p-conta-c h3,.p-conta-sf-c h3,.p-conta-e h3{font-size:1.0625rem;line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.p-conta-alto p,.p-conta-c p,.p-conta-sf-c p,.p-conta-sf-x p,.p-conta-e p,.p-conta-fim-x p{font-size:1rem;line-height:1.4;color:var(--lp-mut2)}
.p-conta-c h3{color:var(--lp-mut2);font-weight:500}
.p-conta-c h3 b{font-weight:600;color:#fff}
/* medalhões 3D: o fundo preto some no cartão */
.p-conta-big-med img,.p-conta-c-med img,.p-conta-sf-m img,.p-conta-e-m img{display:block;width:100%;height:auto;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.p-conta-sf-cta{display:grid;grid-auto-flow:column;justify-content:start;align-items:center;gap:16px}
.p-conta-sf-cta .rd-link{min-height:44px;display:inline-flex;align-items:center}

/* 1 — duas colunas: o cartão alto com o celular cortado e os dois cartões que abrem no "+" */
.p-conta-dois{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.p-conta-alto{display:grid;grid-template-rows:auto 1fr;gap:16px;padding:24px 24px 0;overflow:hidden}
.p-conta-alto h3{font-size:1.25rem}
.p-conta-alto h3 span{color:var(--lp-mut)}
.p-conta-alto-x{display:grid;gap:8px}
.p-conta-alto-cel{align-self:end;justify-self:center;width:min(100%,300px);height:clamp(200px,48vw,420px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.p-conta-alto-cel .lp-cel{width:100%}
.p-conta-mais{display:grid;grid-template-rows:1fr 1fr;gap:14px}
/* fechado, o título fica no alto e o "+" no pé do cartão (a linha do summary estica); aberto, a lista entra embaixo */
.p-conta-d{display:grid;grid-template-rows:minmax(0,1fr) auto;padding:22px 24px}
.p-conta-d summary{display:grid;align-content:space-between;justify-items:start;gap:16px;cursor:pointer;list-style:none}
.p-conta-d summary::-webkit-details-marker{display:none}
.p-conta-d summary i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px var(--line2) inset;transition:transform .35s var(--ease),background-color .2s}
.p-conta-d summary .ic{width:18px;height:18px;color:#fff}
.p-conta-d summary:active i{transform:scale(.94)}
.p-conta-d[open]{grid-template-rows:auto minmax(0,1fr)}
.p-conta-d[open] summary i{transform:rotate(45deg);background:var(--red)}
.p-conta-d summary:focus-visible{outline:2px solid var(--red-hi);outline-offset:4px;border-radius:12px}
.p-conta-st{display:grid;gap:10px;align-content:start}
/* fechado, o começo do texto aparece apagando para baixo (como na a referência); aberto, entra a lista inteira */
.p-conta-tz{font-size:1rem;line-height:1.5;color:var(--lp-mut);max-height:4.5em;contain:paint;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.p-conta-d[open] .p-conta-tz{display:none}
.p-conta-d ul{display:grid;gap:10px;margin-top:14px}
.p-conta-d li{position:relative;padding-left:16px;font-size:1rem;line-height:1.35;color:var(--lp-mut2)}
.p-conta-d li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--red-hi)}
@media (prefers-reduced-motion:no-preference){
  .p-conta-d[open] ul{animation:p-conta-abre .45s var(--ease) both}
}
@keyframes p-conta-abre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 2 e 4 — o cartão grande: texto e botão de um lado, mídia do outro */
.p-conta-big{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"x m";gap:20px;padding:28px 24px;overflow:hidden}
.p-conta-big-x{grid-area:x;display:grid;align-content:space-between;gap:20px}
.p-conta-big-t{font-size:1.375rem;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--lp-mut)}
.p-conta-big-t b{display:block;font-weight:600;color:#fff}
.p-conta-big-x>.btn{justify-self:start}
.p-conta-big--inv{grid-template-areas:"m x"}
.p-conta-big-m{grid-area:m;display:grid;align-items:end;min-width:0}
.p-conta-big-med{grid-area:1/1;align-self:start;width:100%}
.p-conta-vidro{grid-area:1/1;position:relative;z-index:1;display:grid;gap:2px;margin-top:38%;padding:6px;border-radius:16px;background:rgba(22,22,22,.62);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 24px 48px -20px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.p-conta-vidro li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;padding:6px 8px;border-radius:10px;font-size:1rem;line-height:1.25;color:var(--lp-mut2)}
.p-conta-vidro li b{font-weight:600;color:#fff}
/* o vidro deixa passar o brilho do medalhão (fundo mais claro medido: rgb 105,87,59): branco a .56 dava 3,34:1; a .8 dá 5,15:1, ainda abaixo do rótulo */
.p-conta-vidro li span{font-size:1rem;color:rgba(255,255,255,.8)}
.p-conta-vidro li.on{background:rgba(217,45,32,.22);box-shadow:0 0 0 1px rgba(255,84,72,.35) inset}
.p-conta-big-cel{grid-area:m;align-self:start;width:min(100%,240px);justify-self:center}
.p-conta-big-cel .lp-cel{width:100%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}

/* a fileira de três cartões: título no alto, objeto embaixo */
.p-conta-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.p-conta-c{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;align-content:start;gap:8px;padding:22px 18px 0;overflow:hidden;min-height:260px}
.p-conta-c h3{font-size:1.25rem}
.p-conta-c-med{align-self:end;width:118%;margin:0 -9% -6%}
.p-conta-c-med--b{margin-top:6px}
.p-conta-c .p-conta-c-v{font-size:clamp(2.5rem,1.6rem + 3vw,4.5rem);line-height:.9;font-weight:600;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.p-conta-c-v small{margin-left:4px;font-size:.4em;letter-spacing:0;color:var(--lp-mut)}
/* relógio do andamento (gira só o ponteiro; contain:paint segura a caixa girada) */
.p-conta-rel{position:relative;justify-self:center;align-self:center;width:min(100%,128px);aspect-ratio:1;border-radius:50%;contain:paint;
  background:radial-gradient(circle,#fff 0 3px,#0f0f0f 4px 74%,transparent 75%),repeating-conic-gradient(from -1deg,rgba(255,255,255,.5) 0 2deg,transparent 2deg 30deg),radial-gradient(circle at 50% 40%,#1d1d1d,#0b0b0b 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 6px rgba(255,255,255,.03),0 20px 40px -18px rgba(217,45,32,.6)}
.p-conta-rel i{position:absolute;left:50%;bottom:50%;width:4px;margin-left:-2px;border-radius:2px;transform-origin:50% 100%}
.p-conta-rel-h{height:26%;background:#fff;transform:rotate(-60deg)}
.p-conta-rel-m{height:38%;background:var(--red-hi)}
@media (prefers-reduced-motion:no-preference){
  .p-conta-rel-m{animation:p-conta-gira 8s linear infinite}
  .p-conta-rel-h{animation:p-conta-gira-h 96s linear infinite}
  .p-conta-pill--x::before{animation:p-conta-pisca 1.6s var(--ease) infinite}
}
@keyframes p-conta-gira{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes p-conta-gira-h{from{transform:rotate(-60deg)}to{transform:rotate(300deg)}}
@keyframes p-conta-pisca{50%{opacity:.25}}
.p-conta-pill{justify-self:center;align-self:end;display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line2) inset;font-size:1rem;line-height:1.2;color:#fff;text-align:center}
.p-conta-pill--x::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#f5b041}
.p-conta-pills{display:grid;gap:6px}
.p-conta-pills li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;font-size:1rem;line-height:1.25;font-weight:600;color:#fff}
.p-conta-pills li span{font-weight:500;color:var(--lp-mut2)}
.p-conta-pills li.ok{box-shadow:0 0 0 1px rgba(255,84,72,.4) inset;background:rgba(217,45,32,.14)}
.p-conta-pills li.ok span{color:var(--red-hi)}

/* 3 — a selfie: cartão de 2/3 e a coluna de três (o 1º em cor, o último com o interruptor) */
.p-conta-sf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
.p-conta-sf-big{display:grid;grid-template-rows:auto 1fr;padding:28px 24px 0;overflow:hidden}
.p-conta-sf-x{display:grid;gap:14px;align-content:start}
.p-conta-sf-x .lp-h2 .a{color:var(--red-hi)}
.p-conta-sf-m{align-self:end;width:124%;margin:4px -12% -4%}
.p-conta-sf-col{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:14px}
.p-conta-sf-c{display:grid;align-content:start;gap:6px;padding:20px 24px}
.p-conta-sf-c h3{font-size:1.25rem}
.p-conta-sf-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-conta-sf-c--hl p{color:#fff}
.p-conta-sw{display:block;width:52px;height:30px;margin-top:6px;padding:3px;border-radius:999px;background:var(--red);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.p-conta-sw i{display:block;width:24px;height:24px;border-radius:50%;background:#fff;transform:translateX(22px);transition:transform .5s var(--ease) .3s}
@media (prefers-reduced-motion:no-preference){
  .js-ok .p-conta-sf-c:not(.in) .p-conta-sw i{transform:none}
}

/* 5 — a escada de quatro etapas: 2 × 2 até o tablet, quatro na fileira no computador */
.p-conta-esc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0}
.p-conta-e{display:grid;grid-template-rows:auto 1fr auto auto auto;justify-items:center;gap:4px;padding:18px 24px 22px;text-align:center;overflow:hidden}
.p-conta-e-n{justify-self:start;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line2) inset;font-size:1rem;font-weight:600;line-height:1.2;color:#fff}
.p-conta-e-m{align-self:center;width:min(112%,300px);margin:-4px -6% 0}
.p-conta-e h3{font-size:1.25rem}
.p-conta-e-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:8px;padding:0 10px;border-radius:999px;font-size:1rem;font-weight:600;white-space:nowrap}
.p-conta-e-btn--g{color:#fff;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .2s,transform .18s var(--ease)}
.p-conta-e-btn--g:active{transform:scale(.98)}
.p-conta-e--hl{background:radial-gradient(120% 120% at 50% 0,#2a0d0a 0,#120605 60%,#0a0a0a 100%) padding-box,linear-gradient(180deg,rgba(255,84,72,.8),rgba(255,84,72,.15) 55%,rgba(255,84,72,.4)) border-box}
.p-conta-e--hl .p-conta-e-n{background:var(--red-d);box-shadow:none}

/* 5b — os dois recortes reais do Perfil, o segundo descendo como numa pilha de cartões */
.p-conta-ap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(8px,2vw,24px);align-items:start}
.p-conta-ap figure{margin:0;border-radius:clamp(10px,1.6vw,22px);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -24px rgba(0,0,0,.95)}
.p-conta-ap img{display:block;width:100%;height:auto}
.p-conta-ap .p-conta-ap-b{margin-top:clamp(28px,8vw,96px)}
@media (prefers-reduced-motion:no-preference){
  .js-ok .p-conta-ap .p-conta-ap-b{transform:translateY(24px);transition:transform .9s var(--ease) .15s}
  .js-ok .p-conta-ap.in .p-conta-ap-b{transform:none}
}

/* 6 — "faça sua escolha": celular de um lado, título e botões do outro */
.p-conta-fim{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:24px;align-items:center}
.p-conta-fim-cel{position:relative;width:min(100%,300px);justify-self:end;isolation:isolate}
.p-conta-fim-cel::before{content:"";position:absolute;inset:8% -20%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.35),transparent);pointer-events:none}
.p-conta-fim-cel .lp-cel{width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7))}
.p-conta-fim-x{display:grid;gap:16px;align-content:center}
.p-conta-fim-x .lp-h2 .g{display:block}

/* corpo dos limites no piso de 16px (o kit usa .95rem) */
#nao-e .lp-ck li{font-size:1rem}

@media (hover:hover) and (pointer:fine){
  .p-conta-d summary:hover i{background:rgba(255,255,255,.16)}
  .p-conta-d[open] summary:hover i{background:var(--red-d)}
  .p-conta-e-btn--g:hover{background:rgba(255,255,255,.14)}
}

/* ---------- computador (a referência: cartões de raio 40, respiro de 40–64px) ---------- */
@media (min-width:1024px){
  .p-conta-alto,.p-conta-d,.p-conta-big,.p-conta-c,.p-conta-sf-big,.p-conta-sf-c,.p-conta-e{border-radius:40px}
  .p-conta-dois{gap:20px}
  .p-conta-alto{padding:48px 48px 0;min-height:640px}
  .p-conta-alto h3{font-size:2rem}
  .p-conta-alto p{font-size:1.125rem;max-width:30ch}
  .p-conta-alto-cel{height:440px}
  .p-conta-mais{gap:20px}
  .p-conta-d{padding:40px}
  .p-conta-d h3{font-size:2rem}
  .p-conta-d summary i{width:56px;height:56px}
  .p-conta-d li{font-size:1.0625rem}

  .p-conta-big{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;min-height:480px;padding:56px 0 0 64px}
  .p-conta-big-x{padding-bottom:56px;gap:32px}
  .p-conta-big-t{font-size:2.25rem;line-height:1.1}
  .p-conta-big-m{align-self:stretch;align-items:center;padding-right:48px}
  .p-conta-big-med{width:min(100%,520px);justify-self:end;margin-top:-24px}
  .p-conta-vidro{justify-self:start;align-self:end;width:300px;margin:0 0 48px;padding:8px;border-radius:20px}
  .p-conta-vidro li{padding:9px 12px;border-radius:12px}
  .p-conta-big--inv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:56px 64px 0 0}
  .p-conta-big--inv .p-conta-big-x{padding-block:24px 56px}
  .p-conta-big-cel{width:300px;align-self:end;margin-bottom:-120px}

  .p-conta-tres{gap:20px;margin-top:20px}
  .p-conta-c{min-height:400px;padding:40px 40px 0;gap:12px}
  .p-conta-c h3{font-size:1.5rem}
  .p-conta-c-med{width:100%;margin:0 0 -8%}
  .p-conta-rel{width:170px}

  .p-conta-sf{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
  .p-conta-sf-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-conta-sf-x{align-self:start;gap:20px}
  .p-conta-sf-x .lp-h2{font-size:3rem}
  .p-conta-sf-x p{font-size:1.125rem}
  .p-conta-sf-m{width:118%;margin:0 0 0 -18%}
  .p-conta-sf-col{gap:20px}
  .p-conta-sf-c{padding:32px;align-content:center}
  .p-conta-sf-c h3{font-size:1.5rem}

  .p-conta-esc{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .p-conta-e{padding:28px 28px 32px;min-height:440px}
  .p-conta-e h3{font-size:1.75rem}

  .p-conta-fim{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .p-conta-fim-x{gap:20px}
}

/* ---------- celular: a mesma composição, com a copy resumida e as colunas apertadas ---------- */
@media (max-width:37.49rem){
  .p-conta-dois,.p-conta-tres,.p-conta-sf,.p-conta-sf-col,.p-conta-esc,.p-conta-mais{gap:8px}
  .p-conta-tres{margin-top:8px}
  .p-conta-alto{padding:18px 14px 0}
  .p-conta-d{padding:16px 14px}
  .p-conta-alto h3,.p-conta-d h3{font-size:1.0625rem}
  /* o cartão grande: o botão desce para a largura toda (a coluna de 150px não cabe "Criar conta" com a seta) */
  .p-conta-big{grid-template-areas:"x m" "b b";gap:14px;padding:18px 14px}
  .p-conta-big--inv{grid-template-areas:"m x" "b b"}
  .p-conta-big-x{display:contents}
  .p-conta-big-t{grid-area:x;align-self:center;font-size:1.1875rem}
  .p-conta-big-x>.btn,.p-conta-big-x>.p-conta-sf-cta{grid-area:b}
  .p-conta-big .btn,.p-conta-sf-big .btn,.p-conta-fim-x .btn{width:100%;padding:0 14px}
  .p-conta-big .btn .ic,.p-conta-sf-big .btn .ic,.p-conta-fim-x .btn .ic{display:none}
  .p-conta-big .p-conta-sf-cta{grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row}
  .p-conta-sf-big .p-conta-sf-cta,.p-conta-fim-x .p-conta-sf-cta{grid-auto-flow:row;gap:4px;justify-items:start}
  .p-conta-vidro li:nth-child(n+4) span{display:none}
  /* a fileira de três: fica o título e o objeto; a linha de apoio está na tabela e no FAQ */
  .p-conta-c{padding:14px 10px 0;min-height:200px}
  .p-conta-c h3{font-size:1rem}
  .p-conta-c>p:not(.p-conta-c-v):not(.p-conta-pill){display:none}
  .p-conta-pills li{display:grid;padding:7px 9px}
  .p-conta-pill{padding:6px 10px;margin-bottom:14px}
  .p-conta-sf-big{padding:18px 14px 0}
  /* o medalhão da selfie cresce e sobe para o meio do espaço que sobra; a coluna da direita não estica os dois primeiros */
  .p-conta-sf-m{align-self:center;width:150%;margin:8px -25% 0}
  .p-conta-sf-col{grid-template-rows:auto auto 1fr}
  /* "Aguardando" não cabe numa pílula de 94px a 16px: no celular a pílula vira só o ponto e o texto */
  .p-conta-pill{flex-direction:column;gap:4px;max-width:100%;padding:0;background:none;box-shadow:none;letter-spacing:-.02em}
  .p-conta-sf-x .p-conta-so-pc{display:none}
  .p-conta-sf-c{padding:14px 12px}
  .p-conta-sf-c h3,.p-conta-e h3{font-size:1.0625rem}
  .p-conta-e{padding:14px 10px 16px}
  .p-conta-fim{gap:16px}
  #nao-e .lp-ck li{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:14px}
}

@media (prefers-reduced-motion:reduce){
  .p-conta-d summary i,.p-conta-sw i,.p-conta-ap-b,.p-conta-e-btn--g{transition:opacity .2s linear}
}