/* MARCA_76401_PREZZI_INTERAZIONE
   ═══════════════════════════════════════════════════════════════════════════
   LA SEZIONE DEI PIANI SI MUOVE (direttiva D78, 14 settembre 2026)
   ---------------------------------------------------------------------------
   Giovanni ha indicato due componenti di 21st.dev:
     - «Pricing Interaction» (ln-dev7): l'interruttore mese/anno con il
       cursore che scorre, il piano scelto evidenziato da una cornice che
       si sposta, il numero del prezzo che cambia con un movimento.
     - «Pricing» (Codehagen): le schede in fila, il piano consigliato un
       gradino piu' in alto con la stellina, il pulsante che si riempie
       di colore al passaggio del mouse.
   Quelli sono scritti in React e Tailwind; il sito no. Qui c'e' lo stesso
   aspetto rifatto con i colori, i caratteri e gli arrotondamenti del sito
   (solo variabili di css/temi.css: il tema scuro vale da solo).

   COSA NON CAMBIA: nessuna parola, nessun prezzo, nessun collegamento.
   Le pagine italiane e inglesi restano agganciate perche' il testo e'
   identico. Se il programma non parte, le schede restano esattamente
   com'erano: ogni regola qui sotto vale solo con la classe «pi-attivo»,
   che mette il programma js/prezzi-interazione.js.

   Chi preferisce meno movimento (impostazione del telefono o del Mac)
   vede tutto fermo: le regole generali di sito.css spengono le
   transizioni, e il programma non fa scorrere i numeri.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. L'INTERRUTTORE MESE / ANNO: il cursore bianco scorre ───────────── */
.interruttore.pi-attivo{position:relative;isolation:isolate}
.interruttore.pi-attivo button{position:relative;z-index:1;min-height:44px}
.interruttore.pi-attivo button[aria-pressed="true"]{background:transparent;box-shadow:none}
.pi-cursore{
  position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;
  border-radius:var(--r-gg);background:var(--surface);box-shadow:var(--shadow-sm);
  pointer-events:none;
  transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1);
}
.interruttore button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 2. LE SCHEDE ───────────────────────────────────────────────────────── */
.piani-in-fila.pi-attivo{position:relative}
.piani-in-fila.pi-attivo > .piano{
  transition:box-shadow var(--tr),border-color var(--tr);
}
@media (hover:hover){
  .piani-in-fila.pi-attivo > .piano:hover{box-shadow:var(--shadow);border-color:var(--accent-bright)}
  .piani-in-fila.pi-attivo > .piano-consigliato:hover{border-color:var(--accent)}
  /* il pulsante si riempie (da Codehagen), solo dove c'e' un mouse */
  .piani-in-fila.pi-attivo > .piano .btn:not(.btn-forte):hover{
    background:var(--accent);border-color:var(--accent);color:var(--su-accento);
  }
}

/* il piano consigliato: la stellina dentro l'etichetta che c'e' gia' */
.piani-in-fila.pi-attivo > .piano-consigliato .piano-etichetta{display:inline-flex;align-items:center;gap:5px}
.piani-in-fila.pi-attivo > .piano-consigliato .piano-etichetta::before{
  content:"";flex:0 0 auto;width:11px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ...e un gradino piu' in alto, quando le schede stanno tutte in fila
   (da Codehagen). Lo spostamento non tocca l'allineamento delle fasce:
   e' solo visivo, e sotto i 1048 punti non c'e'. */
@media (min-width:1048px){
  .piani-in-fila.pi-attivo > .piano-consigliato{position:relative;top:-10px}
}

/* la cornice che segue il piano scelto (da Pricing Interaction) */
.pi-cornice{
  position:absolute;left:0;top:0;width:0;height:0;z-index:2;pointer-events:none;
  border:2px solid var(--accent);border-radius:calc(var(--r-l) + 5px);
  box-shadow:0 0 0 4px var(--accent-soft);opacity:0;
  transition:transform .38s cubic-bezier(.4,0,.2,1),width .38s cubic-bezier(.4,0,.2,1),
             height .38s cubic-bezier(.4,0,.2,1),opacity .2s;
}
.pi-cornice.pi-vista{opacity:1}
/* il piano scelto: il suo pulsante prende il colore pieno */
.piani-in-fila.pi-attivo > .piano.pi-scelto .btn:not(.btn-forte){
  background:var(--accent);border-color:var(--accent);color:var(--su-accento);
}

/* il piano consigliato quando e' anche quello scelto: basta la cornice,
   se no si vedono due bordi uno dentro l'altro */
.piani-in-fila.pi-attivo > .piano-consigliato.pi-scelto{border-color:var(--line)}

/* ── 3. IL PREZZO ALL'ANNO NON SI SPEZZA PIU' ────────────────────────────
   Difetto trovato guardando la pagina a 1280 punti (c'era gia' prima di
   questa consegna): premendo «All'anno», sul Pro, sul Full e sullo Studio
   il prezzo barrato andava a capo a meta' («418,80» sopra, «€» sotto) e
   anche «€ all'anno» si spezzava in due righe. Adesso il prezzo barrato
   sta su una riga sua, sopra la cifra grande, e niente si spezza. */
.pi-attivo .prezzo{flex-wrap:wrap;row-gap:2px}
.pi-attivo .prezzo .prezzo-pieno:not(:empty){flex-basis:100%;white-space:nowrap}
.pi-attivo .prezzo .periodo{white-space:nowrap}

/* ── 4. IL PREZZO BARRATO compare con una dissolvenza, non di colpo ───── */
@media (prefers-reduced-motion:no-preference){
  .pi-attivo .prezzo .prezzo-pieno:not(:empty){animation:pi-compare .35s ease-out}
}
@keyframes pi-compare{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* MARCA_76401_PREZZI_INTERAZIONE_FINE */