/* ============================================================
   LE CHIAMATE ALL'AZIONE — quarta consegna di design
   Caricato dopo i fogli di pagina e prima di quello del piede.

   Prima c'erano dodici classi a fare il mestiere di quattro, con
   quattro altezze scelte una alla volta. Qui ce ne sono quattro,
   tre misure e sei stati.

   QUATTRO VARIANTI
     primaria    l'azione per cui la pagina esiste. Una sola per
                 schermata: se ce ne sono due, una non lo e'.
     secondaria  un'alternativa vera, non un ripiego.
     terziaria   ripensamento, ritorno, servizio. Quante servono.
     spenta      azione che esistera' ma non ancora.

   TRE MISURE — l'altezza non si sceglie a occhio
     L  60 / 56 sul telefono   azione principale, invio dei moduli
     M  52 / 48                testata, azioni dentro le schede
     S  44 / 44                terziarie e azioni di servizio

   La S non scende mai sotto 44 su nessun formato: e' il minimo
   perche' un pollice colpisca il bersaglio, non una scelta
   estetica.

   LE SUPERFICI
   La variante non cambia, cambia come si veste. Il pulsante
   bianco su fondo blu non e' un componente diverso: e' la
   primaria vista su un altro fondo. Trattarlo come variante a se'
   significherebbe inventarne una nuova a ogni fondo nuovo.

   NAVIGAZIONE ESCLUSA
   Le pillole del menu NON ereditano queste classi. Sono
   navigazione: un menu di sei voci tutte a forma di pulsante non
   ha gerarchia, e accanto alla primaria vera nessuno distingue
   piu' qual e' l'azione della pagina.
   ============================================================ */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--_project-font---border-radius--58);
  font-family: var(--_project-font---project-font--font-family, inherit);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ------------------------------------------------------------
   LE TRE MISURE
   ------------------------------------------------------------ */
.cta--l { height: 60px; padding: 0 34px; }
.cta--m { height: 52px; padding: 0 26px; }
.cta--s { height: 44px; padding: 0 18px; }

@media screen and (max-width: 767px) {
  .cta--l { height: 56px; }
  .cta--m { height: 48px; }
  /* la S resta 44: sotto non si scende */
}

/* Larghezza piena: non e' una variante ma un modificatore.
   Obbligatorio sul telefono per l'invio dei moduli, vietato sul
   desktop, dove un pulsante largo 680px smette di leggersi come
   pulsante. */
.cta--piena { width: 100%; }

@media screen and (min-width: 992px) {
  .cta--piena.solo-mobile { width: auto; }
}

/* Due comandi a larghezza piena impilati: 8px di stacco, e il
   secondo e' terziario. Mai due rettangoli identici uno
   sull'altro: ci si tocca per sbaglio. */
.cta--piena + .cta--piena { margin-top: 8px; }

/* ------------------------------------------------------------
   LE QUATTRO VARIANTI, su fondo chiaro
   ------------------------------------------------------------ */
.cta--primaria {
  background-color: var(--primary-color);
  color: var(--neutral-01);

  /* Trasparente a riposo, non assente: il contorno compare al
     passaggio del mouse, e se nascesse li' il testo si sposterebbe a
     ogni sfioramento.

     2px e non 1,5 come la secondaria: li' il filo e' fermo e si
     legge comunque, qui dentro ci corre un gradiente, e a un pixel e
     mezzo il colpo di luce si assottiglia al punto da non vedersi
     piu'. La differenza non si nota: l'altezza e' fissa e il
     riquadro e' border-box, quindi cambia solo il mezzo pixel di
     spazio interno, non l'ingombro. */
  border: 2px solid transparent;
}

/* Lo stesso colore vale per il fuoco, che sta fuori da
   @media (hover: hover) perche' serve anche dove il mouse non c'e'. */
.cta--primaria:focus-visible { background-color: var(--cta-fondo-entrata); }

.cta--secondaria {
  background-color: var(--neutral-01);
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
}

.cta--terziaria {
  background-color: #0000;
  color: var(--primary-color);
  padding-left: 0;
  padding-right: 0;
}

.cta--spenta {
  background-color: var(--disabled-bg-color);
  color: var(--disabled-text);
  cursor: default;
  pointer-events: none;
}

/* ------------------------------------------------------------
   DISABILITATO SENZA LA CLASSE

   .cta--spenta e' la via scelta a mano, in pagina. Ma un pulsante
   puo' diventare inagibile in altri due modi, e finora nessuno dei
   due si vedeva:

   - <button disabled>, che un modulo puo' avere da sempre o ricevere
     da uno script: restava identico a un pulsante funzionante, e si
     capiva solo premendolo e non ottenendo niente;
   - aria-disabled="true", che js/posti.js mette sul comando quando
     una classe e' al completo (vedi spegniClasse, riga 176). Li' il
     testo diventa "Posti esauriti" e l'href sparisce, ma il pulsante
     restava blu e invitante: una contraddizione fra quello che
     diceva e quello che sembrava.

   Hanno lo stesso aspetto perche' dicono la stessa cosa.

   La differenza che resta e' voluta: disabled non si puo' mettere a
   fuoco e si toglie dalla navigazione, quindi gli si puo' spegnere
   anche il puntatore; aria-disabled invece DEVE restare
   raggiungibile - e' tutto il motivo per cui esiste - perche' chi
   naviga con la tastiera o con un lettore di schermo deve poterci
   arrivare e sentirsi dire che e' esaurito, non trovare il vuoto. */
.cta:disabled,
.cta[aria-disabled="true"] {
  background-color: var(--disabled-bg-color);
  background-image: none;
  border-color: transparent;
  color: var(--disabled-text);
  animation: none;
  transform: none;
}

.cta:disabled { cursor: default; }

/* Il cursore dice "non qui" prima ancora che si provi. Niente
   pointer-events: none, altrimenti sparisce anche il cursore - e
   sparirebbe con lui la sola spiegazione che arriva prima del
   click. */
.cta[aria-disabled="true"] { cursor: not-allowed; }

/* ------------------------------------------------------------
   GLI STATI
   ------------------------------------------------------------ */

/* Il colore di fondo degli stati. Sta sotto alla mappa, che lo copre
   del tutto, e serve a due cose sole: dare qualcosa da sfumare
   all'entrata - background-color si anima, background-image no - e
   reggere da solo se un browser non sa disegnare i gradienti.
   (Il riferimento a GSAP che stava qui e' caduto il 05/10 insieme
   alla libreria: il passaggio del mouse adesso e' tutto CSS.) */
@media (hover: hover) {
  /* Va nella stessa direzione della mappa: verso il chiaro. Prima era
     --primary-color-hover, cioe' il verso opposto, e nell'istante
     prima che la mappa comparisse il pulsante si scuriva. E' il
     primario spostato verso il viola della mappa, perche' e' quello
     il colore medio di cio' che arriva subito dopo. Contrasto col
     bianco 6,44. */
  .cta--primaria:hover { background-color: var(--cta-fondo-entrata); }
  .cta--secondaria:hover {
    background-color: var(--primary-color);
    color: var(--neutral-01);
  }
  /* La terziaria non si riempie: diventerebbe un pulsante.
     Le cresce solo un filo da sinistra. */
  .cta--terziaria:hover { color: var(--primary-color-hover); }
  .cta--terziaria:hover .cta-filo { transform: scaleX(1); }
}

.cta-filo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}

/* Pressione: nessun movimento, solo il colore. Sul telefono e'
   lo stato che sostituisce il passaggio del mouse. */
/* ------------------------------------------------------------
   IL FONDO CHE SI MUOVE  —  la primaria

   Stessa idea del campo a fuoco, portata dal bordo al fondo. Li' era
   il primario pieno su due pixel di bordo; qui sono toni piu' scuri
   su tutta la superficie, perche' sopra ci sta una parola bianca che
   deve restare leggibile.

   I tre toni non sono scelti a mano: nascono da
   --primary-color-hover, uno verso il nero e uno verso il primario
   brillante. Il giorno che il blu del marchio cambia, cambiano
   anche loro.

   Cinque secondi a giro, non tre come il campo: il campo lo guardi
   mentre ci scrivi dentro, il pulsante lo sfiori. Piu' lento vuol
   dire presente, non impaziente.

   --cta-angolo e non --angolo: quello del campo sta in
   restyling-moduli.css, che non tutte le pagine caricano, e due
   @property con lo stesso nome in due fogli sono un guaio che si
   manifesta solo dove si incontrano.

   Ha sostituito l'onda disegnata con GSAP, tolta il 05/10: erano due
   risposte alla stessa domanda - come arriva il fondo del passaggio
   del mouse - e sulla stessa superficie facevano fango.
   ------------------------------------------------------------ */
/* LE TRE ANCORE DELLA MAPPA.

   Non sono tre toni dello stesso blu: quello si leggeva come una
   luce sola che gira. Sono tre colori diversi, tutti presi dalla
   tavolozza che il sito gia' usa - il viola della secondaria, il
   verde in fondo al gradiente del marchio, e l'indaco profondo che
   era il vecchio colore del passaggio del mouse.

   Viola e verde da soli sarebbero troppo chiari per reggere una
   parola bianca sopra: il viola pieno sta a 3,93 di contrasto, il
   verde molto peggio. Si smorzano quindi dentro il primario finche'
   non rientrano - al 60% e al 30% - e quello che resta e' abbastanza
   per leggerli come colori distinti, non come sfumature del blu.

   Misurato col bianco: viola 5,25, verde 5,06, indaco 12,27,
   primario 7,33. Il punto piu' chiaro della mappa e' 5,06, cioe'
   sopra la soglia ovunque il testo capiti. */
:root {
  --cta-mesh-viola: color-mix(in srgb, var(--secondary-color) 60%, var(--primary-color));
  /* #51fd7a e' l'ultima fermata di --gaa-gradient, in css/custom.css */
  --cta-mesh-verde: color-mix(in srgb, #51fd7a 30%, var(--primary-color));
  --cta-mesh-indaco: var(--primary-color-hover);
  /* IL CONTORNO STA NELLA FAMIGLIA DEL VIOLA, non in quella del
     bianco. Prima il colpo di luce era primario annacquato all'82%
     di bianco: a quel punto non e' piu' un colore, e' un bianco con
     un ricordo. Misurato in Lab stava a 23 di distanza dal bianco e
     a 78 dal viola della tavolozza - cioe' quasi bianco e per niente
     viola.

     Adesso nasce dal viola, non dal primario, ed e' fermato a meta'
     strada: distanza 51 dal bianco, 49 dal viola pieno. Non si
     confonde ne' con l'uno ne' con l'altro, che e' esattamente il
     posto dove deve stare.

     Il tono base del contorno e' lo STESSO viola della mappa, non un
     viola imparentato: sono la stessa variabile, e se un giorno si
     sposta si spostano insieme. Scurendolo da #9489fc a questo viola
     il colpo di luce stacca di piu' di prima - 2,72 contro 2,11 -
     quindi il contorno si vede girare meglio, non peggio.

     Il tratto chiaro contro la pagina bianca passa da 1,30 a 1,83: e'
     il punto che prima quasi spariva quando la luce passava sul lato
     esterno. */
  /* Il colore che sta sotto la mappa: serve a dare qualcosa da
     sfumare all'entrata, perche' background-color si anima e
     background-image no. Contrasto col bianco 6,44. */
  --cta-fondo-entrata: color-mix(in srgb, var(--cta-mesh-viola) 45%, var(--primary-color));
  --cta-bordo-medio: var(--cta-mesh-viola);
  --cta-bordo-luce: color-mix(in srgb, var(--secondary-color) 50%, #fff);
}

@property --cta-angolo {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Il nome NON e' cta-gira: quello esiste gia' piu' sotto ed e' la
   rotazione della girandola del caricamento. Due @keyframes con lo
   stesso nome non danno errore - vince l'ultima scritta - e il
   pulsante si metteva a ruotare su se' stesso, testo compreso. */
@keyframes cta-fondo-gira {
  to { --cta-angolo: 360deg; }
}

/* LA MAPPA A TRE PUNTI.

   Tre chiazze di colore che vagano, ognuna per conto suo. Il nodo e'
   proprio quel "per conto suo": prima erano tre, ma si muovevano
   dentro la stessa animazione e tornavano insieme al punto di
   partenza ogni quattordici secondi. Tre cose che ripartono insieme
   non sono tre cose - sono una cosa sola che ruota, ed e' esattamente
   come si vedeva.

   Adesso ogni punto ha due movimenti separati, uno orizzontale e uno
   verticale, e tutti e sei durano un numero PRIMO di secondi: 11, 13,
   17, 19, 23, 29. Due cicli tornano in fase solo dopo il loro minimo
   comune multiplo, e fra numeri primi quello e' il prodotto: questi
   sei si riallineano dopo circa milleottocento ore. Nessuno vedra'
   mai questa mappa ripetersi.

   Dentro, ogni punto disegna una figura di Lissajous - la stessa cosa
   che fa un pendolo appeso a due fili di lunghezza diversa. Non e'
   casualita' vera, ma a vedersi non si distingue, e non costa un
   generatore di numeri casuali ne' una riga di JavaScript. */
@keyframes cta-p1x { 0%, 100% { --cta-p1x:  4%; } 50% { --cta-p1x:  96%; } }
@keyframes cta-p1y { 0%, 100% { --cta-p1y: -15%; } 50% { --cta-p1y:  75%; } }
@keyframes cta-p2x { 0%, 100% { --cta-p2x: 92%; } 50% { --cta-p2x:   8%; } }
@keyframes cta-p2y { 0%, 100% { --cta-p2y: 115%; } 50% { --cta-p2y:  25%; } }
@keyframes cta-p3x { 0%, 100% { --cta-p3x: 24%; } 50% { --cta-p3x:  78%; } }
@keyframes cta-p3y { 0%, 100% { --cta-p3y: 100%; } 50% { --cta-p3y: -10%; } }

/* I sei valori vanno registrati, altrimenti il browser li tratta come
   testo e un testo non si interpola: salterebbero da un estremo
   all'altro. E' la stessa ragione per cui --cta-angolo e' registrato
   qui sopra. */
@property --cta-p1x { syntax: '<percentage>'; initial-value: 4%; inherits: false; }
@property --cta-p1y { syntax: '<percentage>'; initial-value: -15%; inherits: false; }
@property --cta-p2x { syntax: '<percentage>'; initial-value: 92%; inherits: false; }
@property --cta-p2y { syntax: '<percentage>'; initial-value: 115%; inherits: false; }
@property --cta-p3x { syntax: '<percentage>'; initial-value: 24%; inherits: false; }
@property --cta-p3y { syntax: '<percentage>'; initial-value: 100%; inherits: false; }

/* IL DISEGNO, SCRITTO UNA VOLTA SOLA.

   Mouse e tastiera devono vedere la stessa cosa: e' una delle regole
   di RITOCCHI-UI.md, e due copie dello stesso gradiente sono due
   copie che fra un mese divergono. Il disegno sta quindi in una
   variabile, e i due stati la richiamano.

   Non si puo' invece mettere l'intera regola in un selettore solo:
   il passaggio del mouse va chiuso dentro @media (hover: hover),
   altrimenti sul telefono resta INCOLLATO dopo il tocco e il
   pulsante sembra acceso per sempre. Il fuoco no, quello serve
   ovunque - anche a chi ha una tastiera attaccata al telefono.

   I tre punti sono CERCHI IN PIXEL, non in percentuale: 170px
   comunque sia largo il pulsante. In percentuale una chiazza si
   stirava con la larghezza, e su un pulsante lungo diventava una
   fascia orizzontale - cioe' di nuovo una sfumatura sola, che e' il
   difetto da cui si parte.

   La sfumatura arriva fino a transparent senza fermate intermedie:
   e' la caduta piu' morbida che si possa scrivere, ed e' quella che
   fa sembrare i tre punti fusi invece che sovrapposti. */
.cta--primaria {
  --cta-mappa:
    radial-gradient(circle 170px at var(--cta-p1x) var(--cta-p1y), var(--cta-mesh-viola), transparent),
    radial-gradient(circle 190px at var(--cta-p2x) var(--cta-p2y), var(--cta-mesh-verde), transparent),
    radial-gradient(circle 150px at var(--cta-p3x) var(--cta-p3y), var(--cta-mesh-indaco), transparent),
    linear-gradient(var(--primary-color), var(--primary-color)),
    conic-gradient(
      from var(--cta-angolo),
      /* Il colpo di luce e' STRETTO - meno di un sesto del giro -
         perche' e' la sua strettezza a farlo sembrare veloce. Un
         chiaro diffuso su tutto il contorno gira uguale ma non si
         vede girare. */
      var(--cta-bordo-medio) 0deg,
      var(--cta-bordo-luce) 26deg,
      var(--cta-bordo-medio) 74deg,
      /* E qui il contorno si spegne quasi del tutto: senza un tratto
         scuro il colpo di luce non avrebbe da dove uscire. */
      var(--primary-color) 190deg,
      var(--cta-bordo-medio) 360deg
    );

  /* ease-in-out e non linear: un punto che rallenta agli estremi e
     riprende velocita' in mezzo sembra spinto da qualcosa. A
     velocita' costante sembra trascinato. */
  --cta-moto:
    cta-p1x 11s ease-in-out infinite,
    cta-p1y 13s ease-in-out infinite,
    cta-p2x 17s ease-in-out infinite,
    cta-p2y 19s ease-in-out infinite,
    cta-p3x 23s ease-in-out infinite,
    cta-p3y 29s ease-in-out infinite,
    cta-fondo-gira 2.8s linear infinite;
}

@media (hover: hover) {
  .cta--primaria:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
    background-image: var(--cta-mappa);
    background-origin: border-box;
    background-clip: padding-box, padding-box, padding-box, padding-box, border-box;
    animation: var(--cta-moto);
  }
}

/* IL FUOCO VEDE QUELLO CHE VEDE IL MOUSE.

   Prima chi arrivava col tasto di tabulazione trovava un anello
   azzurro e un pulsante spento, mentre chi arrivava col mouse
   trovava il pulsante vivo. Stesso comando, due risposte diverse, e
   la piu' povera toccava a chi non puo' scegliere.

   L'anello resta - sta piu' sotto, ed e' lui a dire DOVE si e' - ma
   adesso sotto l'anello il pulsante si accende come per tutti. */
.cta--primaria:focus-visible:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  background-image: var(--cta-mappa);
  background-origin: border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, border-box;
  animation: var(--cta-moto);
}

/* Senza movimento resta il fondo scuro e basta: la stessa
   informazione, detta ferma. */
/* Senza movimento la mappa resta, ferma: e' la stessa immagine, solo
   bloccata in una posa scelta a mano invece che in quella in cui
   capita. Spegnerla del tutto toglierebbe anche il colore, che non
   era stato chiesto di perdere: si ferma quello che si muove, non
   quello che si vede. */
@media (prefers-reduced-motion: reduce) {
  .cta--primaria:hover,
  .cta--primaria:focus-visible {
    background-image:
      radial-gradient(circle 170px at 18% 10%, var(--cta-mesh-viola), transparent),
      radial-gradient(circle 190px at 88% 90%, var(--cta-mesh-verde), transparent),
      radial-gradient(circle 150px at 52% 120%, var(--cta-mesh-indaco), transparent),
      linear-gradient(var(--primary-color), var(--primary-color));
    background-clip: padding-box;
    animation: none;
    /* Il contorno resta, fermo: e' il segnale, non la decorazione. */
    border-color: var(--cta-bordo-medio);
  }
}


/* La pressione va dall'altra parte: il passaggio del mouse accende,
   il dito spinge dentro. E' il solo stato che resta scuro, ed e'
   giusto che sia l'opposto di quello sopra - altrimenti premere non
   si distinguerebbe da sfiorare. */
.cta--primaria:active {
  background-color: var(--primary-color-hover);
  background-image: none;
  animation: none;
  border-color: transparent;
}
.cta--secondaria:active {
  background-color: var(--primary-color);
  color: var(--neutral-01);
}

/* ------------------------------------------------------------
   LA PRESSIONE LUNGA

   Un tocco e una pressione tenuta non sono la stessa cosa, e finora
   davano la stessa risposta: il colore cambiava di colpo e li'
   restava. Chi tiene premuto - perche' la rete e' lenta, perche' non
   e' sicuro, perche' sta decidendo - non riceveva nessun segno che
   il pulsante lo stesse ancora sentendo.

   Il trucco e' tutto nei tempi. La rientranza impiega 450ms ad
   arrivare in fondo, quindi un tocco secco (un decimo di secondo) la
   percorre appena e si vede un cenno; una pressione tenuta la
   percorre tutta e il pulsante affonda davvero. Il ritorno e' piu'
   svelto, 160ms, perche' un rilascio lento sembra un pulsante che si
   e' inceppato.

   Solo i due pulsanti pieni. La terziaria e' un collegamento con un
   filo sotto: rimpicciolirla la farebbe sembrare un pulsante, che e'
   esattamente quello che non e'. */
.cta--primaria:active,
.cta--secondaria:active {
  transform: scale(.965);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              background-color .25s ease, border-color .25s ease, color .25s ease;
}

.cta--primaria,
.cta--secondaria {
  transition: transform .16s ease-out,
              background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Su iOS il sistema dipinge un velo grigio sopra tutto il pulsante
   appena lo si tocca. Non e' il nostro stato di pressione: ci litiga,
   arriva prima e sta sopra, quindi la rientranza non si vedeva. */
.cta {
  -webkit-tap-highlight-color: transparent;
}

.cta:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   OCCUPATO — stato nuovo
   Parte all'invio e dura finche' il server non risponde. NON e'
   lo stato spento: spento vuol dire "non si puo'", occupato vuol
   dire "sto gia' facendo". Confonderli fa credere che il modulo
   sia stato rifiutato.

   Serve piu' sul telefono che sul desktop: in rete mobile fra il
   tocco e la risposta passano secondi, e senza segnale la gente
   preme due volte e arrivano due candidature.
   ------------------------------------------------------------ */
.cta[aria-busy="true"] {
  pointer-events: none;

  /* La mappa si FERMA, non sparisce. Se il dito era sul pulsante
     quando e' partito l'invio, il fondo stava gia' derivando: farlo
     continuare mentre si aspetta il server dice "sto giocando",
     non "sto lavorando". Il colore resta pieno perche' il pulsante
     e' ancora acceso - a dire l'attesa ci pensa la girandola.

     Non si abbassa l'opacita': un pulsante sbiadito e' il modo in
     cui si disegna un pulsante spento, e spento vuol dire "non si
     puo'", che e' l'informazione opposta. */
  background-image: none;
  animation: none;
  transform: none;
}

.cta[aria-busy="true"] .cta-girandola {
  display: inline-block;
}

.cta-girandola {
  display: none;
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: #0000;
  border-radius: 100px;
  animation: cta-gira .7s linear infinite;
}

@keyframes cta-gira {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   IL BADGE DELLO STATO SPENTO
   Sta a cavallo del bordo superiore, allineato a destra, meta'
   dentro e meta' fuori, con un anello bianco che lo stacca dal
   fondo grigio.

   ATTENZIONE: il badge esce dai bordi, quindi il pulsante che lo
   ospita NON puo' avere overflow: hidden. Fino al 05/10 l'onda del
   passaggio del mouse lo imponeva, e i due rischiavano di
   scontrarsi; adesso che l'onda non c'e' piu' il rischio e'
   rientrato, ma la riga resta per chi un domani volesse ritagliare
   il pulsante per qualche altro motivo.
   ------------------------------------------------------------ */
.cta--spenta {
  overflow: visible;
  margin-top: 6px;
}

.cta-badge {
  position: absolute;
  top: -11px;
  right: 16px;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--secondary-color);
  box-shadow: 0 0 0 3px var(--neutral-01);
  color: var(--neutral-01);
  font-family: var(--_project-font---project-font--secondary-font, inherit);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   LE SUPERFICI
   I rapporti di contrasto sono quelli reali del design system:
   dove il bianco non passa, il testo diventa scuro.
   ------------------------------------------------------------ */

/* Fondo neutral-02: il solo bordo della secondaria sparisce sul
   grigio verdino, quindi le si da' un fondo bianco pieno. */
.su-neutro .cta--secondaria { background-color: var(--neutral-01); }

/* Fondo blu del marchio. Vietato il gradiente qui: attraversa
   questo stesso blu e buca la parola. */
.su-blu .cta--primaria { background-color: var(--neutral-01); color: var(--primary-color); }
.su-blu .cta--secondaria { background-color: #0000; border-color: var(--neutral-01); color: var(--neutral-01); }
.su-blu .cta--terziaria { color: var(--neutral-01); }
.su-blu .cta:focus-visible { outline-color: var(--neutral-01); }

@media (hover: hover) {
  .su-blu .cta--primaria:hover { background-color: var(--neutral-02); color: var(--primary-color); }
  .su-blu .cta--secondaria:hover { background-color: var(--neutral-01); color: var(--primary-color); }
  .su-blu .cta--terziaria:hover { color: var(--neutral-02); }
}

/* Fondo viola: il bianco qui da' 3.93:1, sotto la soglia. Il
   testo passa a neutral-04, che da' 4.74:1. */
.su-viola .cta--primaria { background-color: var(--neutral-01); color: var(--primary-color); }
.su-viola .cta--secondaria { background-color: #0000; border-color: var(--neutral-04); color: var(--neutral-04); }
.su-viola .cta--terziaria { color: var(--neutral-04); text-decoration: underline; }
.su-viola .cta:focus-visible { outline-color: var(--neutral-01); }

/* Fondo verde: il bianco qui da' 1.34:1, illeggibile. */
.su-verde .cta--primaria { background-color: var(--neutral-04); color: var(--neutral-01); }
.su-verde .cta--secondaria { background-color: #0000; border-color: var(--neutral-04); color: var(--neutral-04); }
.su-verde .cta--terziaria { color: var(--neutral-04); text-decoration: underline; }
.su-verde .cta:focus-visible { outline-color: var(--neutral-04); }

/* Fondo scuro: il blu del marchio su nero stacca 2.53:1 e il
   pulsante affoga. Finche' non esiste un blu pensato per i fondi
   scuri, qui resta il bianco pieno. */
.su-scuro .cta--primaria { background-color: var(--neutral-01); color: var(--neutral-04); }
.su-scuro .cta--secondaria { background-color: #0000; border-color: var(--neutral-01); color: var(--neutral-01); }
.su-scuro .cta--terziaria { color: var(--neutral-01); }
.su-scuro .cta:focus-visible { outline-color: var(--neutral-01); }

/* ------------------------------------------------------------
   AZIONI DISTRUTTIVE
   Nessun pulsante rosso: destructive-text su bianco da' 4.15:1 e
   il fondo rosso col bianco 4.16:1, entrambi sotto la soglia per
   il testo a 16px. In questo design system un pulsante rosso oggi
   non passa, quindi rimuovere e' una terziaria scura sottolineata
   con un'icona esplicita. Il rosso resta dove funziona: gli
   errori dei moduli.
   ------------------------------------------------------------ */
.cta--distruttiva {
  color: var(--neutral-04);
  text-decoration: underline;
}

@media (hover: hover) {
  .cta--distruttiva:hover { color: var(--neutral-04); }
}


/* Chi ha chiesto meno animazioni le perde tutte e tiene il
   cambio di fondo: non e' un ripiego di serie B, e' la stessa
   informazione detta senza movimento. */
@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta--primaria,
  .cta--secondaria { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }

  /* La rientranza della pressione sparisce, e il colore resta a dire
     la stessa cosa. Si perde la distinzione fra tocco e pressione
     tenuta - e' il prezzo, ed e' onesto pagarlo qui: quella
     distinzione era un di piu', il sapere di essere stati sentiti
     no, e quello rimane.

     Vanno elencate per nome perche' la regola che aggiunge la
     rientranza e' .cta--primaria:active, piu' specifica di .cta: un
     .cta generico non la raggiungerebbe e il movimento resterebbe
     acceso proprio a chi ha chiesto di non averlo. */
  .cta--primaria:active,
  .cta--secondaria:active { transform: none; }

  .cta-girandola { animation-duration: 1.4s; }
}

/* ------------------------------------------------------------
   LILLA (14/10/2026): il colore di Pro Hospitality. Lo portano
   tutti i comandi "Iscriviti ora" del sito e "Scopri Pro
   Hospitality" in home. Testo bianco: #9d5cf0 regge il contrasto.
   ------------------------------------------------------------ */
.cta--lilla {
  background-color: #9d5cf0;
  color: var(--neutral-01);
  border: 2px solid transparent;
}
@media (hover: hover) {
  .cta--lilla:hover { background-color: #8a45e6; color: var(--neutral-01); }
}
.cta--lilla:active { background-color: #7a36d6; }
.cta--lilla:focus-visible {
  background-color: #8a45e6;
  outline: 3px solid #9d5cf0;
  outline-offset: 3px;
}