/* ==========================================================================
   HOSTING E DOMINI — la ricerca, il listino, il modulo.

   ⚠️⚠️ IL COLORE DELLA PAGINA E' QUELLO DELL'AREA WEB, e non il rosso globale
   `--accent`. L'hosting e' un servizio dell'area Web, e su ogni altra pagina del
   sito il colore lo decide l'area: qui ce n'erano DUE che litigavano — il verde
   che avevo messo a mano nella ricerca e il rosso di serie dei bottoni.
   La pagina si dichiara area Web con il campo `kreita_area` = `web` (vedi
   `kreita_area_del_servizio()`), da li' arriva `--ac`, e la riga qui sotto la
   fa valere anche per i bottoni.
   ⚠️ Niente colori scritti a mano in questo foglio: se domani il verde dell'area
   Web cambia in `KREITA_AREE`, questa pagina lo segue da sola.
   ========================================================================== */

/* ⚠️ L'elenco dei selettori, e non il solo `.k-ho`: la ricerca del dominio
   compare anche in fondo alle pagine SERVIZIO, dove `.k-ho` non esiste — e li'
   il bottone «Cerca» tornava arancione, perche' senza queste variabili vince
   quella di Ohio. Chi aggiunge un blocco di questa pagina altrove deve
   aggiungere anche il suo selettore qui. */
.k-ho,
.k-dom,
.k-ri,
.k-of,
.k-au{
  --accent:var(--ac);--accent-dark:var(--acd);
  /* ⚠️ Anche le variabili di OHIO, non solo le nostre. Il bottone «Mandate la
     richiesta» è un <button>, e Ohio colora i <button> con la sua
     `--clb-button-color` (#fe5000, un arancione che sulla pagina non c'entrava
     niente): la sua regola vince su `.k-btn-a`. Si riempie la sua variabile
     invece di batterla con un `!important` — così qualunque bottone del tema
     capiti su questa pagina prende il colore dell'area invece di stonare. */
  --clb-button-color:var(--ac);
  --clb-button-hover-color:var(--acd);
  /* ⚠️ E anche questa. Ohio disegna i radio e le caselle da sé
     (`appearance:none`) e li riempie con `--clb-color-primary`: per questo
     `accent-color` non serviva a niente e i pallini restavano arancioni dentro
     un riquadro col bordo verde. Provato guardando lo stile calcolato, non
     tirando a indovinare. */
  --clb-color-primary:var(--ac);
}


/* --- la ricerca del dominio ---------------------------------------------
   ⚠️ I risultati sono SCHEDE in griglia, non righe in elenco. In colonna otto
   righe larghe tutta la pagina facevano una lista da modulo dell'anagrafe, e
   l'occhio doveva scorrerle una a una per contare quante fossero libere. In
   griglia si vedono tutte insieme e il colpo d'occhio dice subito com'è andata.
   ------------------------------------------------------------------------ */

.k-dom{max-width:62rem;margin:0 auto}
.k-dom__testa{max-width:44rem;margin-bottom:1.8rem}
.k-dom__h2{font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:-.03em;
  margin:0 0 .55rem;font-weight:600}
.k-dom__frase{margin:0;color:rgba(19,28,46,.62);font-size:1.05rem;max-width:56ch}

.k-dom__lab{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.k-dom__box{display:flex;align-items:center;gap:.5rem;
  border:1.5px solid rgba(19,28,46,.16);border-radius:999px;padding:.4rem .4rem .4rem 1.1rem;
  background:#fff;transition:border-color .2s,box-shadow .2s}
.k-dom__box:focus-within{border-color:var(--ac);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent)}
.k-dom__lente{flex:none;display:flex;color:rgba(19,28,46,.35);transition:color .2s}
.k-dom__lente svg{width:20px;height:20px;display:block}
.k-dom__box:focus-within .k-dom__lente{color:var(--ac)}

.k-dom__in{flex:1 1 auto;min-width:0;border:0;background:transparent;outline:0;
  font:inherit;font-size:1.12rem;color:#131C2E;padding:.72rem .2rem}
.k-dom__in::placeholder{color:rgba(19,28,46,.32)}

/* ⚠️ Due dichiarazioni morte, tolte il 21/8:
   1. `background:#131C2E` non ha MAI vinto: il bottone è un <button>, e la
      regola di Ohio sui `button` (con `--clb-button-color`) sta più in alto.
      Il navy era scritto e non si è mai visto.
   2. `:hover{background:var(--ac)}` portava il verde su un fondo già verde —
      un effetto che non esiste. È lo stesso inganno di «Lo prendiamo noi».
   Ora il colore è dichiarato per quello che è, e lo scurimento si fa con
   `brightness`, che funziona qualunque sia il colore di partenza. */
.k-dom__go{flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;
  background:var(--ac)!important;color:#fff!important;font:inherit;font-weight:600;
  padding:.78rem 1.5rem;transition:filter .2s,transform .2s}
.k-dom__go:hover{filter:brightness(.88);transform:translateX(2px)}
.k-dom__go span{display:inline-block;margin-left:.3rem}

/* Le estensioni, viste PRIMA di cercare: dicono che cosa si sta comprando. */
.k-dom__ext{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;
  margin:.9rem 0 0;padding:0 0 0 1.1rem}
.k-dom__ext li{font-size:.82rem;font-weight:500;letter-spacing:.01em;
  color:rgba(19,28,46,.55);background:rgba(19,28,46,.05);
  border-radius:999px;padding:.24rem .62rem;font-variant-numeric:tabular-nums}

/* ⚠ IL PREZZO DENTRO LA PASTIGLIA (10/9/2026). Sta nella stessa pastiglia
   dell'estensione e non in una riga a parte: sono la stessa informazione —
   «questa la guardiamo, e costa così» — e una riga di otto prezzi staccata
   dalle otto estensioni si legge male, perché bisogna contare le posizioni.
   Il prezzo è più scuro del nome: è la cosa che si cerca. */
.k-dom__pz{margin-left:.42rem;font-weight:700;color:rgba(19,28,46,.78)}
/* ⚠ Le tre estensioni che non abbiamo a listino: la pastiglia lo dice, e lo
   dice in tono minore, per non spacciare «su richiesta» per un prezzo. */
.k-dom__pz.-chiedi{font-weight:500;font-style:italic;color:rgba(19,28,46,.45)}

.k-dom__aiuto{margin:.7rem 0 0 1.1rem;font-size:.86rem;color:rgba(19,28,46,.45)}
.k-dom__iva{display:inline}

/* Il riepilogo: «pippo — 6 liberi su 8». Il numero prima di tutto, perché è
   quello che si vuole sapere. */
.k-dom__somma{margin:2.2rem 0 1rem;font-size:1.02rem;color:rgba(19,28,46,.6)}
.k-dom__somma b{color:#131C2E;font-weight:600}
.k-dom__somma em{font-style:normal;color:var(--ac);font-weight:600}

/* --- le schede dei risultati --- */

/* ⚠️⚠️ TRE COLONNE FISSE, e non `auto-fit`: dal 22/9/2026 le estensioni sono
   NOVE. Con `auto-fit` le colonne le decide la larghezza del contenitore, che
   non è una sola: 992px in fondo alle pagine servizio, circa 1.200 sulla
   pagina Hosting. Lì ne entravano quattro per riga, 4+4+1, con il .ai da solo
   sull'ultima (misurato a 1440). Tre colonne danno tre righe piene ovunque;
   sotto i 600px una colonna sola.
   Il numero della griglia dipende da quante sono le estensioni: cambiando
   `KREITA_TLD` va rifatto questo conto. */
/* ⚠️⚠️ `[hidden]` DA SOLO NON BASTA: la regola del browser e' `[hidden]
   {display:none}` con specificita' di elemento, e `.k-dom__lista{display:grid}`
   e' una classe, quindi vince. L'elenco NASCE con l'attributo `hidden` nel PHP,
   ma si e' sempre visto: chi arrivava sulla pagina trovava OTTO SCHEDE VUOTE
   con scritto «—.it» prima ancora di aver cercato qualcosa.
   ⚠️ Vale per tutti e tre i pezzi che il JavaScript accende e spegne. */
.k-dom__lista[hidden],
.k-dom__somma[hidden],
.k-dom__coda[hidden]{display:none}

.k-dom__lista{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){
  .k-dom__lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.k-dom__r{display:flex;flex-direction:column;gap:.5rem;
  border:1.5px solid rgba(19,28,46,.11);border-radius:.8rem;padding:1rem 1.1rem;
  background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}

.k-dom__d{font-size:1.04rem;letter-spacing:-.01em;overflow-wrap:anywhere;line-height:1.25}
.k-dom__nome{font-weight:600;color:#131C2E}
.k-dom__tld{color:rgba(19,28,46,.5)}
/* ⚠ Nella scheda il prezzo sta SOTTO il nome e sopra la nota: chi ha appena
   letto «pippo.it» vuole sapere quanto costa, non che è «il più cercato in
   Italia». `tabular-nums` perché gli otto prezzi si leggono in colonna. */
.k-dom__prezzo{font-size:.98rem;font-weight:700;color:#131C2E;
  font-variant-numeric:tabular-nums;line-height:1.2}
.k-dom__prezzo i{font-style:normal;font-weight:500;font-size:.8em;
  color:rgba(19,28,46,.45);margin-left:.12rem}
.k-dom__prezzo.-chiedi{font-size:.88rem;font-weight:500;font-style:italic;
  color:rgba(19,28,46,.45)}
.k-dom__prezzo.-chiedi i{display:none}
/* ⚠ Su un dominio già preso il prezzo non serve a niente e distrae dal fatto
   che conta: si spegne, non si toglie (togliendolo la scheda si accorcia e la
   fila di schede diventa a denti di sega). */
.k-dom__r.is-occupato .k-dom__prezzo{color:rgba(19,28,46,.3)}
.k-dom__r.is-occupato .k-dom__prezzo i{color:rgba(19,28,46,.25)}

.k-dom__nota{font-size:.79rem;line-height:1.3;color:rgba(19,28,46,.42);min-height:1em}
.k-dom__esito{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:auto}

.k-dom__attesa{color:rgba(19,28,46,.38);font-size:.9rem}
.k-dom__r.is-attesa{background:rgba(19,28,46,.02)}

/* ⚠️ Il segno NON è solo il colore: verde e rosso, a chi non li distingue,
   dicono la stessa cosa. Davanti c'è anche un simbolo, e la parola resta. */
.k-dom__si,.k-dom__no,.k-dom__boh{font-size:.92rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem}
.k-dom__si{color:var(--ac)}
.k-dom__si::before{content:"●";font-size:.6em}
.k-dom__no{color:rgba(19,28,46,.4);font-weight:500}
.k-dom__no::before{content:"×";font-size:1.15em;line-height:1}
.k-dom__boh{color:#8F5406;font-weight:500}
.k-dom__boh::before{content:"?";font-size:.95em}

.k-dom__r.is-libero{border-color:color-mix(in srgb, var(--ac) 45%, transparent);
  background:color-mix(in srgb, var(--ac) 4%, transparent)}
.k-dom__r.is-libero:hover{border-color:var(--ac);transform:translateY(-2px);
  box-shadow:0 12px 30px -20px rgba(19,28,46,.55)}
.k-dom__r.is-occupato{background:rgba(19,28,46,.02);border-style:dashed}
.k-dom__r.is-occupato .k-dom__nome{color:rgba(19,28,46,.42);text-decoration:line-through;
  text-decoration-color:rgba(19,28,46,.25)}
.k-dom__r.is-occupato .k-dom__tld{color:rgba(19,28,46,.32)}

.k-dom__prendi{font-size:.88rem;font-weight:600;color:#fff;background:var(--ac);
  border-radius:999px;padding:.42rem .9rem;text-decoration:none;white-space:nowrap;
  transition:filter .18s,transform .18s}
/* ⚠️⚠️ `.k-dom a.` davanti, e non `.k-dom__prendi:hover` da solo: la regola del
   tema `a:not(.-unlink):hover` pesa (0,2,1) contro (0,2,0) e al passaggio
   ridipingeva la scritta col rosso di marca, rgb(177,47,28), sul bottone verde
   acqua scurito: quasi illeggibile. MISURATO il 22/9/2026 su /domini/ forzando
   il passaggio del mouse. Con `.k-dom a.` pesa (0,3,1) e vince senza
   `!important`, come `.k-pg a.k-pgt__tutti` nelle schede lavoro. */
.k-dom a.k-dom__prendi:hover{color:#fff;filter:brightness(.88);transform:translateY(-1px)}

.k-dom__coda{margin:1.4rem 0 0;font-size:.98rem;color:rgba(19,28,46,.65)}

/* La sezione quando la ricerca sta in fondo a una pagina servizio. */
.k-dom-sez{margin-top:3.2rem;padding:2.8rem 0 .5rem;
  border-top:1px solid rgba(19,28,46,.1)}
/* ⚠ E la stessa sezione quando sta IN CIMA alla colonna (10/9/2026): il
   filetto va sotto e non sopra, se no la colonna apre con una riga grigia
   sospesa sotto la testata. Niente margine in alto per la stessa ragione. */
.k-dom-sez.-prima{margin-top:0;padding:0 0 2.4rem;
  border-top:0;border-bottom:1px solid rgba(19,28,46,.1);margin-bottom:2.6rem}
.k-dom-sez.-prima .k-dom__testa{margin-bottom:1.1rem}

@media (max-width:640px){
  .k-dom__ext{padding-left:0}
  .k-dom__aiuto{margin-left:0}
  .k-dom__go{padding:.78rem 1.1rem}
}
/* ⚠️ 23/10/2026: sul telefono «Cerca →» si prendeva 122px e al campo ne
   restavano 86 a 390 e 16 a 320 (misurati sull'hosting): il nome scritto non si
   vedeva e l'esempio si leggeva «ilnomedella». Sotto i 480 il bottone scende
   su una seconda riga, largo quanto la casella, e il campo ha tutta la prima.
   ⚠️ L'input resta a 1.12rem (sopra i 16px): più piccolo, iPhone ingrandisce
   la pagina quando lo si tocca. Si rimpicciolisce solo l'esempio. */
@media (max-width:480px){
  .k-dom__box{flex-wrap:wrap;border-radius:22px;padding:.35rem .35rem .35rem 1rem;row-gap:.2rem}
  .k-dom__in{flex:1 1 0}
  .k-dom__in::placeholder{font-size:.9em}
  .k-dom__go{flex:1 1 100%;text-align:center}
}
/* ⚠️ 23/10/2026, su /domini/: Ohio dà agli input un fondo grigio e ai bottoni
   i suoi angoli, e vincono sulle regole qui sopra. Il campo faceva un secondo
   riquadro grigio dentro la casella bianca e «Cerca» era squadrato, mentre
   sull'apertura dell'hosting (che li forza già) sono puliti. Stessa veste. */
.k-dom__in{background:transparent!important}
.k-dom__go{border-radius:999px!important}

/* --- il listino ---------------------------------------------------------- */

/* ⚠️ `stretch` e non `start`: con `start` ogni riquadro e' alto quanto il suo
   contenuto, i tre bottoni «Lo voglio» finiscono a tre altezze diverse e la
   fila sembra sbilenca. Cosi' i riquadri sono alti uguali e i bottoni si
   allineano, perche' l'elenco dentro si allunga (`flex:1 1 auto`). */
/* ⚠️ 16rem e non 17: con i piani diventati QUATTRO, a 1144px di contenuto ogni
   colonna ha (1144 − 3×22,4)/4 = 268px, e un minimo di 17rem (272px) non ci
   sta — la quarta finiva orfana su una seconda riga. `min(…,100%)` la protegge
   anche sul telefono. */
/* ⚠️ IL BOTTONE STA IN FONDO E RESPIRA. Prima era attaccato al blocco dei
   gigabyte — segnalato — e per giunta a un'altezza diversa in ogni riquadro,
   perche' le descrizioni sono lunghe diverse. `margin-top:auto` lo spinge in
   fondo: cosi' i quattro bottoni sono in riga, e sopra c'e' sempre lo stesso
   respiro. */
.k-hp__go{margin-top:auto!important}
.k-hp__spazio{margin-bottom:1.6rem}

/* ⚠️⚠️ E LE RIGHE DENTRO AI RIQUADRI SI ALLINEANO FRA LORO. Le descrizioni
   vanno da due a quattro righe, quindi prezzo, gigabyte e bottone finivano a
   quote diverse in ogni riquadro: quattro schede che dicono le stesse cose in
   quattro posti diversi si confrontano male.
   `subgrid` fa condividere ai riquadri le righe della griglia esterna, cioe' il
   prezzo di tutti sta sulla stessa riga per costruzione — non perche' si e'
   indovinata un'altezza minima che al primo testo piu' lungo salta.
   ⚠️ Dentro `@supports`: dove `subgrid` non c'e' (Safari vecchi) resta il
   comportamento di prima, che e' brutto ma non rotto. */
@supports (grid-template-rows: subgrid){
  @media (min-width:64rem){
    /* ⚠️⚠️ SEI righe, non cinque: i figli in flusso di un riquadro sono
       `n · per · p · anno · spazio · go`. Contati sbagliati, due finiscono
       nella stessa riga e il bottone si stampa SOPRA al blocco dei gigabyte —
       succede senza nessun errore, si vede solo guardando. Il bollo non conta:
       e' `position:absolute` e sta fuori dal flusso. */
    .k-hp-griglia{grid-template-rows:repeat(6,auto)}
    .k-hp:not(:has(.k-hp__p.-senza)){grid-row:span 6;grid-template-rows:subgrid;
      display:grid;align-content:stretch}
  }
}

.k-hp-griglia{display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));align-items:stretch}

/* ⚠️ QUATTRO COLONNE, e da parecchio prima. Con `auto-fit` e un minimo di
   16rem la quarta entrava solo sopra i 1240px di finestra: fra i 1100 e i 1240
   i pacchetti scendevano a tre e il quarto restava orfano su una riga sua.
   Da 64rem in su si impongono quattro colonne: le carte scendono a ~227px, che
   da quando l'elenco delle differenze e' passato alla tabella e' larghezza
   abbondante. ⚠️ «Su misura» e la fascia dei comuni hanno `grid-column:1/-1`,
   quindi continuano a prendersi tutta la riga. */
@media (min-width:64rem){
  .k-hp-griglia{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.k-hp{position:relative;display:flex;flex-direction:column;
  border:1.5px solid rgba(19,28,46,.12);border-radius:1.1rem;padding:1.9rem 1.6rem 1.6rem;
  background:#fff;transition:border-color .25s,transform .25s,box-shadow .25s}
.k-hp:hover{border-color:var(--c);transform:translateY(-3px);
  box-shadow:0 16px 40px -22px rgba(19,28,46,.4)}

/* Il piano consigliato: un filo del suo colore in cima, non una cornice
   intera — la cornice colorata su tre riquadri fa vedere prima le cornici. */
/* ⚠️ Il consigliato si distingue per PESO, non per un altro colore: bordo
   pieno, ombra più profonda e un filo in cima. Un secondo colore su una pagina
   che ne ha già uno d'area farebbe litigare gli accenti — è l'errore che questa
   pagina aveva prima. */
.k-hp.is-scelto{border-color:var(--c);border-width:2px;
  box-shadow:0 2px 4px rgba(19,28,46,.04),0 22px 50px -28px color-mix(in srgb, var(--c) 55%, transparent)}
/* ⚠️ Qui c'era una barretta colorata da 4px sopra al riquadro
   (`::before` largo quanto la carta piu' 2px per lato). Tolta il 28/8 su
   richiesta: usciva da sotto al bollo a destra e a sinistra e sembrava un
   filetto rimasto li' per sbaglio, non un segno voluto. Il pacchetto in
   evidenza si distingue lo stesso — bordo a 2px nel colore, ombra piu' marcata
   e il bollo — e sono tre segnali, non uno. */
.k-hp.is-scelto .k-hp__spazio b{color:var(--c)}

/* ⚠️ Bollo e bottone stanno SUL colore, quindi prendono il pieno (`--cp`) e
   l'inchiostro che ci si legge sopra (`--ci`) — non `--c`, che è la variante
   fatta per stare SU BIANCO. Sul giallo dell'area 01 il bianco fa 2,03: sarebbe
   una scritta che non si legge. */
.k-hp__bollo{position:absolute;top:-.75rem;right:1.4rem;
  background:var(--cp);color:var(--ci);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.28rem .7rem;border-radius:999px}

.k-hp__n{margin:0;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:#131C2E}
.k-hp__per{margin:.2rem 0 1.1rem;font-size:.93rem;color:rgba(19,28,46,.58)}

.k-hp__p{margin:0;display:flex;align-items:baseline;gap:.45rem}
.k-hp__p b{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;color:var(--c);line-height:1}
.k-hp__p span{font-size:.9rem;color:rgba(19,28,46,.55)}
.k-hp__anno{margin:.3rem 0 1.3rem;font-size:.84rem;color:rgba(19,28,46,.45)}

/* ⚠️ LO SPAZIO GRANDE E' LA SECONDA COSA CHE SI GUARDA, dopo il prezzo: è il
   numero che cambia davvero salendo di pacchetto (10 → 25 → 75 → 150). Prima
   era annegato come terza voce di un elenco di otto, e per confrontare due
   pacchetti bisognava leggerli tutti e due per intero. */
.k-hp__spazio{margin:1.2rem 0 0;padding:.85rem 0;display:flex;flex-direction:column;gap:.1rem;
  border-top:1px solid rgba(19,28,46,.1);border-bottom:1px solid rgba(19,28,46,.1)}
.k-hp__spazio b{font-size:1.65rem;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:#131C2E;font-variant-numeric:tabular-nums}
.k-hp__spazio span{font-size:.79rem;line-height:1.35;color:rgba(19,28,46,.5)}

.k-hp__l{list-style:none;margin:1.1rem 0 1.6rem;padding:0;flex:1 1 auto}
.k-hp__l li{position:relative;padding:.34rem 0 .34rem 1.5rem;font-size:.95rem;
  color:rgba(19,28,46,.8);line-height:1.42}
.k-hp__l li::before{content:"";position:absolute;left:0;top:.78em;
  width:.62rem;height:.34rem;border-left:2px solid var(--c);border-bottom:2px solid var(--c);
  transform:rotate(-45deg)}

.k-hp__go{align-self:flex-start}
/* Ogni pacchetto ha il suo colore anche nel bottone: è quello che il sito fa
   con le tessere delle sei aree. `!important` per battere `--clb-button-color`
   del tema, che è impostata a livello di pagina. */
.k-hp .k-hp__go{background:var(--cp)!important;color:var(--ci)!important}
.k-hp .k-hp__go:hover{filter:brightness(.9)}

/* --- l'impianto della pagina --------------------------------------------
   ⚠️ I 117px in cima sono l'altezza vera della barra che galleggia: senza,
   il titolo ci finisce sotto. E' lo stesso numero delle pagine area e delle
   schede progetto — se un giorno la barra cambia altezza, cambiano tutte e tre.
   ------------------------------------------------------------------------ */

.k-ho{background:#fff}
.k-ho__in{max-width:1192px;margin:0 auto;padding:0 1.5rem}

/* ==========================================================================
   L'APERTURA A TINTA PIENA.

   ⚠️⚠️ Prima era bianca, con l'occhiello piccolo, il titolo nero e meta' schermo
   vuoto a destra: accanto alle sei pagine d'area — fondo pieno del colore,
   numero in filigrana, occhiello col trattino — si vedeva subito che era una
   pagina venuta dopo e fatta da un'altra parte.
   Qui si rifa' `.k-apertura` di home.css usando GLI STESSI TOKEN, invece di
   riusare quella classe: le sue regole sono scritte `.k-home .elementor
   .k-apertura`, e questa pagina non e' Elementor, quindi le erediterebbe a
   meta' — colore sì, testo no. Meglio poche righe esplicite che una classe che
   funziona per caso.
   ⚠️ `--atesto` NON si annacqua con l'opacita': e' gia' misurato per passare il
   4,5:1 su ogni area (sul verde 5,58). La gerarchia la fanno corpo e peso.
   ========================================================================== */
.k-ho__testa{position:relative;overflow:hidden;isolation:isolate;
  background:var(--ac);color:var(--atesto);
  padding:calc(117px + 3.4rem) 0 clamp(3rem,5vw,4.2rem)}

/* il numero dell'area in filigrana, come sulle aperture d'area: riempie il
   fianco destro senza metterci un oggetto, e rende la pagina riconoscibile */
.k-ho__testa::after{content:var(--anum);position:absolute;right:2.5vw;top:50%;
  transform:translateY(-50%);font-family:var(--display);font-weight:700;
  font-size:min(15rem,20vw);line-height:.8;color:var(--atesto);opacity:.1;
  pointer-events:none;letter-spacing:-.04em;z-index:0}
/* ⚠️ Il contenuto va alzato esplicitamente, se no la filigrana ci finisce
   sopra. Con `z-index:-1` invece spariva del tutto: `isolation:isolate` sulla
   testata crea un contesto nuovo, e li' dentro il -1 sta DIETRO allo sfondo
   del contesto stesso. Provato guardando `content:none` nello stile calcolato. */
.k-ho__testa > .k-ho__in{position:relative;z-index:1}

/* ⚠️ `!important` come nelle aperture d'area: la regola di base di `.k-kicker`
   lo porta, e senza questo l'occhiello restava VERDE SU VERDE — invisibile.
   Misurato: color rgb(15,118,110) su fondo rgb(15,118,110). */
.k-ho__testa .k-kicker{color:var(--atesto)!important;opacity:1}
/* ⚠️ Il trattino va DICHIARATO qui: la regola che lo disegna e'
   `.k-area.k-home .elementor .k-kicker::before`, e questa pagina non e'
   Elementor. E va gia' disteso — nell'originale parte a `scaleX(0)` perche' lo
   apre l'animazione d'ingresso, che qui non gira: senza `transform:none`
   resterebbe largo zero, cioe' invisibile. */
.k-ho__testa .k-kicker::before{content:"";display:inline-block;
  width:1.7rem;height:3px;border-radius:2px;background:var(--atesto)!important;
  vertical-align:.26em;margin-right:.75rem;transform:none}
.k-ho__h1{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.1;letter-spacing:-.035em;
  margin:.6rem 0 1rem;font-weight:600;color:var(--atesto)!important;max-width:22ch}
.k-ho__occhio{margin:0;max-width:56ch;font-size:clamp(1.02rem,1.7vw,1.15rem);
  line-height:1.55;color:var(--atesto)!important}

/* --- la ricerca DENTRO l'apertura ---------------------------------------
   ⚠️ La casella e le schede restano bianche sul colore: e' lo stesso rapporto
   che hanno le carte sulle altre pagine. Quello che cambia sono i testi di
   contorno — riepilogo, aiuto, estensioni — che erano inchiostro su chiaro e
   qui sarebbero illeggibili.
   ⚠️ Il titolo interno della ricerca («Il nome che avete in mente è libero?»)
   si spegne: sotto all'h1 dell'apertura direbbe due volte la stessa cosa. */
.k-ho__cerca{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.k-ho__cerca .k-dom{max-width:none;margin:0}
.k-ho__cerca .k-dom__testa{display:none}

/* 🔴🔴 IL TESTO SCRITTO NEL CAMPO ERA BIANCO SU BIANCO. Misurato: `color` e
   `-webkit-text-fill-color` valevano tutti e due `rgb(255,255,255)`, e la
   pasticca sotto e' bianca. Chi digitava non vedeva niente.
   Viene dall'apertura: `.k-ho__testa{color:var(--atesto)}` e' bianco perche' su
   quel fondo verde ci va il bianco, e il campo lo eredita — la regola di base
   `.k-dom__in{color:#131C2E}` ha meno peso di quella che Ohio mette sugli input.
   ⚠️⚠️ NON basta `color`: dove c'e' `-webkit-text-fill-color` e' QUELLO che
   decide il colore delle lettere, e `color` non lo tocca. Vanno scritti
   entrambi, se no si continua a non vedere niente e sembra che la regola non
   sia stata applicata.
   ⚠️ Sul campo c'era anche un velo grigio al 10% che faceva il rettangolo piu'
   scuro dentro la pasticca: tolto, il fondo e' la pasticca stessa. */
.k-ho__cerca .k-dom__in{
  color:#131C2E!important;
  -webkit-text-fill-color:#131C2E;
  background:transparent!important;
  caret-color:var(--ac)}
.k-ho__cerca .k-dom__in::placeholder{
  color:rgba(19,28,46,.42);-webkit-text-fill-color:rgba(19,28,46,.42);opacity:1}

.k-ho__cerca .k-dom__box{border-color:transparent;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.6)}
.k-ho__cerca .k-dom__box:focus-within{border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--atesto) 34%, transparent)}

/* ⚠️ Il pulsante «Cerca» sul fondo verde NON puo' restare verde: sparirebbe.
   Diventa l'inchiostro dell'apertura, che e' l'unico altro colore ammesso qui
   dentro — la stessa regola dei pulsanti sulle aperture d'area. */
.k-ho__cerca .k-dom__go{background:var(--acontro)!important;color:var(--atesto)!important}

/* ⚠️ 23/10/2026: `!important` come sul prezzo qui sotto. Senza, vinceva
   `.k-home .elementor p, .k-home .elementor li{color:var(--muted)}` (un
   elemento in più nel selettore): l'estensione «.it» e la riga d'aiuto
   restavano grigio scuro sul verde, 1,37:1, cioè non si leggevano. */
.k-ho__cerca .k-dom__ext li{color:var(--atesto)!important;
  background:color-mix(in srgb, var(--atesto) 16%, transparent)}
.k-ho__cerca .k-dom__aiuto{color:color-mix(in srgb, var(--atesto) 92%, transparent)!important}
	/* ⚠ Anche il prezzo nella pastiglia: su fondo colorato l'inchiostro scuro
	   di default sparirebbe. */
	.k-ho__cerca .k-dom__pz{color:var(--atesto)!important}
	.k-ho__cerca .k-dom__pz.-chiedi{color:color-mix(in srgb, var(--atesto) 62%, transparent)!important}
.k-ho__cerca .k-dom__somma{color:color-mix(in srgb, var(--atesto) 92%, transparent)!important;
  margin-top:1.8rem}
.k-ho__cerca .k-dom__somma b,
.k-ho__cerca .k-dom__somma em{color:var(--atesto)}

/* 🔴 LE SCHEDE DURANTE LA RICERCA ERANO VERDE SU VERDE. Avevo dato il fondo
   bianco alle sole `.is-libero`, ma nei due secondi in cui il registro
   risponde le schede stanno in `.is-attesa`, che ha un fondo quasi
   trasparente: sull'apertura verde diventavano invisibili, con il testo scuro
   appoggiato sul colore. Vale anche per le occupate.
   ⚠️ Il fondo si mette su TUTTE, poi i singoli stati cambiano solo il bordo. */
.k-ho__cerca .k-dom__r,
.k-ho__cerca .k-dom__r.is-attesa,
.k-ho__cerca .k-dom__r.is-occupato{background:#fff}
.k-ho__cerca .k-dom__r.is-occupato{border-style:dashed;
  border-color:rgba(19,28,46,.18)}

/* quelle libere si accendono con l'inchiostro invece che col verde, che qui
   non si vedrebbe */
.k-ho__cerca .k-dom__r.is-libero{border-color:var(--acontro);
  background:#fff}
.k-ho__cerca .k-dom__r.is-libero:hover{box-shadow:0 16px 34px -22px rgba(0,0,0,.7)}
.k-ho__cerca .k-dom__si{color:var(--acontro)}
.k-ho__cerca .k-dom__prendi{background:var(--acontro);color:var(--atesto)}
.k-ho__cerca .k-dom__coda{color:var(--atesto)}

@media (max-width:60rem){
  .k-ho__testa::after{font-size:min(10rem,26vw);right:-1rem;opacity:.08}
}

.k-ho__sez{padding:3.6rem 0}
.k-ho__sez.-chiara{background:#F7F8F9}
.k-ho__sotto{margin:.4rem 0 2.2rem;max-width:60ch;color:rgba(19,28,46,.65)}

/* --- «Uguale in tutti»: SCHEDE, come ovunque sul sito ---------------------
   ⚠️⚠️ Prima erano sei voci nude — icona, titolo, paragrafo — appoggiate sulla
   fascia chiara senza contorno. Su ogni altra pagina la stessa cosa e' una
   SCHEDA BIANCA con la mattonella colorata dell'icona (vedi `.k-srv__s .k-ic`
   in home.css): 48x48, raggio 14, fondo dell'area, glifo bianco. Qui l'icona
   c'era ma era ridotta a un glifo verde nudo, perche' `.k-ic` prende la
   mattonella solo dentro `.k-srv__s`, che su questa pagina non esiste.
   ⚠️ `minmax(min(16rem,100%),1fr)` e non `minmax(16rem,1fr)`: sotto i 16rem di
   spazio la seconda forma sfonda il contenitore e il telefono scorre in
   orizzontale. Stesso motivo scritto piu' sotto per `.k-ho__fatti`.
   -------------------------------------------------------------------------- */
/* ⚠️ 19rem e non 16: le voci sono SEI. A 16rem nel contenitore da 1144px ce ne
   stanno quattro per riga (4·256+3·16 = 1072), e sei voci in quattro colonne
   fanno 4+2, con mezza riga vuota. A 19rem la quarta non entra piu'
   (4·304+3·16 = 1264 > 1144) e vengono 3+3, due righe piene — come le schede
   servizio sulle pagine d'area. Se un giorno le voci diventano otto, questo
   conto va rifatto. */
.k-ho__griglia{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));margin-top:2rem}

.k-ho__voce{display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(19,28,46,.1);border-radius:1.1rem;
  padding:clamp(1.1rem,2.2vw,1.5rem);
  transition:border-color .22s,box-shadow .22s,transform .22s}
.k-ho__voce:hover{border-color:color-mix(in srgb, var(--ac) 45%, transparent);
  box-shadow:0 14px 34px -26px rgba(19,28,46,.6);transform:translateY(-2px)}

.k-ho__voce h3{margin:.85rem 0 .35rem;font-family:var(--display);
  font-size:1.1rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#131C2E}
.k-ho__voce p{margin:0;font-size:.95rem;line-height:1.55;color:rgba(19,28,46,.66)}
.k-ho__voce p strong{color:#131C2E;font-weight:600}

/* la mattonella: stesse misure delle schede servizio, cosi' le due pagine si
   somigliano davvero invece di somigliarsi «piu' o meno» */
.k-ho__voce .k-ic{display:grid;place-items:center;flex:0 0 auto;
  width:48px;height:48px;border-radius:14px;
  background:var(--ac);color:#fff}
.k-ho__voce .k-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

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

/* I fatti: due colonne su schermo largo, una in colonna sul telefono.
   ⚠️ `dt` e `dd` restano dt/dd e non diventano due div: e' un elenco di
   definizioni davvero, e chi usa il lettore di schermo sente l'accoppiata. */
/* ⚠️⚠️ `min(23rem,100%)` e NON `23rem` secco. Con `minmax(23rem,1fr)` la
   colonna resta larga 368px anche quando lo spazio e' 342 (390px meno i
   margini), e la pagina sborda di 2px a destra: pochi, ma bastano a far
   comparire la barra di scorrimento orizzontale sul telefono. Misurato, non
   immaginato: era l'unico punto del sito con sforo diverso da zero.
   Le altre due griglie qui sopra chiedono 17 e 16rem, che ci stanno, e per
   questo non davano segno di niente. */
.k-ho__fatti{margin:2.4rem 0 0;display:grid;gap:1.9rem 3.5rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(23rem,100%),1fr))}
/* ⚠️⚠️ NIENTE PIU' RIQUADRI. Erano sei schede bianche con lo stesso filetto
   verde in cima: sei rettangoli identici in fila, e siccome le schede si
   stiravano tutte all'altezza della piu' alta, le quattro corte finivano con
   un terzo di fondo vuoto. Sembravano riempitivo — e questa e' la sezione che
   dice le cose che i concorrenti non scrivono, cioe' la piu' importante della
   pagina.
   Adesso e' un ELENCO NUMERATO: il numero grande in filigrana e' la stessa
   firma delle aperture d'area («02» dietro al titolo), qui usata per dire che
   sono sei punti in fila e non sei scatole. Niente contorni, quindi niente
   altezze da pareggiare e niente vuoti: ogni voce e' alta quanto il suo testo.
   ⚠️ Il numero e' `aria-hidden` via CSS (`content`), quindi non finisce letto
   dai lettori di schermo come se fosse contenuto. */
.k-ho__fatti{counter-reset:kfatto}

.k-ho__fatti > div{position:relative;counter-increment:kfatto;
  padding:0 0 0 3.6rem;border-top:1px solid rgba(19,28,46,.1);padding-top:1.5rem}

/* ⚠️ Il filetto solo DA SOPRA, e non attorno: separa senza incorniciare. La
   prima riga di ogni colonna non ce l'ha, se no la sezione comincia con una
   linea che non separa niente. */
.k-ho__fatti > div:first-child,
.k-ho__fatti > div:nth-child(2){border-top:0;padding-top:0}
@media (max-width:47rem){
  .k-ho__fatti > div:nth-child(2){border-top:1px solid rgba(19,28,46,.1);padding-top:1.5rem}
}

.k-ho__fatti > div::before{content:counter(kfatto,decimal-leading-zero);
  position:absolute;left:0;top:1.4rem;
  font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;
  letter-spacing:-.03em;color:color-mix(in srgb, var(--ac) 26%, transparent);
  pointer-events:none}
.k-ho__fatti > div:first-child::before,
.k-ho__fatti > div:nth-child(2)::before{top:-.1rem}
@media (max-width:47rem){
  .k-ho__fatti > div:nth-child(2)::before{top:1.4rem}
}

.k-ho__fatti dt{font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ac);margin-bottom:.5rem}
.k-ho__fatti dd{margin:0;font-size:1rem;line-height:1.6;color:rgba(19,28,46,.75);
  max-width:46ch}
.k-ho__fatti dd b{color:#131C2E;font-weight:600}

@media (max-width:640px){
  .k-ho__testa{padding-top:calc(117px + 2rem)}
  .k-ho__sez{padding:2.6rem 0}
}

/* Il piano senza prezzo: «Su preventivo» non e' una cifra, quindi non prende
   la misura da cifra — a 2,5rem sembrerebbe urlato e romperebbe la riga. */
.k-hp__p.-senza b{font-size:1.5rem;letter-spacing:-.02em}

/* --- la fascia del prezzo fisso ------------------------------------------
   Navy piena: e' l'unico blocco scuro della pagina, e sta li' perche' e' la
   frase che deve fermare l'occhio fra il listino e il resto. */
.k-ho__fascia{background:#131C2E;color:#fff;padding:2.6rem 0}
.k-ho__fascia-t{margin:0 0 .6rem;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.35;
  font-weight:400;color:rgba(255,255,255,.62);max-width:44ch}
.k-ho__fascia-t b{color:#fff;font-weight:600}
.k-ho__fascia-d{margin:0;max-width:62ch;font-size:.98rem;line-height:1.6;
  color:rgba(255,255,255,.58)}

/* --- «in tutti e quattro»: le righe comuni, dette una volta sola ---------
   ⚠️ Sta SUBITO SOTTO la griglia e non in fondo alla pagina: serve mentre si
   confrontano i riquadri, per dire «queste non state a paragonarle». Ed è
   volutamente in tono minore — se pesasse come un riquadro tornerebbe a
   rubare l'attenzione a quello che invece cambia. */
.k-hp-comuni{grid-column:1/-1;order:1;padding:1.2rem 1.4rem;border-radius:.9rem;
  background:color-mix(in srgb, var(--c) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 18%, transparent)}
.k-hp-comuni__t{margin:0 0 .7rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
.k-hp-comuni__t b{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c)}
.k-hp-comuni__t span{font-size:.84rem;color:rgba(19,28,46,.5)}
.k-hp-comuni__l{list-style:none;margin:0;padding:0;display:grid;gap:.3rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.k-hp-comuni__l li{position:relative;padding-left:1.35rem;font-size:.9rem;line-height:1.45;
  color:rgba(19,28,46,.75)}
.k-hp-comuni__l li::before{content:"";position:absolute;left:0;top:.62em;
  width:.58rem;height:.32rem;border-left:2px solid var(--c);border-bottom:2px solid var(--c);
  transform:rotate(-45deg)}

/* --- il piano senza prezzo diventa una fascia ----------------------------
   ⚠️ Non e' solo estetica. Tre colonne con un prezzo si confrontano; una
   quarta senza prezzo, messa in fila con loro, chiede un confronto che non si
   puo' fare — e a 1440 restava anche orfana su una seconda riga (misurato:
   quattro colonne da 17rem non ci stanno in 1144px, ne servono 16).
   Si riconosce da sola: e' quella che non ha la cifra. Cosi' se domani se ne
   aggiunge un'altra a preventivo, si sistema da sola.
   ⚠️ `:has()` sul genitore: senza, servirebbe una classe messa dal PHP e due
   posti da tenere d'accordo. */
.k-hp:has(.k-hp__p.-senza){
  grid-column:1/-1;order:2;
  display:grid;gap:.4rem 2.4rem;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;
  background:#F7F8F9;border-style:dashed}
.k-hp:has(.k-hp__p.-senza):hover{transform:none;box-shadow:none}
.k-hp:has(.k-hp__p.-senza) .k-hp__n{grid-column:1;grid-row:1}
.k-hp:has(.k-hp__p.-senza) .k-hp__per{grid-column:1;grid-row:2;margin-bottom:0}
.k-hp:has(.k-hp__p.-senza) .k-hp__p{grid-column:1;grid-row:3;margin-top:.7rem}
.k-hp:has(.k-hp__p.-senza) .k-hp__anno{grid-column:1;grid-row:4;margin:.15rem 0 0}
.k-hp:has(.k-hp__p.-senza) .k-hp__l{grid-column:2;grid-row:1/6;
  border-top:0;padding-top:.35rem;margin:0;
  columns:2;column-gap:2rem}
.k-hp:has(.k-hp__p.-senza) .k-hp__l li{break-inside:avoid}
.k-hp:has(.k-hp__p.-senza) .k-hp__go{grid-column:3;grid-row:1/6;align-self:center}

@media (max-width:860px){
  .k-hp:has(.k-hp__p.-senza){grid-template-columns:1fr}
  .k-hp:has(.k-hp__p.-senza) .k-hp__l{grid-column:1;grid-row:auto;columns:1;
    margin-top:1.1rem;border-top:1px solid rgba(19,28,46,.1);padding-top:1rem}
  .k-hp:has(.k-hp__p.-senza) .k-hp__go{grid-column:1;grid-row:auto;
    align-self:start;margin-top:1.2rem}
}

/* --- il ponte fra la ricerca e i pacchetti ------------------------------- */

/* ⚠️ Il filetto in cima e' stato tolto: separava il ponte dalla RICERCA, che
   il 28/8 e' salita dentro l'apertura. Rimasto li' divideva questa fascia da
   niente, cioe' sembrava il resto di qualcosa. */
.k-ponte{margin:0}
.k-ponte__d{margin:0 0 1.1rem;font-size:1.02rem;color:rgba(19,28,46,.62);max-width:56ch}
.k-ponte__d b{color:#131C2E;font-weight:600}

/* ⚠️ Le porte sono QUATTRO, come i passi su /richiedi/, e vale lo stesso
   ragionamento: con `auto-fit` fra i 640 e i 1024 ne venivano tre in riga e la
   quarta restava orfana, che su una fila di alternative sembra un errore.
   Quattro in riga da 64rem, due e due sotto, in colonna sul telefono. */
.k-ponte__g{display:grid;gap:.7rem;grid-template-columns:1fr}
@media (min-width:34rem){
  .k-ponte__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64rem){
  .k-ponte__g{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.k-ponte__b{display:flex;flex-direction:column;gap:.25rem;text-align:left;height:100%;
  border:1.5px solid rgba(19,28,46,.14);border-radius:.8rem;background:#fff;
  padding:.85rem 1rem;cursor:pointer;font:inherit;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.k-ponte__b:hover{border-color:var(--k-pt,var(--ac));transform:translateY(-2px);
  box-shadow:0 10px 26px -18px rgba(19,28,46,.5)}
/* la mattonella dell'icona, misure identiche a quelle delle schede servizio
   (48x48, raggio 14): qui pero' la tinta cambia da riquadro a riquadro, e
   arriva dal PHP in `--k-pt`. Il verde resta il ripiego se manca. */
.k-ponte__b .k-ic{display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:13px;margin-bottom:.55rem;
  background:var(--k-pt,var(--ac));color:#fff;
  transition:transform .2s}
.k-ponte__b .k-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-ponte__b:hover .k-ic{transform:scale(1.06)}

.k-ponte__b b{font-size:1.02rem;font-weight:600;color:#131C2E;letter-spacing:-.01em}
.k-ponte__b > span{font-size:.85rem;line-height:1.4;color:rgba(19,28,46,.55)}

/* la riga d'azione, come il «Vai al servizio →» delle schede del sito:
   spinta in fondo cosi' resta allineata anche quando le descrizioni sono di
   lunghezza diversa */
.k-ponte__p{display:flex;align-items:baseline;gap:.3rem;margin-top:auto;padding-top:.8rem;
  font-size:.84rem;font-weight:500;color:var(--k-pt,var(--ac))}
/* ⚠️ La cifra e' il motivo per cui uno guarda questi riquadri: a .86rem in
   mezzo al resto non si vedeva. Qui sta a 1,32rem, cioe' piu' grande del nome
   del pacchetto — ed e' giusto, perche' il nome lo si legge una volta e il
   prezzo si confronta quattro volte. */
.k-ponte__p b{font-size:1.32rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.k-ponte__p i{font-style:normal;margin-left:auto;font-size:1rem;
  transition:transform .2s}
.k-ponte__b:hover .k-ponte__p i{transform:translateY(2px)}
.k-ponte__b:focus-visible{outline:2px solid var(--k-pt,var(--ac));outline-offset:2px}

/* Il riquadro indicato dopo il clic: un anello del suo colore che si spegne
   da solo. ⚠️ Niente `scroll-behavior:smooth` globale — su una pagina lunga
   da' fastidio a chi lo scorrimento animato lo ha disattivato di proposito:
   si chiede a `scrollIntoView`, che rispetta `prefers-reduced-motion`. */
.k-hp.is-indicato{border-color:var(--c);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent)}
@media (prefers-reduced-motion:no-preference){
  .k-hp{transition:border-color .25s,transform .25s,box-shadow .25s}
}

/* --- il modulo di richiesta ----------------------------------------------
   ⚠️ Le tre domande stanno AFFIANCATE, non impilate. In colonna il modulo era
   alto quasi due schermate e sembrava un questionario: la stessa roba su tre
   colonne si legge in un colpo d'occhio e si compila in venti secondi.
   ------------------------------------------------------------------------ */

.k-ri{max-width:64rem;margin:0 auto}
.k-ri__testa{max-width:44rem;margin-bottom:1.8rem}
.k-ri__h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.14;letter-spacing:-.03em;
  margin:.5rem 0 .6rem;font-weight:600}
.k-ri__frase{margin:0;color:rgba(19,28,46,.62);max-width:56ch}

/* La scheda bianca: sulla fascia chiara il modulo nudo sembrava roba di
   servizio, non la cosa per cui si è arrivati fin qui. */
.k-ri__scheda{background:#fff;border:1px solid rgba(19,28,46,.1);border-radius:1.1rem;
  padding:1.9rem;display:flex;flex-direction:column;gap:1.5rem;
  box-shadow:0 1px 2px rgba(19,28,46,.04),0 18px 44px -30px rgba(19,28,46,.45)}

.k-ri__riepilogo{display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  background:color-mix(in srgb, var(--ac) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--ac) 22%, transparent);
  border-radius:.75rem;padding:1.1rem 1.2rem}

.k-ri__domande{display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));align-items:start}

.k-ri__riga{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}

.k-ri__c{display:flex;flex-direction:column;gap:.34rem}
.k-ri__c > span{font-size:.84rem;font-weight:600;color:#131C2E}
.k-ri__c > span em{font-weight:400;font-style:normal;color:rgba(19,28,46,.45)}
.k-ri__c input,.k-ri__c select,.k-ri__c textarea{
  font:inherit;font-size:1rem;color:#131C2E;background:#fff;
  border:1.5px solid rgba(19,28,46,.16);border-radius:.55rem;padding:.68rem .85rem;
  transition:border-color .18s,box-shadow .18s;width:100%}
.k-ri__c textarea{resize:vertical;min-height:4.6rem}
.k-ri__c input::placeholder,.k-ri__c textarea::placeholder{color:rgba(19,28,46,.34)}
.k-ri__c input:focus,.k-ri__c select:focus,.k-ri__c textarea:focus{
  outline:0;border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent)}

.k-ri__gruppo{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.k-ri__gruppo legend{padding:0;font-size:.84rem;font-weight:600;color:#131C2E;margin-bottom:.15rem}
.k-ri__aiuto{margin:-.1rem 0 .25rem;font-size:.8rem;color:rgba(19,28,46,.48)}

/* ⚠️ La riga intera è cliccabile, non solo il pallino: su un telefono un radio
   da 14px è un bersaglio che si sbaglia. */
.k-ri__radio{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1.5px solid rgba(19,28,46,.12);border-radius:.55rem;padding:.55rem .75rem;
  transition:border-color .16s,background .16s}
.k-ri__radio:hover{border-color:color-mix(in srgb, var(--ac) 50%, transparent)}
.k-ri__radio:has(input:checked){border-color:var(--ac);
  background:color-mix(in srgb, var(--ac) 7%, transparent)}
.k-ri__radio:has(input:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.k-ri__radio input{accent-color:var(--ac);width:1rem;height:1rem;flex:none}
.k-ri__radio span{font-size:.92rem;line-height:1.32;color:rgba(19,28,46,.85)}

.k-ri__stacco{border:0;border-top:1px solid rgba(19,28,46,.1);margin:.2rem 0 -1.1rem}
.k-ri__parte{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(19,28,46,.42)}

.k-ri__consenso{display:flex;align-items:flex-start;gap:.65rem;
  font-size:.88rem;line-height:1.5;color:rgba(19,28,46,.68)}
.k-ri__consenso input{accent-color:var(--ac);width:1.05rem;height:1.05rem;
  flex:none;margin-top:.14rem}
.k-ri__consenso a{color:var(--ac);text-underline-offset:2px}

/* Il campo esca: fuori schermo, non `display:none` — certi programmi saltano
   quello che è nascosto e non ci cascherebbero. */
.k-ri__esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.k-ri__fondo{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;
  border-top:1px solid rgba(19,28,46,.1);padding-top:1.4rem}
.k-ri__invia.is-attesa{opacity:.6;pointer-events:none}
.k-ri__nota{margin:0;flex:1 1 16rem;font-size:.85rem;line-height:1.45;color:rgba(19,28,46,.5)}
.k-ri__esito{margin:0;flex:1 1 100%;font-size:.94rem;color:rgba(19,28,46,.65)}
.k-ri__esito.is-male{color:#A82C1A;font-weight:500}

@media (max-width:640px){
  .k-ri__scheda{padding:1.3rem;gap:1.3rem;border-radius:.9rem}
  .k-ri__riepilogo{padding:.95rem 1rem}
}


/* ==========================================================================
   LA TABELLA DELLE DIFFERENZE

   ⚠️ Nasce quando gli elenchi escono dai riquadri: quattro colonne di frasi da
   confrontare a memoria diventano una griglia che si legge di traverso.
   ⚠️⚠️ Scorre DENTRO il suo contenitore, non trascinando la pagina: con cinque
   colonne sul telefono non ci sta, e una pagina che scorre in orizzontale e' il
   difetto peggiore dei due. Il contenitore ha `tabindex` perche' una regione
   che scorre dev'essere raggiungibile anche da tastiera.
   ========================================================================== */

.k-cf{margin-top:2.4rem}
.k-cf__scorri{overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid rgba(19,28,46,.1);border-radius:1.1rem;background:#fff}
.k-cf__scorri:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* ⚠️ 23/10/2026: quando la tabella scorre, il bordo dalla parte dove ce n'è
   ancora sfuma (le classi le mette `kreita_cf_avviso()`), e sopra c'è una riga
   che lo dice. La maschera vale sul riquadro, non sul contenuto: resta ferma
   mentre la tabella le scorre sotto. */
.k-cf__avviso,.k-home .elementor p.k-cf__avviso{margin:0 0 .6rem;font-size:.86rem;font-weight:600;color:var(--ac,#0F766E)}
.k-cf__scorri.-dx{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent)}
.k-cf__scorri.-sx{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 3rem),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 3rem),transparent)}
.k-cf__scorri.-sx.-dx{-webkit-mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);
  mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}

.k-cf__t{width:100%;min-width:44rem;border-collapse:collapse;font-size:.93rem}

.k-cf__t thead th{padding:1.1rem .9rem;text-align:center;vertical-align:bottom;
  border-bottom:2px solid rgba(19,28,46,.1);background:#fff;
  position:sticky;top:0;z-index:1}
.k-cf__t thead th:first-child{text-align:left;width:34%}
.k-cf__t thead th b{display:block;font-size:1.04rem;font-weight:700;
  letter-spacing:-.01em;color:var(--c,#131C2E)}
.k-cf__t thead th span{display:block;margin-top:.15rem;font-size:.82rem;font-weight:500;
  color:rgba(19,28,46,.66);font-variant-numeric:tabular-nums}
/* 27/10/2026: grigi da .55 e .45 a .66 e .64, erano sotto 4,5 di contrasto */
.k-cf__lab{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(19,28,46,.64)}

.k-cf__t tbody th{padding:.72rem .9rem;text-align:left;font-weight:500;
  color:rgba(19,28,46,.78);line-height:1.4}
.k-cf__t tbody td{padding:.72rem .9rem;text-align:center;vertical-align:middle}
.k-cf__t tbody tr + tr th,
.k-cf__t tbody tr + tr td{border-top:1px solid rgba(19,28,46,.07)}

/* ⚠️ La colonna del pacchetto in evidenza si vede anche qui: e' la stessa
   informazione del bollo sui riquadri, e se sparisse in tabella sembrerebbe
   che il consiglio valga solo di sopra. */
.k-cf__t .is-scelto{background:color-mix(in srgb, var(--c) 5%, transparent)}

.k-cf__gb{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;color:var(--c,#131C2E);
  font-variant-numeric:tabular-nums}

.k-cf__si{color:var(--c,var(--ac));font-size:1.05rem;font-weight:700}
.k-cf__no{color:rgba(19,28,46,.26);font-size:1.05rem}
/* solo per il lettore di schermo: un segno grafico non si sente */
.k-cf__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.k-cf__nota{margin:.9rem 0 0;font-size:.88rem;color:rgba(19,28,46,.55)}

@media (max-width:48rem){
  .k-cf__t{font-size:.88rem}
  .k-cf__t thead th:first-child{width:auto;min-width:11rem}
}

/* ==========================================================================
   /richiedi/ — I PASSI DELL'ATTIVAZIONE

   ⚠️ Stanno SOPRA il modulo e non sotto: chi sta per premere un bottone verde
   sotto un totale ha il diritto di sapere prima che cosa succede dopo — quando
   arriva la risposta, quando si paga, quando il sito e' online. Metterli in
   fondo vorrebbe dire rispondere a una domanda che uno si e' gia' fatto.
   ⚠️ Descrivono il processo VERO, che oggi e' a mano. Se un giorno
   l'automazione si accende, il passo 3 cambia e va riscritto: non e' un
   testo decorativo.
   ========================================================================== */

/* ⚠️ Le colonne sono dichiarate a mano e non con `auto-fit`: i passi sono
   QUATTRO, e `auto-fit` ne metteva tre in riga fra i 640 e i 1024, lasciando il
   quarto orfano — che su una sequenza numerata sembra un errore, come se il
   passo 4 fosse di un altro elenco. Qui: quattro in riga da 64rem, due e due
   sotto, in colonna sul telefono. */
.k-rq__passi{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:1fr}
@media (min-width:34rem){
  .k-rq__passi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64rem){
  .k-rq__passi{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ⚠️ `margin:0`: sono <li>, e il tema ci mette 4px sopra. Con la griglia che
   gia' fa i suoi stacchi, quei 4px sono un secondo criterio che si somma al
   primo — e la spaziatura smette di essere quella scritta qui. */
/* ⚠️⚠️ LO STATO DI PARTENZA LO METTE IL JAVASCRIPT, non il CSS. Se lo scrivesse
   il foglio, i quattro passi nascerebbero invisibili e resterebbero tali per
   chiunque abbia il JS spento o rotto — e questa e' la pagina in cui si spiega
   come funziona il servizio, cioe' l'ultima che ci si puo' permettere di far
   uscire vuota. Con la classe `is-anima` messa da JS, senza JS non succede
   niente e si vede tutto subito.
   ⚠️ Vale anche per gli scatti a pagina intera: un'animazione all'ingresso li
   fa uscire bianchi, e sembra che la sezione non ci sia. */
.k-rq__passi.is-anima .k-rq__passo{opacity:0;transform:translateY(14px)}
.k-rq__passi.is-anima .k-rq__passo.is-dentro{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--k-rit,0ms)}

@media (prefers-reduced-motion:reduce){
  .k-rq__passi.is-anima .k-rq__passo{opacity:1;transform:none;transition:none}
}

.k-rq__passi .k-rq__passo{display:flex;flex-direction:column;gap:.35rem;position:relative;margin:0;
  background:#fff;border:1px solid rgba(19,28,46,.1);border-radius:1.1rem;
  padding:clamp(1.05rem,2.2vw,1.4rem)}

.k-rq__n{display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 auto;
  border-radius:999px;background:var(--ac);color:#fff;
  font-size:.92rem;font-weight:700;margin-bottom:.35rem}

.k-rq__passo b{font-family:var(--display);font-size:1.06rem;font-weight:700;
  letter-spacing:-.01em;color:#131C2E}
.k-rq__d{font-size:.92rem;line-height:1.5;color:rgba(19,28,46,.62)}

/* ⚠️ La freccina fra un passo e l'altro solo quando sono AFFIANCATI: in colonna
   punterebbe a destra nel vuoto. E mai dopo l'ultimo. */
@media (min-width:64rem){
  .k-rq__passo:not(:last-child)::after{content:"→";position:absolute;
    right:-.85rem;top:1.55rem;transform:translateY(-50%);
    font-size:1.05rem;color:rgba(19,28,46,.22);pointer-events:none}
}

/* sulla pagina di richiesta il modulo non ha bisogno del suo cappello: il
   titolo ce l'ha gia' l'apertura, e ripeterlo fa due titoli di fila */
.k-rq #offerta > .k-of__testa{display:none}
.k-rq #offerta{margin-top:0}
/* ⚠️ 2/11/2026: dopo l'invio la testata torna, perche' e' li' che offerta.js
   scrive «Richiesta ricevuta.»; senza, la pagina restava vuota */
.k-rq #offerta.is-inviata > .k-of__testa{display:block;max-width:none;margin-bottom:0}

/* ══ 28/10/2026 — LA REVISIONE DI /richiedi/ («richiedi preventivo da rivedere»)
   ══════════════════════════════════════════════════════════════════════════
   ⚠️⚠️ I CARATTERI. Questa pagina NON e' nell'elenco di
   `kreita_e_home_nuova()` (functions.php), quindi il corpo non ha `k-home` e
   non le arriva nessuna regola `.k-home .elementor …` di home.css, che e' da
   dove /hosting/ prende i suoi. Risultato misurato a 1440: testi e modulo nel
   carattere di SISTEMA, titolo e passi in DM Sans (quello di Ohio), solo i
   quattro passi in Space Grotesk. Tre famiglie in una pagina.
   Non si aggiunge «richiedi» a quell'elenco: porterebbe anche il sipario
   d'ingresso e tutte le regole `.k-home .elementor p, li` che sulle pagine
   nuove hanno gia' scolorito testi a sorpresa. Si danno qui le due famiglie
   del sito, come su /hosting/: Space Grotesk ai titoli, Hanken ai testi. */
.k-rq{font-family:"Hanken Grotesk",system-ui,sans-serif}
.k-rq .k-ho__h1{font-family:var(--display);font-weight:700}
.k-rq .k-of__pb,
.k-rq .k-of__ch,
.k-rq .k-of__pn{font-family:var(--display);font-weight:700}
/* i bottoni e i campi non ereditano da soli: Ohio da' ai <button> il suo carattere */
.k-rq button,.k-rq input,.k-rq textarea,.k-rq select{font-family:"Hanken Grotesk",system-ui,sans-serif}
/* ⚠️ Sul telefono Space Grotesk e' piu' largo del DM Sans di prima: il titolo
   del passo andava su due righe e il riassunto accanto («E-commerce», il
   dominio) si troncava coi puntini — 82px per una parola da 83. Qui il
   riassunto va su una riga sua sotto il titolo, rientrato come il titolo, e la
   freccina resta in alto a destra. Il dominio molto lungo si tronca ancora, ma
   su tutta la riga e non in un terzo. */
@media (max-width:34rem){
  .k-rq .k-of__pb{font-size:1.06rem;flex-wrap:wrap;row-gap:.1rem}
  .k-rq .k-of__pt{flex:1 1 0;min-width:0}
  .k-rq .k-of__chev{order:2}
  .k-rq .k-of__sunto{order:3;flex:0 0 100%;padding-left:2.45rem}
}

/* ⚠️ IL MODULO SUL FILO. `.k-of` ha un tetto suo da 74rem (1184px) e si
   centrava dentro `.k-ho__in`, che la gabbia gliela da' gia': a 1440 stava
   8px dentro per lato rispetto a titolo e passi, a 1920 piu' di cento.
   Stessa trappola gia' vista con `.k-au` (vedi kreita-filo.php). */
.k-rq .k-of{max-width:none}

/* ⚠️ Chi arriva da «Chiedi» su /hosting/ viene portato al modulo (offerta.js):
   lo spazio sopra e' quello dell'intestazione fissa, piu' un respiro. */
.k-rq #offerta{scroll-margin-top:7.5rem}

/* ══ TITOLO A SINISTRA, TESTO A DESTRA, come l'apertura di /hosting/ ════════
   ⚠️ Stesso impianto di `kreita-hosting-colonne.php`, con le stesse ragioni:
   la prima riga `1fr` e' vuota apposta (se il paragrafo e' piu' alto, l'altezza
   in piu' finisce sopra e occhiello e titolo restano attaccati), la filigrana
   si spegne perche' stava proprio li', e sotto i 1100 si resta su una colonna. */
@media (min-width:1100px){
  .k-rq__testa > .k-ho__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    grid-template-rows:1fr auto auto;column-gap:clamp(3rem,5.5vw,5.5rem)}
  .k-rq__testa > .k-ho__in > *{grid-column:1/-1}
  .k-rq__testa > .k-ho__in > .k-kicker{grid-column:1;grid-row:2;justify-self:start}
  .k-rq__testa > .k-ho__in > .k-ho__h1{grid-column:1;grid-row:3;max-width:none;margin-bottom:0}
  .k-rq__testa > .k-ho__in > .k-ho__occhio{grid-column:2;grid-row:1/4;align-self:end;max-width:60ch;margin:0}
  .k-rq__testa::after{display:none}
}


/* --- LE VOCI DELLA TABELLA CHE SI SPIEGANO ---------------------------------
   ⚠️ Il punto interrogativo e' piccolo e grigio finche' non ci si passa sopra:
   deve farsi trovare da chi non capisce una voce, non gridare a chi le capisce
   tutte. Sette punti interrogativi accesi in colonna direbbero «questa tabella
   e' complicata», che e' l'opposto del messaggio.
   --------------------------------------------------------------------------- */
.k-cf__conspieg{padding-top:.55rem;padding-bottom:.55rem}

.k-cf__voce{display:flex;align-items:flex-start;gap:.5rem;width:100%;
  font:inherit;font-size:inherit;font-weight:500;color:rgba(19,28,46,.78);
  background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
  line-height:1.4}
.k-cf__voce:hover{color:#131C2E}
.k-cf__voce:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:.4rem}

.k-cf__ch{flex:0 0 auto;display:grid;place-items:center;width:1.1rem;height:1.1rem;
  margin-top:.12rem;border-radius:999px;
  background:rgba(19,28,46,.09);color:rgba(19,28,46,.5);
  font-size:.68rem;font-weight:700;line-height:1;
  transition:background .18s,color .18s}
.k-cf__voce:hover .k-cf__ch{background:var(--ac);color:#fff}
.k-cf__voce[aria-expanded="true"] .k-cf__ch{background:var(--ac);color:#fff}

.k-cf__spieg{overflow:hidden}
.k-cf__spieg[hidden]{display:none}
.k-cf__spieg p{margin:.5rem 0 0;padding:.6rem .75rem;
  background:rgba(19,28,46,.04);border-radius:.6rem;
  font-size:.86rem;line-height:1.55;font-weight:400;color:rgba(19,28,46,.7)}
.k-cf__spieg b,.k-cf__spieg strong{color:#131C2E;font-weight:600}

/* 29/10/2026: sotto la casella solo i nomi delle prime cinque estensioni e
   «e altre 4» (hosting.php, kreita_dominio_shortcode): l'ultima pasticca non
   è un'estensione, quindi senza fondo e più leggera. La riga dei prezzi IVA
   esclusa è passata sotto i risultati, dopo la coda. */
.k-dom__ext li.-altre{background:none;border-color:transparent;font-style:italic;opacity:.75}
.k-dom__coda .k-dom__iva{display:block;margin-top:.35rem;font-size:.86rem;opacity:.8}


/* ══════════════════════════════════════════════════════════════════════════
   LA RICERCA NELLA COLONNA DESTRA DI /domini/ (prove 38 e 39, approvate il
   29/10/2026). Tutto sotto `.k-sv__dx`: su /hosting/ la casella sta
   nell'apertura e non cambia niente.
   ⚠️ Ordine della colonna (servizio.php): testo del servizio, poi «Inizia ora»
   con la ricerca, poi le attività. Utente: «metterei testo in alto dove
   spieghiamo il servizio… poi sotto inizia ora con barra ricerca domini non
   troppo impattante… occhio sempre agli spazi», e poi «ora tutto troppo
   attaccato»: fra i blocchi clamp(3.4rem,5vw,4.6rem), 72px a 1440, 54 sul telefono.
   ══════════════════════════════════════════════════════════════════════════ */
.k-sv__dx{--k-dom-stacco:clamp(3.4rem,5vw,4.6rem)}
.k-sv__dx .k-sv__testo:has(+ .k-dom-sez){margin-bottom:var(--k-dom-stacco)}
.k-sv__dx .k-dom-sez.-prima{border:0;padding:0;margin:0 0 var(--k-dom-stacco)}
/* ⚠️ larga quanto il testo, che non ha limite (allineamenti-word): con un
   max-width suo restava più stretta a 1468 e a 1920 */
.k-sv__dx .k-dom{max-width:none;margin:0}
.k-sv__dx .k-dom__testa{margin:0 0 1.5rem;max-width:none}
.k-sv__dx .k-dom__testa .k-sv__oc{display:block}
/* il titolo alla misura di «Che cosa possiamo fare.»: non domina la colonna */
.k-sv__dx .k-dom__h2{font-family:var(--k-display,"Space Grotesk",sans-serif);font-weight:700;
  font-size:clamp(1.4rem,2.2vw,1.75rem);line-height:1.2;letter-spacing:-.03em;margin:.4rem 0 .45rem;color:#131C2E}
.k-sv__dx .k-dom__frase{font-size:1.02rem;line-height:1.6;color:#3A4555;max-width:none;text-wrap:pretty}
.k-sv__dx .k-dom__box{border-width:1px;padding:.3rem .3rem .3rem 1rem}
.k-sv__dx .k-dom__in{font-size:1.05rem;padding:.55rem .2rem}
.k-sv__dx .k-dom__go{padding:.62rem 1.2rem;font-size:.95rem}
.k-sv__dx .k-dom__ext{margin-top:1rem;padding-left:0}
.k-sv__dx .k-dom__aiuto{margin:.8rem 0 0;font-size:.9rem;line-height:1.5;color:#4A5568!important;text-wrap:pretty}
.k-sv__dx .k-dom__iva{display:block;margin-top:.35rem}
/* ── le estensioni da scegliere (`data-scelta`, hosting.js) ── */
.k-dom.-scelta .k-dom__ext li{background:none!important;border:0!important;padding:0!important}
.k-dom.-scelta .k-dom__ext li[hidden]{display:none!important}
.k-dom__t,.k-dom__piu{font:600 .84rem/1 "Hanken Grotesk",sans-serif;border-radius:999px!important;padding:.5rem .8rem;cursor:pointer;
  border:1px solid rgba(19,28,46,.24);background:#fff!important;color:#4A5568!important;transition:background .2s,color .2s,border-color .2s}
.k-dom__t[aria-pressed="true"]{background:color-mix(in srgb,var(--ac,#0F766E) 12%,#fff)!important;
  border-color:color-mix(in srgb,var(--ac,#0F766E) 45%,transparent);color:var(--acd,#0F766E)!important}
.k-dom__t[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
.k-dom__t:hover{border-color:var(--ac,#0F766E);color:var(--acd,#0F766E)!important}
/* ⚠️ «Altre estensioni» si deve vedere: senza, chi cerca un .srl non lo trova */
.k-dom__piu{border-style:dashed;border-color:rgba(19,28,46,.38);color:#3A4555!important}
.k-dom__piu::before{content:"+ "}
.k-dom__piu[aria-expanded="true"]::before{content:"− "}
.k-dom__piu:hover{border-color:rgba(19,28,46,.6);color:#131C2E!important}
.k-dom__t:focus-visible,.k-dom__piu:focus-visible{outline:2px solid var(--ac,#0F766E);outline-offset:2px}
.k-dom__r[hidden]{display:none!important}
/* ⚠️ `.k-sv__dx .k-dom .k-dom__r`, tre classi: `kreita-hosting-colonne.php`
   stampa nel <head>, DOPO questo file, `.k-dom .k-dom__r{display:flex…}` e
   `.k-dom .k-dom__r .k-dom__prendi{flex:0 0 100%}`; a pari peso vinceva lei
   e il bottone tornava largo quanto la riga. */
/* ── i risultati a righe: nome, prezzo, esito; i già registrati in fondo e spenti ── */
.k-sv__dx .k-dom .k-dom__somma{margin:1.6rem 0 .4rem}
.k-sv__dx .k-dom .k-dom__lista{display:flex;flex-direction:column;gap:0;background:#fff;border-radius:16px;padding:.2rem 1.1rem;
  border:1px solid rgba(19,28,46,.08)}
.k-sv__dx .k-dom .k-dom__lista[hidden]{display:none}
/* ⚠️ La scritta del bottone non si accorcia («Aggiungi alla richiesta» dal 2/11/2026).
   Per lasciare al nome tutta la riga, il bottone scende accanto alla nota. */
.k-sv__dx .k-dom .k-dom__r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"d prezzo esito" "nota prendi prendi";column-gap:1rem;row-gap:.35rem;align-items:center;
  padding:.8rem 0!important;min-height:0!important;border:0;border-top:1px solid rgba(19,28,46,.08);border-radius:0;
  background:none;transform:none!important;box-shadow:none!important}
.k-sv__dx .k-dom .k-dom__r > *{margin:0!important}
.k-sv__dx .k-dom .k-dom__r:first-child{border-top:0}
.k-sv__dx .k-dom .k-dom__d{grid-area:d;font-size:1.02rem}
.k-sv__dx .k-dom .k-dom__nota{grid-area:nota;min-height:0}
.k-sv__dx .k-dom .k-dom__prezzo{grid-area:prezzo;text-align:right;white-space:nowrap}
.k-sv__dx .k-dom .k-dom__esito{grid-area:esito;justify-content:flex-start}
.k-sv__dx .k-dom .k-dom__r .k-dom__prendi{grid-area:prendi;justify-self:end;white-space:nowrap;padding:.5rem .9rem;font-size:.84rem}
.k-sv__dx .k-dom .k-dom__r.is-occupato{order:2;opacity:.55;border-style:solid}
.k-sv__dx .k-dom .k-dom__r.is-libero:hover{background:color-mix(in srgb,var(--ac) 4%,transparent)}
.k-sv__dx .k-dom .k-dom__coda{margin:1rem 0 0}
@media (max-width:600px){
  .k-sv__dx .k-dom .k-dom__lista{padding:.2rem .9rem}
  /* il bottone NON in colonna col nome: lo stringerebbe a metà parola */
  .k-sv__dx .k-dom .k-dom__r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d d" "prezzo esito" "nota nota" "prendi prendi";
    row-gap:.35rem;padding:1rem 0!important}
  .k-sv__dx .k-dom .k-dom__prezzo{text-align:left}
  .k-sv__dx .k-dom .k-dom__esito{justify-content:flex-end}
  .k-sv__dx .k-dom .k-dom__r .k-dom__prendi{justify-self:start;margin-top:.3rem!important}
}
@media (max-width:480px){ .k-sv__dx .k-dom__in{font-size:1.12rem} }

/* ══ PROVA 45 (2/11/2026) — /richiedi/ per l'hosting e per il dominio ═══════
   Da accodare a hosting.css quando approvata.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- a capo naturali: titoli bilanciati, paragrafi senza parola sola -------- */
.k-rq .k-ho__h1{text-wrap:balance}
.k-rq .k-ho__occhio,.k-rq .k-of__pd,.k-rq .k-of__aiuto{text-wrap:pretty}
/* ⚠️ `pretty` da solo non bastava: misurate a 1024 e 360, le frasi brevi delle
   carte e dei passi finivano ancora con «persone.», «crescere», «momento.»
   da soli. Su testi di due-cinque righe `balance` li pareggia. */
.k-rq__d,.k-rq__dom-frase,.k-rq .k-of__pw,.k-rq .k-of__pt,.k-rq .k-of__et,.k-rq .k-of__grt,
.k-rq .k-of__radio span,.k-rq .k-of__consenso span,.k-rq .k-of__risparmio{text-wrap:balance}
/* a 360 «hosting» restava da solo sulla terza riga del titolo */
@media (max-width:23.5rem){.k-rq .k-ho__h1{font-size:1.85rem}}

/* --- I PARAGRAFI DEL MODULO A TUTTA LARGHEZZA ------------------------------
   ⚠️ Erano chiusi a 58ch e 52ch dentro una colonna da 759px: la frase sopra i
   piani si fermava a 504px e lasciava vuoto a destra, accanto alle carte che
   arrivano fino in fondo. */
.k-rq .k-of__pd,.k-rq .k-of__aiuto{max-width:none}

/* --- LA CONFERMA DOPO L'INVIO: l'occhiello non tocca il titolo ------------- */
.k-rq #offerta.is-inviata > .k-of__testa .k-kicker{margin-bottom:.8rem}

/* --- I PIANI IN GRUPPI ------------------------------------------------------
   Due gruppi con un titoletto: per il sito, e di sola posta (con «Solo il
   dominio» in coda, quando e' la pagina dell'hosting). Dentro ogni gruppo
   quattro colonne da 60rem, senza carte larghe il doppio. */
.k-of__gruppi{display:grid;gap:1.5rem}
.k-of__grt{margin:0 0 .65rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(19,28,46,.55)}
@media (min-width:60rem){
  .k-of__gr .k-of__piano--largo,
  .k-of__gr .k-of__piano--solo{grid-column:auto}
  /* ⚠️ `.k-of` davanti: offerta.css si carica DOPO questo foglio, e a pari
     peso le sue `.k-of__piani{repeat(4…)}` e `.k-of__piano--solo{span 2}`
     vincevano — la carta restava larga mezza riga (visto sul sito vero) */
  .k-of .k-of__piani--solo{grid-template-columns:1fr}
  .k-of .k-of__piani--solo .k-of__piano--solo{grid-column:1/-1}
}
/* ⚠️ Quattro in riga solo da 80rem. A 1024 la colonna dei passi e' larga
   ~540px e le carte scendevano a 120px, con «persone» e «superiori» da soli
   in fondo a frasi di sette righe; a 768 `auto-fit` ne metteva tre, con la
   quarta orfana. Fra i 34 e gli 80rem: due per riga, cioe' due righe pari. */
@media (min-width:34rem){
  .k-rq .k-of__gr .k-of__piani{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:80rem){
  .k-rq .k-of__gr .k-of__piani{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* «Solo il dominio» gia' scelto in cima, nella pagina del dominio: una riga sola */
@media (min-width:34rem){
  .k-of .k-of__piani--solo .k-of__pbox{display:grid;grid-template-columns:auto auto minmax(0,1fr);
    column-gap:1.1rem;align-items:baseline}
  .k-of__piani--solo .k-of__pw{margin:0;justify-self:end;text-align:right}
}

/* --- SUL TELEFONO -----------------------------------------------------------
   ⚠️ Le carte dei piani erano alte ~150px l'una, una sotto l'altra: per
   arrivare a «Solo il dominio» se ne scorrevano sette. Qui nome e prezzo stanno
   sulla stessa riga, e spazio e «per chi» sotto. */
@media (max-width:33.99rem){
  /* ⚠️ il nome prende la sua misura e non si spezza («Advance/d» a 390): e'
     il prezzo, a destra, che va a capo fra la cifra e «all'anno + IVA» */
  .k-rq .k-of .k-of__pbox{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:.8rem;row-gap:.12rem;align-items:baseline;padding:.8rem .95rem}
  .k-rq .k-of__pn{overflow-wrap:normal;word-break:normal;hyphens:none}
  .k-rq .k-of__bollo{grid-column:1/-1;justify-self:start}
  .k-rq .k-of__pp{text-align:right}
  .k-rq .k-of__ps,.k-rq .k-of__pw{grid-column:1/-1}
  .k-rq .k-of__pw{margin-top:.15rem}
  .k-rq .k-of__piani{gap:.6rem}

  /* i quattro passi: una scheda sola con quattro righe, non quattro schede.
     Prima erano ~800px prima del modulo. */
  .k-rq__passi{gap:0;background:#fff;border:1px solid rgba(19,28,46,.1);
    border-radius:1.1rem;padding:.2rem 1.1rem}
  .k-rq__passi .k-rq__passo{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:.85rem;row-gap:.15rem;align-items:start;
    background:none;border:0;border-radius:0;padding:.95rem 0;
    border-top:1px solid rgba(19,28,46,.08)}
  .k-rq__passi .k-rq__passo:first-child{border-top:0}
  .k-rq__passo .k-rq__n{grid-row:1/3;margin:0;width:1.75rem;height:1.75rem;font-size:.85rem}
  .k-rq__passo b,.k-rq__passo .k-rq__d{grid-column:2}
}

/* --- LA PAGINA DEL DOMINIO: il riquadro col nome in apertura ---------------
   ⚠️ Chiaro sul colore dell'area, come le carte nelle altre aperture: il nome
   e' la prima cosa che si legge dopo il titolo. */
.k-rq__destra{display:grid;gap:1.1rem}
.k-rq__dom{display:grid;gap:.3rem;padding:1.1rem 1.25rem 1.15rem;border-radius:1rem;
  background:color-mix(in srgb,var(--atesto) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--atesto) 24%,transparent)}
.k-rq__dom-et{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.k-rq__dom-nome{font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.15;overflow-wrap:anywhere}
.k-rq__dom-riga{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.1rem;
  font-size:.95rem;line-height:1.4}
.k-rq__dom-stato{display:inline-flex;align-items:center;gap:.45rem;font-weight:600}
.k-rq__dom-stato::before{content:"";width:.55rem;height:.55rem;border-radius:999px;
  background:currentColor;opacity:.55;flex:0 0 auto}
.k-rq__dom-stato.is-libero::before{background:#7CF0BE;opacity:1;
  box-shadow:0 0 0 3px color-mix(in srgb,#7CF0BE 30%,transparent)}
.k-rq__dom-stato.is-occupato::before{background:#FFB4A8;opacity:1}
.k-rq__dom-stato.is-attesa{font-weight:500;opacity:.8}
.k-rq__dom-stato.is-attesa::before{animation:k-rq-pulsa 1s ease-in-out infinite alternate}
@keyframes k-rq-pulsa{to{opacity:.15}}
@media (prefers-reduced-motion:reduce){.k-rq__dom-stato.is-attesa::before{animation:none}}
.k-rq__dom-prezzo{opacity:.85;font-variant-numeric:tabular-nums}
.k-rq__dom-frase{margin:0}
@media (max-width:1099.98px){
  .k-rq--dominio .k-rq__destra{margin-top:.4rem}
  /* la filigrana «02» finiva sopra il riquadro col nome */
  .k-rq--dominio .k-rq__testa::after{display:none}
}

/* ══ PROVA 45, SECONDA VERSIONE — piu' domini ══════════════════════════════ */

/* il gruppo di sola posta ha tre carte: tre per riga, non quattro con un buco */
@media (min-width:48rem){
  .k-rq .k-of__gr .k-of__piani[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- la lista dei domini nel modulo ---------------------------------------- */
.k-of__dl{list-style:none;margin:0 0 1.1rem;padding:0;border:1px solid rgba(19,28,46,.12);
  border-radius:.9rem;overflow:hidden}
.k-of__dl[hidden]{display:none}
.k-of__dl-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;
  column-gap:.9rem;margin:0;padding:.7rem .6rem .7rem 1rem;border-top:1px solid rgba(19,28,46,.08)}
.k-of__dl-r:first-child{border-top:0}
.k-of__dl-n{font-weight:600;color:#131C2E;overflow-wrap:anywhere}
.k-of__dl-s{font-size:.78rem;font-weight:700;line-height:1.2;padding:.24rem .6rem;border-radius:999px;
  white-space:nowrap;color:rgba(19,28,46,.62);background:rgba(19,28,46,.06)}
.k-of__dl-s.is-libero{color:#146C34;background:#E6F4EA}
.k-of__dl-s.is-occupato{color:#B42318;background:#FDECEA}
.k-of__dl-s.is-boh,.k-of__dl-s.is-troppe{color:#8F5406;background:#FDF3E1}
.k-of__dl-p{font-size:.88rem;color:rgba(19,28,46,.6);white-space:nowrap;font-variant-numeric:tabular-nums}
.k-of .k-of__dl-x{display:grid;place-items:center;width:2rem;height:2rem;margin:0;padding:0;
  border:0;border-radius:999px;background:none;color:rgba(19,28,46,.45);font-size:1.25rem;line-height:1;cursor:pointer}
.k-of .k-of__dl-x:hover{background:rgba(19,28,46,.07);color:#131C2E}
.k-of .k-of__dl-x:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
/* sul telefono: il nome e la × sopra, stato e prezzo sotto sulla stessa riga */
@media (max-width:33.99rem){
  .k-of__dl-r{grid-template-columns:auto minmax(0,1fr) auto;column-gap:.6rem;row-gap:.35rem;padding-left:.9rem}
  .k-of__dl-n{grid-column:1/3;grid-row:1}
  .k-of .k-of__dl-x{grid-column:3;grid-row:1}
  .k-of__dl-s{grid-column:1;grid-row:2;justify-self:start}
  .k-of__dl-p{grid-column:2/4;grid-row:2;font-size:.84rem}
}
/* la casella per aggiungere: «Aggiungi» e' un'azione secondaria, non il bottone del modulo */
.k-of__cerca .k-of__ctrl{padding:.7rem 1.4rem}

/* --- nel riquadro del preventivo: una riga per dominio --------------------- */
.k-of__voce[data-voce="dominio"] dd{flex-direction:column;align-items:flex-end;gap:.3rem}
.k-of__vl{display:flex;align-items:baseline;justify-content:flex-end;flex-wrap:wrap;gap:.2rem .5rem;text-align:right}

/* --- il riquadro in apertura con piu' domini ------------------------------- */
.k-rq__dom-lista{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.k-rq__dom-r{display:grid;gap:.25rem;margin:0}
.k-rq__dom.-piu .k-rq__dom-lista{gap:0}
.k-rq__dom.-piu .k-rq__dom-r{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:1rem;
  padding:.55rem 0;border-top:1px solid color-mix(in srgb,var(--atesto) 18%,transparent)}
.k-rq__dom.-piu .k-rq__dom-r:first-child{border-top:0;padding-top:.2rem}
.k-rq__dom.-piu .k-rq__dom-nome{font-size:clamp(1.1rem,1.6vw,1.3rem)}
.k-rq__dom.-piu .k-rq__dom-riga{justify-content:flex-end;font-size:.88rem}
@media (max-width:33.99rem){
  .k-rq__dom.-piu .k-rq__dom-r{grid-template-columns:1fr}
  .k-rq__dom.-piu .k-rq__dom-riga{justify-content:flex-start}
}
.k-rq__dom-stato.is-boh::before,.k-rq__dom-stato.is-troppe::before{background:#FFD58A;opacity:1}

/* --- la ricerca: domini aggiunti alla richiesta e la barra in fondo -------- */
/* nelle schede di /hosting/ si accende il bordo; nella lista a righe di
   /domini/ basta il bottone (un riquadro attorno alla riga la stringeva) */
.k-ho__cerca .k-dom .k-dom__r.is-scelto{border-color:var(--ac,#0F766E)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ac,#0F766E) 22%,transparent)!important}
.k-dom .k-dom__r .k-dom__prendi.is-scelto{background:#fff!important;color:var(--ac,#0F766E)!important;
  box-shadow:inset 0 0 0 1.5px var(--ac,#0F766E)!important}
.k-dom .k-dom__r a.k-dom__prendi.is-scelto:hover{background:color-mix(in srgb,var(--ac,#0F766E) 8%,#fff)!important;
  color:var(--ac,#0F766E)!important}
.k-dom-scelti{position:fixed;left:50%;bottom:1rem;z-index:60;transform:translateX(-50%);
  width:min(46rem,calc(100% - 2rem));transition:transform .25s,opacity .25s}
.k-dom-scelti[hidden]{display:none}
.k-dom-scelti.is-fuori{opacity:0;transform:translate(-50%,1rem);pointer-events:none}
.k-dom-scelti__in{display:flex;align-items:center;gap:1rem;padding:.7rem .7rem .7rem 1.2rem;border-radius:999px;
  background:#131C2E;color:#fff;box-shadow:0 18px 40px -18px rgba(19,28,46,.6)}
.k-dom-scelti__t{flex:1 1 auto;min-width:0;margin:0;font-size:.92rem;line-height:1.35;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-dom-scelti__t b{font-weight:700;margin-right:.35rem}
.k-dom-scelti__t span{color:rgba(255,255,255,.65)}
.k-dom-scelti a.k-dom-scelti__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.1rem;border-radius:999px;background:#fff;color:#131C2E!important;
  font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.k-dom-scelti a.k-dom-scelti__go:hover{background:#E9EDF2;color:#131C2E!important}
@media (max-width:37.5rem){
  /* sopra il bollino di reCAPTCHA, che sta in basso a destra */
  .k-dom-scelti{bottom:5.4rem}
  .k-dom-scelti__in{border-radius:1rem;flex-wrap:wrap;gap:.55rem;padding:.75rem}
  .k-dom-scelti__t{flex-basis:100%;white-space:normal}
  .k-dom-scelti a.k-dom-scelti__go{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.k-dom-scelti{transition:none}}