/* página de fundos de tela (components/wallpapers.js) */
.wp-head{max-width:760px;margin:0 auto;padding:12px 24px 0;text-align:center}
.wp-badge{display:inline-block;margin-bottom:12px;font:700 11px var(--font-body);letter-spacing:.12em;color:oklch(85% 0.14 155);border:1px solid color-mix(in oklch,var(--live) 55%,transparent);background:color-mix(in oklch,var(--live) 12%,transparent);border-radius:100px;padding:5px 14px}
.wp-head h2{margin:0 0 8px;font:800 clamp(1.7rem,5vw,2.4rem) var(--font-display);color:oklch(97% 0.005 260)}
.wp-head p{margin:0;font:500 15px/1.5 var(--font-body);color:var(--muted)}
.wp-section{max-width:860px;margin:26px auto 44px;padding:0 24px}
.wp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.wp-card{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;transition:transform .2s ease}
.wp-card:nth-child(3n+2){transform:translateY(-12px)}
.wp-card:hover{transform:translateY(-6px)}
.wp-phone{position:relative;display:block;width:100%;aspect-ratio:1080/2340;border-radius:34px;overflow:hidden;border:6px solid oklch(22% 0.01 260);background:#000;box-shadow:0 0 0 1px var(--card-border),0 18px 40px -18px rgb(0 0 0/.8)}
.wp-card:nth-child(3n+2) .wp-phone{border-color:oklch(34% 0.02 260)}
.wp-phone img{width:100%;height:100%;object-fit:cover;display:block}
.wp-lock{position:absolute;top:7%;left:0;right:0;display:flex;flex-direction:column;align-items:center;color:#fff;text-shadow:0 1px 8px rgb(0 0 0/.55);pointer-events:none}
.wp-lock b{font:700 clamp(1.4rem,5vw,2.2rem) var(--font-display)}
.wp-lock small{font:500 clamp(.6rem,1.6vw,.8rem) var(--font-body)}
.wp-card figcaption{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;text-align:center;font:600 14px var(--font-body);color:var(--text)}
.wp-card figcaption .chip-btn{width:100%;justify-content:center;text-align:center;padding-block:10px}
.wp-guides-title{margin:34px 0 14px;text-align:center;font:800 1.2rem var(--font-display);color:oklch(97% 0.005 260)}
.wp-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 auto;max-width:700px}
.wp-guide{display:flex;flex-direction:column;gap:12px;border:1px solid var(--card-border);border-radius:16px;padding:16px 18px;background:linear-gradient(180deg,var(--card-a),var(--card-b))}
.wp-guide[data-guide=ios]{border-top:3px solid var(--google-blue)}
.wp-guide[data-guide=android]{border-top:3px solid var(--google-green)}
.wp-guide strong{font:800 17px var(--font-display);color:oklch(97% 0.005 260)}
.wp-guide ol{list-style:none;counter-reset:step;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wp-guide li{counter-increment:step;display:flex;gap:10px;align-items:flex-start;font:500 13.5px/1.45 var(--font-body);color:var(--text)}
.wp-guide li::before{content:counter(step);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--font-body);color:oklch(15% 0.02 260);background:var(--mentoring)}
.wp-guide[data-guide=ios] li::before{background:var(--google-blue)}
.wp-guide[data-guide=android] li::before{background:var(--google-green)}
.wp-soon{margin:22px auto 0;max-width:560px;text-align:center;font:500 14px/1.55 var(--font-body);color:var(--muted)}
@media (max-width:640px){
  .wp-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 24px 14px;margin:0 -24px;-webkit-overflow-scrolling:touch}
  .wp-card{flex:0 0 66%;max-width:260px;scroll-snap-align:center}
  .wp-card:nth-child(3n+2){transform:none}
}