/* /privacidade-e-dados — CSS só desta página (prefixo p-pd-). Clone da fixed-time-trades da a referência:
   hero com a tela real reta que some no preto e o h3 cinza por cima · abas + carrossel de cartões com setas · 2×2 do "por que" ·
   anel de medalhões com o texto no meio · faixa com a tela. Celular primeiro e com a mesma composição do computador
   (cartões 2×2, bento 2×2, faixa lado a lado); só transform e opacity animam; "menos movimento" desliga o que repete. */

/* ---------- hero: texto em cima, a tela do Perfil reta saindo por baixo, com os campos guardados acesos ---------- */
#topo{justify-content:flex-start;padding-bottom:0}
#topo .lp-hero-c{width:min(100%,1080px)}
#topo .lp-h1,#topo .lp-lede{max-width:860px}
#topo .lp-h1 .line.acc{color:var(--red-hi)}
#topo .lp-sub{justify-self:stretch;margin-top:clamp(4px,1.4vw,16px);font-size:inherit;color:inherit}
.p-pd-hm{position:relative;display:block;width:min(100%,1000px);margin-inline:auto}
/* a janela mostra só um recorte do print: no celular, o cartão Identidade e contato; no computador, a metade de baixo da tela */
.p-pd-vp{position:relative;display:block;aspect-ratio:1066/972;border-radius:18px;overflow:clip;background:#0b0c0e;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 40px 120px -30px rgba(217,45,32,.4);
  -webkit-mask:linear-gradient(#000 70%,#0000 100%);mask:linear-gradient(#000 70%,#0000 100%)}
/* o print anda por translate (porcentagem do próprio print): margem negativa vazaria pela caixa da janela */
.p-pd-im{position:absolute;left:0;top:0;display:block;width:270.3%;transform:translate(-19%,-46%);pointer-events:none}
.p-pd-im img{display:block;width:100%;height:auto}
.p-pd-mk{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:10px;
  box-shadow:0 0 0 2px var(--red-hi),0 0 24px 2px rgba(255,84,72,.45);background:rgba(255,84,72,.08)}
.p-pd-mk--r{border-radius:50%}
.p-pd-leg{display:block;max-width:30ch;margin:14px auto 0;font-size:clamp(1rem,.9rem + .5vw,1.5rem);line-height:1.2;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.56);text-wrap:balance}
.p-pd-leg b{font-weight:inherit;color:#fff}

@media (min-width:768px){
  .p-pd-vp{aspect-ratio:2880/1008;-webkit-mask:linear-gradient(#000 62%,#0000 100%);mask:linear-gradient(#000 62%,#0000 100%)}
  .p-pd-im{width:100%;transform:translateY(-44%)}
  .p-pd-mk{border-radius:8px}
  .p-pd-mk--r{border-radius:50%}
  /* o h3 cinza da a referência, por cima da parte que some no preto, à direita */
  /* uma sombra larga por trás tira as linhas do print de baixo da frase (texto sobre texto não se lê) */
  .p-pd-leg{position:absolute;right:1%;bottom:2%;z-index:2;max-width:390px;margin:0;padding:14px 18px;text-align:left;
    border-radius:24px;background:rgba(6,6,8,.9);box-shadow:0 0 36px 26px rgba(6,6,8,.9)}
}
@media (prefers-reduced-motion:no-preference){
  .p-pd-hm{animation:p-pd-sobe 1s var(--ease) .15s both}
  .p-pd-mk{animation:p-pd-entra .5s var(--ease) both,p-pd-pulsa 2.8s ease-in-out infinite;animation-delay:calc(.8s + var(--k) * 120ms),calc(1.6s + var(--k) * 260ms)}
}
@keyframes p-pd-sobe{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes p-pd-entra{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
@keyframes p-pd-pulsa{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- 1. o que guardamos: abas + cartões (2×2 no celular, 4 no tablet, carrossel com setas no computador) ---------- */
.p-pd-car{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px;width:100%;margin-top:clamp(24px,4vw,40px)}
.p-pd-abas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.p-pd-abas button{min-height:44px;min-width:44px;padding:0 18px;border:0;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:600;line-height:1;color:var(--tx);cursor:pointer;
  background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .25s,color .25s,transform .18s var(--ease)}
.p-pd-abas button:active{transform:scale(.97)}
.p-pd-abas button[aria-selected="true"]{background:#fff;color:#0a0a0a;box-shadow:none}
.p-pd-abas button:focus-visible,.p-pd-seta:focus-visible,.p-pd-btn:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}
.p-pd-vp2{display:block;width:100%}
.p-pd-trk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

/* o cartão (o "ativo" da a referência): ícone, onde fica, o dado, a etiqueta colorida e para quê */
.p-pd-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;padding:14px 10px 16px;border-radius:20px;
  background:linear-gradient(170deg,#161616,#0c0c0c 70%);box-shadow:0 0 0 1px var(--line) inset}
.p-pd-ic{display:grid;place-items:center;width:36px;height:36px;margin-bottom:2px;border-radius:12px;background:rgba(255,84,72,.14);color:var(--red-hi);box-shadow:0 0 0 1px rgba(255,84,72,.3) inset}
.p-pd-ic svg{width:18px;height:18px}
.p-pd-onde{display:block;font-size:.8125rem;line-height:1.25;color:var(--lp-mut2)}
.p-pd-n{margin:0;font-size:clamp(1.0625rem,1rem + .4vw,1.375rem);line-height:1.15;font-weight:600;letter-spacing:-.015em;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.p-pd-tag{display:block;font-size:.8125rem;line-height:1.3;font-weight:600;text-wrap:balance}
.p-pd-tag::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 0 0;border-radius:50%;background:currentColor;vertical-align:.12em}
.p-pd-tag--ok{color:#4fdc93}
.p-pd-tag--w{color:#f7b955}
.p-pd-tag--r{color:#ff8a80}
.p-pd-tag--n{color:rgba(255,255,255,.78)}
.p-pd-d{margin:2px 0 0;font-size:.875rem;line-height:1.4;color:var(--lp-mut2);text-wrap:pretty}
.p-pd-btn,.p-pd-eco,.p-pd-setas{display:none}

/* com o script: abaixo de 1024 px aparece só o grupo da aba tocada (sem script, os dezesseis ficam à vista) */
@media (max-width:1023.98px){
  .p-pd-car.on[data-g="0"] .p-pd-card:not([data-g="0"]),
  .p-pd-car.on[data-g="1"] .p-pd-card:not([data-g="1"]),
  .p-pd-car.on[data-g="2"] .p-pd-card:not([data-g="2"]),
  .p-pd-car.on[data-g="3"] .p-pd-card:not([data-g="3"]){display:none}
  .p-pd-car.on .p-pd-card{animation:p-pd-sobe2 .4s var(--ease) both}
}
@keyframes p-pd-sobe2{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:389.98px){.p-pd-abas button{padding:0 14px;font-size:.9375rem}}
@media (min-width:600px){
  .p-pd-trk{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .p-pd-card{padding:18px 14px}
}

/* computador: o carrossel da a referência (cartões de 232 px, os vizinhos esmaecendo pela borda, as setas ‹ › embaixo) */
@media (min-width:1024px){
  /* o corte das pontas é contenção de pintura, não overflow escondido: o trilho anda por transform e não alarga a página */
  .p-pd-vp2{contain:paint;padding-block:6px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .p-pd-car:not(.on) .p-pd-vp2{-webkit-mask-image:none;mask-image:none}
  .p-pd-car:not(.on) .p-pd-trk{grid-template-columns:repeat(4,232px);justify-content:center;gap:16px}
  .p-pd-car.on .p-pd-trk{display:flex;gap:16px;width:max-content;transition:transform .55s var(--ease)}
  .p-pd-card{flex:none;width:232px;padding:20px 18px 18px;gap:8px;transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .p-pd-car.on .p-pd-card:not(.ve){opacity:.35;transform:scale(.96)}
  .p-pd-ic{width:44px;height:44px}
  .p-pd-ic svg{width:22px;height:22px}
  .p-pd-d{min-height:2.8em;font-size:.9375rem}
  .p-pd-btn{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;min-height:44px;margin-top:auto;border-radius:999px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;
    background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--line2) inset;transition:background-color .25s,transform .18s var(--ease)}
  .p-pd-btn:active{transform:scale(.98)}
  .p-pd-car.on .p-pd-eco{display:flex}
  .p-pd-car.on .p-pd-setas{display:flex;justify-content:center;gap:24px}
  .p-pd-seta{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;background:transparent;transition:background-color .25s,opacity .25s,transform .18s var(--ease)}
  .p-pd-seta:disabled{opacity:.3;cursor:default}
  .p-pd-seta svg{width:20px;height:20px}
  .p-pd-seta[data-dir="-1"] svg{transform:rotate(180deg)}
  .p-pd-seta:active{transform:scale(.95)}
}
@media (hover:hover) and (pointer:fine){
  .p-pd-abas button:not([aria-selected="true"]):hover{background-color:rgba(255,255,255,.12)}
  .p-pd-btn:hover,.p-pd-seta:not(:disabled):hover{background-color:rgba(255,255,255,.14)}
}

/* ---------- 2. como cuidamos: 2×2 em toda largura (o celular copia a grade do computador) ---------- */
.p-pd-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:940px;margin-inline:auto}
@media (min-width:768px){.p-pd-bento{gap:16px}}
.p-pd-b .rd-card{display:flex;flex-direction:column;overflow:hidden;min-height:clamp(250px,36vw,436px);padding:20px 12px 0;text-align:center}
@media (min-width:768px){.p-pd-b .rd-card{padding:40px 32px 0}}
.p-pd-b .rd-h3{margin:0;font-size:clamp(1.0625rem,.85rem + .9vw,1.5rem);line-height:1.1}
/* como na a referência: o trecho branco numa linha, o cinza na seguinte */
.p-pd-bt>span{display:block}
.p-pd-bm{position:relative;flex:1;display:grid;place-items:center;margin-top:12px;min-height:0}
.p-pd-bm--med img{display:block;width:calc(100% + 24px);max-width:440px;height:auto;margin-inline:-12px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.p-pd-bm--rel{padding-bottom:16px}
.p-pd-rel{display:block;width:min(100%,250px);height:auto;overflow:visible}
.p-pd-rel-o{fill:none;stroke:rgba(255,84,72,.22);stroke-width:2}
.p-pd-rel-m rect{fill:rgba(255,255,255,.22)}
.p-pd-rel-p{fill:var(--red-hi);transform-box:view-box;transform-origin:120px 120px}
.p-pd-rel-n{fill:#fff;font-size:50px;font-weight:600;letter-spacing:-.03em;text-anchor:middle}
.p-pd-rel-u{fill:rgba(255,255,255,.66);font-size:15px;font-weight:500;text-anchor:middle}
.p-pd-bm--cel{place-items:start center;padding-top:6px}
/* o celular sai pela borda de baixo; a tela começa no placar (sem o cabeçalho do painel) */
.p-pd-celw2{position:relative;width:min(74%,250px);margin-bottom:-62%}
.p-pd-celw2 .lp-cel-tela img{margin-top:-24%}
.p-pd-bolha{position:absolute;left:56%;top:42%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--red-d);color:#fff;font-size:.875rem;line-height:1.2;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap}
@media (max-width:47.99rem){.p-pd-bolha{left:50%;translate:-50% 0;top:44%;padding:5px 8px;border-radius:10px;font-size:.75rem}}
@media (prefers-reduced-motion:no-preference){
  .p-pd-rel-p{animation:p-pd-volta 9s linear infinite}
  .p-pd-bolha{animation:p-pd-boia 4s ease-in-out infinite}
}
@keyframes p-pd-volta{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes p-pd-boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- 3. anel de medalhões com os direitos no meio (a roda gira devagar; o contêiner corta a pintura) ---------- */
.p-pd-anel-s{--D:clamp(560px,86vw,1120px);--T:clamp(80px,10.5vw,150px);display:grid;place-items:center;min-height:calc(var(--D) + var(--T) * .4);padding-block:0}
.p-pd-anel{position:absolute;inset:0;contain:paint;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.p-pd-roda{position:absolute;left:50%;top:50%;width:var(--D);height:var(--D);margin:calc(var(--D) / -2) 0 0 calc(var(--D) / -2)}
.p-pd-roda span{position:absolute;left:50%;top:50%;width:var(--T);height:var(--T);margin:calc(var(--T) / -2) 0 0 calc(var(--T) / -2);
  transform:rotate(var(--a)) translateY(calc((var(--D) - var(--T)) / -2)) rotate(calc(var(--a) * -1))}
.p-pd-roda img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:26%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.6);
  transform:perspective(500px) rotateX(14deg) rotateY(-12deg)}
.p-pd-roda span:nth-child(even) img{transform:perspective(500px) rotateX(-10deg) rotateY(14deg)}
@media (prefers-reduced-motion:no-preference){
  .p-pd-roda{animation:p-pd-gira 140s linear infinite}
  .p-pd-roda img{animation:p-pd-gira 140s linear infinite reverse}
}
@keyframes p-pd-gira{from{rotate:0deg}to{rotate:360deg}}
.p-pd-anel-tx{position:relative;z-index:1;display:grid;justify-items:center;gap:16px;width:min(100% - var(--pad) * 2,calc(var(--D) - var(--T) * 2 - 48px),460px);text-align:center}
.p-pd-anel-tx .lp-h2{margin:0}
.p-pd-anel-tx .lp-p{margin:0;max-width:40ch}
.p-pd-anel-tx .rd-link{transform:none}

/* ---------- 4. faixa: o celular com Regras e privacidade + texto, lado a lado também no celular ---------- */
.p-pd-ban{display:grid;grid-template-columns:40% minmax(0,1fr);align-items:stretch;overflow:hidden;border-radius:28px;
  background:radial-gradient(100% 160% at 15% 0%,#171717 0%,#0e0e0e 66%);box-shadow:0 0 0 1px var(--line) inset}
@media (min-width:768px){.p-pd-ban{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:440px;border-radius:40px}}
.p-pd-ban-m{position:relative;display:grid;align-items:end;justify-items:center;padding:24px 0 0 14px}
@media (min-width:768px){.p-pd-ban-m{padding:48px 0 0}}
.p-pd-celw{width:min(100%,260px);margin-bottom:-58%}
.p-pd-ban-tx{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:24px 14px 24px 12px}
@media (min-width:768px){.p-pd-ban-tx{gap:20px;padding:48px 48px 48px 8px}}
.p-pd-ban-t{margin:0;font-size:clamp(1.25rem,.95rem + 1.2vw,2rem);line-height:1.08;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-pd-ban-t span{display:block;color:var(--lp-mut)}
.p-pd-ban-p{margin:0;font-size:.9375rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
@media (min-width:768px){.p-pd-ban-p{font-size:1rem;max-width:36ch}}
.p-pd-ban-tx .btn{max-width:100%}
.p-pd-ban-tx .rd-link{transform:none;margin-block:-8px}
@media (max-width:47.99rem){
  .p-pd-lg{display:none}
  .p-pd-ban-p{display:none}
  .p-pd-ban-tx .btn-lg{min-height:48px;padding-inline:16px}
}

@media (prefers-reduced-motion:reduce){
  .p-pd-hm,.p-pd-mk{animation:p-pd-fade .2s linear both}
  .p-pd-car.on .p-pd-trk{transition:none}
  .p-pd-car.on .p-pd-card{animation:p-pd-fade .15s linear both}
  .p-pd-car.on .p-pd-card:not(.ve){transform:none}
}
@keyframes p-pd-fade{from{opacity:0}to{opacity:1}}