/* /campanhas-e-desafios — clone de a referência Só classes p-cmp-* e o hero desta página.
   Cartão da casa: borda de luz em degradê (padding-box + border-box), raio 24 no celular e 40 a partir de 768.
   Movimento só com transform e opacity; "menos movimento" desliga a flutuação. */

.p-cmp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.p-cmp-trofeu{width:100%;height:100%}

/* ---------- hero centrado (a a referência: título, mão com o aparelho, três mini-cartões, um botão) ----------
   o kit monta trilha, h1, lede, botão e sub dentro de .lp-hero-c e a mídia depois; aqui o bloco some (contents)
   e a ordem passa a ser a da referência: trilha, título, apoio, mídia, mini-cartões, botão */
.lp-hero--janela{gap:clamp(10px,1.6vw,18px);padding-bottom:64px}
.lp-hero--janela .lp-hero-c{display:contents}
.lp-hero--janela .lp-hero-c>nav{order:1}
.lp-hero--janela .lp-h1{order:2}
.lp-hero--janela .lp-lede{order:3;max-width:34em}
.lp-hero--janela .lp-persp{order:4}
.lp-hero--janela .lp-sub{order:5}
.lp-hero--janela .hero-cta{order:6}
@media (min-width:768px){.lp-hero--janela .lp-persp::before{inset:6% -30% 0}.lp-hero--janela .lp-h1 .line{display:inline}.lp-hero--janela .lp-lede{max-width:46em}}

.lp-hero--janela .lp-persp{width:auto;margin:0;perspective:none;-webkit-mask:none;mask:none;isolation:isolate}
.lp-hero--janela .lp-persp::before{content:"";position:absolute;inset:6% -8% 0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(217,45,32,.45),rgba(217,45,32,.12) 55%,transparent);pointer-events:none}
.lp-hero--janela .lp-persp-in{transform:none;border-radius:0;overflow:visible;box-shadow:none}
/* a mídia encolhe pela ALTURA da tela, para o botão caber na primeira tela; em tela muito baixa (celular deitado) ela sai e ficam o título, os três cartões e o botão */
.lp-hero--janela .lp-persp-in img{display:block;width:auto;height:clamp(150px,calc(100svh - 560px),560px);margin-inline:auto;
  -webkit-mask:linear-gradient(180deg,#000 80%,transparent);mask:linear-gradient(180deg,#000 80%,transparent)}

@media (max-height:600px){.lp-hero--janela .lp-persp{display:none}}
/* os três mini-cartões, lado a lado também no celular */
.lp-hero--janela .lp-sub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,600px);margin:0;color:#fff}
.p-cmp-mini{position:relative;display:flex;align-items:flex-end;min-height:84px;padding:12px;border-radius:16px;overflow:clip;text-align:left;
  border:1px solid transparent;background:linear-gradient(160deg,#151515,#0b0b0b) padding-box,linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05)) border-box}
.p-cmp-mini-t{position:relative;z-index:1;font-size:.9375rem;line-height:1.2;color:#fff;text-shadow:0 1px 8px #000}
.p-cmp-mini img{position:absolute;right:-14px;top:-12px;width:64px;height:64px;opacity:.95;pointer-events:none}
@media (min-width:768px){
  .lp-hero--janela .lp-sub{gap:20px}
  .p-cmp-mini{min-height:96px;padding:14px 16px;border-radius:20px}
  .p-cmp-mini-t{font-size:1rem}
  .p-cmp-mini img{right:-6px;top:-6px;width:96px;height:96px}
}

/* ---------- cartões com a borda de luz da casa ---------- */
.p-cmp-palco,.p-cmp-n,.p-cmp-b,.p-cmp-ev-ic{border:1px solid transparent;
  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 cartão-palco ---------- */
.p-cmp-s1 .lp-cite{margin-bottom:clamp(24px,4vw,48px)}
.p-cmp-palco{position:relative;isolation:isolate;overflow:clip;height:clamp(340px,30vw + 230px,500px);border-radius:24px;
  background:radial-gradient(70% 80% at 50% 105%,rgba(217,45,32,.5),rgba(217,45,32,.12) 55%,transparent 75%) padding-box,
             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-cmp-ped{position:absolute;left:50%;bottom:-1px;width:min(64%,640px);height:34%;translate:-50% 0;z-index:-1;border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,#1c1c1c,#060606 60%);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -30px 60px -20px rgba(0,0,0,.8)}
.p-cmp-ped::before{content:"";position:absolute;inset:-14% 0 auto;height:28%;border-radius:50%;background:radial-gradient(closest-side,#262626,#111 80%);box-shadow:0 1px 0 rgba(255,255,255,.1) inset}
.p-cmp-palco-med{position:absolute;left:50%;bottom:24%;width:min(78%,560px);translate:-50% 0;pointer-events:none}
.p-cmp-palco-med img{display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%)}
.p-cmp-tile{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:var(--red-hi);
  background:linear-gradient(160deg,#1d1d1d,#0b0b0b);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 18px 30px -12px #000}
.p-cmp-tile svg{width:22px;height:22px}
.p-cmp-tile--1{left:7%;top:16%;rotate:-8deg}
.p-cmp-tile--2{right:6%;top:6%;rotate:9deg}
.p-cmp-tile--3{right:12%;top:46%;rotate:-6deg}
.p-cmp-palco-btn{position:absolute;left:50%;bottom:8%;translate:-50% 0}
@media (min-width:768px){
  .p-cmp-palco{border-radius:40px}
  .p-cmp-tile{width:84px;height:84px;border-radius:22px}
  .p-cmp-tile svg{width:38px;height:38px}
  .p-cmp-tile--1{left:5%;top:14%}
  .p-cmp-tile--2{right:8%;top:5%}
  .p-cmp-tile--3{right:18%;top:44%}
  .p-cmp-palco-med{width:min(52%,560px)}
}

/* ---------- 2. as três partes de um desafio sobre o placar ---------- */
.p-cmp-niv{position:relative}
.p-cmp-niv-m{display:block;border-radius:16px;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,#000 45%,transparent 92%);mask:linear-gradient(180deg,#000 45%,transparent 92%)}
.p-cmp-niv-m img{display:block;width:100%;height:auto}
.p-cmp-niv-g{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:-30%}
.p-cmp-r{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.p-cmp-n{position:relative;display:grid;align-content:start;justify-items:center;gap:12px;padding:28px 10px 16px;border-radius:20px;text-align:center}
.p-cmp-n--hl{background:radial-gradient(120% 90% at 50% 0,rgba(217,45,32,.22),#0d0d0d 60%) padding-box,linear-gradient(180deg,var(--red-hi),rgba(217,45,32,.25) 60%,rgba(217,45,32,.5)) border-box}
.p-cmp-n-top{display:grid;justify-items:center;gap:4px;width:100%}
.p-cmp-pill{position:absolute;left:50%;top:0;translate:-50% -50%;padding:6px 14px;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:.9375rem;line-height:1.1;white-space:nowrap}
.p-cmp-n--hl .p-cmp-pill{background:var(--red);color:#fff}
.p-cmp-n-ic{width:56px;height:56px;margin-bottom:6px}
.p-cmp-n-top small{font-size:.875rem;line-height:1.25;color:var(--lp-mut2)}
.p-cmp-n-top b{font-size:clamp(1.125rem,.7rem + 2vw,2.75rem);line-height:1.05;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
/* o número do cartão em destaque: o --red-hi (#ff5448) dava 4,07–4,37:1 sobre o brilho vermelho do topo do cartão
   (medição de 19/10/2026); o mesmo vermelho um tom mais claro passa de 4,5:1 sem trocar a cor da marca */
.p-cmp-n--hl .p-cmp-n-top b{color:#ff7268}
.p-cmp-n-dl{display:grid;gap:12px;margin:0;width:100%}
.p-cmp-n-dl div{display:grid;gap:2px}
.p-cmp-n-dl dt{font-size:.9375rem;color:var(--lp-mut2)}
.p-cmp-n-dl dd{margin:0;font-size:1rem;line-height:1.3;color:#fff}
.p-cmp-n-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;font-weight:600;font-size:.9375rem;color:#fff;
  background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;transition:transform .18s var(--ease),background-color .2s}
.p-cmp-n--hl .p-cmp-n-btn{background:var(--red)}
.p-cmp-n-btn:active{transform:scale(.97)}

/* no celular: os três cartões lado a lado (pílula, ícone, valor) e as linhas do cartão tocado numa faixa larga */
@media (max-width:767.98px){
  @supports selector(:has(*)){
    .p-cmp-n{display:contents}
    .p-cmp-n-top{grid-row:1;position:relative;align-content:start;min-height:100%;padding:24px 6px 14px;border-radius:18px;cursor:pointer;
      border:1px solid transparent;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;
      transition:transform .18s var(--ease)}
    .p-cmp-n-top:active{transform:scale(.98)}
    .p-cmp-n-ic{width:44px;height:44px;margin:0}
    .p-cmp-n-dl,.p-cmp-n-btn{display:none;grid-column:1/-1}
    .p-cmp-n-dl{grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px;padding:14px 12px;border-radius:18px;background:#0d0d0d;box-shadow:0 0 0 1px var(--line2) inset;text-align:center}
    .p-cmp-n-dl dd{font-size:.9375rem}
    .p-cmp-n-btn{grid-row:3;justify-self:center;margin-top:4px}
    .p-cmp-niv-g:has(#p-cmp-r1:checked) .p-cmp-n--meta :is(.p-cmp-n-dl),
    .p-cmp-niv-g:has(#p-cmp-r2:checked) .p-cmp-n--placar :is(.p-cmp-n-dl),
    .p-cmp-niv-g:has(#p-cmp-r3:checked) .p-cmp-n--premio :is(.p-cmp-n-dl){display:grid}
    .p-cmp-niv-g:has(#p-cmp-r1:checked) .p-cmp-n--meta .p-cmp-n-btn,
    .p-cmp-niv-g:has(#p-cmp-r2:checked) .p-cmp-n--placar .p-cmp-n-btn,
    .p-cmp-niv-g:has(#p-cmp-r3:checked) .p-cmp-n--premio .p-cmp-n-btn{display:inline-flex}
    .p-cmp-niv-g:has(#p-cmp-r1:checked) .p-cmp-n--meta .p-cmp-n-top,
    .p-cmp-niv-g:has(#p-cmp-r2:checked) .p-cmp-n--placar .p-cmp-n-top,
    .p-cmp-niv-g:has(#p-cmp-r3:checked) .p-cmp-n--premio .p-cmp-n-top{background:radial-gradient(120% 90% at 50% 0,rgba(217,45,32,.24),#0d0d0d 65%) padding-box,linear-gradient(180deg,var(--red-hi),rgba(217,45,32,.3) 60%,rgba(217,45,32,.55)) border-box}
    .p-cmp-niv-g:has(#p-cmp-r1:focus-visible) .p-cmp-n--meta .p-cmp-n-top,
    .p-cmp-niv-g:has(#p-cmp-r2:focus-visible) .p-cmp-n--placar .p-cmp-n-top,
    .p-cmp-niv-g:has(#p-cmp-r3:focus-visible) .p-cmp-n--premio .p-cmp-n-top{outline:2px solid var(--red-hi);outline-offset:3px}
  }
}
@media (min-width:768px){
  .p-cmp-r{display:none}
  .p-cmp-niv-m{border-radius:24px}
  .p-cmp-niv-g{gap:16px;margin-top:-16%}
  .p-cmp-n{gap:16px;padding:40px 20px 28px;border-radius:40px}
  .p-cmp-pill{padding:8px 20px;font-size:1.25rem}
  .p-cmp-n-ic{width:76px;height:76px}
  .p-cmp-n-top small{font-size:1rem}
  .p-cmp-n-dl dt{font-size:1rem}
  .p-cmp-n-dl dd{font-size:1.125rem}
}

/* ---------- 3. a aba Campanhas: dois aparelhos, o ladrilho do troféu, a frase e o link ---------- */
.p-cmp-ev{position:relative;isolation:isolate;display:grid;justify-items:center}
.p-cmp-ev::before{content:"";position:absolute;inset:-6% 0 30%;z-index:-1;background:radial-gradient(50% 50% at 62% 45%,rgba(217,45,32,.32),transparent 70%),radial-gradient(40% 40% at 30% 60%,rgba(217,45,32,.18),transparent 70%);pointer-events:none}
.p-cmp-ev-cels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(14px,3vw,36px);width:min(100%,560px);
  -webkit-mask:linear-gradient(180deg,#000 58%,transparent 92%);mask:linear-gradient(180deg,#000 58%,transparent 92%)}
.p-cmp-ev-c--a{margin-top:22%}
.p-cmp-ev-c .lp-cel{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.p-cmp-ev-x{position:relative;display:grid;justify-items:center;gap:12px;margin-top:-14%;max-width:30em;text-align:center}
.p-cmp-ev-ic{display:grid;place-items:center;width:56px;height:56px;padding:13px;border-radius:16px;color:var(--red-hi);box-shadow:0 0 30px -6px rgba(217,45,32,.6)}
.p-cmp-ev-t{font-size:clamp(1.25rem,1rem + 1vw,1.625rem);line-height:1.2;color:var(--lp-mut);text-wrap:balance}
.p-cmp-ev-t b{display:block;font-weight:600;color:#fff}
@media (min-width:768px){.p-cmp-ev-ic{width:72px;height:72px;padding:16px;border-radius:20px}.p-cmp-ev-x{margin-top:-9%}}

/* ---------- 4. bento: cartão largo + duas colunas desencontradas (a da esquerda alta em cima, a da direita alta embaixo) ---------- */
.p-cmp-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  grid-template-areas:"w w" "a c" "a d" "b d";grid-template-rows:auto minmax(190px,auto) minmax(40px,auto) minmax(190px,auto)}
.p-cmp-b{position:relative;isolation:isolate;overflow:clip;display:grid;align-content:start;justify-items:center;gap:10px;padding:18px 12px;border-radius:24px;text-align:center}
.p-cmp-b--w{grid-area:w;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;text-align:center}
.p-cmp-b--a{grid-area:a}.p-cmp-b--b{grid-area:b}.p-cmp-b--c{grid-area:c}.p-cmp-b--d{grid-area:d}
/* os quatro de baixo: texto em cima; o print desce ao pé e o medalhão ocupa só a sobra (não dita a altura do cartão) */
.p-cmp-b--a,.p-cmp-b--b,.p-cmp-b--c,.p-cmp-b--d{display:flex;flex-direction:column;align-items:center}
.p-cmp-b h3{font-size:1.0625rem;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--lp-mut2);text-wrap:balance}
.p-cmp-b h3 b{font-weight:600;color:#fff}
.p-cmp-b p{font-size:1rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
.p-cmp-lg{display:none}
.p-cmp-b-x{display:grid;justify-items:center;gap:10px}
.p-cmp-b-btn{min-height:44px;padding:0 1.1em;font-size:.9375rem}
.p-cmp-b-vid{position:relative;display:grid;align-items:center;min-height:180px}
.p-cmp-b-vid-med{position:absolute;inset:-20% 0 -20% -10%;z-index:-1;pointer-events:none}
.p-cmp-b-vid-med img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;opacity:.75;
  -webkit-mask:radial-gradient(farthest-side,#000 55%,#0000);mask:radial-gradient(farthest-side,#000 55%,#0000)}
.p-cmp-vidro{display:grid;gap:4px;margin:0;padding:6px;list-style:none;border-radius:16px;text-align:left;
  background:rgba(24,24,26,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 24px 50px -20px #000}
.p-cmp-vidro li{display:grid;grid-template-columns:16px 1fr;align-items:center;gap:8px;padding:8px;border-radius:10px;font-size:.875rem;line-height:1.2;color:var(--lp-mut2)}
.p-cmp-vidro li svg{width:16px;height:16px;color:var(--lp-mut)}
.p-cmp-vidro li.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:0 0 0 1px rgba(255,84,72,.45) inset}
.p-cmp-vidro li.on svg{color:var(--red-hi)}
.p-cmp-b-prints{display:grid;gap:6px;width:calc(100% + 24px);margin:auto -12px -18px 0;padding-top:6px;align-self:flex-start}
.p-cmp-b-prints img{display:block;width:100%;height:auto;border-radius:10px 0 0 10px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 40px -18px #000}
.p-cmp-b-prints--pilha{position:relative;margin-bottom:6px}
.p-cmp-b-prints--pilha::after{content:"";position:absolute;left:6%;right:0;bottom:-8px;height:24px;z-index:-1;border-radius:0 0 10px 10px;background:#15161a;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.p-cmp-b-med{position:relative;flex:1 1 0;min-height:110px;width:calc(100% + 24px);margin:0 -12px -18px;pointer-events:none}
/* a moeda enche a caixa (cover) e passa do pé: o corte é do próprio quadro, nada sai do cartão */
.p-cmp-b-med img{position:absolute;left:0;top:0;display:block;width:100%;height:170%;object-fit:cover;object-position:50% 0;mix-blend-mode:lighten;
  -webkit-mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%);mask:radial-gradient(farthest-side at 50% 52%,#000 60%,#0000 100%)}
.p-cmp-b-med--alto img{height:190%}
/* celular: o apoio curto aparece nos quatro de baixo e o print entra em escala de leitura, sangrando pela borda direita */
@media (max-width:767.98px){
  :is(.p-cmp-b--a,.p-cmp-b--b,.p-cmp-b--c,.p-cmp-b--d) .p-cmp-lg{display:block;font-size:.875rem;line-height:1.35}
  .p-cmp-b-prints{width:calc(100% + 12px);
    -webkit-mask:linear-gradient(90deg,#000 72%,transparent 100%);mask:linear-gradient(90deg,#000 72%,transparent 100%)}
  /* a caixa do print fica dentro do cartão; a imagem é que cresce 2,5x e mostra o começo da regra (object-fit) */
  .p-cmp-b-prints img{aspect-ratio:1076/495;object-fit:cover;object-position:left center;border-radius:10px 0 0 10px}
  .p-cmp-b-prints--pilha img{aspect-ratio:1076/400}
  .p-cmp-b-prints--pilha::after{display:none}
}
@media (min-width:768px){
  .p-cmp-bento{gap:16px;grid-template-rows:auto minmax(300px,auto) minmax(110px,auto) minmax(300px,auto)}
  .p-cmp-b{padding:36px 32px;gap:14px;border-radius:40px}
  .p-cmp-b--w{padding:40px;min-height:320px}
  .p-cmp-b h3{font-size:1.625rem;line-height:1.15}
  .p-cmp-lg{display:block}
  .p-cmp-b-x{gap:14px}
  .p-cmp-b-btn{min-height:52px;padding:0 1.6em;font-size:1.05rem}
  .p-cmp-vidro{padding:8px;gap:6px;max-width:300px;margin-left:auto}
  .p-cmp-vidro li{grid-template-columns:18px 1fr;padding:12px 14px;font-size:1rem}
  .p-cmp-b-prints{width:calc(100% + 32px);margin:auto -32px -36px 0;padding-top:10px;gap:10px}
  .p-cmp-b-prints--pilha{margin-bottom:10px}
  .p-cmp-b-med{width:calc(100% + 64px);margin:4px -32px -36px;min-height:150px}
  .p-cmp-b-med img{height:125%;object-position:50% 20%}
  .p-cmp-b-med--alto img{height:125%}
}

/* ---------- movimento: flutuação contínua (transform), hover só com mouse ---------- */
@media (prefers-reduced-motion:no-preference){
  .p-cmp-palco-med{animation:p-cmp-flutua 6s var(--ease) infinite alternate}
  .p-cmp-tile--1{animation:p-cmp-boia 5s ease-in-out infinite alternate}
  .p-cmp-tile--2{animation:p-cmp-boia 6s ease-in-out -2s infinite alternate}
  .p-cmp-tile--3{animation:p-cmp-boia 5.5s ease-in-out -4s infinite alternate}
  .p-cmp-ev-c--a{animation:p-cmp-boia 7s ease-in-out infinite alternate}
  .p-cmp-ev-c--b{animation:p-cmp-boia 7s ease-in-out -3.5s infinite alternate}
}
@keyframes p-cmp-flutua{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes p-cmp-boia{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (hover:hover) and (pointer:fine){
  .p-cmp-n,.p-cmp-b,.p-cmp-mini{transition:transform .3s var(--ease)}
  .p-cmp-n:hover,.p-cmp-b:hover{transform:translateY(-4px)}
  .p-cmp-n-btn:hover{background-color:rgba(255,255,255,.14)}
  .p-cmp-n--hl .p-cmp-n-btn:hover{background:var(--red-d,#b42318)}
}