/* Pixelario Plus (plus.html y suscripcion.html)
   Idea: el «tique» de una tienda de bloques. El precio va en una ficha con el corte de esquina de Pixelario
   y un borde que brilla en mandarina, el color de la marca reservado para Plus. */
.pl-page { padding-bottom: 90px; }
.px-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 28px 48px; align-items: center; padding-block: clamp(28px, 5vw, 64px) 12px; }
.px-hero-t { display: grid; gap: 14px; justify-items: start; }
.px-hero h1 { margin: 0; font: 800 clamp(2.2rem, 5.4vw, 3.8rem)/.95 var(--display); letter-spacing: -.045em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.px-hero .lede { max-width: 54ch; }
.px-price { position: relative; display: grid; gap: 12px; padding: 24px; border-radius: 22px 6px 22px 22px; background:
  radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%), var(--surface);
  border: var(--bw-2, 2px) solid color-mix(in oklab, var(--brand) 55%, var(--line)); box-shadow: 0 24px 60px -30px color-mix(in oklab, var(--brand) 70%, #000); }
.px-amount { display: flex; align-items: baseline; gap: 8px; }
.px-amount b { font: 800 clamp(3rem, 7vw, 4.2rem)/.9 var(--display); letter-spacing: -.05em; font-variation-settings: "opsz" 96; }
.px-cur { font: 600 var(--fs-md) var(--mono); color: var(--muted); }
.px-per { color: var(--muted); }
.px-price .fine { margin: 0; }
.px-cta { display: grid; gap: 8px; }
.px-cta .btn-lg { width: 100%; }
.px-safe { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.px-have { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--ok, #3dd68c); --ico-px: var(--ok, #3dd68c); }
.px-soon { margin: 0; }
.px-wait { display: grid; gap: 8px; }
.px-msg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: 14px 4px 14px 14px; background: var(--surface); border: var(--bw) solid var(--line-2); }
.px-msg p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.px-msg.is-ok { border-color: color-mix(in oklab, var(--ok, #3dd68c) 45%, var(--line)); } .px-msg.is-ok > .ico { color: var(--ok, #3dd68c); --ico-px: var(--ok, #3dd68c); }
.px-msg.is-warn { border-color: color-mix(in oklab, var(--warn, #ffc247) 45%, var(--line)); } .px-msg.is-warn > .ico { color: var(--warn, #ffc247); --ico-px: var(--warn, #ffc247); }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--line-3); border-top-color: var(--brand); animation: px-spin .8s linear infinite; }
@keyframes px-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
.px-perks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.px-perk { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 14px; padding: 18px; border-radius: 16px 4px 16px 16px; background: var(--surface); border: var(--bw) solid var(--line); }
.px-perk .perk-ico { grid-row: span 2; margin: 0; }
.px-perk b { font-size: var(--fs-md); }
.px-perk p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.px-perk .status { grid-column: 2; justify-self: start; }
.px-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.px-split h2 { font-size: var(--fs-h3, 1.6rem); margin-bottom: 14px; }
.px-ref { display: grid; gap: 10px; justify-items: start; padding: 22px; border-radius: 18px 5px 18px 18px; background: var(--surface); border: var(--bw) dashed color-mix(in oklab, var(--brand) 45%, var(--line)); }
.px-ref h2 { margin: 0; }
.px-ref p { margin: 0; color: var(--muted); }
.px-consent { display: grid; gap: 14px; }
.px-consent .check { align-items: flex-start; }
.px-consent .check span { font-size: var(--fs-sm); }
.field-msg:empty { display: none; }
.bad-t { color: var(--bad, #ff6b6b); margin: 0; }

/* ---------- tu suscripción ---------- */
.px-acct { display: grid; gap: 16px; align-content: start; }
.px-acct .pg-head { padding-bottom: 8px; }
.px-card { display: grid; gap: 12px; padding: 20px; border-radius: 18px 5px 18px 18px; background: var(--surface); border: var(--bw) solid var(--line); min-width: 0; scroll-margin-top: 96px; }
.px-card > * { min-width: 0; }
.px-card > h2 { margin: 0; font: 700 var(--fs-xl, 1.3rem)/1.1 var(--display); letter-spacing: -.03em; }
.px-plan { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center; }
.px-plan > div:first-child { min-width: 0; flex: 1 1 320px; }
.px-plan p { margin: 6px 0 0; }
.px-plan-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: var(--fs-lg, 1.1rem); }
.px-plan-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.px-cancel { display: grid; gap: 8px; padding: 14px; border-radius: 12px 3px 12px 12px; background: color-mix(in oklab, var(--bad, #ff6b6b) 7%, var(--surface-2)); border: var(--bw) solid color-mix(in oklab, var(--bad, #ff6b6b) 35%, var(--line)); }
.px-cancel p { margin: 0; }
.px-row { display: flex; flex-wrap: wrap; gap: 8px; }
.px-bad { color: var(--bad, #ff6b6b) !important; }
.px-gifts, .px-refs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.px-gifts li, .px-refs li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 10px 3px 10px 10px; background: var(--surface-2); font-size: var(--fs-sm); }
.px-gifts small, .px-refs small { color: var(--muted); }
.px-refs li > span:first-child { display: grid; min-width: 140px; }
.px-refs li > span:last-child { flex: 1 1 240px; }
.px-tablewrap { overflow-x: auto; border-radius: 12px 3px 12px 12px; border: var(--bw) solid var(--line); }
.px-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.px-table th { text-align: left; padding: 10px 12px; background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.px-table td { padding: 10px 12px; border-top: var(--bw) solid var(--line); vertical-align: top; white-space: nowrap; }
.px-table .num { text-align: right; }
.px-table td small { display: block; color: var(--muted); font-size: var(--fs-2xs); }
.px-table a { display: inline-flex; min-height: 24px; align-items: center; }
.px-link { display: flex; gap: 8px; }
.px-link .input { flex: 1; min-width: 0; font-size: var(--fs-xs); }
.px-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.px-stats div { padding: 10px 12px; border-radius: 10px 3px 10px 10px; background: var(--surface-2); }
.px-stats dt { font-size: var(--fs-2xs); color: var(--muted); }
.px-stats dd { margin: 0; font-size: 1.3rem; font-weight: 700; }
.px-rules summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.px-rules ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 860px) { .px-hero, .px-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .px-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-link { flex-direction: column; } .px-msg { grid-template-columns: auto minmax(0, 1fr); } .px-msg .btn { grid-column: 1 / -1; } }