/* =====================================================================================================================
   Carta ASSER COIN (21/10/2026) — "Il tuo piano".
   Il titolare: «lo stile della card ASSER Coin come una carta di credito e riempirla con un video mini loop delle monete
   fotorealistico con colori ASSER; sposterei i dettagli del tuo piano all'interno della card ... come primo elemento;
   lo stile della card deve essere APPLE ... la moneta la lascerei». Il PHP usa la carta solo se questo foglio e' in coda.
   Davanti: saldo, piano, nome, prima scadenza e la moneta 3D di sempre, sopra il video (assets/media/pw-carta.*).
   Accanto (computer) o sotto (telefono), nello stesso riquadro: i dettagli del piano e gli ASSER COIN per scadenza.
   ===================================================================================================================== */
.pwc {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin: 0 0 1.4rem;
  padding: clamp(12px, 1.8vw, 22px);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(40, 18, 30, 0.04), 0 24px 60px rgba(40, 18, 30, 0.08);
  scroll-margin-top: 1rem;
}
@media (min-width: 1000px) {
  .pwc { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .pwc__card { max-width: 560px; justify-self: center; }
}

/* ---- la carta ---------------------------------------------------------------------------------------------------- */
.pwc__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  border-radius: clamp(18px, 3.2vw, 26px);
  color: #fff;
  background: radial-gradient(120% 140% at 80% 20%, #8a3d63 0%, #4b2338 45%, #1d0b15 100%);
  box-shadow: 0 34px 60px -24px rgba(40, 12, 28, 0.6), 0 14px 26px -14px rgba(40, 12, 28, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.24);
  transform: perspective(1000px) rotateX(var(--pwc-rx, 0deg)) rotateY(var(--pwc-ry, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
  -webkit-tap-highlight-color: transparent;
}
.pwc__card.is-tilt { transition-duration: 0.12s; }
.pwc__bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -3; }
.pwc__poster,
.pwc__vid { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.pwc__vid { opacity: 0; transition: opacity 1s ease; }
.pwc__bg.is-playing .pwc__vid { opacity: 1; }
/* velo per leggere bene i testi: scuro a sinistra e in basso, le monete libere a destra */
.pwc__veil {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 7, 15, 0.8) 0%, rgba(22, 7, 15, 0.5) 40%, rgba(22, 7, 15, 0.04) 74%),
    linear-gradient(0deg, rgba(22, 7, 15, 0.62) 0%, rgba(22, 7, 15, 0) 38%);
}
/* il riflesso che attraversa la carta, come una carta vera sotto la luce */
.pwc__sheen {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0) 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 120% 0;
}

.pwc__top {
  position: absolute; left: 6.5cqi; right: 6.5cqi; top: 6cqi;
  display: flex; align-items: center; justify-content: space-between; gap: 3cqi;
}
.pwc__brand {
  display: inline-flex; align-items: center; gap: 1.8cqi; min-width: 0;
  color: rgba(255, 255, 255, 0.94);
  font: 700 clamp(10px, 2.8cqi, 14px)/1 "Sora", "Manrope", system-ui, sans-serif;
  letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
}
.pwc__gem { display: block; flex: none; width: max(20px, 6.6cqi); height: max(20px, 6.6cqi); object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
.pwc__chip {
  flex: none; padding: max(4px, 1cqi) max(10px, 2.8cqi); border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  font: 800 clamp(10px, 2.5cqi, 13px)/1.2 "Manrope", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
}

/* la moneta 3D di sempre, a destra a meta' altezza */
.pwc__coin { position: absolute; right: 5.5cqi; top: 52%; z-index: 1; translate: 0 -50%; line-height: 0; }
.pwc__coin .ac3 { --ac: clamp(60px, 23cqi, 130px); }

.pwc__money { position: absolute; left: 6.5cqi; top: 36%; right: 34cqi; }
.pwc__label {
  display: block; margin: 0 0 1.4cqi;
  color: rgba(255, 255, 255, 0.68);
  font: 700 clamp(9px, 2.3cqi, 12px)/1 "Manrope", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
}
.pwc__balance {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.8cqi; row-gap: 0.6cqi; margin: 0;
  color: #fff; font: 700 clamp(30px, 11.4cqi, 62px)/1 "Sora", "Manrope", system-ui, sans-serif;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}
.pwc__balance small {
  color: rgba(255, 255, 255, 0.78); font: 800 clamp(10px, 2.7cqi, 14px)/1 "Manrope", system-ui, sans-serif; letter-spacing: 0.08em; text-shadow: none;
}

.pwc__bottom {
  position: absolute; left: 6.5cqi; right: 6.5cqi; bottom: 5.6cqi;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqi;
}
.pwc__holder {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(255, 255, 255, 0.9); font: 700 clamp(10px, 2.7cqi, 14px)/1.2 "Manrope", system-ui, sans-serif; letter-spacing: 0.16em;
}
.pwc__exp {
  display: grid; flex: none; justify-items: end; gap: 0.8cqi;
  font: 800 clamp(11px, 3cqi, 15px)/1 "Manrope", system-ui, sans-serif; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.pwc__exp small { color: rgba(255, 255, 255, 0.62); font-size: clamp(8px, 1.9cqi, 10px); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---- i dettagli, nello stesso riquadro ------------------------------------------------------------------------- */
.pwc__info { min-width: 0; padding: clamp(4px, 1vw, 12px) clamp(4px, 1.4vw, 18px); }
.pwc__info .pw-kicker { margin-bottom: 0.35rem; }
.pwc__plan { margin: 0; color: var(--asser-secondary, #4b2338); font: 800 clamp(1.7rem, 3.2vw, 2.4rem)/1.05 "Sora", "Manrope", system-ui, sans-serif; letter-spacing: -0.025em; }
.pwc__desc { margin: 0.4rem 0 0; color: var(--asser-muted, #6a626a); font-size: 0.98rem; line-height: 1.45; }
.pwc__facts { display: grid; gap: 0.45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.pwc__facts li {
  position: relative; padding: 0.6rem 0.9rem 0.6rem 2.35rem; border-radius: 14px;
  background: rgba(125, 68, 94, 0.06); color: var(--asser-text, #2a1f27); font-size: 0.9rem; font-weight: 650; line-height: 1.4;
}
.pwc__facts li::before {
  content: ""; position: absolute; left: 0.85rem; top: 50%; width: 0.95rem; height: 0.95rem; margin-top: -0.475rem; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(135deg, #e0789f, #b0424f);
}
.pwc__lots { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(75, 35, 56, 0.09); }
.pwc__lots ul { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.pwc__sub { margin: 0 0 0.7rem; color: var(--asser-muted, #6a626a); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pwc__lot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--asser-text, #2a1f27); font-size: 0.94rem; font-weight: 700; }
.pwc__lot b { font-variant-numeric: tabular-nums; }
.pwc__bar { height: 6px; margin: 0.45rem 0 0.35rem; overflow: hidden; border-radius: 999px; background: rgba(75, 35, 56, 0.1); }
.pwc__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e0789f, #b0424f 60%, #7d445e); }
.pwc__lots small { color: var(--asser-muted, #6a626a); font-size: 0.8rem; }
.pwc__warn { display: inline-block; margin: 0 0 0.7rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(208, 122, 60, 0.12); color: #a4561d; font-size: 0.8rem; font-weight: 800; }
.pwc__empty { margin: 0; color: var(--asser-muted, #6a626a); font-size: 0.88rem; line-height: 1.5; }
.pwc__hint { margin: 1rem 0 0; color: var(--asser-muted, #6a626a); font-size: 0.8rem; line-height: 1.5; }

@media (max-width: 640px) {
  .pwc { padding: 10px; border-radius: 28px; gap: 1rem; }
  .pwc__info { padding: 2px 6px 8px; }
}

/* ---- movimento --------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .pwc__sheen { animation: pwc-sheen 7.5s ease-in-out infinite; }
}
@keyframes pwc-sheen {
  0%, 62% { background-position: 120% 0; }
  92%, 100% { background-position: -60% 0; }
}

/* ---- tema scuro (regole scritte a mano: il generatore le lascia come sono) ------------------------------------------ */
html[data-asser-theme="dark"] body .pwc { background: #1d1719; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.45); }
html[data-asser-theme="dark"] body .pwc__plan { color: #fff; }
html[data-asser-theme="dark"] body .pwc__desc,
html[data-asser-theme="dark"] body .pwc__sub,
html[data-asser-theme="dark"] body .pwc__lots small,
html[data-asser-theme="dark"] body .pwc__empty,
html[data-asser-theme="dark"] body .pwc__hint { color: #a89aa1; }
html[data-asser-theme="dark"] body .pwc__facts li { background: rgba(255, 255, 255, 0.06); color: #efe6ea; }
html[data-asser-theme="dark"] body .pwc__lots { border-top-color: rgba(255, 255, 255, 0.1); }
html[data-asser-theme="dark"] body .pwc__lot { color: #efe6ea; }
html[data-asser-theme="dark"] body .pwc__bar { background: rgba(255, 255, 255, 0.1); }
html[data-asser-theme="dark"] body .pwc__bar i { background: linear-gradient(90deg, #ff8fbf, #d1477a 60%, #a0466f); }
html[data-asser-theme="dark"] body .pwc__warn { background: rgba(240, 163, 94, 0.14); color: #f0b07e; }
html[data-asser-theme="dark"] body .pwc__card { box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.8), 0 14px 26px -14px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); }

/* ---- Studio Gold (21/10/2026): la carta d'oro per chi ha l'abbonamento Studio Gold (video shop-oro.mp4) ----------------- */
.pwc--oro .pwc__card { box-shadow: 0 34px 60px -22px rgba(90, 52, 10, 0.55), 0 14px 26px -14px rgba(60, 30, 8, 0.45), inset 0 0 0 1px rgba(246, 214, 150, 0.7), inset 0 0 0 2px rgba(120, 76, 20, 0.35); }
.pwc--oro .pwc__veil { background: linear-gradient(90deg, rgba(42, 20, 12, 0.8) 0%, rgba(42, 20, 12, 0.44) 42%, rgba(42, 20, 12, 0) 74%), linear-gradient(0deg, rgba(42, 20, 12, 0.56) 0%, rgba(42, 20, 12, 0) 40%); }
.pwc--oro .pwc__brand { color: #fbe7b8; }
.pwc--oro .pwc__chip { background: linear-gradient(135deg, rgba(255, 236, 190, 0.95), rgba(214, 164, 82, 0.95)); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.7), 0 4px 14px rgba(80, 46, 8, 0.35); color: #4a2c08; }
.pwc--oro .pwc__plan { background: linear-gradient(100deg, #8a5a12 0%, #c99236 45%, #7a4e0e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pwc--oro .pwc__facts li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, linear-gradient(135deg, #e7c174, #a8741f); }
html[data-asser-theme="dark"] body .pwc--oro .pwc__plan { background-image: linear-gradient(100deg, #fff1c9 0%, #f0c46e 45%, #d9a650 100%); color: transparent; }

/* ---- carta del piano sottoscritto (21/10/2026): stesse immagini e stessi veli delle carte dello Shop ---------------------- */
.pwc--tier .pwc__poster { object-position: 70% 50%; }
.pwc--quarzo .pwc__veil { background: linear-gradient(90deg, rgba(74, 30, 54, 0.78) 0%, rgba(74, 30, 54, 0.44) 42%, rgba(74, 30, 54, 0) 72%), linear-gradient(0deg, rgba(60, 22, 42, 0.56) 0%, rgba(60, 22, 42, 0) 40%); }
.pwc--ametista .pwc__veil { background: linear-gradient(90deg, rgba(18, 8, 34, 0.82) 0%, rgba(18, 8, 34, 0.46) 42%, rgba(18, 8, 34, 0) 74%), linear-gradient(0deg, rgba(18, 8, 34, 0.58) 0%, rgba(18, 8, 34, 0) 40%); }
.pwc--platino .pwc__veil { background: linear-gradient(90deg, rgba(14, 12, 18, 0.8) 0%, rgba(14, 12, 18, 0.42) 42%, rgba(14, 12, 18, 0) 72%), linear-gradient(0deg, rgba(14, 12, 18, 0.56) 0%, rgba(14, 12, 18, 0) 40%); }
.pwc--platino .pwc__card { box-shadow: 0 34px 60px -24px rgba(20, 16, 24, 0.6), 0 14px 26px -14px rgba(20, 16, 24, 0.45), inset 0 0 0 1px rgba(232, 232, 240, 0.55); }
.pwc--platino .pwc__chip { background: linear-gradient(135deg, rgba(250, 250, 252, 0.95), rgba(196, 196, 208, 0.95)); color: #2a2730; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.8), 0 4px 14px rgba(20, 16, 24, 0.3); }
.pwc--perla .pwc__veil { background: linear-gradient(90deg, rgba(110, 52, 78, 0.78) 0%, rgba(110, 52, 78, 0.42) 44%, rgba(110, 52, 78, 0) 76%), linear-gradient(0deg, rgba(90, 40, 62, 0.58) 0%, rgba(90, 40, 62, 0) 42%); }
/* capsula del piano sempre leggibile sopra le monete delle immagini */
.pwc--tier:not(.pwc--oro):not(.pwc--platino) .pwc__chip { background: rgba(24, 10, 22, 0.55); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.25); color: #fff; }

/* la moneta 3D nuova sulla carta (21/10/2026): stessa posizione della moneta di prima, un po' piu' grande; quella di prima si nasconde */
.pwc__coin3d { position: absolute; right: 2cqi; top: 52%; z-index: 1; width: 35cqi; aspect-ratio: 1 / 1; translate: 0 -50%; pointer-events: none; }
.pwc__coin3d .am3d__gl { display: block; width: 100%; height: 100%; }
.pwc__card.has-coin3d .pwc__coin { display: none; }