/* ==========================================================================
   Promo "porta un collega" — CONDIVISO da landing e per-i-trainer (come prezzi.css).
   Usa solo i token delle pagine marketing (--yellow, --blue, --iron-*, --chalk-*…),
   quindi funziona sia nel tema scuro sia in quello chiaro. Le animazioni partono quando
   la sezione entra in vista (classe .in messa dallo script .rise delle pagine) e sono
   tutte spente da prefers-reduced-motion.
   Regola della promo (decisa 2026-09-24): 1 mese gratis a chi porta un collega PT
   (quando il collega paga il 2° mese, fino a 12 l'anno); 14 giorni di prova al collega.
   ========================================================================== */

.pc-sec{position:relative;overflow:hidden}
/* alone dorato dietro le due card */
.pc-sec::before{content:"";position:absolute;left:50%;top:52%;width:760px;height:760px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(233,185,62,.14),rgba(233,185,62,0) 72%)}
.pc-sec .wrap{position:relative}

.pc-head{text-align:center}
.pc-head h2 .hl{color:var(--yellow)}
.pc-head p{max-width:600px;margin:14px auto 0}

/* ---- le due card, unite da un "ponte" con una scia luminosa ---- */
.pc-duo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  max-width:880px;margin:40px auto 0}
.pc-card{position:relative;border-radius:18px;padding:28px 22px 24px;text-align:center;
  background:var(--iron-2);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease}
.pc-card:hover{transform:translateY(-4px)}

/* "Per te": bordo dorato che gira (conic-gradient animato con @property; dove non c'è
   supporto resta un bordo dorato fermo, comunque bello) */
@property --pc-ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.pc-tu{border:2px solid transparent;
  background:linear-gradient(var(--iron-2),var(--iron-2)) padding-box,
             conic-gradient(from var(--pc-ang),var(--yellow),var(--red),var(--yellow-hi),var(--yellow)) border-box}
.pc-lui{border-color:rgba(62,130,214,.5)}

.pc-ico{width:58px;height:58px;margin:0 auto 14px;display:grid;place-items:center;border-radius:15px;
  background:rgba(233,185,62,.15);color:var(--yellow)}
.pc-ico svg{display:block;transform-origin:50% 85%}
.pc-lui .pc-ico{background:rgba(62,130,214,.15);color:var(--blue)}
.pc-lab{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-dim)}
.pc-big{font-family:var(--display);font-weight:700;font-size:46px;line-height:.92;text-transform:uppercase;
  margin:10px 0 10px;color:var(--chalk)}
.pc-tu .pc-big{color:var(--yellow)}
.pc-lui .pc-big{color:var(--blue)}
.pc-sub{font-size:14px;line-height:1.45;color:var(--chalk-dim)}

.pc-ponte{position:relative;width:88px;height:4px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 15px)}
.pc-ponte::after{content:"";position:absolute;top:50%;left:0;width:12px;height:12px;margin-top:-6px;
  border-radius:50%;background:var(--yellow);box-shadow:0 0 14px 4px rgba(233,185,62,.65);opacity:0}

/* ---- i tre passi ---- */
.pc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:880px;margin:30px auto 0;
  counter-reset:pc;list-style:none;padding:0}
.pc-step{position:relative;padding:18px 16px 16px 60px;border-radius:12px;background:var(--iron-3);
  border:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--chalk-dim)}
.pc-step b{color:var(--chalk)}
.pc-step::before{counter-increment:pc;content:counter(pc);position:absolute;left:16px;top:16px;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:18px;color:#211903;background:var(--yellow)}

.pc-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.pc-note{text-align:center;margin-top:14px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--chalk-faint)}
.pc-note a{color:var(--chalk-dim)}

/* ---- nastro "Ti manda …" (compare solo se la pagina arriva dal link di un PT) ---- */
.pc-nastro{position:relative;z-index:5;border-bottom:1px solid rgba(233,185,62,.45);
  background:linear-gradient(90deg,rgba(233,185,62,.10),rgba(233,185,62,.24) 50%,rgba(233,185,62,.10)),var(--iron-2)}
.pc-nastro .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;
  padding-top:12px;padding-bottom:12px;text-align:center}
.pcn-txt{font-size:15px;color:var(--chalk)}
.pcn-txt b{box-shadow:inset 0 -.42em 0 rgba(233,185,62,.45)}   /* evidenziatore, leggibile in entrambi i temi */
.pcn-regalo{font-size:20px;margin-right:4px}
.pc-nastro .btn{padding:9px 16px;font-size:12px}
.pcn-x{background:none;border:none;color:var(--chalk-dim);font-size:18px;line-height:1;padding:6px 8px;cursor:pointer}

/* ---- telefono: card una sopra l'altra, ponte verticale ---- */
@media(max-width:760px){
  .pc-duo{grid-template-columns:1fr;max-width:420px;margin-top:30px}
  .pc-ponte{width:4px;height:52px;margin:0 auto;
    background:repeating-linear-gradient(180deg,var(--line-2) 0 8px,transparent 8px 15px)}
  .pc-ponte::after{left:50%;top:0;margin:0 0 0 -6px}
  .pc-steps{grid-template-columns:1fr;max-width:420px}
  .pc-big{font-size:42px}
  .pc-sec::before{width:520px;height:520px}
}

/* ---- movimento: solo se l'utente non ha chiesto di ridurlo ---- */
@media(prefers-reduced-motion:no-preference){
  .pc-tu{animation:pcGiro 6s linear infinite}
  .pc-ponte::after{animation:pcScia 2.4s ease-in-out infinite}
  .pc-duo.in .pc-big{animation:pcPop .7s cubic-bezier(.2,.9,.3,1.35) .35s both}
  .pc-duo.in .pc-tu .pc-ico svg{animation:pcRegalo 1.2s ease .8s 2}
  .pc-steps.in .pc-step{animation:pcSale .55s ease both}
  .pc-steps.in .pc-step:nth-child(2){animation-delay:.12s}
  .pc-steps.in .pc-step:nth-child(3){animation-delay:.24s}
  .pc-nastro{animation:pcNastro .6s ease both}
}
@keyframes pcGiro{to{--pc-ang:360deg}}
@keyframes pcScia{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
@keyframes pcPop{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes pcRegalo{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.12)}
  50%{transform:rotate(10deg) scale(1.12)}75%{transform:rotate(-5deg)}}
@keyframes pcSale{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes pcNastro{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:no-preference) and (max-width:760px){
  .pc-ponte::after{animation-name:pcSciaV}
}
@keyframes pcSciaV{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 12px);opacity:0}}

@media print{.pc-nastro,.pc-ponte{display:none}}