/* Raio-X de CNPJ, "O que você recebe": prints reais do exemplo em 3D (Dossiê 360 e Monitor mensal), chips numa linha e botão cheio no celular. */
.cxp{container-type:inline-size;display:flex;flex-direction:column;min-width:0;--pw:min(54cqw,330px);--sobe:46px}
.cxp-card{position:relative;height:calc(var(--pw) * 1.414 - 30px);margin-top:var(--sobe);border-radius:32px;background:#E9E7E2;overflow-x:clip;perspective:1400px;clip-path:inset(-120px 0 0 0 round 0 0 32px 32px);animation:cxIn .7s cubic-bezier(.22,1,.36,1) both}
.cxp-pg{appearance:none;position:absolute;left:50%;top:0;width:var(--pw);margin:0;padding:0;border:0;border-radius:6px;background:#FFFFFF;cursor:pointer;
  z-index:calc(10 - var(--ad));
  transform:translateX(calc(-50% + var(--d) * var(--pw) * .26)) translateY(calc(min(var(--ad),1) * var(--sobe) - var(--sobe) + var(--ad) * 12px)) scale(calc(1 - var(--ad) * .07)) rotateY(calc(var(--d) * -9deg));
  transform-origin:50% 0;opacity:clamp(0,calc(3 - var(--ad)),1);filter:brightness(calc(1 - var(--ad) * .04));
  box-shadow:0 2px 6px rgba(9,9,11,.12),0 34px 56px -26px rgba(9,9,11,.55);
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .4s,filter .4s}
.cxp-pg img{display:block;width:100%;height:auto;border-radius:6px}
.cxp-pg[data-i].fora{visibility:hidden;pointer-events:none;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .4s,filter .4s,visibility 0s .4s}
.cxp-pg.on{cursor:default}
.cxp-pg:focus-visible,.cxp-lg:focus-visible{outline:2px solid #09090B;outline-offset:3px}
.cxp-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.cxp-lg{appearance:none;height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:12.5px;font-weight:500;color:#6E6E74;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s}
.cxp-lg:hover{color:#09090B}
.cxp-lg[aria-pressed=true]{background:#FFFFFF;color:#09090B;font-weight:700}
.cxp .cxp-card{touch-action:pan-y}
.cxp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cx-vc-pn[hidden]{display:none}
.cx-mn-wa{margin-top:12px}

/* Abaixo de 1080 a composição fica entre o texto e os chips: título, explicação, prints, chips, botão. */
@media (max-width:1079px){
  .cx-vc-pn{display:flex;flex-direction:column}
  .cx-vc-pn[hidden]{display:none}
  .cx-vc-l{display:contents}
  .cx-vc-t{order:1}
  .cx-vc-d{order:2}
  .cx-vc-pn .cxp{order:3;max-width:560px;width:100%;margin-inline:auto}
  .cx-vc-f{order:4}
  .cx-vc-cta{order:5}
}
@media (min-width:1080px){
  .cxp{--pw:min(46cqw,340px)}
  .cx-vc-pn{align-items:center}
}
@media (max-width:640px){
  .cxp{--pw:min(58cqw,206px);--sobe:34px}
  .cxp-card{border-radius:26px;clip-path:inset(-120px 0 0 0 round 0 0 26px 26px)}
  .cxp-leg{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;margin-top:10px;padding:0 24px 0 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%)}
  .cxp-leg::-webkit-scrollbar{display:none}
  .cxp-lg{flex:none;height:40px}
  /* chips na mesma linha, rolando de lado, com degradê nas pontas */
  .cx-vc-f{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding:0 24px 0 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%)}
  .cx-vc-f::-webkit-scrollbar{display:none}
  .cx-vc-f>span{flex:none}
  /* botão de largura inteira, logo depois dos chips */
  .cx-vc-cta{align-items:stretch}
  .cx-vc-cta .cx-buy{width:100%;height:52px;justify-content:center}
  .cx-vc-cta small{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cxp-card,.cxp-pg,.cxp-lg{animation:none;transition:none}
}