/* ============================================================
   magnet.css — lead magnet: tarjeta grande con mockup de
   libro/PDF en 3D y lista de features.
   ============================================================ */

.magnet{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:center;
  background:linear-gradient(140deg,rgba(20,18,34,.7),rgba(10,10,24,.55));
  border:1px solid var(--line);border-radius:24px;padding:clamp(28px,4vw,56px);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;position:relative;
}
.magnet::before{content:"";position:absolute;top:-40%;left:-10%;width:60%;height:180%;
  background:radial-gradient(closest-side,rgba(232,103,58,.14),transparent);pointer-events:none}
.book-wrap{perspective:1400px;display:flex;justify-content:center}
.book{
  width:min(280px,72%);aspect-ratio:3/4;border-radius:6px 12px 12px 6px;position:relative;
  background:linear-gradient(135deg,#171a2c,#0c0e1c);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:-22px 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.03);
  transform:rotateY(-24deg) rotateX(6deg) rotateZ(1deg);
  transition:transform .8s var(--ease);
  padding:30px 26px;display:flex;flex-direction:column;justify-content:space-between;
}
.book:hover{transform:rotateY(-14deg) rotateX(3deg)}
.book::before{content:"";position:absolute;top:0;left:0;width:16px;height:100%;
  background:linear-gradient(90deg,rgba(0,0,0,.5),transparent);border-radius:6px 0 0 6px}
.book::after{content:"";position:absolute;inset:0;border-radius:6px 12px 12px 6px;
  background:radial-gradient(120% 60% at 30% 8%,rgba(232,103,58,.22),transparent 60%);pointer-events:none}
.book .b-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--orange);text-transform:uppercase}
.book h3{font-size:27px;line-height:1.12}
.book .b-meta{font-family:var(--mono);font-size:10.5px;color:var(--t-50);letter-spacing:.06em;border-top:1px solid var(--line);padding-top:14px}
.book .b-sym{position:absolute;top:26px;right:24px;font-size:26px;color:rgba(255,255,255,.14)}
.magnet .m-txt h2{font-size:clamp(26px,3.6vw,40px);margin-top:14px}
.magnet .m-txt>p{color:var(--t-70);margin-top:18px;max-width:44ch}
.features{list-style:none;margin:26px 0 28px;display:flex;flex-direction:column;gap:13px}
.features li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--t-70)}
.features li .ar{color:var(--orange);font-family:var(--mono);flex:0 0 auto;margin-top:2px}