/* ==========================================================================
   I PACCHETTI DEL CLOUD — le quattro schede del listino.

   ⚠️ Il colore di ogni scheda arriva da `--pc`, che il PHP riempie con la
   colonna [7] di KREITA_AREE (la variante leggibile su bianco). Qui dentro non
   si scrive nessuna tinta a mano, tranne il navy di casa e i grigi.
   ========================================================================== */

.k-cl{display:grid;gap:1rem;margin-top:2rem;
  /* ⚠️ `minmax(min(15rem,100%),1fr)` e non `minmax(15rem,1fr)`: sotto quella
     larghezza la seconda forma sfonda il contenitore e il telefono scorre di
     lato. È lo stesso inciampo di tutte le altre griglie di questa pagina.
     ⚠️ 15rem perché i pacchetti sono QUATTRO: a 15rem (240px) nel contenitore
     da 1144 ne entrano quattro in fila (4·240+3·16 = 1008), che è il conto
     giusto — con una misura più larga sarebbero 3+1 e l'ultima resterebbe
     spaiata. Se un giorno diventano cinque, questo conto va rifatto. */
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}

.k-cl__s{position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(19,28,46,.12);border-radius:1.1rem;
  padding:clamp(1.2rem,2.2vw,1.6rem);
  transition:border-color .22s,box-shadow .22s,transform .22s}
/* ⚠️ Al passaggio il bordo prende il colore PIENO della scheda e non la sua
   meta': a 50% su un filo da un pixel la differenza non si vedeva, e la
   scheda sembrava non reagire. Chiesto il 9/9 («bordino colorato in hover»). */
.k-cl__s:hover{border-color:var(--pc);
  box-shadow:0 16px 38px -28px rgba(19,28,46,.6);transform:translateY(-2px)}

/* La più scelta: bordo del suo colore e un filo più staccata dalle altre.
   ⚠️ NON più grande delle altre: una scheda che sporge rompe la riga e su
   telefono, dove sono impilate, la differenza non si vedrebbe comunque. */
.k-cl__s.-evidenza{border-color:var(--pc);border-width:2px;
  box-shadow:0 20px 44px -30px color-mix(in srgb, var(--pc) 70%, transparent)}
.k-cl__bollo{position:absolute;top:-.7rem;left:clamp(1.2rem,2.2vw,1.6rem);
  background:var(--pc);color:#fff;font-family:var(--body);font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:99px}

.k-cl__nome{margin:0;font-family:var(--display);font-size:1.18rem;font-weight:700;
  line-height:1.2;letter-spacing:-.01em;color:#131C2E}
.k-cl__sp{margin:.15rem 0 0;font-size:.9rem;font-weight:600;color:var(--pc)}

/* ⚠️ `min-height`: su «Cloud 10 TB» al posto della cifra c'e' «Su richiesta»,
   che e' piu' bassa — senza un'altezza minima la pastiglia sotto partiva due
   millimetri piu' su e le quattro schede non erano in riga. */
.k-cl__prezzo{margin:.9rem 0 .2rem;min-height:2.1rem;display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem}
/* ⚠️ La CIFRA prende il colore della scheda, non il navy. Prima il colore
   stava solo nella pastiglia e nel filo del bordo — due cose piccole — e le
   quattro taglie sembravano quattro schede uguali con dentro numeri diversi.
   Messo sul numero, che e' la cosa piu' grande della scheda, il colore diventa
   il modo in cui si distinguono. ⚠️ Su «Cloud 10 TB» al posto della cifra c'e'
   «Su richiesta», che era gia' colorata: adesso le quattro sono coerenti.
   ⚠️ Contrasto: le quattro tinte stanno fra 4,0 e 4,9 su bianco, e qui il testo
   e' grande e in neretto — la soglia per il testo grande e' 3. */
.k-cl__n{font-family:var(--display);font-size:2.1rem;font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--pc)}
.k-cl__u{font-size:.92rem;color:rgba(19,28,46,.6)}
.k-cl__iva{flex-basis:100%;font-size:.78rem;color:rgba(19,28,46,.45)}
.k-cl__misura{font-family:var(--display);font-size:1.5rem;font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--pc)}
/* ⚠️ Il prezzo non ancora scritto si vede che NON è un prezzo: corsivo, grigio
   e piccolo. Messo con lo stesso peso della cifra, chi guarda in fretta legge
   «da definire» come se fosse una tariffa. */
.k-cl__vuoto{font-size:.95rem;font-style:italic;color:rgba(19,28,46,.5)}

.k-cl__riga{margin:.6rem 0 1.2rem;font-size:.9rem;line-height:1.5;color:rgba(19,28,46,.66)}

.k-cl__l{list-style:none;margin:1.1rem 0 1.4rem;padding:0;display:grid;gap:.55rem;
  /* si allunga fino a spingere il tasto in fondo: così i quattro tasti restano
     allineati anche se un pacchetto ha una voce in meno */
  flex:1 0 auto;align-content:start}
.k-cl__l li{position:relative;padding-left:1.5rem;font-size:.9rem;line-height:1.45;
  color:rgba(19,28,46,.72)}
/* ⚠️ La spunta è disegnata coi bordi e non col carattere «✓»: nei caratteri del
   sito quel glifo non c'è e il browser lo pescherebbe da un ripiego, con un
   peso e un allineamento diversi da riga a riga. */
.k-cl__l li::before{content:"";position:absolute;left:.1rem;top:.3em;
  width:.4rem;height:.7rem;border:solid var(--pc);border-width:0 2px 2px 0;
  transform:rotate(45deg)}

.k-cl__btn{width:100%;justify-content:center;margin-top:auto}
/* ⚠️ Il tasto pieno prende il colore DELLA SCHEDA, non il rosso globale: se no
   quattro schede di quattro colori avrebbero tutte lo stesso tasto rosso e il
   colore della scheda diventerebbe una decorazione senza senso. */
.k-cl__s .k-btn-a{background:var(--pc);border-color:var(--pc)}
.k-cl__s .k-btn-a:hover{background:color-mix(in srgb, var(--pc) 82%, #000)}
.k-cl__s .k-btn-g{border-color:color-mix(in srgb, var(--pc) 45%, transparent);color:#131C2E}
/* ⚠️⚠️ OHIO RICOLORA OGNI <a> AL PASSAGGIO DEL MOUSE. La sua regola sui link
   porta `color:var(--clb-link-hover-color)` — l'arancione di casa — e batte
   `.k-cl__s .k-btn-g{color:#131C2E}` perche' e' una regola di hover e arriva
   dopo. Il risultato era quattro schede di quattro colori diversi che, appena
   ci passavi sopra, scrivevano tutte con lo STESSO arancione: segnalato
   dall'utente («sempre arancione nel bottone»). Qui si dice quale colore
   prende, e non e' l'arancione ma quello della scheda — cosi' il filo del
   bordo e la parola dicono la stessa cosa.
   ⚠️ Il tasto pieno ha bisogno della stessa riga per il motivo opposto: la sua
   scritta e' bianca, e senza questa diventava arancione su fondo rosso. */
.k-cl__s .k-btn-g:hover{border-color:var(--pc);color:var(--pc)}
.k-cl__s .k-btn-a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  .k-cl__s{transition:none}
  .k-cl__s:hover{transform:none}
}

/* ==========================================================================
   IL CHECKOUT — /ordina-cloud/
   Due colonne come in un negozio: i campi a sinistra, il riepilogo a destra
   che resta sott'occhio mentre si scorre.
   ========================================================================== */

.k-co{--accent:var(--ac,#D03923);--accent-dark:var(--acd,#CB3722);
  --clb-button-color:var(--ac,#D03923);--clb-color-primary:var(--ac,#D03923)}

.k-co__griglia{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:start;
  /* ⚠️ `1fr` esplicito sulla prima colonna: con `auto` la colonna dei campi si
     allargava fino a schiacciare il riepilogo, perché i campi sono a larghezza
     piena e non oppongono nessuna larghezza minima. */
  grid-template-columns:1fr minmax(min(20rem,100%),23rem)}

.k-co__blocco{border:0;padding:0;margin:0 0 2rem}
.k-co__h{display:flex;align-items:center;gap:.6rem;padding:0;margin:0 0 1rem;
  font-family:var(--display);font-size:1.15rem;font-weight:700;color:#131C2E}
.k-co__n{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
  border-radius:50%;background:var(--ac,#D03923);color:#fff;
  font-size:.82rem;font-weight:700}

.k-co__riga{display:grid;gap:0 .8rem;margin-bottom:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr))}
.k-co__riga--tre{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr) minmax(0,.5fr)}
.k-co__c{display:flex;flex-direction:column}
.k-co__c--largo{grid-column:1/-1}
.k-co__et{display:block;margin-bottom:.35rem;font-size:.88rem;font-weight:600;color:#131C2E}
.k-co__et em{display:block;font-style:normal;font-weight:500;font-size:.78rem;
  color:rgba(19,28,46,.5)}

.k-co input[type=text],.k-co input[type=email],.k-co input[type=tel],.k-co textarea{
  width:100%;padding:.8rem .95rem;border-radius:10px;
  font-family:var(--body);font-size:16px;line-height:1.35;color:#131C2E;
  /* ⚠️ `background-color`, mai la scorciatoia `background`: quella azzera anche
     `background-image` — inciampo già costato un giro sui campi dei contatti. */
  background-color:#fff;border:1px solid rgba(19,28,46,.16);
  transition:border-color .2s,box-shadow .2s}
/* ⚠️ 16px non è un vezzo: sotto i 16 Safari su iPhone ingrandisce la pagina da
   solo quando il campo prende il fuoco, e il modulo esce dallo schermo. */
.k-co input:focus-visible,.k-co textarea:focus-visible{outline:none;
  border-color:var(--ac,#D03923);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac,#D03923) 18%, transparent)}
.k-co [aria-invalid="true"]{border-color:var(--ac,#D03923);border-width:1.5px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac,#D03923) 14%, transparent)}
.k-co textarea{resize:vertical}

/* --- la scelta della taglia --------------------------------------------- */
.k-co__scelte{display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.k-co__scelta{position:relative;display:flex;flex-direction:column;gap:.15rem;
  padding:.9rem 1rem;border:1.5px solid rgba(19,28,46,.14);border-radius:12px;
  background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.k-co__scelta:hover{border-color:rgba(19,28,46,.3)}
/* ⚠️ Il pallino del radio è nascosto ma NON `display:none`: da tastiera serve
   ancora poterlo raggiungere, e con `display:none` sparisce dal giro del Tab. */
.k-co__scelta input{position:absolute;opacity:0;width:1px;height:1px}
.k-co__scelta:has(input:checked){border-color:var(--ac,#D03923);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac,#D03923) 14%, transparent)}
.k-co__scelta:has(input:focus-visible){outline:2px solid var(--ac,#D03923);outline-offset:2px}
.k-co__sc-t{font-family:var(--display);font-weight:700;font-size:1rem;color:#131C2E}
.k-co__sc-s{font-size:.82rem;color:rgba(19,28,46,.66)} /* 27/10: era .55, contrasto 3,9 */
.k-co__sc-p{font-size:.9rem;font-weight:600;color:var(--acd,#CB3722)}

/* --- azienda o privato --------------------------------------------------- */
.k-co__due{display:grid;gap:.6rem;margin-bottom:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.k-co__tipo{position:relative;display:flex;padding:.9rem 1rem;cursor:pointer;
  border:1.5px solid rgba(19,28,46,.14);border-radius:12px;background-color:#fff;
  transition:border-color .2s,box-shadow .2s}
.k-co__tipo input{position:absolute;opacity:0;width:1px;height:1px}
.k-co__tipo:has(input:checked){border-color:var(--ac,#D03923);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac,#D03923) 14%, transparent)}
.k-co__tipo:has(input:focus-visible){outline:2px solid var(--ac,#D03923);outline-offset:2px}
.k-co__tipo b{display:block;font-size:.95rem;color:#131C2E}
.k-co__tipo em{display:block;font-style:normal;font-size:.8rem;color:rgba(19,28,46,.55)}

/* --- il nome del cloud --------------------------------------------------- */
.k-co__dom{display:flex;align-items:stretch;border:1px solid rgba(19,28,46,.16);
  border-radius:10px;background-color:#fff;overflow:hidden}
.k-co__dom:focus-within{border-color:var(--ac,#D03923);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ac,#D03923) 18%, transparent)}
/* ⚠️ Il prefisso è FUORI dal campo e non un `placeholder`: dentro sparirebbe
   appena si comincia a scrivere, ed è proprio in quel momento che serve. */
.k-co__pre{display:grid;place-items:center;padding:0 .2rem 0 .95rem;
  font-family:var(--body);font-size:16px;color:rgba(19,28,46,.55);
  background-color:rgba(19,28,46,.03);border-right:1px solid rgba(19,28,46,.1)}
.k-co__dom input{border:0!important;box-shadow:none!important;border-radius:0}
.k-co__aiuto{margin:.4rem 0 0;font-size:.84rem;line-height:1.45;color:rgba(19,28,46,.55)}

.k-co__esca{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* --- il riepilogo -------------------------------------------------------- */
.k-co__lato{position:sticky;top:110px}
.k-co__box{background-color:#fff;border:1px solid rgba(19,28,46,.12);
  border-radius:1.1rem;padding:clamp(1.2rem,2.4vw,1.6rem);
  box-shadow:0 22px 54px -40px rgba(19,28,46,.6)}
.k-co__box-h{margin:0 0 1rem;font-family:var(--display);font-size:1.1rem;
  font-weight:700;color:#131C2E}
.k-co__voce{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
.k-co__voce-t{font-weight:600;color:#131C2E}
.k-co__voce-p{font-weight:600;color:#131C2E;white-space:nowrap}
.k-co__voce-d{margin:.1rem 0 0;font-size:.84rem;color:rgba(19,28,46,.55)}
.k-co__tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(19,28,46,.12)}
.k-co__tot b{font-family:var(--display);font-size:1.35rem;color:#131C2E}
.k-co__iva{margin:.15rem 0 0;font-size:.78rem;color:rgba(19,28,46,.45)}

/* ⚠️⚠️ LA RIGA CHE DICE CHE NON SI PAGA. Sta PRIMA del tasto e con lo sfondo
   caldo, non in fondo in grigetto: chi arriva su un checkout si aspetta un
   addebito, e se non parte deve leggerlo mentre decide, non dopo. */
.k-co__nota{margin:1.1rem 0 0;padding:.8rem .9rem;border-radius:10px;
  font-size:.85rem;line-height:1.5;color:#6b4a12;
  background-color:#FDF6E7;border:1px solid #F0DCB0}
.k-co__nota b{color:#4a3208}

.k-co__privacy{display:flex;gap:.6rem;margin:1.1rem 0 0;
  font-size:.84rem;line-height:1.45;color:rgba(19,28,46,.7)}
.k-co__privacy input{margin-top:.15rem;flex:0 0 auto}
.k-co__privacy a{color:var(--acd,#CB3722);text-decoration:underline}

.k-co__invia{width:100%;justify-content:center;margin-top:1.1rem;border:0;
  cursor:pointer;font-size:16px}
.k-co__invia:disabled{cursor:progress;opacity:.75}

.k-co__esito{margin:0}
.k-co__esito.-ko{margin:.9rem 0 0;padding:.8rem .9rem;border-radius:10px;
  font-size:.88rem;line-height:1.5;color:#8d2718;
  background-color:color-mix(in srgb, var(--ac,#D03923) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--ac,#D03923) 32%, transparent)}
.k-co__esito.-ko a{color:#8d2718;text-decoration:underline}

/* --- è andata bene ------------------------------------------------------- */
.k-co__ok{max-width:34rem;margin:0 auto;text-align:left}
.k-co__ok:focus{outline:none}
.k-co__ok-segno{display:grid;place-items:center;width:56px;height:56px;
  border-radius:50%;margin-bottom:1rem;color:var(--acd,#CB3722);
  background-color:color-mix(in srgb, var(--ac,#D03923) 12%, transparent)}
.k-co__ok h2{margin:0 0 .5rem;font-family:var(--display);font-size:1.6rem;
  font-weight:700;color:#131C2E}
.k-co__ok p{margin:0 0 1rem;font-size:1rem;line-height:1.6;color:rgba(19,28,46,.7)}
.k-co__ok-nota{font-size:.85rem!important;color:rgba(19,28,46,.55)!important}

/* --- sul telefono -------------------------------------------------------- */
@media (max-width:900px){
  .k-co__griglia{grid-template-columns:1fr}
  /* ⚠️ Il riepilogo NON resta appiccicato su telefono: a schermo stretto
     occuperebbe mezza schermata e coprirebbe i campi che si stanno
     compilando. Va in fondo, dove si legge prima di confermare. */
  .k-co__lato{position:static}
  .k-co__riga--tre{grid-template-columns:1fr 1fr}
}

/* --- l'apertura del checkout: bassa e sobria ------------------------------
   ⚠️ NON a tinta piena come le altre pagine: chi arriva qui ha già deciso, e
   mezza schermata di colore fra lui e i campi è soltanto strada in più. */
.k-co__testa{padding:calc(117px + 2rem) 0 1.6rem;background-color:#fff}
.k-co__h1{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.03em;
  margin:.5rem 0 .6rem;font-weight:600;color:#131C2E}
.k-co__occhio{margin:0;max-width:56ch;font-size:1.02rem;line-height:1.55;
  color:rgba(19,28,46,.66)}
.k-co__occhio b{color:#131C2E}
.k-co-pag .k-pv__sez{padding-top:0}
@media (max-width:560px){ .k-co__testa{padding-top:calc(96px + 1.6rem)} }

/* ⚠️⚠️ IL CONTENITORE VA RIDICHIARATO QUI. `.k-pv__in` e `.k-pv__sez` stanno in
   `prova-cloud.css`, che su questa pagina NON viene accodato (quel foglio si
   accende solo dove c'è il modulo della prova). Senza queste righe il checkout
   usciva **a filo del bordo dello schermo**, senza margini e senza larghezza
   massima: non dava nessun errore, si vedeva e basta. */
.k-co-pag .k-pv__in{max-width:1192px;margin:0 auto;padding:0 1.5rem}
.k-co-pag .k-pv__sez{padding:0 0 3.6rem}
.k-co-pag .k-kicker{display:block;font-family:var(--body);font-size:13px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acd,#CB3722)}
/* ⚠️ 28/10/2026: «Invia la richiesta» usciva in DM Sans, l'unica scritta della
   pagina fuori dai due caratteri del sito. `.k-btn{font-family:var(--body)}`
   di home.css c'e', ma su un <button> vince la regola di Ohio per i bottoni:
   qui serve un selettore che pesi di piu'. */
.k-co-pag button.k-btn{font-family:var(--body,"Hanken Grotesk",system-ui,sans-serif)}

/* ⚠️⚠️ `[hidden]` DA SOLO NON BASTA su questi elementi. L'attributo vale
   `display:none`, ma è una regola del BROWSER e qualunque `display` scritto da
   noi la batte: `.k-co__c` è `display:flex`, quindi il codice fiscale restava
   visibile anche scegliendo «azienda» — disabilitato, ma lì, e chi lo vedeva
   provava a compilarlo. Serve dirlo esplicitamente, e con `!important` perché
   deve vincere su qualunque `display` venga aggiunto in futuro. */
.k-co [hidden]{display:none!important}

/* --- «persone senza limite», sotto al prezzo di ogni taglia ---------------
   ⚠️ Non è una voce dell'elenco ma una riga a sé: è la differenza vera con gli
   archivi che si pagano a testa, e in mezzo alle altre spunte si leggerebbe
   come un dettaglio. */
.k-cl__ill{margin:.55rem 0 0;padding:.5rem .7rem;border-radius:9px;
  background-color:color-mix(in srgb, var(--pc) 9%, transparent)}
.k-cl__ill b{display:block;font-size:.86rem;color:#131C2E}
.k-cl__ill span{display:block;font-size:.78rem;color:rgba(19,28,46,.6)}

/* --- la fascia «su misura», fuori dalla griglia --------------------------- */
.k-cl__oltre{display:grid;gap:1rem 1.6rem;align-items:center;margin-top:1rem;
  grid-template-columns:minmax(min(16rem,100%),1fr) minmax(min(14rem,100%),1.1fr) auto;
  padding:clamp(1.1rem,2.2vw,1.5rem);border-radius:1.1rem;
  border:1px dashed color-mix(in srgb, var(--pc) 55%, transparent);
  background-color:color-mix(in srgb, var(--pc) 5%, transparent)}
.k-cl__oltre-t h3{margin:0;font-family:var(--display);font-size:1.15rem;
  font-weight:700;color:#131C2E}
.k-cl__oltre-t p{margin:.2rem 0 0;font-size:.92rem;line-height:1.5;color:rgba(19,28,46,.68)}
.k-cl__oltre-l{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.k-cl__oltre-l li{position:relative;padding-left:1.4rem;font-size:.88rem;
  line-height:1.4;color:rgba(19,28,46,.72)}
.k-cl__oltre-l li::before{content:"";position:absolute;left:.1rem;top:.28em;
  width:.38rem;height:.66rem;border:solid var(--pc);border-width:0 2px 2px 0;
  transform:rotate(45deg)}
.k-cl__oltre .k-cl__btn{width:auto;margin:0;white-space:nowrap}

/* --- «in tutte le taglie»: le funzioni, dette una volta sola --------------
   ⚠️ `minmax(min(16rem,100%),1fr)`: sotto quella larghezza la forma senza
   `min()` sfonda il contenitore e il telefono scorre di lato. Stesso inciampo
   di tutte le altre griglie di questa pagina.
   ⚠️ Dodici voci: a 16rem nel contenitore da 1144 ne entrano tre per riga
   (3·256+2·16 = 800; la quarta farebbe 1072, che ci starebbe — quindi vengono
   QUATTRO colonne e tre righe piene). Se diventano tredici, l'ultima resta
   spaiata e il conto va rifatto. */
.k-cl__tutte{display:grid;gap:1rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.k-cl__t{display:flex;flex-direction:column;background-color:#fff;
  border:1px solid rgba(19,28,46,.1);border-radius:1rem;
  padding:clamp(1rem,2vw,1.3rem)}
.k-cl__t h4{margin:.75rem 0 .3rem;font-family:var(--display);font-size:1rem;
  font-weight:700;line-height:1.25;color:#131C2E}
.k-cl__t p{margin:0;font-size:.88rem;line-height:1.5;color:rgba(19,28,46,.66)}
.k-cl__t p strong{color:#131C2E;font-weight:600}
/* la mattonella dell'icona, come sulle altre schede del sito.
   ⚠️ Qui il colore è il NAVY di casa e non quello di un'area: queste voci non
   appartengono a una taglia, valgono per tutte, e tingerle del colore di una
   direbbe il contrario. */
.k-cl__t .k-ic{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;
  border-radius:12px;background-color:#131C2E;color:#fff}
.k-cl__t .k-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:820px){
  .k-cl__oltre{grid-template-columns:1fr}
  .k-cl__oltre .k-cl__btn{width:100%;justify-content:center}
}

/* il titolino della fascia delle funzioni */
.k-cl__tutte-testa{margin-top:2.6rem;max-width:58ch}
.k-cl__tutte-testa h3{margin:0;font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:700;color:#131C2E}
.k-cl__tutte-testa p{margin:.4rem 0 0;font-size:.98rem;line-height:1.55;color:rgba(19,28,46,.66)}

/* ==========================================================================
   /cloud-aziendale/ — quello che l'impianto dell'hosting non copre.
   ⚠️ Il resto (apertura a tinta piena, fasce, griglia, fatti) arriva da
   `hosting.css` perché l'articolo ha la classe `.k-ho`: qui NON si riscrive
   niente di quello, o le due pagine ricominciano a divergere.
   ========================================================================== */

/* i due tasti sull'apertura a tinta piena.
   ⚠️ NON `k-btn-a`/`k-btn-g`: quelli sono pensati per il fondo chiaro e il
   primo è del colore dell'area — cioè lo stesso colore del fondo qui, quindi
   sparirebbe. Sul pieno il tasto principale è BIANCO con l'inchiostro colorato.
   Contrasti su `#D03923`: bianco su rosso 4,89:1, rosso su bianco 4,89:1. */
.k-cp__tasti{margin-top:clamp(1.6rem,3vw,2.2rem)}
.k-cp__btn-pieno{background-color:#fff;color:var(--ac)}
/* ⚠️ `a.k-btn.` davanti ai due `:hover`: il colore c'era gia' scritto, ma la
   regola del tema sui link (`a:not(.-unlink):hover`) vale di piu' e vinceva
   lei — i due bottoni dell'apertura diventavano arancioni. Nota lunga in
   `home.css`. */
a.k-btn.k-cp__btn-pieno:hover{background-color:#fff;color:var(--acd);transform:translateY(-2px)}
.k-cp__btn-vuoto{border-color:rgba(255,255,255,.5);color:var(--atesto)}
a.k-btn.k-cp__btn-vuoto:hover{border-color:var(--atesto);color:var(--atesto);transform:translateY(-2px)}

/* i tre passi. ⚠️ `minmax(min(17rem,100%),1fr)`: sotto quella larghezza la
   forma senza `min()` sfonda il contenitore e il telefono scorre di lato. */
.k-cp__passi{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.k-cp__passi li{background-color:#fff;border:1px solid rgba(19,28,46,.1);
  border-radius:1.1rem;padding:clamp(1.1rem,2.2vw,1.5rem)}
.k-cp__passo-n{display:inline-block;font-family:var(--display);font-weight:700;
  font-size:.95rem;letter-spacing:.02em;color:var(--acd);
  padding:.25rem .6rem;border-radius:99px;
  background-color:color-mix(in srgb, var(--ac) 12%, transparent)}
.k-cp__passi h3{margin:.8rem 0 .35rem;font-family:var(--display);font-size:1.08rem;
  font-weight:700;line-height:1.25;color:#131C2E}
.k-cp__passi p{margin:0;font-size:.95rem;line-height:1.55;color:rgba(19,28,46,.66)}

/* ⚠️ Le schede del listino stanno dentro `.k-ho`, che ha il fondo bianco: la
   fascia dei pacchetti qui NON è `-chiara`, quindi le schede bianche su bianco
   perderebbero il contorno. Si scurisce appena il bordo. */
.k-cp .k-cl__s{border-color:rgba(19,28,46,.16)}

@media (max-width:560px){
  .k-cp__tasti .k-btn{width:100%;justify-content:center}
}

/* ⚠️⚠️ LA QUARTA SCHEDA RESTAVA SPAIATA fra gli 800 e i 1055px. Il conto:
   `auto-fit` con minimo 15rem (240px) mette tre colonne appena il contenitore
   arriva a 752px — cioè da 800px di finestra — ma la quarta colonna ne vuole
   1008, cioè 1056 di finestra. In mezzo restano 255px di larghezze in cui le
   taglie sono 3+1, con una scheda sola su una riga vuota accanto a un buco.
   ⚠️ Non si risolve abbassando il minimo: a meno di 15rem le schede diventano
   troppo strette per il loro elenco. Si impone due colonne in quella fascia,
   che fa 2+2 — due righe piene. */
@media (min-width:800px) and (max-width:1055px){
  .k-cl{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- la fisarmonica del checkout ----------------------------------------
   ⚠️ Stessa idea del modulo hosting: un passo per volta, e in cima a ogni
   passo chiuso il SUNTO di che cosa si è scelto. Senza il sunto l'accordion
   fa danni — per ricordare che taglia si era presa bisogna riaprire. */
.k-co__p{border:1px solid rgba(19,28,46,.12);border-radius:1rem;
  background-color:#fff;margin-bottom:.7rem;overflow:hidden}
.k-co__p[data-chiuso]{background-color:#FBFBFC}
.k-co__ph{margin:0;font-size:1rem}
.k-co__pb{display:flex;align-items:center;gap:.7rem;width:100%;
  padding:1rem 1.1rem;border:0;background:transparent;cursor:pointer;
  font-family:var(--body);text-align:left}
.k-co__pb:focus-visible{outline:2px solid var(--ac,#D03923);outline-offset:-2px}
.k-co__pt{font-family:var(--display);font-size:1.02rem;font-weight:700;color:#131C2E}
/* il sunto si mangia lo spazio che avanza e si accorcia coi puntini invece di
   mandare a capo il titolo del passo */
.k-co__sunto{flex:1 1 auto;min-width:0;font-size:.88rem;color:rgba(19,28,46,.66);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.k-co__p:not([data-chiuso]) .k-co__sunto{opacity:0}
/* la freccetta: disegnata coi bordi, non con un glifo che nei nostri caratteri
   non c'è e verrebbe pescato da un ripiego */
.k-co__chev{flex:0 0 auto;width:.5rem;height:.5rem;margin-left:.2rem;
  border:solid rgba(19,28,46,.45);border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.k-co__p[data-chiuso] .k-co__chev{transform:rotate(-45deg) translate(-1px,1px)}
.k-co__dentro{padding:0 1.1rem 1.2rem}
.k-co__p .k-co__riga:last-child,.k-co__p .k-co__campo:last-child{margin-bottom:0}

/* il costo del sottodominio, dentro il passo */
.k-co__costo{margin:.7rem 0 0;padding:.6rem .8rem;border-radius:9px;font-size:.9rem;
  color:#131C2E;background-color:color-mix(in srgb, var(--ac,#D03923) 8%, transparent)}
/* ⚠️ Il richiamo «non avete un dominio?» è un riquadro a parte e non una riga
   di aiuto: è un'ALTRA azione, e messo in grigetto fra gli aiuti non lo legge
   nessuno proprio nel momento in cui serve. */
.k-co__manca{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:9px;font-size:.88rem;
  line-height:1.5;color:rgba(19,28,46,.72);
  background-color:#F4F6F8;border:1px dashed rgba(19,28,46,.18)}
.k-co__manca a{color:var(--acd,#CB3722);font-weight:600;text-decoration:underline}

/* la riga del sottodominio nel riepilogo */
.k-co__voce--nome{margin-top:.7rem;padding-top:.7rem;border-top:1px dashed rgba(19,28,46,.14)}
.k-co__voce--nome em{font-style:normal;font-weight:400;font-size:.8rem;
  color:rgba(19,28,46,.5);display:block}

@media (max-width:560px){
  /* ⚠️ Su telefono il sunto va sotto al titolo, non di fianco: affiancati si
     riducono a due monconi con i puntini e non si legge né l'uno né l'altro. */
  .k-co__pb{flex-wrap:wrap}
  .k-co__sunto{flex-basis:100%;text-align:left;padding-left:2.2rem}
}

/* ==========================================================================
   /cloud-aziendale/ — LA TABELLA DEL CONFRONTO
   ⚠️ L'impianto e le misure sono quelli della tabella dell'hosting
   (`.k-cf__*`, in hosting.css, che questa pagina carica gia'): qui c'e' solo
   quello che li' non serviva, cioe' la colonna nostra messa in evidenza.
   ⚠️⚠️ La colonna nostra si distingue con un fondo tenue e una riga in cima,
   NON col colore pieno dell'area: una colonna a tinta piena in mezzo a tre
   bianche non si legge come «la nostra», si legge come «quella in offerta», e
   in una tabella di confronto e' esattamente il tono da evitare.
   ⚠️⚠️ E la riga e' dell'INCHIOSTRO del sito, non di un colore. Su questa
   pagina ce ne sono gia' due — il listino qui sopra e' ocra `#BE7D0E`, il
   bottone e' il rosso `#D03923` dell'area — e la colonna in verde acqua ne
   faceva un terzo. L'ocra non si poteva usare per il testo: misurato sul
   bianco fa **3,43 a 1**, e per una scritta che non e' grande ce ne vogliono
   4,5. Il navy risolve tutte e due le cose insieme.
   ========================================================================== */
.k-cc__t thead th.-noi,
.k-cc__t td.-noi{background:rgba(19,28,46,.045)}
.k-cc__t thead th.-noi{box-shadow:inset 0 3px 0 #131C2E}
.k-cc__t td.-noi{color:#131C2E;font-weight:600}
.k-cc__t th[scope="row"] span{display:block;font-weight:500;font-size:.82em;
  color:#5A6577;margin-top:.1rem}
/* ⚠️ Le celle restano CENTRATE, come nella tabella dell'hosting: qui dentro
   sono frasi brevi e tutte della stessa misura, e a sinistra la tabella
   diventerebbe una colonna di testo ragged. Serve solo un po' d'aria in piu',
   perche' alcune vanno a capo su due righe.
   ⚠️⚠️ `--c` VA DICHIARATO QUI. La spunta di `hosting.css` e' scritta
   `color:var(--c,var(--ac))`: sulla pagina dell'hosting `--c` glielo da' il
   pacchetto, qui non glielo da' nessuno e cadeva sul ripiego `--ac`, che su
   questa pagina e' ARANCIONE. Una spunta arancione in mezzo al verde acqua
   della colonna nostra e' esattamente il colore che su questo sito non ci
   deve stare. */
/* ⚠️ `--c` serve alla spunta di `hosting.css`, scritta `color:var(--c,var(--ac))`:
   senza, cadrebbe sull'accento della pagina, che qui e' rosso. */
.k-cc__t{--c:#131C2E}
.k-cc__t tbody td{padding:.85rem .9rem;line-height:1.4}
/* ⚠️ Il richiamo sotto la tabella: sta staccato dalle note, che sono in grigio
   piccolo, se no il bottone sembra appeso all'ultima riga di didascalia. */
.k-cc__cta{margin-top:1.8rem}

/* ══════════════════════════════════════════════════════════════════════════
   CHE COS'È — definizione a sinistra, prodotto a destra.
   ⚠️⚠️ 31/8: al posto della figura con l'interruttore, bocciata. Quella cercava
   un'idea; questa fa vedere la cosa. E' il modo in cui lo spiega un sito di
   prodotto fatto bene: noioso di proposito, e per questo si capisce.
   ⚠️ La schermata e' disegnata ma FEDELE: barra laterale, elenco con dimensione
   e data, faccine di chi ha accesso. I due cartellini stanno sulle uniche due
   cose che contano — il dominio e chi entra.
   ══════════════════════════════════════════════════════════════════════════ */
.k-cq{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.8rem,4vw,4rem);align-items:center}
.k-cq__dice .k-h2-solo{margin-top:.9rem}
.k-cq__def{margin:1rem 0 0;color:#3A4555;font-size:clamp(1rem,1.35vw,1.1rem);line-height:1.65;max-width:44ch}
.k-cq__tre{margin:1.6rem 0 0;display:grid;gap:.7rem}
.k-cq__tre div{display:flex;align-items:flex-start;gap:.6rem;font-size:15.5px;line-height:1.45}
.k-cq__tre s{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;
  margin-top:1px;background:color-mix(in srgb,var(--ac) 13%,#fff);color:var(--ac);text-decoration:none}
.k-cq__tre s svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.k-cq__nota{margin:clamp(1.6rem,3vh,2.4rem) 0 0;color:#5A6577;font-size:15px;line-height:1.65;max-width:78ch}

.k-cq__pr{position:relative}
.k-cq__f{border-radius:14px;overflow:clip;background:#fff;
  box-shadow:0 46px 90px -46px rgba(19,28,46,.55),0 0 0 1px rgba(19,28,46,.10)}
.k-cq__capo{display:flex;align-items:center;gap:.7rem;padding:.62rem .85rem;background:#F4F6F9;
  border-bottom:1px solid rgba(19,28,46,.08)}
.k-cq__pall{display:flex;gap:5px}
.k-cq__pall i{width:9px;height:9px;border-radius:50%;background:#D6DBE3}
.k-cq__url{flex:1;display:flex;align-items:center;gap:.45rem;background:#fff;border-radius:99px;
  padding:.36rem .7rem;font-size:12.5px;box-shadow:inset 0 0 0 1px rgba(19,28,46,.10);min-width:0}
.k-cq__url svg{width:12px;height:12px;flex:none;stroke:#4B9E5F;fill:none;stroke-width:2}
.k-cq__url b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-cq__url b em{font-style:normal;color:#5A6577;font-weight:400}
.k-cq__app{display:grid;grid-template-columns:168px 1fr;min-height:330px}
.k-cq__lat{background:#F7F9FC;border-right:1px solid rgba(19,28,46,.07);padding:.9rem .7rem;
  display:grid;gap:.15rem;align-content:start}
.k-cq__lat a{display:flex;align-items:center;gap:.55rem;padding:.44rem .6rem;border-radius:8px;
  font-size:13px;color:#5A6577;text-decoration:none}
.k-cq__lat a.-on{background:#fff;color:#131C2E;font-weight:600;
  box-shadow:0 4px 12px -8px rgba(19,28,46,.5),inset 0 0 0 1px rgba(19,28,46,.07)}
.k-cq__lat svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.k-cq__lat hr{border:0;border-top:1px solid rgba(19,28,46,.08);margin:.5rem .4rem}
.k-cq__main{padding:.9rem 1rem 1.1rem}
.k-cq__testa{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.k-cq__testa b{font-family:var(--k-display,"Space Grotesk",sans-serif);font-weight:700;
  font-size:1.02rem;letter-spacing:-.02em}
.k-cq__cerca{flex:1;max-width:190px;background:#F2F4F8;border-radius:99px;padding:.34rem .7rem;
  font-size:12px;color:#5A6577}
.k-cq__r{display:grid;grid-template-columns:1fr 80px 92px 72px;gap:.6rem;align-items:center;
  padding:.5rem .35rem;border-bottom:1px solid rgba(19,28,46,.06);font-size:13px}
.k-cq__r.-capo{color:#5A6577;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid rgba(19,28,46,.12);font-weight:700}
/* ⚠️ 27/10/2026: le intestazioni su una riga sola. «Condiviso» in 62px e
   «Dimensione» in 70px andavano a capo lettera per lettera («CONDIVIS / O»). */
.k-cq__r.-capo span{white-space:nowrap}
.k-cq__n{display:flex;align-items:center;gap:.55rem;min-width:0}
.k-cq__n svg{width:17px;height:17px;flex:none;stroke:var(--ac);fill:none;stroke-width:1.6}
.k-cq__n span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-cq__r span.-m{color:#5A6577}
.k-cq__cond{display:flex;align-items:center}
.k-cq__cond i{width:23px;height:23px;border-radius:50%;background:#DDE3EB;margin-left:-7px;
  box-shadow:0 0 0 2px #fff;font-size:9px;letter-spacing:-.02em;font-weight:700;color:#5A6577;
  display:grid;place-items:center;font-style:normal}
.k-cq__cond i:first-child{margin-left:0}
.k-cq__cond i.-ac{background:color-mix(in srgb,var(--ac) 18%,#fff);color:var(--ac)}

/* ⚠️ Il cartellino della condivisione sta SOTTO alla finestra, non sopra alle
   faccine: messo li' copriva proprio la cosa che deve indicare.
   ⚠️⚠️ E I COLORI SONO SCRITTI PER ESTESO, non `var(--ink)`. Quella variabile
   esisteva solo nel banco di prova: su questa pagina non e' definita, e i due
   cartellini uscivano con fondo trasparente e testo bianco — cioe' invisibili.
   Qui le uniche variabili che ci sono davvero sono `--ac` e `--c`. */
.k-cq__pin{position:absolute;background:#131C2E;color:#fff;border-radius:8px;padding:.4rem .65rem;
  font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 14px 26px -14px rgba(19,28,46,.8)}
.k-cq__pin::after{content:"";position:absolute;width:8px;height:8px;background:#131C2E;rotate:45deg}
.k-cq__pin.-url{top:-14px;left:24%}
.k-cq__pin.-url::after{left:18px;bottom:-3px}
.k-cq__pin.-cond{bottom:-16px;right:6%}
.k-cq__pin.-cond::after{right:22px;top:-3px}

/* ⚠️ Su schermo stretto la griglia unica non serve: si torna a tre elenchi uno
   sotto l'altro, e le colonne tornano a fare da scatola. */
@media (max-width:900px){
  .k-cq{grid-template-columns:1fr}
  .k-cq__app{grid-template-columns:1fr}
  .k-cq__lat{display:none}
  .k-cq__r{grid-template-columns:1fr 78px 70px}
  .k-cq__r > :nth-child(3){display:none}
  .k-cq__pin{display:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   QUELLO CHE C'È DENTRO — tre colonne di voci, non dodici riquadri.
   ⚠️⚠️ Il messaggio di questa sezione e' la QUANTITA': «tutto questo, in tutte
   le taglie, senza supplementi». Dodici schede grandi con l'icona piena
   facevano sembrare ognuna una cosa importante da leggere una alla volta — e
   1153px di altezza. Cosi' si vedono tutte insieme e la quantita' si legge.
   ⚠️ L'icona e' piccola e monocroma, dentro il testo e non sopra: e' un segno
   di riconoscimento, non un'illustrazione. Dodici quadrati rossi pieni erano
   dodici bandiere che chiedevano attenzione tutte insieme.
   ══════════════════════════════════════════════════════════════════════════ */
.k-cd3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.4rem,3vw,2.6rem);row-gap:0;margin-top:clamp(1.4rem,3vh,2.2rem)}
/* ⚠️⚠️ Le colonne e gli elenchi NON fanno da scatola: le voci vanno dritte
   nella griglia grande, se no ogni colonna si impagina per conto suo e le
   righe non si parlano. L'elenco resta un `<ul>` nel codice — per chi legge
   con la voce e' importante che sia un elenco — ma smette di impaginare. */
.k-cd3__col,.k-cd3__l{display:contents}
.k-cd3__fam{grid-column:var(--c);grid-row:1;
  display:flex;align-items:center;gap:.6rem;margin:0 0 .2rem;
  font-family:var(--k-display,"Space Grotesk",sans-serif);font-weight:700;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#5A6577}
.k-cd3__fam s{width:22px;height:3px;border-radius:99px;background:var(--ac);
  text-decoration:none;flex:none}
.k-cd3__l li{grid-column:var(--c);grid-row:var(--r);list-style:none;
  display:flex;gap:.7rem;padding:.85rem 0;height:100%;
  border-bottom:1px solid rgba(19,28,46,.09)}
/* ⚠️ La riga la disegna il BORDO IN FONDO alla voce, e la voce deve riempire
   tutta l'altezza della sua riga di griglia (`height:100%`): se no la linea si
   ferma dove finisce il testo e le tre righe orizzontali non combaciano. */
.k-cd3__l li:last-child{border-bottom:0}
/* ⚠️⚠️ OGNI ICONA STA IN UNA SCATOLA ALTA QUANTO LA PRIMA RIGA DEL TITOLO, e
   dentro ci sta in mezzo. Senza, le icone sembrano storte anche se i loro
   riquadri sono allineati al pixel — misurato: tutte 19x19, tutte a +2px dal
   titolo, e a occhio una alta e una bassa. Il motivo e' che i disegni non
   riempiono tutti allo stesso modo il loro quadrato: gli appunti lo occupano
   da cima a fondo, il segno della condivisione ne usa la meta' centrale.
   Centrare la SCATOLA sulla riga toglie di mezzo la differenza. */
.k-cd3__i{flex:none;width:20px;height:1.3rem;display:grid;place-items:center}
.k-cd3__l svg{width:19px;height:19px;display:block;
  stroke:var(--ac);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.k-cd3__l b{display:block;font-family:var(--k-display,"Space Grotesk",sans-serif);
  font-weight:700;letter-spacing:-.015em;font-size:1rem;line-height:1.3}
.k-cd3__l em{display:block;font-style:normal;color:#5A6577;font-size:14px;
  line-height:1.55;margin-top:.2rem}
.k-cd3__l em b,.k-cd3__l em strong{color:#131C2E;font-family:inherit;font-size:inherit}

/* ⚠️ Su schermo stretto la griglia unica non serve: si torna a tre elenchi uno
   sotto l'altro, e le colonne tornano a fare da scatola.
   ⚠️⚠️ 23/10/2026: QUESTE RIGHE DEVONO STARE DOPO quelle di `.k-cd3`. Erano nel
   blocco per schermo stretto più su, a parità di peso perdevano contro la
   griglia scritta dopo, e sul telefono restavano tre colonne da 90px con i
   titoli che finivano uno sopra l'altro («Calendari e appuntamenti» sotto
   l'icona di «Cifratura»). */
@media (max-width:900px){
  .k-cd3{display:block}
  .k-cd3__col{display:block;margin-bottom:1.8rem}
  .k-cd3__l{display:block;margin:0;padding:0}
  .k-cd3__l li{height:auto}
}

/* ⚠️⚠️ 27/10/2026: COLORI RIMESSI. Dal 16/10 le pagine del cloud stanno dentro
   il widget Elementor, e la regola generica del tema `.k-home .elementor p, li`
   (home.css, specificità 0-2-1) batte le regole qui sopra, che hanno una classe
   sola: i titoli delle funzioni, la domanda e la conclusione del calcolatore e
   il riquadro «Qui non si paga niente» dell'ordine erano diventati grigi.
   Si rimette il colore voluto con `.k-home .elementor` davanti. Se si aggiunge
   un paragrafo colorato e torna grigio, il motivo è questo. */
.k-home .elementor .k-cd3__l b{color:#131C2E}
.k-home .elementor p.k-calc__h,.k-home .elementor p.k-calc__esito{color:#131C2E}
.k-home .elementor p.k-co__nota{color:#6b4a12}

/* ⚠️⚠️ 27/10/2026: IL CONFRONTO SUL TELEFONO, deciso dall'utente. Prima il
   calcolatore, poi il tasto che apre la tabella a sei colonne (il markup sta in
   `kreita_cloud_confronto()`, cloud.php). Sopra i 760px il tasto non c'è e la
   sezione resta com'era. `order` cambia solo l'ordine a schermo: nel codice la
   tabella viene prima, così senza CSS e senza JavaScript si legge tutto. */
.k-cf__apri{display:none}
@media (max-width:760px){
  .k-cf{display:flex;flex-direction:column}
  .k-cf > .k-calc{order:1}
  .k-cf > .k-cf__apri{order:2}
  .k-cf > .k-cf__tutto{order:3}
  .k-cf > .k-cf__nota{order:4}
  .k-cf > .k-cc__cta{order:5}
  .k-cf.-chiudibile > .k-cf__apri{display:inline-flex;align-self:flex-start;margin:1.2rem 0 0;
    /* è un <button>: senza, il browser gli dà il fondo grigio e la riga più bassa
       del tasto contornato «Le taglie e i prezzi» qui sotto, che è un <a> */
    background:transparent;border-color:color-mix(in srgb,var(--ac,#D03923) 58%,transparent);
    line-height:inherit;cursor:pointer}
  .k-cf.-chiudibile > .k-cf__tutto{margin-top:1.2rem}
  .k-cf.-chiudibile:not(.is-aperto) > .k-cf__tutto{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   27/10/2026 — LE NOVE PROVE GRAFICHE DEL CLOUD, applicate su decisione
   dell'utente («tutte e nove, per l'8 la versione A»). Copie dei file di prima
   in backup-cloud-20261027/grafica-prima/, istruzioni nel LEGGIMI accanto.
   ⚠️ Tutto sta sotto `.k-cp` (l'articolo della pagina del cloud) o su classi
   nuove: la pagina hosting usa le stesse classi `.k-ho__*` e non deve cambiare.
   ⚠️ Dove c'è `.k-home .elementor` davanti è per battere la regola generica
   del tema su p e li (vedi «COLORI RIMESSI» più su).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 2 · l'apertura col prodotto ───────────────────────────────────────────
   Il «03» in filigrana si spegne: al suo posto c'è la schermata disegnata.
   Sopra i 1100px due colonne, la schermata inclinata e tagliata dal bordo
   (l'apertura ha già `overflow:hidden`); sotto, la schermata spunta dal
   fondo della fascia, alta al massimo 300px (236 sul telefono). */
.k-cp .k-ho__testa::after{display:none}
.k-cp__pr{color:#131C2E}
.k-cp__pr .k-cq__f{box-shadow:0 40px 80px -20px rgba(10,14,30,.55),0 10px 24px -8px rgba(10,14,30,.35)}
@media (min-width:1101px){
  .k-cp__testa > .k-ho__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem;align-items:center}
  .k-cp__testa .k-ho__h1{font-size:clamp(2.2rem,3.3vw,3rem)}
  .k-cp__pr{transform:perspective(1900px) rotateY(-13deg) rotateX(4deg) scale(.96);transform-origin:left center;margin-right:-150px}
}
@media (max-width:1100px){
  .k-cp__testa{padding-bottom:0!important}
  .k-cp__pr{margin:2.4rem 0 0;max-height:300px;overflow:hidden;border-radius:14px 14px 0 0}
  .k-cp__pr .k-cq__f{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .k-cp__pr .k-cq__pin{display:none}
}
@media (max-width:760px){
  .k-cp__pr{max-height:236px}
}
/* «Che cos'è» senza schermata: il titolo a sinistra, il resto a destra */
.k-cp .k-cq{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.k-cq__dx .k-cq__def{margin-top:0}
.k-cq__dx .k-cq__nota{margin-top:1.4rem}
@media (max-width:900px){
  .k-cp .k-cq{grid-template-columns:1fr;row-gap:1.2rem}
}

/* ── 3 · un colore solo nei prezzi ──────────────────────────────────────────
   ⚠️ Il colore di ogni taglia arriva IN LINEA dal listino (`style="--pc:…"`,
   cloud.php): lo batte solo `!important`. Cifre blu notte, il colore
   dell'area alla taglia in evidenza (cifra, bollo, alone). */
.k-cp .k-cl__s{--pc:#131C2E!important}
.k-cp .k-cl__s.-evidenza{--pc:var(--ac)!important}
.k-home .elementor p.k-cl__tutti{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.5rem;
  padding:.5rem 1rem .5rem .6rem;border-radius:99px;background:color-mix(in srgb,var(--ac) 8%,#fff);
  color:#131C2E;font-weight:600;font-size:.98rem;line-height:1.3}
.k-cl__tutti s{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ac)}
.k-cl__tutti svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── 5 · sotto le schede: quattro voci con icona, poi il server dedicato ── */
.k-cl__compr{list-style:none;margin:2rem 0 0;padding:1.2rem 1.4rem;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 1.6rem;
  border:1px solid rgba(19,28,46,.1);border-radius:1rem;background:#fff}
.k-home .elementor .k-cl__compr li{display:flex;align-items:center;gap:.75rem;margin:0;
  font-size:.95rem;line-height:1.4;color:#131C2E}
.k-cl__compr li::before{content:none}
.k-cl__compr s,.k-cl__srv s{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:color-mix(in srgb,var(--ac) 8%,#fff);border:1px solid color-mix(in srgb,var(--ac) 18%,transparent)}
.k-cl__compr svg,.k-cl__srv svg{width:20px;height:20px;fill:none;stroke:var(--ac);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.k-home .elementor p.k-cl__srv{display:flex;align-items:center;gap:.75rem;margin:1rem 0 0;padding:0 1.4rem;
  font-size:.95rem;line-height:1.5;color:#4A5568}
.k-cl__srv s{width:30px;height:30px;border-radius:9px}
.k-cl__srv svg{width:17px;height:17px}
@media (max-width:1000px){
  .k-cl__compr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .k-cl__compr{grid-template-columns:1fr;padding:1rem 1.1rem}
  .k-home .elementor p.k-cl__srv{padding:0 .2rem;align-items:flex-start}
}

/* ── 8 · il listino sul telefono si scorre di lato (versione A) ────────────
   Si vede la scheda intera e l'inizio della seguente. Il riquadro arriva fino
   al bordo destro dello schermo (`calc(50% - 50vw)`), qualunque sia il margine
   della pagina; in alto 16px per il bollo «La più scelta», che sporge. */
.k-cl__scorri{display:none}
@media (max-width:760px){
  .k-home .elementor p.k-cl__scorri{display:block;margin:0 0 .2rem;font-size:.86rem;font-weight:600;color:var(--ac)}
  .k-cp #pacchetti .k-cl{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;gap:12px;margin-right:calc(50% - 50vw);padding:16px 20px 12px 0!important}
  .k-cp #pacchetti .k-cl__s{flex:0 0 78%;scroll-snap-align:start;margin:0!important}
}

/* ── 4 · la tabella del confronto ───────────────────────────────────────────
   La nostra colonna col fondo e la riga in cima del colore dell'area; otto
   righe, le altre dietro «Vedi tutte le righe» (markup e script in
   `kreita_cloud_confronto()`, cloud.php). */
.k-cp .k-cf__t th.-noi,.k-cp .k-cf__t td.-noi{background:color-mix(in srgb,var(--ac) 7%,#fff)!important;color:#131C2E}
.k-cp .k-cf__t thead th.-noi{box-shadow:inset 0 4px 0 var(--ac);border-top-color:transparent!important}
.k-cp .k-cf__t thead th.-noi b{color:var(--acd,#A8301C)}
.k-cp .k-cf__t td.-noi{font-weight:700}
.k-cp .k-cf__t td.-noi .k-cf__si{color:var(--ac);font-size:1.15em}
.k-cf.-righe-chiuse .k-cf__t tr.-in-piu{display:none}
.k-cf__tutte{display:none;margin-top:1rem;background:transparent;line-height:inherit;cursor:pointer;
  border-color:color-mix(in srgb,var(--ac) 58%,transparent)}
.k-cf.-chiudibile .k-cf__tutte{display:inline-flex}
.k-cf__tutte b{font-weight:inherit}
.k-cf__tutte span{display:inline-block}
.k-cf__tutte.is-aperto span{transform:rotate(180deg)}

/* ── 6 · le funzioni ────────────────────────────────────────────────────────
   Icone dentro una scatolina, come accanto al modulo della prova; titoli un
   po' più grandi. Sul telefono le tre famiglie si aprono e si chiudono: il
   bottone `.k-cd3__apri` prende il posto del nome, aperta solo la prima. */
.k-cp .k-cd3__l li{gap:.95rem}
.k-cp .k-cd3__i{width:40px;height:40px;border-radius:11px;
  background:color-mix(in srgb,var(--ac) 8%,#fff);border:1px solid color-mix(in srgb,var(--ac) 18%,transparent)}
.k-cp .k-cd3__i .k-ic,.k-cp .k-cd3__i svg{width:21px;height:21px}
.k-home .elementor .k-cp .k-cd3__l b{font-size:1.08rem;margin-top:.1rem}
.k-cd3__apri{display:none}
@media (max-width:760px){
  .k-cd3.-chiudibile .k-cd3__fam{display:none}
  .k-cd3.-chiudibile .k-cd3__col{margin:0}
  .k-cd3.-chiudibile .k-cd3__col:last-child{border-bottom:1px solid rgba(19,28,46,.12)}
  .k-cd3.-chiudibile .k-cd3__apri{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
    margin:0;padding:1rem 0;background:none;border:0;border-top:1px solid rgba(19,28,46,.12);border-radius:0;
    font-family:var(--k-display,"Space Grotesk",sans-serif);font-size:1rem;font-weight:700;line-height:1.3;
    letter-spacing:0;text-transform:none;color:#131C2E;text-align:left;cursor:pointer}
  .k-cd3__apri:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
  .k-cd3__apri i{display:flex;align-items:center;gap:.65rem;font-style:normal;font-family:var(--body,inherit);
    font-size:.9rem;font-weight:600;color:#5A6577}
  .k-cd3__apri i::after{content:"";width:8px;height:8px;border-right:2px solid #131C2E;border-bottom:2px solid #131C2E;
    transform:translateY(-2px) rotate(45deg)}
  .k-cd3__col.is-aperta .k-cd3__apri i::after{transform:translateY(2px) rotate(-135deg)}
  .k-cd3.-chiudibile .k-cd3__col:not(.is-aperta) .k-cd3__l{display:none}
  .k-cd3.-chiudibile .k-cd3__col.is-aperta .k-cd3__l{padding-bottom:.4rem}
}

/* ── 7 · la fascia finale ───────────────────────────────────────────────────
   Classi dell'apertura (tinta, tasti, occhiello), ma senza il margine alto
   che lì fa posto alla testata fissa. */
.k-cp__fine{padding:clamp(3rem,6vw,4.6rem) 0!important}
.k-cp__fine .k-ho__h1{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:.8rem}
.k-cp__fine .k-ho__occhio{margin-top:.8rem}
.k-cp__fine .k-kicker::before{display:none}
/* Sul telefono la sezione Elementor che contiene la pagina ha 51px di margine
   sotto (regola del tema): fra la fascia rossa e il piede restava una
   striscia bianca. Qui la pagina finisce sulla fascia, quindi il margine va. */
.elementor-section.elementor-top-section:has(article.k-cp){padding-bottom:0!important}
/* I tasti «Taglie e prezzi» e «Scegli la taglia» portano qui: senza margine
   l'occhiello «Quanto costa» finiva sotto la testata fissa. */
.k-cp #pacchetti{scroll-margin-top:6rem}

/* ══════════════════════════════════════════════════════════════════════════
   28/10/2026 — I VANTAGGI (idee B e C, decisione dell'utente).
   Copie di prima in backup-cloud-20261027/vantaggi-prima/.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── C · quattro vantaggi in grande, sotto l'apertura ─────────────────────── */
.k-cp__vant{background:#fff;padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid rgba(19,28,46,.06)}
.k-cp__vant ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 2.2rem}
.k-home .elementor .k-cp__vant li{margin:0;display:flex;flex-direction:column;gap:.35rem;
  color:#4A5568;font-size:.95rem;line-height:1.5}
.k-cp__vant li::before{content:none}
.k-cp__vant s{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:.55rem;
  background:color-mix(in srgb,var(--ac) 9%,#fff);border:1px solid color-mix(in srgb,var(--ac) 20%,transparent)}
.k-cp__vant svg{width:28px;height:28px;fill:none;stroke:var(--ac);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.k-cp__vant b{font-family:var(--k-display,"Space Grotesk",sans-serif);font-size:1.22rem;line-height:1.25;
  color:#131C2E;letter-spacing:-.01em}
@media (max-width:900px){
  .k-cp__vant ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .k-cp__vant ul{gap:1.4rem 1rem}
  .k-home .elementor .k-cp__vant li{font-size:.86rem;line-height:1.45}
  .k-cp__vant s{width:46px;height:46px;border-radius:13px;margin-bottom:.4rem}
  .k-cp__vant svg{width:24px;height:24px}
  .k-cp__vant b{font-size:1.02rem}
}

/* ── B · «a persona» contro «il nostro cloud», prima della tabella ────────── */
.k-cf__vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:2rem 0 2.2rem}
.k-cf__vs-s{border-radius:1.1rem;padding:1.5rem 1.6rem 1.3rem}
.k-cf__vs-s.-loro{background:#F4F5F7;border:1px solid rgba(19,28,46,.08)}
.k-cf__vs-s.-noi{background:color-mix(in srgb,var(--ac) 6%,#fff);border:1.5px solid color-mix(in srgb,var(--ac) 40%,transparent);
  box-shadow:0 18px 40px -22px color-mix(in srgb,var(--ac) 60%,transparent)}
.k-home .elementor p.k-cf__vs-e{margin:0 0 .35rem;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#5A6577}
.k-home .elementor .-noi p.k-cf__vs-e{color:var(--acd,#A8301C)}
.k-home .elementor .k-cf__vs-s h3{margin:0 0 1rem;font-size:1.25rem;line-height:1.25;color:#131C2E}
.k-cf__vs-s ul{list-style:none;margin:0;padding:0}
.k-home .elementor .k-cf__vs-s li{display:flex;align-items:center;gap:.7rem;margin:0;padding:.55rem 0;
  border-top:1px solid rgba(19,28,46,.08);font-size:.98rem;line-height:1.4;color:#131C2E}
.k-home .elementor .k-cf__vs-s.-loro li{color:#4A5568}
.k-cf__vs-s li::before{content:none}
.k-cf__vs-s s{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
.k-cf__vs-s s.-si{background:var(--ac)}
.k-cf__vs-s s.-no{background:rgba(19,28,46,.12)}
.k-cf__vs-s svg{width:14px;height:14px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.k-cf__vs-s s.-si svg{stroke:#fff}
.k-cf__vs-s s.-no svg{stroke:#5A6577}
@media (max-width:760px){
  .k-cf__vs{grid-template-columns:1fr;gap:.9rem}
  .k-cf__vs-s{padding:1.2rem 1.2rem 1rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   28/10/2026 — LA PAGINA PIÙ CORTA (prova 29, decisione dell'utente: «troppe
   sezioni», «pacchetti da rivedere»). Le taglie in un listino a righe, il
   confronto col calcolatore davanti e la tabella dietro il tasto anche sul
   computer, «Che cos'è» insieme alle funzioni; «Posta e cloud» tolta.
   Copie di prima e istruzioni in backup-cloud-landing-20261028/.
   ⚠️ Tutto sotto `.k-cp` o su classi nuove (`.k-lt__*`): l'hosting non cambia.
   ⚠️ `.k-home .elementor` davanti a p e li: vedi «COLORI RIMESSI» più su.
   ⚠️ Da qui in poi su /cloud-aziendale/ non hanno più markup le regole di
   `.k-cl__tutti` (punto 3), `.k-cl__compr` e `.k-cl__srv` (5), `.k-cl__scorri` e
   del listino da scorrere di lato (8), `.k-cf__vs` (B): restano perché,
   ricopiando il modello di prima, la pagina torni com'era.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── il listino: una riga per taglia ────────────────────────────────────────
   Lo spazio in grande a sinistra, il prezzo nella stessa colonna per tutte,
   il tasto in fondo. La taglia in evidenza ha il fondo e il filo del colore
   dell'area; le cifre delle altre restano blu notte (prova grafica 3). */
.k-lt{list-style:none;margin:2rem 0 0;padding:0;background:#fff;border:1px solid rgba(19,28,46,.1);
  border-radius:1.1rem;overflow:hidden}
.k-home .elementor .k-lt__r{display:grid;grid-template-columns:9rem minmax(0,1fr) 12.5rem auto;
  gap:1.6rem;align-items:center;margin:0;padding:1.1rem 1.4rem 1.1rem 1.8rem;
  border-top:1px solid rgba(19,28,46,.08);color:#131C2E}
.k-home .elementor .k-lt__r:first-child{border-top:0}
.k-lt__r::before{content:none}
.k-home .elementor p.k-lt__sp{margin:0;font-family:var(--k-display,"Space Grotesk",sans-serif);font-size:1.05rem;
  font-weight:600;line-height:1;color:#5A6577;white-space:nowrap}
.k-lt__sp b{font-size:2.35rem;font-weight:700;letter-spacing:-.03em;color:#131C2E}
.k-home .elementor p.k-lt__chi{margin:0;font-size:.98rem;line-height:1.45;color:#4A5568}
.k-home .elementor p.k-lt__pr{margin:0;text-align:right;font-size:.86rem;line-height:1.2;color:#5A6577;white-space:nowrap}
.k-lt__pr b{font-family:var(--k-display,"Space Grotesk",sans-serif);font-size:1.6rem;font-weight:700;
  letter-spacing:-.02em;color:#131C2E}
.k-lt__no{font-style:italic;color:#5A6577}
.k-home .elementor a.k-lt__btn{justify-self:end;white-space:nowrap;padding:.8rem 1.35rem;font-size:.95rem}
.k-lt__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.k-home .elementor .k-lt__r.-evidenza{background:color-mix(in srgb,var(--ac) 6%,#fff);box-shadow:inset 4px 0 0 var(--ac)}
.k-lt__r.-evidenza .k-lt__sp b,.k-lt__r.-evidenza .k-lt__pr b{color:var(--ac)}
.k-lt__bollo{display:inline-block;margin:0 .55rem .15rem 0;padding:.2rem .6rem;border-radius:99px;
  background:var(--ac);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.3;vertical-align:.08em}

/* ── sotto il listino: le due voci uguali per tutte, poi il server ──────── */
.k-lt__sotto{display:flex;flex-direction:column;gap:.65rem;margin:1.2rem 0 0;padding:0 1.8rem}
.k-home .elementor p.k-lt__tutte{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin:0;
  font-size:.95rem;line-height:1.4;color:#131C2E}
.k-lt__tutte span{display:inline-flex;align-items:center;gap:.5rem}
.k-lt__tutte s{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ac)}
.k-lt__tutte svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.k-home .elementor p.k-lt__srv{display:flex;align-items:center;gap:.6rem;margin:0;font-size:.92rem;line-height:1.45;color:#4A5568}
.k-lt__srv s{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:color-mix(in srgb,var(--ac) 8%,#fff);border:1px solid color-mix(in srgb,var(--ac) 18%,transparent)}
.k-lt__srv svg{width:16px;height:16px;fill:none;stroke:var(--ac);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Sotto i 900px la riga si piega in due: spazio e prezzo sopra, «per chi» e
   il tasto sotto. Sul telefono la frase prende tutta la larghezza e il tasto
   sale accanto al prezzo: così ogni riga sta in tre righe di testo. */
@media (max-width:900px){
  .k-home .elementor .k-lt__r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sp pr" "chi btn";
    gap:.55rem 1rem;padding:1rem 1.1rem 1.05rem 1.25rem}
  .k-home .elementor p.k-lt__sp{grid-area:sp}
  .k-home .elementor p.k-lt__pr{grid-area:pr}
  .k-home .elementor p.k-lt__chi{grid-area:chi;font-size:.9rem;align-self:center}
  .k-home .elementor a.k-lt__btn{grid-area:btn;align-self:end;padding:.6rem 1rem;font-size:.88rem}
  .k-lt__sp b{font-size:1.95rem}
  .k-lt__pr b{font-size:1.35rem}
}
@media (max-width:560px){
  .k-home .elementor .k-lt__r{grid-template-areas:"sp btn" "pr btn" "chi chi";gap:.2rem .8rem;
    padding:.9rem 1rem .95rem 1.15rem}
  .k-home .elementor p.k-lt__pr{text-align:left;font-size:.8rem}
  .k-home .elementor p.k-lt__chi{margin-top:.35rem;font-size:.88rem;line-height:1.4}
  .k-home .elementor a.k-lt__btn{align-self:center}
  .k-lt__sp b{font-size:1.75rem}
  .k-lt__pr b{font-size:1.15rem}
}
@media (max-width:900px){
  .k-lt__sotto{padding:0 .3rem}
  .k-home .elementor p.k-lt__srv{align-items:flex-start;font-size:.88rem}
}

/* ── il confronto: anche sul computer prima il calcolatore, poi il tasto ───
   Stesse regole del telefono (più su, «IL CONFRONTO SUL TELEFONO»), ma per
   tutte le larghezze quando `kreita_cloud_confronto()` mette `-sempre`.
   Senza JavaScript la tabella resta aperta: `-chiudibile` la mette lo script. */
.k-cf.-sempre{display:flex;flex-direction:column}
.k-cf.-sempre.-chiudibile > .k-cf__apri{display:inline-flex;align-self:flex-start;margin:1.4rem 0 0;
  background:transparent;border-color:color-mix(in srgb,var(--ac,#D03923) 58%,transparent);
  line-height:inherit;cursor:pointer}
.k-cf.-sempre.-chiudibile > .k-cf__tutto{margin-top:1.4rem}
.k-cf.-sempre.-chiudibile:not(.is-aperto) > .k-cf__tutto{display:none}
.k-cf.-sempre .k-cf__tutto > .k-cf__nota{margin-top:1.2rem}

/* ── «Che cos'è» e le funzioni in una sezione ───────────────────────────────
   Sopra il titolo e il paragrafo del Word, sotto le tre colonne col loro
   titolino, separato da un filo. */
.k-home .elementor h3.k-cp__fa-t{margin:3rem 0 1.6rem;padding-top:2.4rem;border-top:1px solid rgba(19,28,46,.1);
  font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.25;letter-spacing:-.01em;color:#131C2E}
@media (max-width:760px){
  .k-home .elementor h3.k-cp__fa-t{margin:2.2rem 0 .4rem;padding-top:1.8rem}
}

/* ── i testi: a capo naturali, niente vuoto a destra ────────────────────────
   28/10/2026, chiesto dall'utente: «allinearli meglio, lasci troppo spazio a
   destra e a volte il testo risulta tagliato in modo innaturale».
   · titoli in `balance`: le righe escono lunghe uguali, niente «persone.» o
     «illimitati.» da soli sull'ultima riga;
   · paragrafi e righe brevi in `pretty`: il browser evita l'ultima riga di
     una parola sola («logo.», «prova.», «pesanti.»);
   · i titoli di sezione non più fermi a 22ch (regola di home.css per tutto il
     sito): vanno a capo solo quando la riga non ci sta;
   · in «Che cos'è» il paragrafo del Word prende tutta la colonna come la nota
     sotto (era 44ch in ~600px), e la riga sotto il titolo del confronto
     sta su una riga sola dove ci sta (era ferma a 60ch, e andava a capo).
   ⚠️ I browser che non conoscono `text-wrap` vanno a capo come prima. */
.k-cp h1,.k-cp h2,.k-cp h3,.k-cp .k-cd3__l b,.k-cp .k-cp__vant b{text-wrap:balance}
.k-cp p,.k-cp .k-cp__vant li span,.k-cp .k-cd3__l em{text-wrap:pretty}
.k-home .elementor .k-cp h2.k-h2-solo{max-width:none}
.k-cp .k-cp__fine .k-ho__h1{max-width:none}
.k-cp .k-cq__dx .k-cq__def,.k-cp .k-cq__dx .k-cq__nota{max-width:none}
.k-cp .k-ho__sotto{max-width:none}