/* ══════════════════════════════════════════════════════════════════
   Pappitas — Ventana del regalo (prueba gratis del plan superior)
   Liviana: fondo pastel, un regalo que flota, los días en grande y un
   solo botón. Lo que incluye el plan viene del módulo de licencias.
   ══════════════════════════════════════════════════════════════════ */
.patr-dlg.gift {
  --ptg-brand: var(--brand-primary, #7c3aed);
  --ptg-card: var(--bg-card, #fff);
  --ptg-tx: var(--text-primary, #17132a);
  --ptg-tx2: var(--text-secondary, #6b6584);
  --ptg-line: var(--border, #ece9f4);
  --ptg-tint: color-mix(in srgb, var(--ptg-brand) 9%, var(--ptg-card));
  --ptg-gold: #f4c04e;
  width: min(400px, calc(100vw - 24px));
  max-width: 400px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 !important;
  border-radius: 28px;
  background: var(--ptg-card);
  box-shadow: 0 30px 80px -30px rgba(16, 12, 40, .45);
}
.patr-dlg.gift .patr-close { z-index: 3; width: 32px; height: 32px; color: var(--ptg-tx2); background: color-mix(in srgb, var(--ptg-card) 70%, transparent); box-shadow: none; }
.ptg { color: var(--ptg-tx); }

/* ── Visual: pastel, un orbe suave, confeti y el regalo flotando ── */
.ptg-vis { position: relative; height: 176px; overflow: hidden; background: var(--ptg-tint); display: flex; align-items: center; justify-content: center; }
.ptg-orb { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--ptg-brand) 14%, var(--ptg-card)); }
.ptg-c { position: absolute; width: 8px; height: 8px; border-radius: 3px; opacity: .9; animation: ptgDrift 4s ease-in-out infinite; }
.ptg-c.c1 { left: 22%; top: 28%; background: var(--ptg-gold); transform: rotate(20deg); }
.ptg-c.c2 { left: 74%; top: 22%; background: color-mix(in srgb, var(--ptg-brand) 70%, var(--ptg-card)); border-radius: 50%; animation-delay: .8s; }
.ptg-c.c3 { left: 80%; top: 66%; background: #8fd3b8; transform: rotate(-15deg); animation-delay: 1.6s; }
.ptg-c.c4 { left: 16%; top: 68%; background: #f6a5c0; border-radius: 50%; animation-delay: 2.2s; }
.ptg-c.c5 { left: 60%; top: 80%; width: 6px; height: 6px; background: var(--ptg-gold); border-radius: 50%; animation-delay: 1.1s; }

.ptg-box { position: relative; width: 84px; height: 80px; animation: ptgFloat 3.4s ease-in-out infinite; }
.ptg-box .body { position: absolute; left: 7px; right: 7px; bottom: 0; height: 50px; border-radius: 10px 10px 13px 13px; background: var(--ptg-brand); }
.ptg-box .rib { position: absolute; left: 50%; bottom: 0; width: 13px; height: 50px; margin-left: -6.5px; background: var(--ptg-gold); }
.ptg-box .lid { position: absolute; left: 0; right: 0; top: 14px; height: 20px; border-radius: 8px; background: color-mix(in srgb, var(--ptg-brand) 78%, #fff); transform-origin: 20% 100%; animation: ptgLid 3.4s ease-in-out infinite; }
.ptg-box .lid::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 13px; margin-left: -6.5px; background: var(--ptg-gold); }
.ptg-box .bow { position: absolute; top: -15px; width: 22px; height: 18px; border: 4px solid var(--ptg-gold); border-radius: 50% 50% 10% 50%; }
.ptg-box .bow.l { left: 50%; margin-left: -24px; transform: rotate(-18deg); }
.ptg-box .bow.r { left: 50%; margin-left: 2px; transform: scaleX(-1) rotate(-18deg); }

/* ── Texto y botón ── */
.ptg-in { padding: 22px 26px 24px; text-align: center; }
.ptg-kick { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--ptg-brand) 80%, var(--ptg-tx)); }
.ptg-days { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 8px; line-height: 1; }
.ptg-days b { font-size: 58px; font-weight: 800; letter-spacing: -.045em; color: var(--ptg-tx); font-variant-numeric: tabular-nums; }
.ptg-days span { font-size: 20px; font-weight: 700; color: var(--ptg-tx2); }
.ptg-in h2 { margin: 4px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--ptg-tx); }
.ptg-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 12px 0 22px; font-size: 13px; font-weight: 500; color: var(--ptg-tx2); }
.ptg-facts i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.ptg-cta { display: block; width: 100%; height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--ptg-tx); color: var(--ptg-card); font: inherit; font-size: 16px; font-weight: 650; letter-spacing: -.005em; box-shadow: none; transition: opacity .15s, transform .15s; }
.ptg-cta:hover { opacity: .9; }
.ptg-cta:active { transform: scale(.99); }
.ptg-cta:disabled { opacity: .6; cursor: default; }
.ptg-hint { margin: 10px 0 0; font-size: 13px; color: var(--ptg-tx2); }

.ptg-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ptg-tx2); }
.ptg-more:hover { color: var(--ptg-tx); }
.ptg-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.ptg-more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Lo que incluye: solo nombres, en dos columnas compactas (la ventana es la que se desplaza) */
.ptg-feats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.ptg-feats[hidden] { display: none; }
.ptg-feats li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border-radius: 12px; background: var(--ptg-tint); }
.ptg-feats .fi { flex: none; display: inline-flex; width: 18px; height: 18px; color: color-mix(in srgb, var(--ptg-brand) 85%, var(--ptg-tx)); }
.ptg-feats .fi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ptg-feats b { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ptg-tx); }
@media (max-width: 380px) { .ptg-feats { grid-template-columns: 1fr; } }
/* Prueba en curso */
.ptg-act { padding-top: 34px; }
.ptg-prog { height: 6px; margin: 16px auto 0; max-width: 260px; border-radius: 99px; background: var(--ptg-tint); overflow: hidden; }
.ptg-prog i { display: block; height: 100%; border-radius: inherit; background: var(--ptg-brand); }

@keyframes ptgFloat { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-5px); } }
@keyframes ptgLid { 0%, 72%, 100% { transform: rotate(0); } 82% { transform: rotate(-8deg) translateY(-5px); } 92% { transform: rotate(2deg); } }
@keyframes ptgDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .ptg-box, .ptg-box .lid, .ptg-c { animation: none; } }
@media (max-width: 420px) { .ptg-vis { height: 156px; } .ptg-days b { font-size: 52px; } .ptg-in { padding: 20px 20px 22px; } }