/* /renda-extra-e-golpe — o que o kit não cobre na página de avaliações da a referência (/tmp/la-37/ref/a referência-reviews): a peça embaixo
   do título, a grade desencontrada de quatro colunas com os cartões (fonte, sinal, golpe, fato daqui, "Ver a fonte") cortada
   por um degradê e aberta por "Carregar mais" (details + :has, sem script), o título em duas linhas com a peça grande embaixo,
   o cartão largo com o celular que sai pela borda de cima, e a faixa final com as guias e o cartão pequeno do app.
   Celular copia a composição do computador: a grade fica em duas colunas desencontradas, o cartão largo segue celular ao lado
   do texto, a faixa final segue guias ao lado do app; a copy resume só no celular (.p-golpe-so-pc). Só transform/opacity na
   animação; menos movimento no fim. */

/* ---------- hero: a data e o medalhão com os três alertas de vidro ---------- */
#topo .lp-sub{display:grid;justify-items:center;gap:clamp(8px,1.5vw,16px);width:100%;margin-top:4px;font-size:1rem;color:var(--lp-mut2)}
.p-golpe-data{font-size:.875rem;line-height:1.3;color:var(--lp-mut)}
/* a foto (3:2) ocupa o quadro e some nas bordas em degradê reto. A pessoa fica à esquerda (x 12–60%, rosto em x 27–44% e
   y 18–50%, celular embaixo em x 13–30% e y 84–93%, por isso o pé some só nos últimos 10%); os três alertas ficam empilhados
   no lado escuro da direita */
.p-golpe-hm{position:relative;width:min(100%,640px)}
.p-golpe-hm-img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 84%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 84%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.p-golpe-hc{position:absolute;top:calc(8% + var(--n)*28%);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:16px;text-align:left;color:#fff;
  /* vidro de .88/.84: com .72/.6 a cena passava por trás do terceiro cartão e o "Alerta" caía para 2,9:1 (medido no pixel) */
  background:linear-gradient(160deg,rgba(30,30,30,.88),rgba(11,11,11,.84));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);animation:p-golpe-boia 6s ease-in-out calc(var(--n)*-2s) infinite}
.p-golpe-hc:nth-child(2){right:0}
.p-golpe-hc:nth-child(3){right:5%}
.p-golpe-hc:nth-child(4){right:0}
.p-golpe-hc-i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--red-hi)}
.p-golpe-hc-i .ic{width:15px;height:15px}
.p-golpe-hc-t{display:grid;gap:2px;min-width:0}
.p-golpe-hc-t small{font-size:.8125rem;line-height:1.2;color:#ff6a5e}
.p-golpe-hc-t b{font-size:.9375rem;line-height:1.2;font-weight:600;white-space:nowrap}
@keyframes p-golpe-boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- 1. a grade desencontrada (o lugar dos cartões da imprensa) ---------- */
.p-golpe-s-mz .lp-cite{margin-bottom:clamp(24px,4vw,40px)}
.p-golpe-mzbox{position:relative;display:grid;justify-items:center}
.p-golpe-mz{width:100%;columns:4;column-gap:16px;list-style:none;margin:0;padding:0}
.p-golpe-c{position:relative;display:grid;gap:12px;justify-items:start;break-inside:avoid;margin-bottom:16px;padding:22px 22px 14px;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,.18),rgba(255,255,255,.05) 45%,rgba(255,255,255,.1)) border-box;
  transition:transform .18s var(--ease)}
/* a fonte no lugar do logo do veículo: grande, em caixa de título */
.p-golpe-c-f{font-size:1.375rem;line-height:1.05;font-weight:700;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-golpe-c h3{font-size:1.0625rem;line-height:1.25;font-weight:600;color:var(--red-hi);text-wrap:balance}
.p-golpe-c-g{font-size:.9375rem;line-height:1.5;color:var(--lp-mut2);text-wrap:pretty}
.p-golpe-c-la{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;font-size:.9375rem;line-height:1.45;color:var(--lp-mut2);text-wrap:pretty}
.p-golpe-c-la b{color:#fff;font-weight:600}
.p-golpe-c .rd-link{margin:-6px 0 -8px}
.p-golpe-c:active{transform:scale(.99)}
/* o corte com degradê e o "Carregar mais" (fechado: a grade tem teto; aberto: o botão some e a grade inteira aparece) */
/* o teto fica no invólucro (.p-golpe-mzc), não na grade: grade de colunas com altura presa joga o resto em colunas extras à direita */
.p-golpe-mzc{width:100%}
.p-golpe-mzbox:not(:has(.p-golpe-dt[open])) .p-golpe-mzc{max-height:560px;overflow:clip;
  -webkit-mask-image:linear-gradient(#000 62%,transparent 98%);mask-image:linear-gradient(#000 62%,transparent 98%)}
.p-golpe-dt{position:relative;margin-top:-28px}
.p-golpe-dt[open]{display:none}
.p-golpe-dt summary{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:14px;list-style:none;cursor:pointer;font-size:1rem;font-weight:600;color:#fff;
  background:#1a1a1a;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;transition:transform .18s var(--ease),background-color .25s ease}
.p-golpe-dt summary::-webkit-details-marker{display:none}
.p-golpe-dt summary:active{transform:scale(.98)}
.p-golpe-dt summary:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .p-golpe-dt summary:hover{background-color:#242424;transform:translateY(-2px)}
  .p-golpe-c:hover{transform:translateY(-3px)}
}

/* ---------- 2. "Desconfie primeiro. / Confira depois." com a peça grande ---------- */
.p-golpe-cf{display:grid;justify-items:center;text-align:center}
.p-golpe-cf-h{display:grid;font-size:clamp(2rem,1.4rem + 2.6vw,3.5rem);line-height:1.05;font-weight:600;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.p-golpe-cf-h .g{color:var(--red-hi)}
.p-golpe-cf-m{width:min(100%,640px);margin-top:clamp(-8px,-1vw,0px)}
.p-golpe-cf-m img{display:block;width:100%;height:auto;mix-blend-mode:lighten;animation:p-golpe-boia 7s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.p-golpe-cf-p{max-width:34em;margin-top:clamp(-24px,-2vw,-8px);font-size:1.0625rem;line-height:1.55;color:var(--lp-mut2);text-wrap:pretty}

/* ---------- 3. o cartão largo: o celular sai pela borda de cima ---------- */
.p-golpe-s-rg{padding-top:clamp(64px,8vw,120px)}
.p-golpe-rg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(12px,3vw,40px);max-width:784px;margin-inline:auto;padding:0 clamp(16px,4vw,48px) 0 clamp(12px,3vw,40px);
  border:1px solid transparent;border-radius:clamp(22px,3vw,40px);
  background:radial-gradient(70% 90% at 25% 100%,rgba(217,45,32,.28),rgba(217,45,32,.06) 55%,transparent) 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-golpe-rg-cel{width:min(100%,220px);justify-self:center;margin-top:clamp(-56px,-5vw,-28px);aspect-ratio:878/1250;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.p-golpe-rg-cel .lp-cel{width:100%}
.p-golpe-rg-x{display:grid;gap:14px;justify-items:start;padding-block:24px;text-align:left}
.p-golpe-rg-x h3{display:grid;font-size:clamp(1.25rem,1rem + 1.2vw,1.75rem);line-height:1.12;font-weight:600;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p-golpe-rg-x h3 span{color:var(--lp-mut2)}
.p-golpe-rg-x p{font-size:1rem;line-height:1.5;color:var(--lp-mut2);text-wrap:pretty}
.p-golpe-rg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.p-golpe-rg-cta .rd-link{margin:0}

/* ---------- 4. as guias + o cartão pequeno do app ---------- */
.p-golpe-s-pe{padding-top:0}
.p-golpe-pe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(12px,3vw,40px)}
.p-golpe-pe-l{display:grid;gap:14px;justify-items:start}
.p-golpe-pe-l h3{display:grid;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);line-height:1.1;font-weight:600;letter-spacing:-.01em;color:#fff}
.p-golpe-pe-l h3 span{color:var(--lp-mut2)}
.p-golpe-pe-l ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;list-style:none;margin:0;padding:0}
.p-golpe-pe-l a{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:12px;font-size:.9375rem;line-height:1.2;font-weight:500;color:#fff;text-decoration:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.5) inset;transition:transform .18s var(--ease),box-shadow .25s ease}
.p-golpe-pe-l a:active{transform:scale(.98)}
.p-golpe-pe-l a:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}
.p-golpe-app{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:8px 20px 8px 8px;border-radius:20px;color:#fff;text-decoration:none;
  background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;transition:transform .18s var(--ease)}
.p-golpe-app-img{display:block;width:clamp(72px,8vw,96px);aspect-ratio:1;overflow:hidden;border-radius:14px;background:#000}
.p-golpe-app-img img{display:block;width:100%;height:auto}
.p-golpe-app-t{display:grid;gap:4px;justify-items:start}
.p-golpe-app-t b{font-size:clamp(1.125rem,1rem + .8vw,1.625rem);line-height:1.1;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.p-golpe-app-l{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:1rem;font-weight:600;color:var(--red-hi)}
.p-golpe-app-l svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.p-golpe-app:active{transform:scale(.99)}
.p-golpe-app:focus-visible{outline:2px solid var(--red-hi);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .p-golpe-pe-l a:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px #fff inset}
  .p-golpe-app:hover .p-golpe-app-l svg{transform:translateX(4px)}
}

/* ---------- tablet: a grade em três colunas ---------- */
@media (max-width:63.99rem){
  .p-golpe-mz{columns:3}
}

/* ---------- celular: a mesma composição, com a copy resumida ---------- */
@media (max-width:37.49rem){
  /* no celular o lado escuro tem ~40% da foto: o alerta estreita (até 150px) e quebra o texto, sem chegar ao rosto */
  .p-golpe-hc{gap:7px;max-width:150px;padding:6px 10px 6px 6px;border-radius:14px}
  .p-golpe-hc-t b{white-space:normal}
  .p-golpe-hc-i{width:26px;height:26px}
  .p-golpe-hc-i .ic{width:13px;height:13px}
  .p-golpe-hc-t b{font-size:.8125rem}
  .p-golpe-so-pc{display:none}

  .p-golpe-mz{columns:2;column-gap:8px}
  .p-golpe-c{gap:8px;margin-bottom:8px;padding:14px 12px 8px;border-radius:16px}
  .p-golpe-c-f{font-size:1rem}
  .p-golpe-c h3{font-size:.9375rem}
  .p-golpe-c-la{padding:8px 10px;border-radius:10px;font-size:.8125rem;line-height:1.4}
  .p-golpe-c .rd-link{font-size:14px}
  .p-golpe-mzbox:not(:has(.p-golpe-dt[open])) .p-golpe-mzc{max-height:600px}

  .p-golpe-cf-p{font-size:1rem}

  .p-golpe-rg{padding:0 14px 0 8px;gap:10px}
  .p-golpe-rg-x{gap:10px;padding-block:16px}
  .p-golpe-rg-x h3{font-size:1.0625rem}
  .p-golpe-rg-cta{display:grid;justify-items:start;gap:4px}
  .p-golpe-rg-cta .btn-neon{font-size:13px;gap:6px;padding-left:12px}
  .p-golpe-rg-cta .cta-seta{width:30px;height:30px}
  .p-golpe-rg-cta .cta-seta svg{width:16px;height:16px}
  .p-golpe-rg-cta .rd-link{font-size:14px}

  /* o vão entre o cartão das regras e o do app fica metade de cada lado da fronteira (como na clt): com o cartão do app
     colado nela, o cinza dele somado à luz do encontro mudava o fundo das linhas logo abaixo e o portão lia costura;
     26px de cada lado deixam os dois cartões fora da faixa que o portão compara (24px) */
  .p-golpe-s-rg{padding-bottom:26px}
  .p-golpe-s-pe{padding-top:26px}
  .p-golpe-pe{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:10px}
  .p-golpe-pe-l ul{grid-template-columns:minmax(0,1fr);gap:6px}
  .p-golpe-pe-l a{padding:6px 10px;font-size:.8125rem;border-radius:10px}
  .p-golpe-app{grid-template-columns:minmax(0,1fr);justify-items:start;gap:8px;padding:8px 8px 4px;border-radius:16px}
  .p-golpe-app-img{width:100%;aspect-ratio:4/3}
  .p-golpe-app-t b{font-size:1rem}
  .p-golpe-app-l{font-size:14px}
}

/* tabela no celular: as duas respostas (no golpe e aqui) lado a lado, como as colunas do computador */
@media (max-width:47.99rem){
  #sinal-e-fato .lp-tab tr{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:8px;padding:16px}
  #sinal-e-fato .lp-tab tbody th{grid-column:1/-1}
  #sinal-e-fato .lp-tab td{grid-template-columns:minmax(0,1fr);gap:2px;align-content:start}
  #nao-e .lp-ck li{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:14px}
}

@media (prefers-reduced-motion:reduce){
  .p-golpe-hc,.p-golpe-cf-m img{animation:p-golpe-some .3s linear both}
  .p-golpe-app-l svg{transition:opacity .2s linear}
}
@keyframes p-golpe-some{from{opacity:0}to{opacity:1}}