/* =========================================================
   OFERTA · tarjeta de compra con escena 3D y precio
   ========================================================= */

.offer { padding: 140px 0; }
.offer-card {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border-radius: var(--radius-xl); border: 1px solid rgba(var(--rgb-accent), .22);
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--rgb-cta), .14), rgba(var(--rgb-surface), .9) 45%), var(--color-surface);
}
.offer .visual { position: relative; min-height: 560px; border-right: 1px solid var(--color-line); }
.offer-body { padding: 56px 54px; }
.offer-body h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 18px 0 30px; }

.offer-includes { list-style: none; display: grid; gap: 14px; margin-bottom: 34px; }
.offer-includes li { display: flex; gap: 14px; align-items: center; font-size: 16px; }
.offer-includes li svg { flex: none; }

.price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 26px; padding-top: 26px; border-top: 1px solid var(--color-line); }
.price-amount { font-size: 56px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-note { color: var(--color-text-faint); font-size: 14px; }

.offer .btn { width: 100%; padding: 22px 30px; font-size: 15px; }
.offer .micro { justify-content: center; }

@media (max-width: 1024px) {
  .offer-card { grid-template-columns: 1fr; }
  .offer .visual { min-height: 420px; border-right: 0; border-bottom: 1px solid var(--color-line); }
}
@media (max-width: 720px) {
  .offer-body { padding: 38px 26px; }
  .offer .visual { min-height: 340px; }
}