/* ==========================================================================
   Piani e prezzi — caricato solo da /piani/, subito dopo site.css.
   In alto il conto dei clienti (prima il piano che ti conviene), sotto i tre
   piani e cosa comprendono; poi chi si allena, le domande e la chiusura.
   Scegliendo «Annuale» lo sconto si accende accanto ai prezzi (site.js).
   Mese/anno con due radio, anche senza JavaScript; il conto lo aggiunge
   site.js («Piani: il conto dei clienti»). Solo i token di site.css: angoli
   di 3px, fili da 1px, niente ombre, l'arancio pieno solo sul tasto del conto.
   I nomi delle classi sono nuovi: le vecchie regole dei piani in site.css
   non toccano più questa pagina e si possono togliere.
   ========================================================================== */

/* Mese o anno. Senza :has() resta il mese, completo: l'anno parte nascosto */
.pagina-prezzi [data-vista="anno"] { display: none; }
.pagina-prezzi:has(#periodo-anno:checked) [data-vista="anno"] { display: revert; }
.pagina-prezzi:has(#periodo-anno:checked) [data-vista="mese"] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pagina-prezzi [data-vista] { transition: opacity 220ms var(--curva); }
  @starting-style { .pagina-prezzi [data-vista] { opacity: 0; } }
}
.pagina-prezzi .valuta { font-size: 0.6em; color: var(--inchiostro-2); }

/* ── La testa: titolo a sinistra; a destra cosa paghi e mese/anno ──────── */
.prezzi { padding-block: clamp(36px, 4.5vw, 64px) clamp(56px, 6vw, 96px); }
.prezzi .disegno-anelli { top: -240px; right: -210px; }
.prezzi-testa { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--sp-5) clamp(32px, 5vw, 80px); margin-bottom: clamp(32px, 4vw, 56px); }
.prezzi-testa h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1; }
.prezzi-lato { display: grid; gap: var(--sp-5); justify-items: start; }
.prezzi-lato .lead { text-wrap: pretty; }
.prezzi-lato .accesso-anticipato { margin: 0; }
.cadenza-riga { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
/* «2 mesi gratis»: un adesivo arancio attaccato al tasto «Annuale», con un riflesso che
   ci passa sopra finché resta il mensile. Si vede subito senza coprire niente. */
.cadenza label:has(#periodo-anno) { padding-right: 22px; }
.cadenza-regalo {
  position: absolute; top: -13px; right: -14px; z-index: 2; overflow: hidden;
  padding: 3px 8px; border-radius: var(--r-piccolo);
  background: var(--accento); color: var(--su-accento);
  font-size: var(--t-micro); font-weight: var(--p-titolo); letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase; line-height: 1.3;
  white-space: nowrap; rotate: 4deg;
}
@media (prefers-reduced-motion: no-preference) {
  .pagina-prezzi:has(#periodo-mese:checked) .cadenza-regalo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--inchiostro) 60%, transparent) 50%, transparent 70%);
    translate: -120% 0; animation: riflesso 3.6s var(--curva) 1.2s infinite;
  }
  @keyframes riflesso { 35%, 100% { translate: 120% 0; } }
  .pagina-prezzi:has(#periodo-mese:checked) .cadenza-regalo { animation: dondola 3.6s var(--curva) 1.2s infinite; }
  @keyframes dondola { 0%, 30%, 100% { rotate: 4deg; } 10% { rotate: -2deg; scale: 1.08; } 20% { rotate: 6deg; } }
}
/* Fuori schermo le luci che girano da sole si fermano (site.js). !important perché la regola
   che le accende passa da :has(#periodo-mese) e pesa di più */
.cadenza.fuori-schermo .cadenza-regalo, .cadenza.fuori-schermo .cadenza-regalo::after, .piani.fuori-schermo .piano.conviene::before { animation-play-state: paused !important; }

/* Mensile/Annuale: due radio veri (tastiera e lettori di schermo), il tassello d'inchiostro dice la scelta */
.cadenza { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 3px; min-inline-size: 0; border: var(--bordo-forte); border-radius: var(--r); }
.cadenza::before { content: ""; position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 3px); border-radius: var(--r-piccolo); background: var(--inchiostro); transition: translate var(--m-medio) var(--curva); }
.cadenza:has(#periodo-anno:checked)::before { translate: 100% 0; }
.cadenza label { position: relative; z-index: 1; display: grid; place-items: center; min-height: var(--lato-tocco); min-width: 112px; padding: 6px 16px; font-size: var(--t-corpo); font-weight: var(--p-forte); color: var(--muto); cursor: pointer; transition: color var(--m-medio) var(--curva); }
@media (hover: hover) { .cadenza label:hover { color: var(--inchiostro); } }
.cadenza label:has(:checked) { color: var(--fondo); }
.cadenza input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cadenza label:has(:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ── Il conto: quanti clienti segui, e la carta giusta si accende ────────
   Niente riquadro col risultato: lo dice la carta del piano che ti conviene. */
.listino { display: grid; gap: clamp(28px, 3vw, 40px); border: 0; background: none; overflow: visible; }
.calcolatore { display: grid; gap: var(--sp-2); }
.calcolatore-campo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "domanda domanda" "numero pista";
  align-items: center;
  gap: var(--sp-2) clamp(32px, 5vw, 72px);
}
.calcolatore-domanda { grid-area: domanda; font-size: var(--t-titoletto); font-weight: var(--p-forte); line-height: var(--i-media); }
.calcolatore-numero { grid-area: numero; display: flex; align-items: center; gap: var(--sp-3); }
.calcolatore-numero input {
  width: 2.3ch; margin: 0; padding: 0 2px;
  border: 0; border-bottom: var(--bordo-forte); border-radius: 0;
  background: transparent; color: var(--inchiostro);
  font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: clamp(56px, 5vw, 72px); line-height: 1;
  font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
  transition: border-color var(--m-breve) var(--curva);
}
.calcolatore-numero input::-webkit-inner-spin-button, .calcolatore-numero input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (hover: hover) { .calcolatore-numero input:hover { border-color: var(--inchiostro-2); } }
.calcolatore-numero input:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; border-color: var(--accento); }
.calcolatore-unita { align-self: flex-end; margin-bottom: 0.35em; font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: var(--t-sezione); line-height: 1; letter-spacing: var(--spaziatura-titolo); text-transform: uppercase; color: var(--muto); }
.calcolatore-passi { display: flex; gap: var(--sp-2); margin-left: var(--sp-2); }
.passo {
  display: grid; place-items: center;
  width: var(--lato-tocco); height: var(--lato-tocco); padding: 0;
  border: var(--bordo-forte); border-radius: var(--r);
  background: transparent; color: var(--inchiostro);
  cursor: pointer;
  transition: background-color var(--m-breve) var(--curva), border-color var(--m-breve) var(--curva), translate var(--m-breve) var(--curva);
}
@media (hover: hover) { .passo:hover { background: var(--superficie-2); border-color: var(--inchiostro-2); } }
.passo:active { translate: 0 1px; }

/* Il cursore: pista d'inchiostro fino al numero, tacche ai limiti dei piani.
   Il margine in alto pareggia la scala sotto: la pista resta in asse col numero. */
.calcolatore-pista { grid-area: pista; padding-top: 26px; }
.calcolatore-cursore { --f: 0.2333; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--lato-tocco); margin: 0; background: transparent; cursor: pointer; }
.calcolatore-cursore::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-piccolo); background: linear-gradient(to right, var(--accento) 0 calc(13px + (100% - 26px) * var(--f)), var(--filo-forte) 0); }
.calcolatore-cursore::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 34px; margin-top: -15px; border: 4px solid var(--rail-fondo); border-radius: var(--r); background: var(--inchiostro); }
.calcolatore-cursore::-moz-range-track { height: 4px; border-radius: var(--r-piccolo); background: var(--filo-forte); }
.calcolatore-cursore::-moz-range-progress { height: 4px; border-radius: var(--r-piccolo); background: var(--accento); }
.calcolatore-cursore::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 34px; border: 4px solid var(--rail-fondo); border-radius: var(--r); background: var(--inchiostro); }
.calcolatore-cursore:focus-visible { outline: none; }
.calcolatore-cursore:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accento); outline-offset: 0; }
.calcolatore-cursore:focus-visible::-moz-range-thumb { outline: 2px solid var(--accento); outline-offset: 0; }
.calcolatore-scala { position: relative; height: 26px; font-size: var(--t-minimo); line-height: 1; color: var(--muto); font-variant-numeric: tabular-nums; }
.calcolatore-scala span { position: absolute; top: 0; left: calc(13px + (100% - 26px) * (var(--v) - 1) / 60); translate: -50% 0; padding-top: 10px; }
.calcolatore-scala span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: var(--filo-comando); }
/* Le soglie dei piani si accendono quando il numero le passa */
.calcolatore-scala span { transition: color var(--m-medio) var(--curva); }
.calcolatore-scala span.passata { color: var(--inchiostro); font-weight: var(--p-forte); }
.calcolatore-scala span.passata::before { width: 2px; height: 8px; background: var(--accento); }
/* Il numero dei clienti batte a ogni passo */
@media (prefers-reduced-motion: no-preference) {
  .calcolatore-numero input.batte { animation: batte 260ms var(--curva); }
  @keyframes batte { 40% { scale: 1.08; color: var(--accento-testo); } }
}

.calcolatore-consiglio { min-height: 1.5em; font-size: var(--t-corpo); color: var(--inchiostro-2); text-wrap: pretty; }

/* Annuale: l'etichetta «2 mesi gratis» si accende e nelle carte compaiono il prezzo
   pieno barrato e quanto risparmi */

@media (prefers-reduced-motion: no-preference) {
  .accendi { animation: accendi 620ms var(--curva) both; }
  .pagina-prezzi:has(#periodo-anno:checked) .piano-risparmio { display: inline-block; animation: accendi 620ms var(--curva) both; }
  @keyframes accendi { 0% { scale: 0.8; opacity: 0; } 55% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }
}

/* ── I tre piani ───────────────────────────────────────────────────────────
   Sotto la carta che ti conviene c'è una luce calda che la segue quando cambi
   il numero (site.js mette --luce-x/--luce-y), e lungo il suo bordo gira un
   filo di luce. Sotto il puntatore le carte restano ferme: niente luce, niente salto. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.piani { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.piani::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: var(--luce-x, 16%); top: var(--luce-y, 50%); width: min(900px, 100vw); aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accento) 34%, transparent), color-mix(in srgb, var(--accento) 10%, transparent) 55%, transparent);
  opacity: var(--luce-accesa, 1);
  transition: left 700ms var(--curva), top 700ms var(--curva), opacity var(--m-medio) var(--curva);
}
.piano {
  position: relative; z-index: 1; isolation: isolate;
  display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px);
  border: var(--bordo-forte); border-radius: var(--r);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--inchiostro) 4%, var(--rail-fondo)), var(--rail-fondo) 60%);
  transition: border-color var(--m-medio) var(--curva), background-color var(--m-medio) var(--curva);
}
.piano-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 26px; }
.piano h3 { font-size: var(--t-medio); }
.piano-perchi { margin-top: var(--sp-2); font-size: var(--t-corpo); line-height: var(--i-corpo); color: var(--inchiostro-2); text-wrap: pretty; }
.piano-segno { display: none; }
.piano.conviene { border-color: var(--accento-aperto); box-shadow: inset 0 2px 0 var(--accento); background: linear-gradient(to bottom, color-mix(in srgb, var(--accento) 18%, color-mix(in srgb, var(--rail-fondo) 70%, transparent)), color-mix(in srgb, var(--rail-fondo) 55%, transparent) 75%); }
/* Il filo di luce che gira lungo il bordo della carta scelta */
.piano.conviene::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--giro), transparent 0 62%, var(--accento) 78%, var(--inchiostro) 83%, var(--accento) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  .piano.conviene::before { animation: giro 4.5s linear infinite; }
  .piano.conviene .piano-segno { animation: accendi 620ms var(--curva) both; }
}
@keyframes giro { to { --giro: 360deg; } }
.piano.conviene .piano-segno { display: inline-flex; align-self: center; border-color: var(--inchiostro); background: var(--inchiostro); color: var(--fondo); }
.piano-prezzo { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.piano-cifra { font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: clamp(60px, 5.6vw, 88px); line-height: 0.95; font-variant-numeric: tabular-nums; }
.piano.conviene .piano-cifra { color: var(--inchiostro); }
.piano:not(.conviene) .piano-cifra { color: var(--inchiostro-2); }
.piano-unita { font-size: var(--t-corpo); color: var(--muto); }
/* Col mensile, sotto la cifra: quanto verrebbe al mese con l'annuale. È il <label> del radio:
   un clic e si passa all'annuale, anche senza JavaScript */
.piano-annuale {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-self: start; align-self: flex-start;
  margin-top: var(--sp-3); padding: 6px 10px; border: 1px solid var(--accento-aperto); border-radius: var(--r);
  background: var(--accento-tenue); color: var(--inchiostro-2);
  font-size: var(--t-piccolo); line-height: var(--i-media); cursor: pointer;
  transition: border-color var(--m-breve) var(--curva), background-color var(--m-breve) var(--curva);
}
.piano-annuale b { font-weight: var(--p-forte); color: var(--inchiostro); }
.piano-annuale .piano-annuale-regalo { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--accento-testo); }
.piano-annuale .ico { width: 14px; height: 14px; color: var(--accento-testo); transition: translate var(--m-breve) var(--curva); }
@media (hover: hover) { .piano-annuale:hover { border-color: var(--accento); background: color-mix(in srgb, var(--accento) 20%, transparent); } }
@media (hover: hover) { .piano-annuale:hover .ico { translate: 3px 0; } }
/* Col dito risponde su tutta l'altezza di un tocco, senza che il riquadro si veda più grande */
@media (pointer: coarse) { .piano-annuale { position: relative; } .piano-annuale::after { content: ""; position: absolute; inset: -7px 0; } }
.pagina-prezzi:has(#periodo-mese:checked) .piano-annuale { display: inline-flex; }
/* Con l'annuale, accanto alla cifra */
.piano-regalo {
  align-self: flex-start; padding: 3px 8px; border-radius: var(--r-piccolo);
  background: var(--accento); color: var(--su-accento);
  font-size: var(--t-micro); font-weight: var(--p-titolo); letter-spacing: var(--spaziatura-maiuscolo); text-transform: uppercase;
}
.pagina-prezzi:has(#periodo-anno:checked) .piano-regalo { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .pagina-prezzi:has(#periodo-anno:checked) .piano-regalo { animation: accendi 620ms var(--curva) both; }
}
.piano-cliente { margin-top: var(--sp-4); font-size: var(--t-corpo); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; text-wrap: pretty; }
/* All'anno: il prezzo pieno barrato e, in arancio, quanto risparmi */
.piano-cliente s { margin-right: var(--sp-1); color: var(--muto); font-weight: var(--p-normale); }
.piano-risparmio { color: var(--accento-testo); font-weight: var(--p-forte); }
.piano-piede { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); }
/* I posti del piano: una tacca per cliente, piene fino al numero del conto */
.piano-posti { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-6); }
.piano-tacche { display: flex; gap: 2px; height: 22px; }
.piano-tacche i { flex: 1; border-radius: 1px; background: var(--rail-filo); transition: background-color 260ms var(--curva), scale 260ms var(--curva); transition-delay: calc(var(--t, 0) * 7ms); }
.piano-tacche i.piena { background: var(--filo-comando); }
.piano.conviene .piano-tacche i.piena { background: var(--accento); }
.piano-posti-conto { min-width: 5ch; font-size: var(--t-piccolo); font-weight: var(--p-forte); color: var(--muto); font-variant-numeric: tabular-nums; text-align: right; }
.piano.conviene .piano-posti-conto { color: var(--accento-testo); }
.js .piano-posti:not(.pronto) { display: none; }
.piano-conto { min-height: calc(1.55em + var(--sp-3) + 1px); padding-top: var(--sp-3); border-top: var(--bordo); font-size: var(--t-piccolo); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; }
.piano-conto span { font-weight: var(--p-normale); color: var(--muto); }
.piano.conviene .piano-conto { border-top-color: var(--accento-aperto); }
/* Col conto attivo la riga vuota tiene il posto: le carte non saltano mentre muovi il cursore.
   Senza JavaScript non c'è, e all'anno sparisce in tutte le carte. */
.piano-conto:empty { display: none; }
.js .piano-conto:empty { display: block; visibility: hidden; }
.pagina-prezzi:has(#periodo-anno:checked) .piano-conto { display: none; }
.piano-piede .tasto { width: 100%; }


/* Le stesse pagine in tutti e tre: la frase a sinistra, le pagine a destra */
.compreso { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: var(--sp-5) var(--sp-7); margin-top: clamp(40px, 5vw, 64px); padding-top: var(--sp-5); border-top: var(--bordo); }
.compreso-testo { max-width: 30ch; color: var(--muto); text-wrap: pretty; }
.compreso-testo b { display: block; margin-bottom: var(--sp-1); font-size: var(--t-titoletto); font-weight: var(--p-forte); line-height: var(--i-media); color: var(--inchiostro); }
.compreso-testo b { font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: clamp(32px, 3.2vw, 48px); line-height: var(--i-stretta); letter-spacing: var(--spaziatura-titolo); text-transform: uppercase; }
.compreso-pagine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.compreso-pagine li {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border: var(--bordo); border-radius: var(--r);
  background: color-mix(in srgb, var(--inchiostro) 2%, var(--rail-fondo));
  font-size: var(--t-corpo); font-weight: var(--p-medio); line-height: var(--i-media); color: var(--inchiostro-2);
  transition: border-color var(--m-medio) var(--curva), color var(--m-medio) var(--curva);
}
.compreso-pagine .ico { width: 22px; height: 22px; color: var(--accento-testo); transition: color 400ms var(--curva); }
@media (hover: hover) { .compreso-pagine li:hover { border-color: var(--accento-aperto); color: var(--inchiostro); } }
/* All'entrata si accendono in fila, come le luci di una sala */
@media (prefers-reduced-motion: no-preference) {
  .js .compreso:not(.in) .compreso-pagine .ico { color: var(--filo-forte); }
  .js .compreso:not(.in) .compreso-pagine li { color: var(--muto); }
  .js .compreso.in .compreso-pagine .ico, .js .compreso.in .compreso-pagine li { transition-delay: calc(400ms + var(--i, 0) * 70ms); }
}

/* ── Il tempo che ti riprendi: tre numeri e una frase ─────────────────────
   Gli stessi pezzi del conto dei clienti (numero grande, tasti − e +); il
   risultato è una frase sola, nella carta accesa con la luce calda dietro.
   Senza JavaScript la sezione resta nascosta. */
.banda + .sezione[hidden] + .sezione { padding-top: var(--stacco-sezione); }
/* La luce dietro il conto non deve allargare la pagina */
.ore { overflow-x: clip; }
.ore-conto { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); max-width: var(--largo); margin-inline: auto; }
.ore-campi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) clamp(24px, 3vw, 48px); }
.ore-campo { display: grid; gap: var(--sp-3); align-content: start; justify-items: center; text-align: center; }
.ore-campo > * { grid-area: auto; } /* i nomi d'area del conto dei clienti qui non servono */
.ore-numero input { font-size: clamp(48px, 4.2vw, 64px); }
.ore-numero input.ore-tariffa { width: 3.3ch; }
.ore-numero .calcolatore-unita { font-size: var(--t-titoletto); }
.ore-aiuto { max-width: 36ch; font-size: var(--t-piccolo); line-height: var(--i-corpo); color: var(--muto); text-wrap: balance; }

/* Il risultato: una frase, coi numeri grandi */
.ore-risultato {
  position: relative; isolation: isolate;
  justify-self: center; width: min(100%, 980px);
  padding: clamp(28px, 3.6vw, 52px) clamp(20px, 3.6vw, 56px);
  border: 1px solid var(--accento-aperto); border-radius: var(--r);
  box-shadow: inset 0 2px 0 var(--accento);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accento) 18%, var(--rail-fondo)), var(--rail-fondo) 80%);
  text-align: center;
}
.ore-risultato::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -20%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accento) 22%, transparent), color-mix(in srgb, var(--accento) 6%, transparent) 60%, transparent);
}
.ore-frase { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.6; color: var(--inchiostro-2); text-wrap: balance; }
.ore-frase b {
  display: inline-block; margin-inline: 0.12em;
  font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: clamp(52px, 5.6vw, 92px); line-height: 1.05;
  letter-spacing: var(--spaziatura-titolo); text-transform: uppercase; vertical-align: -0.08em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Il tempo va a capo solo prima di «e» (fra numero e unità lo spazio non si spezza) */
.ore-frase .ore-tempo { color: var(--inchiostro); white-space: normal; }
.ore-frase .ore-soldi { color: var(--accento-testo); }
.ore-legame { white-space: nowrap; }
.ore-anno { margin-top: var(--sp-4); font-size: var(--t-medio); color: var(--inchiostro-2); }
.ore-anno b { font-weight: var(--p-forte); color: var(--inchiostro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ore-come { margin-top: var(--sp-3); font-size: var(--t-piccolo); color: var(--muto); }

@media (max-width: 900px) {
  .ore-campi { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; width: 100%; }
}
@media (max-width: 640px) {
  .ore-frase { line-height: 1.4; }
  .ore-frase b { display: block; margin: var(--sp-1) 0 var(--sp-2); font-size: clamp(48px, 14vw, 60px); }
}

/* ── Per chi si allena: l'app e Rift Pro, due carte con le stesse righe ─── */
.atleti-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.atleti-carta { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--sp-3); padding: clamp(24px, 3vw, 40px); border: var(--bordo-forte); border-radius: var(--r); }
.atleti-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.atleti-testa h3 { font-size: var(--t-medio); }
.atleti-testa .pastiglia { align-self: center; }
.atleti-cifra { margin-top: var(--sp-3); padding-bottom: 0.08em; font-family: var(--font-titolo); font-weight: var(--p-titolo); font-size: clamp(48px, 4.4vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; } /* la virgola di Antonio scende sotto la riga */
.atleti-unita { font-size: var(--t-corpo); color: var(--muto); text-wrap: pretty; }
.atleti-unita span { display: block; }
.atleti-voci { display: grid; align-content: start; gap: var(--sp-3); margin-top: var(--sp-4); }
.atleti-voci li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-2); color: var(--inchiostro-2); text-wrap: pretty; }
.atleti-voci b { font-weight: var(--p-forte); color: var(--inchiostro); }
.atleti-voci .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--inchiostro); }
.atleti-piede { align-self: end; margin-top: var(--sp-3); }
.atleti-nota { align-self: end; margin-top: var(--sp-3); font-size: var(--t-piccolo); color: var(--inchiostro-2); text-wrap: pretty; }
.atleti-nota small { display: block; margin-top: var(--sp-2); font-size: var(--t-minimo); color: var(--muto); }


/* Chiusura: il titolo e i due tasti */
.pagina-prezzi .chiusura .tasti { margin-top: var(--sp-6); }

/* ── Larghezze ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .compreso-pagine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .prezzi-testa, .compreso { grid-template-columns: minmax(0, 1fr); }
  .calcolatore-campo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "domanda" "numero" "pista"; }
  .calcolatore-pista { padding-top: var(--sp-2); }
}
/* Sotto 860px tre carte affiancate non ci stanno più: una sotto l'altra, prezzo e unità sulla stessa riga */
@media (max-width: 860px) {
  .piani { grid-template-columns: minmax(0, 1fr); }
  .piano-prezzo { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); margin-top: var(--sp-3); }
  .piano-cliente { margin-top: var(--sp-3); }
  .piano-piede { padding-top: var(--sp-4); }
  .js .piano-conto:empty { display: none; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .piano-piede .tasto { justify-self: start; width: auto; min-width: 240px; }
}
@media (max-width: 760px) {
  .atleti-due { grid-template-columns: minmax(0, 1fr); }
  .prezzi .disegno-anelli { display: none; } /* ne restava un triangolino sotto la testata */
}
@media (max-width: 640px) {
  .compreso-pagine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .cadenza label { min-width: 0; }
  .calcolatore-unita { font-size: var(--t-titoletto); }
  .calcolatore-passi { margin-left: auto; }
}

/* Col mensile la riga sotto il prezzo è vuota (lì c'è l'invito all'annuale): non tiene spazio */
.pagina-prezzi:has(#periodo-mese:checked) .piano-cliente { display: none; }

/* ── Impaginato centrato (vedi site.css) ─────────────────────────────────── */
.prezzi-testa { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.prezzi-lato { justify-items: center; }
.prezzi-lato .lead { max-width: 58ch; }
/* La riga dell'accesso anticipato, come quella sotto l'hero della home */
.prezzi-lato .stato { margin-top: 0; justify-content: center; flex-wrap: wrap; text-align: center; }
.cadenza-riga { justify-content: center; }
.listino, .atleti-due { max-width: var(--largo); margin-inline: auto; }
.compreso { grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: var(--largo); margin-inline: auto; text-align: center; }
.compreso-testo { max-width: none; }
.compreso-testo b { display: block; }
/* 14 voci (dal 2026-11-03 anche Percorsi e Videochiamate): la riga che avanza sta al
   centro, come il resto della pagina, invece di restare appoggiata a sinistra. */
/* Sette per riga: con l'elenco di oggi vengono due righe pari. Se l'elenco cambia, ricontrollare */
.compreso-pagine { --per-riga: 7; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; text-align: left; }
.compreso-pagine li { flex: 0 0 calc((100% - (var(--per-riga) - 1) * var(--sp-2)) / var(--per-riga)); }
@media (max-width: 1100px) { .compreso-pagine { --per-riga: 4; } }
@media (max-width: 640px) { .compreso-pagine { --per-riga: 2; } }
/* Il conto: la domanda, il numero e sotto il cursore, tutto sull'asse */
.calcolatore { justify-items: center; }
.calcolatore-campo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "domanda" "numero" "pista"; justify-items: center; width: 100%; }
.calcolatore-pista { width: min(100%, var(--quadro)); padding-top: var(--sp-2); }
.calcolatore-consiglio { text-align: center; }