/* /regras-da-plataforma — o que o kit não cobre na página "regulation" da a referência: a fileira de emblemas redondos no topo do hero
   (aqui é o índice da página, com rótulo, e não selo de órgão nenhum), o título com a 2ª linha em cinza, o elo da marca em 3D
   deitado no veludo embaixo do texto, o bento de dois cartões grandes com emblema + três menores, e a versão das regras com o
   celular ao lado.
   Celular copia a composição do computador: os cinco emblemas numa fileira, os três cartões menores lado a lado (copy curta só no
   celular), e o celular da versão ao lado dos passos. Só transform/opacity na animação; menos movimento no fim. */

.p-rg-sm{display:none}
@media (max-width:47.99rem){.p-rg-lg{display:none}.p-rg-sm{display:inline}}
.rd-h3 span.p-rg-lg,.rd-h3 span.p-rg-sm{color:rgba(255,255,255,.56);animation:none!important}

/* ---------- hero: índice no alto, texto no centro, o elo embaixo ---------- */
.lp-hero--img{--hw:min(118vw,600px);--hh:calc(var(--hw)*2/3);justify-content:flex-start;padding-top:92px;padding-bottom:calc(var(--hh)*.84)}
.lp-hero--img::before{display:none}
.lp-hero--img .lp-hero-bg{inset:auto;left:50%;bottom:0;width:var(--hw);height:var(--hh);transform:translateX(-50%);object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 52% 56% at 50% 56%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 52% 56% at 50% 56%,#000 52%,transparent 100%)}
/* a fileira de emblemas sobe para cima da trilha, onde a a referência põe os selos */
.lp-hero--img .lp-hero-c>*{order:2}
.lp-hero--img .lp-hero-c>.lp-sub{order:0;margin:0 0 4px}
.lp-hero--img .lp-hero-c>nav,.lp-hero--img .lp-hero-c>.lp-bc{order:1}
/* título: a 1ª linha branca, a 2ª cinza, como o parágrafo-título da a referência */
#topo .lp-h1 .line.acc{color:rgba(255,255,255,.56)}

.p-rg-ind{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:min(100%,520px)}
.lp-hero .lp-sub a.p-rg-ind-a{display:grid;justify-items:center;align-content:start;gap:6px;min-height:44px;padding:4px 0;text-decoration:none;color:var(--lp-mut2);transition:color .2s}
.p-rg-ind-m{display:block;width:clamp(48px,13vw,64px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 24px -12px rgba(0,0,0,.9)}
.p-rg-ind-m img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.p-rg-ind-t{font-size:.875rem;line-height:1.2;white-space:nowrap}
.p-rg-ind-a:focus-visible{outline:2px solid var(--red-hi);outline-offset:4px;border-radius:12px}
.p-rg-ind-a:active .p-rg-ind-m{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .lp-hero .lp-sub a.p-rg-ind-a:hover{color:#fff}
  .p-rg-ind-a:hover .p-rg-ind-m img{transform:scale(1.1)}
  .p-rg-ind-m img{transition:transform .4s var(--ease,ease)}
}
@media (min-width:48rem){
  .lp-hero--img{--hw:min(64vw,760px);padding-top:92px;padding-bottom:calc(var(--hh)*.84)}
  .lp-hero--img .lp-hero-c>.lp-sub{margin:0 0 -8px}
  .lp-hero--img .lp-lede{max-width:46em}
  .p-rg-ind{gap:12px;width:min(100%,600px)}
  .p-rg-ind-t{font-size:.9375rem}
}

/* ---------- 1. bento: 2 grandes + 3 menores ---------- */
.p-rg-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:20px}
.p-rg-g{grid-column:span 6}
.p-rg-m{grid-column:span 2}
.p-rg-bento .rd-card{display:grid;align-content:start;gap:10px;padding:20px 18px}
.p-rg-bento .rd-h3{margin:0}
.p-rg-bento .lp-p{margin:0;font-size:1rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
/* cartão grande no celular: emblema ao lado do título */
.p-rg-g .rd-card{grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-items:center}
.p-rg-g .lp-p{grid-column:1/-1}
.p-rg-emb{display:block;width:64px;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.p-rg-emb img{display:block;width:100%;height:100%;object-fit:cover}
/* cartão menor no celular: ícone, título e a frase curta */
.p-rg-m .rd-card{padding:16px 12px;gap:8px}
.p-rg-m .rd-h3{font-size:1.0625rem;line-height:1.15}
.p-rg-m .lp-p{font-size:.9375rem;line-height:1.35}
.p-rg-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(217,45,32,.16);color:var(--red-hi)}
.p-rg-ic .ic{width:18px;height:18px}
@media (min-width:48rem){
  .p-rg-bento{gap:16px;width:min(100%,944px);margin:28px auto 0}
  .p-rg-g{grid-column:span 3}
  .p-rg-g .rd-card{grid-template-columns:minmax(0,1fr);gap:16px;padding:36px 32px 40px}
  .p-rg-emb{width:120px}
  .p-rg-g .rd-h3{margin-top:8px;font-size:28px}
  .p-rg-m .rd-card{padding:28px 24px 32px;gap:12px}
  .p-rg-m .rd-h3{font-size:24px}
  .p-rg-m .lp-p{font-size:1rem;line-height:1.45}
}

/* ---------- 2. pode × não pode ---------- */
.p-rg-sub{display:flex;align-items:center;gap:10px;margin:8px 0 14px;font-size:1.25rem;font-weight:600;color:#fff}
.p-rg-sub .ic{width:22px;height:22px;color:var(--red-hi)}
.p-rg-sub--no{margin-top:36px}
.p-rg-sub--no .ic{color:var(--lp-mut)}
#nao-pode{scroll-margin-top:96px}
@media (min-width:48rem){.p-rg-sub{font-size:1.5rem}}

/* ---------- 3. a versão: passos ao lado do celular, no celular também ---------- */
.p-rg-v{display:grid;grid-template-columns:minmax(0,1fr) 36%;grid-template-areas:"h h" "p p" "l m";gap:14px 12px;align-items:start}
.p-rg-v .lp-h2{grid-area:h;margin:0}
.p-rg-v>.lp-p{grid-area:p;margin:0}
.p-rg-v-l{grid-area:l;list-style:none;margin:0;padding:0;display:grid;align-self:center}
.p-rg-v-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.4;color:var(--lp-mut2)}
.p-rg-v-l li b{color:#fff;font-weight:600}
.p-rg-v-n{font-size:.875rem;font-weight:600;line-height:1.6;color:var(--red-hi);font-variant-numeric:tabular-nums}
.p-rg-v-m{grid-area:m;position:relative;display:grid;justify-items:center;padding:8% 0 0;isolation:isolate}
.p-rg-v-m::before{content:"";position:absolute;left:-12%;right:0;bottom:4%;z-index:-1;height:70%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,45,32,.32),transparent)}
.p-rg-v-m .lp-cel{width:100%;max-width:320px}
@media (min-width:48rem){
  .p-rg-v{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"h m" "p m" "l m";grid-template-rows:auto auto minmax(0,1fr);column-gap:clamp(32px,6vw,96px);row-gap:20px}
  .p-rg-v-l{align-self:start;margin-top:8px}
  .p-rg-v-l li{padding:20px 0;font-size:1.125rem}
  .p-rg-v-m{padding:0;align-self:center}
}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-ok .p-rg-ind-a{opacity:0;transform:translateY(12px);animation:p-rg-sobe .6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.15s + var(--i)*.07s)}
  .lp-hero--img .lp-hero-bg{animation:p-rg-elo 1.4s cubic-bezier(.22,1,.36,1) both}
  .js-ok .rd-c.on .p-rg-emb img{animation:p-rg-gira 1.2s cubic-bezier(.22,1,.36,1) .25s both}
  .js-ok .rd-c.on .p-rg-ic{animation:p-rg-pulsa 1s ease-out .35s both}
  .p-rg-ind-m{transition:transform .15s}
}
@media (prefers-reduced-motion:reduce){.p-rg-ind-m img{transition:none}}
@keyframes p-rg-sobe{to{opacity:1;transform:none}}
@keyframes p-rg-elo{from{opacity:0;transform:translateX(-50%) translateY(6%) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes p-rg-gira{from{transform:rotate(-24deg) scale(.86);opacity:.4}to{transform:none;opacity:1}}
@keyframes p-rg-pulsa{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none}}