/* ---------- 7 · Seja Parceiro UNE (o amarelo da marca) ---------- */
/* a transição 6 → 7: a placa amarela entra recuada e com cantos, sobre a noite, e se abre até a borda com a rolagem;
   embaixo ela termina num arco que desce sobre o papel da dobra 8 (o espelho das curvas da 3 e da 5) */
.parceiros{position:relative;background:linear-gradient(180deg,var(--n0) 0 82%,var(--papel) 82%)}
.parceiros__placa{color:var(--tinta);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:center;
  background:
    radial-gradient(55% 70% at 12% 0%,#ffe27e,transparent 62%),
    radial-gradient(45% 60% at 100% 100%,#ffae12,transparent 70%),
    var(--sol);
  clip-path:inset(0 0 round 0 0 50% 50% / 0 0 64px 64px);padding-bottom:clamp(110px,13vw,180px)}
@supports (animation-timeline: view()){
  .parceiros__placa{animation:p-abre linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  @keyframes p-abre{from{clip-path:inset(0 var(--gutter) round 40px 40px 50% 50% / 40px 40px 64px 64px)}to{clip-path:inset(0 0 round 0 0 50% 50% / 0 0 64px 64px)}}
}
/* o símbolo enorme, cortado na borda, como marca d'água: a silhueta em tinta, que gira de leve com a rolagem */
.parceiros__marca{position:absolute;right:-16%;top:58%;width:min(60vw,820px);aspect-ratio:175/172;translate:0 -50%;z-index:-1;pointer-events:none;
  background:var(--tinta);opacity:.055;
  -webkit-mask:url("../marca/simbolo.svg") center/contain no-repeat;mask:url("../marca/simbolo.svg") center/contain no-repeat}
@supports (animation-timeline: view()){
  .parceiros__marca{animation:p-gira linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes p-gira{from{rotate:-22deg}to{rotate:26deg}}
}
.parceiros .sobre{color:var(--tinta)}
.parceiros h2{color:var(--tinta);font-size:clamp(38px,4.8vw,72px)}
.parceiros h2 > span{display:block;font-weight:400;color:var(--tinta)}
.parceiros h2 em{position:relative;display:inline-block;font-style:normal;font-weight:var(--m-peso);color:var(--tinta)}
/* o risco verde que sublinha "lucrativo!", desenhado à mão quando o título chega */
.parceiros h2 em svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.32em;overflow:visible}
.parceiros h2 em path{fill:none;stroke:#178c3c;stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.3,1) .7s}
.parceiros h2.visto em path,.parceiros h2:not(.revela) em path{stroke-dashoffset:0}
html:not(.js) .parceiros h2 em path{stroke-dashoffset:0}
.parceiros__texto > p:not(.sobre){margin-top:20px;max-width:30em;color:#24343f;font-size:clamp(17px,1.3vw,19px)}
.parceiros__texto .botao{margin-top:32px}
.parceiros__texto .botao svg{width:20px;height:20px;color:var(--folha)}
/* os ganhos: um extrato, linha a linha, com o número vazado que se enche ao passar o mouse */
.ganhos{list-style:none;margin:0;padding:0;border-top:1.5px solid rgb(10 28 43 / .2)}
.ganho{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:clamp(22px,2.4vw,30px) 4px;border-bottom:1.5px solid rgb(10 28 43 / .2)}
.ganho::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:1.5px;background:var(--tinta);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease) .3s}
.ganho.visto::after{transform:scaleX(1)}
.ganho__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--tinta);color:var(--sol);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.ganho__ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ganho h3{font:700 clamp(20px,1.7vw,24px)/1.2 var(--manchete);letter-spacing:-.015em;color:var(--tinta)}
.ganho p{margin-top:6px;color:#2c3c48;font-size:15.5px;line-height:1.5}
.ganho__n{font:800 clamp(40px,4vw,60px)/1 var(--manchete);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgb(10 28 43 / .38);transition:color .4s var(--ease),-webkit-text-stroke-color .4s var(--ease)}
.ganho:hover .ganho__n{color:var(--tinta);-webkit-text-stroke-color:var(--tinta)}
.ganho:hover .ganho__ic{transform:rotate(-8deg) scale(1.06)}
@media (max-width:1000px){
  .parceiros__placa{grid-template-columns:1fr}
  .parceiros__marca{right:-38%;top:22%;width:115vw}
}
@media (max-width:560px){
  .parceiros__placa{clip-path:inset(0 0 round 0 0 50% 50% / 0 0 34px 34px)}
  @keyframes p-abre{from{clip-path:inset(0 12px round 26px 26px 50% 50% / 26px 26px 34px 34px)}to{clip-path:inset(0 0 round 0 0 50% 50% / 0 0 34px 34px)}}
  .ganho{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .ganho__n{display:none}
  .ganho__ic{width:46px;height:46px;border-radius:14px}
  .parceiros__texto .botao{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .parceiros__placa,.parceiros__marca{animation:none}
  .parceiros h2 em path{stroke-dashoffset:0;transition:none}
  .ganho::after{transform:scaleX(1);transition:none}
}