/* GoodPlann · bonus */

.gp .bonus{ position:relative; padding:clamp(24px,4vh,50px) 0 clamp(40px,7vh,80px); overflow:hidden;
  background:
    radial-gradient(60% 46% at 82% 10%, rgba(255,99,89,.12), transparent 60%),
    radial-gradient(50% 42% at 8% 32%, rgba(200,255,0,.06), transparent 60%); }
.gp .bonus-head{ text-align:center; max-width:760px; margin:0 auto clamp(34px,6vh,56px); }
.gp .bonus-ribbon{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--night); padding:9px 18px; border-radius:999px;
  background:linear-gradient(135deg,#FF6B4A,#FF9E4D 55%,#C8FF00);
  box-shadow:0 8px 26px rgba(255,107,74,.4), inset 0 1px 0 rgba(255,255,255,.35); }
.gp .bonus-title{ margin:20px 0 0; font-weight:900; font-size:clamp(1.7rem,3.8vw,2.7rem); letter-spacing:-.03em; line-height:1.12; color:var(--snow); text-wrap:balance; }
.gp .bonus-sub{ margin:14px auto 0; max-width:56ch; color:var(--muted); font-size:1.05rem; line-height:1.55; }
.gp .bonus-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gp .bonus-card{ position:relative; overflow:hidden; border-radius:20px; padding:24px 22px 22px;
  background:linear-gradient(180deg, rgba(22,34,32,.72), rgba(12,20,20,.82));
  border:1px solid var(--glass-brd); box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 var(--glass-hi);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  transform:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease, border-color .3s, box-shadow .3s; }
.gp .bonus.in .bonus-card{ opacity:1; transform:none; }
.gp .bonus.in .bonus-card:nth-child(2){ transition-delay:.05s }
 .gp .bonus.in .bonus-card:nth-child(3){ transition-delay:.1s }
.gp .bonus.in .bonus-card:nth-child(4){ transition-delay:.15s }
 .gp .bonus.in .bonus-card:nth-child(5){ transition-delay:.2s }
.gp .bonus.in .bonus-card:nth-child(6){ transition-delay:.25s }
 .gp .bonus.in .bonus-card:nth-child(7){ transition-delay:.3s }
.gp .bonus-card:hover{ transform:translateY(-6px); border-color:rgba(255,120,110,.4); box-shadow:0 28px 66px rgba(0,0,0,.55), 0 0 42px rgba(255,107,74,.16); transition-delay:0s; }
.gp .bonus-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#FF6B4A,#FF9E4D,#C8FF00); opacity:.9; }
.gp .bonus-num{ position:absolute; right:16px; bottom:6px; font-weight:900; font-size:64px; line-height:1; color:rgba(255,255,255,.055); letter-spacing:-.04em; pointer-events:none; }
.gp .bonus-tag{ position:absolute; top:14px; right:14px; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--night); background:linear-gradient(135deg,#C8FF00,#7DE2D1); padding:4px 10px; border-radius:999px; box-shadow:0 4px 12px rgba(200,255,0,.3); }
.gp .bonus-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:20px; color:var(--night);
  background:linear-gradient(135deg,#FF7A6B,#FF9E4D); box-shadow:0 8px 20px rgba(255,107,74,.35); }
.gp .bonus-card h3{ margin:16px 0 8px; font-weight:900; font-size:17px; letter-spacing:-.01em; color:var(--snow); line-height:1.18; text-wrap:balance; }
.gp .bonus-card p{ margin:0; font-size:13px; line-height:1.55; color:var(--muted); position:relative; z-index:1; }
.gp .bonus-stamp{ position:absolute; top:15px; left:15px; font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--lime);
  border:1.5px solid rgba(200,255,0,.5); border-radius:8px; padding:3px 8px; transform:rotate(-8deg) scale(.8); opacity:0; transition:.3s; }
.gp .bonus-card:hover .bonus-stamp{ opacity:1; transform:rotate(-8deg) scale(1); }
.gp .bonus-card.feature{ grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 26px; padding:28px 30px; }
.gp .bonus-card.feature::after{ height:4px; }
.gp .bonus-card.feature .bonus-ic{ grid-row:1 / span 3; width:60px; height:60px; font-size:28px; background:linear-gradient(135deg,#C8FF00,#7DE2D1); }
.gp .bonus-card.feature .feat-k{ grid-column:2; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#C8FF00; }
.gp .bonus-card.feature h3{ grid-column:2; margin:4px 0; font-size:clamp(1.2rem,2vw,1.6rem); }
.gp .bonus-card.feature p{ grid-column:2; max-width:72ch; font-size:14px; }
.gp .bonus-card.feature .bonus-num{ font-size:92px; }
@media (max-width:940px){
 .gp .bonus-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
 .gp .bonus-grid{ grid-template-columns:1fr; }
  .gp .bonus-card.feature{ grid-template-columns:1fr; }
 .gp .bonus-card.feature .bonus-ic, .gp .bonus-card.feature .feat-k, .gp .bonus-card.feature h3, .gp .bonus-card.feature p{ grid-column:1; }
 .gp .bonus-card.feature .bonus-ic{ grid-row:auto; }
}

/* las tarjetas entran escalonadas, pero solo se esconden si el JS está vivo:
   sin él se ven todas, quietas, en vez de quedarse en blanco */
.gp-js .gp .bonus-card{ opacity:0; transform:translateY(22px); }
.gp-js .gp .bonus.in .bonus-card{ opacity:1; transform:none; }