/* GoodPlann · método DRIZA */

.gp .method-sec{ padding:clamp(20px,4vh,50px) 0 clamp(44px,8vh,96px); }
.gp .method-wrap{ position:relative; max-width:820px; margin:0 auto; will-change:transform; }
.gp .method-wrap::before{ content:""; position:absolute; z-index:-1; inset:-8% -5%;
  background:
    radial-gradient(closest-side, rgba(51,153,137,.4), transparent 70%),
    radial-gradient(closest-side, rgba(255,99,89,.16), transparent 72%);
  filter:blur(60px); animation:cardGlow 6s ease-in-out infinite; }
.gp .method-intro{ padding:20px 22px 4px; }
.gp .method-intro p{ margin:0 0 12px; color:var(--ink); font-size:14.5px; line-height:1.62; }
.gp .method-intro p b{ color:var(--snow); }
.gp .method-name{ font-weight:900; font-size:1.35rem; color:var(--snow); letter-spacing:-.01em; }
.gp .method-modules{ max-height:none !important; -webkit-mask-image:none !important; mask-image:none !important; padding:4px 12px 16px; }
.gp .method-modules .mod{ align-items:flex-start; }
.gp .method-modules .mod .ph{ margin-top:2px; }
.gp .method-modules .mod .txt .t{ white-space:normal; }
.gp .method-modules .mod .txt .m{ white-space:normal; font-size:12.5px; margin-top:3px; }
/* cursor con animación de clic (hover en la card del método) */
.gp .click-hint{ position:absolute; right:26px; bottom:22px; width:46px; height:46px; z-index:6; pointer-events:none;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; }
.gp .method-wrap:hover .click-hint{ opacity:1; transform:none; }
.gp .click-hint .cursor{ width:26px; height:26px; position:absolute; left:6px; top:4px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation:clickPress 1.4s ease-in-out infinite; }
@keyframes clickPress{ 0%,100%{ transform:translate(0,0) } 46%,54%{ transform:translate(2px,3px) scale(.9) } }
.gp .click-ring{ position:absolute; left:8px; top:6px; width:26px; height:26px; border-radius:50%; border:2px solid var(--tiffany); opacity:0; animation:clickRing 1.4s ease-in-out infinite; }
@keyframes clickRing{ 0%,38%{ transform:scale(.3); opacity:0 } 55%{ opacity:.8 } 100%{ transform:scale(1.6); opacity:0 } }
.gp .device{ position:relative; border-radius:26px; overflow:hidden;
  background:var(--glass-3); border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset, inset 0 1px 0 var(--glass-hi); }
.gp .device::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:26px;
  background:linear-gradient(140deg, rgba(255,255,255,.08), transparent 40%); }
.gp .dev-bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
.gp .dev-bar .dots{ display:flex; gap:6px; }
.gp .dev-bar .dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.16); }
.gp .dev-bar .dots i:first-child{ background:rgba(255,0,170,.7); }
.gp .dev-bar .dots i:nth-child(2){ background:rgba(200,255,0,.7); }
.gp .dev-bar .dots i:nth-child(3){ background:rgba(125,226,209,.8); }
.gp .dev-bar .ttl{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.02em; }
.gp .dev-bar .badge{ margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--night); background:linear-gradient(135deg,var(--lime),var(--tiffany)); padding:4px 9px; border-radius:999px; }
.gp .modules{ padding:6px 12px 14px; display:flex; flex-direction:column; gap:6px;
  max-height:330px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
  mask-image:linear-gradient(180deg,#000 82%,transparent); }
.gp .mod{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:14px;
  background:rgba(255,255,255,.02); border:1px solid transparent; transition:.2s; }
.gp .mod:hover{ background:rgba(125,226,209,.06); border-color:var(--glass-brd); }
.gp .mod.active{ background:rgba(51,153,137,.14); border-color:rgba(125,226,209,.28); }
.gp .mod .ph{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-weight:900; font-size:13px; color:var(--night);
  background:linear-gradient(135deg,var(--persian),var(--tiffany)); }
.gp .mod:nth-child(1) .ph{ background:linear-gradient(135deg,#6b7a76,#93a6a1); }
.gp .mod.active .ph{ background:linear-gradient(135deg,var(--lime),var(--tiffany)); box-shadow:0 4px 14px rgba(200,255,0,.3); }
.gp .mod .txt{ flex:1; min-width:0; }
.gp .mod .txt .t{ font-size:13.5px; font-weight:700; color:var(--snow); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp .mod .txt .m{ font-size:11px; color:var(--muted); margin-top:2px; }