/* ============================================================================
   prezzi.css — i box prezzi condivisi (landing + pagine profilo).

   Estratto dalla landing perché i box comparissero anche in /per-i-clienti e
   /per-i-trainer senza duplicare CSS che poi divergono. Un solo posto per i box
   prezzi, il toggle mensile/annuale, la pill-risparmio col bilanciere.
   Lo script del toggle è in js/prezzi.js (anch'esso condiviso).

   Usa solo variabili di tema già definite ovunque (--card, --line, --yellow,
   --blue, --ink, --chalk-dim, --green, --display, --mono).
   ========================================================================== */

.price{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:800px){.price{grid-template-columns:1fr}}
.tier{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 26px;
  display:flex;flex-direction:column;transition:transform .16s ease}
.tier:hover{transform:translateY(-4px)}
.tier.feature{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow),0 20px 50px -24px rgba(233,185,62,.4);position:relative}
.tier .pick-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#211903;background:var(--yellow);border-radius:20px;padding:5px 15px;white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(233,185,62,.6)}
/* etichetta "per chi è" in cima a ogni card: giallo per il PT, blu per il cliente singolo */
.tier .tier-for{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  display:inline-block;padding:4px 10px;border-radius:20px;margin-bottom:12px}
.tier-for.pg-pt{color:var(--yellow);background:rgba(233,185,62,.1);border:1px solid rgba(233,185,62,.4)}
.tier-for.pg-cliente{color:var(--blue);background:rgba(62,130,214,.1);border:1px solid rgba(62,130,214,.45)}
/* il piano cliente si distingue col bordo blu (è un'altra fascia di pubblico) */
.tier.tier-cliente{border-color:rgba(62,130,214,.4)}
.tier.tier-cliente::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--blue);border-radius:16px 16px 0 0}
/* riga-etichetta di gruppo sopra le card */
.price-group{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pg-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);white-space:nowrap}
.pg-line{flex:1;height:1px;background:var(--line)}
.tier .plan{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-dim)}
.tier.feature .plan{color:var(--yellow)}
.tier .amt{font-family:var(--display);font-size:50px;font-weight:700;margin:14px 0 2px;
  display:flex;align-items:baseline;gap:6px}
.tier .amt .per{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--chalk-dim);
  text-transform:none;letter-spacing:0}
.tier .ph{font-family:var(--mono);font-size:11px;color:var(--yellow);margin-bottom:16px}
.tier ul{list-style:none;padding:0;margin:8px 0 24px;display:flex;flex-direction:column;gap:10px}
.tier li{padding-left:26px;position:relative;font-size:14.5px;color:var(--ink)}
/* spunta ✓ gialla al posto del quadratino piatto: più calda e "premium" */
.tier li::before{content:"✓";position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;
  font-weight:700;color:var(--yellow);line-height:1.5}
/* la prima riga (il numero di assistiti) è la cosa che cambia tra i box: mettiamola in risalto */
.tier li:first-child{font-weight:600;color:var(--ink);margin-bottom:2px}
.tier li:first-child::before{content:"👥";font-size:12px}
.tier .btn{margin-top:auto}
.price-note{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--chalk-dim);margin-top:20px;
  text-align:center;letter-spacing:.03em}
/* garanzia "zero rischio" sotto i piani (condivisa da landing + pagine profilo).
   Tre promesse scannerizzabili, ciascuna con la sua icona — più incisiva di un paragrafo. */
.guarantee{max-width:760px;margin:26px auto 0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;
  position:relative;overflow:hidden}
.guarantee::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--yellow))}
.guarantee .g-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:4px 6px}
.guarantee .g-ico{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  color:var(--green);background:rgba(73,169,109,.1);border:1px solid rgba(73,169,109,.32)}
.guarantee .g-t{font-family:var(--display,'Barlow Condensed',sans-serif);font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:var(--ink)}
.guarantee .g-d{font-size:12.5px;line-height:1.45;color:var(--chalk-dim)}
.guarantee .g-d b{color:var(--ink);font-weight:600}
/* divisori sottili fra le 3 colonne */
.guarantee .g-item:not(:last-child){border-right:1px solid var(--line)}
@media(max-width:560px){
  .guarantee{grid-template-columns:1fr;gap:0;padding:8px 16px}
  .guarantee .g-item{flex-direction:row;text-align:left;gap:13px;padding:15px 0;align-items:flex-start}
  .guarantee .g-item:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}
  .guarantee .g-txt{flex:1}
  .guarantee .g-ico{width:38px;height:38px}
}
/* 4 box: su desktop stanno in riga; il 4° (cliente) va a capo da solo su schermi medi */
.price.price-4{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.price.price-4{grid-template-columns:1fr}}
/* singolo box centrato (pagina cliente: un solo tier) */
.price.price-1{grid-template-columns:1fr;max-width:420px;margin:0 auto}
/* toggle mensile / annuale */
.bill-toggle{display:inline-flex;align-items:center;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:22px;padding:4px;margin:0 auto 26px;position:relative}
.bill-toggle button{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--chalk-dim);background:none;border:none;cursor:pointer;padding:8px 18px;border-radius:18px;
  transition:color .15s ease,background .15s ease;white-space:nowrap}
.bill-toggle button.on{color:#211903;background:var(--yellow);font-weight:600}
.bill-save{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--green);margin-left:4px;
  white-space:nowrap}
.bill-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}
/* la riga costo-per-cliente: è la LEVA di vendita → resa come chip, non notina grigia */
.tier .percli{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--chalk-dim);
  margin:0 0 18px;display:inline-flex;align-items:center;gap:7px;background:rgba(233,185,62,.08);
  border:1px solid rgba(233,185,62,.22);border-radius:20px;padding:6px 12px;align-self:flex-start;
  line-height:1.3}
.tier .percli b{color:var(--yellow);font-weight:600;white-space:nowrap}
.tier.feature .percli{background:rgba(233,185,62,.14);border-color:rgba(233,185,62,.4)}
/* il periodo annuale sotto il prezzo grande */
.tier .amt-year{font-family:var(--mono);font-size:12px;color:var(--chalk-dim);margin-bottom:12px;min-height:16px}
/* "risparmi X€" in stile bilanciere: una PILL verde in evidenza con dischi che si CARICANO */
.tier .amt-save{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  margin-bottom:14px;min-height:30px;padding:6px 14px 6px 11px;border-radius:22px;
  background:rgba(73,169,109,.14);border:1px solid rgba(73,169,109,.45);
  box-shadow:0 4px 16px -8px rgba(73,169,109,.5)}
.tier .amt-save .bb{display:inline-flex;align-items:center;height:22px;flex-shrink:0}
.tier .amt-save .bb svg{height:22px;width:auto;display:block;overflow:visible}
.tier .amt-save .txt{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--green);
  letter-spacing:.01em;white-space:nowrap;line-height:1}
.tier .amt-save .txt b{font-size:14.5px;font-weight:800}
.tier .amt-save .disc{transform-origin:center;transform:scale(0);opacity:0;
  animation:discLoad .36s cubic-bezier(.34,1.56,.64,1) forwards}
.tier .amt-save .disc.d1{animation-delay:.05s}
.tier .amt-save .disc.d2{animation-delay:.16s}
.tier .amt-save .txt{animation:saveFade .3s ease .26s both}
@keyframes discLoad{to{transform:scale(1);opacity:1}}
@keyframes saveFade{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .tier .amt-save .disc{animation:none;transform:scale(1);opacity:1}
  .tier .amt-save .txt{animation:none}}
/* il centesimo (,99) più piccolo del numero intero */
.tier .amt .cents{font-size:.5em;font-weight:700;align-self:flex-start;margin-top:.55em;margin-left:-3px}
/* il box "più scelto" spicca: leggermente più grande e con un alone caldo */
.price-4 .tier.feature{transform:scale(1.03);z-index:2}
.price-4 .tier.feature:hover{transform:scale(1.03) translateY(-4px)}
@media(max-width:1000px){.price-4 .tier.feature{transform:none}.price-4 .tier.feature:hover{transform:translateY(-4px)}}
.tier .pick-badge{box-shadow:0 6px 20px -6px rgba(233,185,62,.75);animation:badgeGlow 2.6s ease-in-out infinite}
@keyframes badgeGlow{0%,100%{box-shadow:0 6px 18px -8px rgba(233,185,62,.6)}50%{box-shadow:0 6px 26px -6px rgba(233,185,62,.95)}}
@media(prefers-reduced-motion:reduce){.tier .pick-badge{animation:none}}
[hidden]{display:none!important}