/* ===== Retrospectiva Wrapped (oferta) ===== */
.wp{max-width:1100px;margin:0 auto;padding:10px 6vw 80px}
.btn-lg{font-size:1.05rem;padding:16px 30px}

/* tela 1 */
.wp-end{margin-top:60px;display:flex;justify-content:flex-end}

/* tela 2 — showcase */
.wp-showcase{
  display:grid;grid-template-columns:340px 1fr;gap:50px;align-items:center;margin-top:30px;
}
.wp-phone{position:relative;display:flex;align-items:center;justify-content:center}
.wp-phone-frame{
  width:280px;height:580px;border-radius:42px;border:11px solid #15151c;
  overflow:hidden;background:#0b0912;box-shadow:0 30px 60px rgba(150,28,64,.3);
}
.wp-phone-frame iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.wp-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--roxo-escuro);font-size:1.4rem;line-height:1;
  box-shadow:0 6px 16px rgba(150,28,64,.2);display:grid;place-items:center;
}
.wp-prev{left:-14px}
.wp-next{right:-14px}
.wp-arrow:hover{background:var(--roxo);color:#fff}

.wp-feature{max-width:480px}
.wp-feature-ico{
  display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:#ffe4e9;font-size:1.6rem;margin-bottom:14px;
}
.wp-feature h2{font-size:2.4rem;font-weight:800;line-height:1.05}
.wp-feature p{color:var(--cinza);font-size:1.05rem;margin-top:12px;line-height:1.5}

.wp-dots{display:flex;gap:8px;margin:24px 0}
.wp-dot{width:9px;height:9px;border-radius:999px;background:#e0d9f2;cursor:pointer;transition:all .2s}
.wp-dot.on{width:26px;background:var(--roxo)}

.wp-cta-wrap{position:relative;display:block;margin-top:6px}
.wp-cta-tag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:1;
  background:#1f1730;color:#fff;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap;
}
.wp-cta{width:100%}
.wp-skip{display:block;text-align:center;margin-top:18px;color:var(--cinza);font-size:.95rem}
.wp-skip:hover{color:var(--roxo-escuro);text-decoration:underline}

@media(max-width:820px){
  .wp-showcase{grid-template-columns:1fr;gap:30px}
  .wp-phone-frame{width:240px;height:500px}
  .wp-feature{max-width:none;text-align:center}
  .wp-feature-ico{margin-inline:auto}
  .wp-dots{justify-content:center}
}