/* ==========================================================================
   LA RICHIESTA DI OFFERTA — il carrello che non incassa.

   ⚠️⚠️ Il colore lo dà l'area Web, come tutto il resto della pagina: `.k-of` è
   nell'elenco in cima a hosting.css che riempie `--ac`, `--clb-button-color` e
   `--clb-color-primary`. Senza quella riga i bottoni e i pallini tornano
   arancioni, perché su un <button> nudo vince la variabile di Ohio.
   ⚠️ Qui dentro non si scrivono tinte a mano: solo `var(--ac)` e l'inchiostro
   #131C2E che è quello di tutto il sito.
   ========================================================================== */

/* ⚠️⚠️ `[hidden]` DA SOLO NON NASCONDE NIENTE qui dentro. La regola del browser
   è `[hidden]{display:none}` con specificità di elemento: qualunque nostra
   regola di classe che imposti un `display` la batte. Senza queste righe
   restavano VISIBILI il campo «chi lo tiene adesso», la riga «Spazio» del
   riepilogo e — la peggiore — l'intero modulo dopo l'invio riuscito, con il
   cliente invitato a rimandarlo una seconda volta.
   ⚠️ E una prova che legge `element.hidden` non se ne accorge: nel DOM
   l'attributo c'è. Si vede solo guardando la pagina. */
.k-of [hidden],
.k-of__c[hidden],
.k-of__voce[hidden],
.k-of__griglia[hidden]{display:none}

.k-of{max-width:74rem;margin:0 auto}
.k-of__testa{max-width:46rem;margin-bottom:2rem}
.k-of__h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.14;letter-spacing:-.03em;
  margin:0 0 .55rem;font-weight:600}
.k-of__frase{margin:0;color:rgba(19,28,46,.62);max-width:60ch}

/* --- l'impianto: i passi a sinistra, il conto a destra -------------------
   ⚠️ 28/10/2026: sul telefono il conto sta SOTTO i passi. Prima stava sopra
   («chi arriva deve capire subito che è un preventivo»), ma così il bottone
   «Invia la richiesta» era la prima cosa del modulo, prima ancora di aver
   scelto un pacchetto, con un totale vuoto («—») sopra. Che sia un preventivo
   lo dicono già il titolo della pagina e i quattro passi in cima; il bottone
   va dove si finisce, dopo l'ultimo campo. Chiesto dall'utente.
   Su schermo largo resta a fianco. */
.k-of__griglia{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:60rem){
  /* ⚠️ 1.9fr e non 1.55: la colonna dei passi deve tenere QUATTRO carte piano
     in riga. A 1.55 restava larga ~718px e le carte scendevano a 170, con il
     nome che andava a capo due volte; a 1.9 arriva a ~782 e le carte stanno a
     186, che e' la misura in cui «Dominio e posta» sta su due righe pulite. */
  .k-of__griglia{grid-template-columns:minmax(0,1.9fr) minmax(17rem,.8fr);
    align-items:start;gap:2rem}
}

.k-of__passi{display:grid;gap:1.2rem;order:1}
.k-of__conto{order:2}
@media (min-width:60rem){
  .k-of__passi{order:1}
  .k-of__conto{order:2;position:sticky;top:6rem}
}

/* --- un passo ------------------------------------------------------------ */
.k-of__p{background:#fff;border:1px solid rgba(19,28,46,.1);border-radius:1.1rem;
  padding:clamp(1.2rem,3vw,1.9rem)}
/* --- UN PASSO PER VOLTA -------------------------------------------------
   ⚠️ Prima i tre passi stavano aperti tutti insieme: il modulo era alto tre
   schermate e chi arrivava vedeva subito quanto lavoro c'era da fare, che e' il
   modo piu' rapido di farlo andare via. Ora se ne apre uno alla volta e gli
   altri restano righe compatte, con dentro il riassunto di cosa si e' scelto.
   ⚠️ La testata e' un <button> vero, non un <div> che ascolta i clic: si
   raggiunge col Tab, si apre con Invio e i lettori di schermo la annunciano
   come pieghevole, gratis. `aria-expanded` lo tiene aggiornato il JS.
   ------------------------------------------------------------------------ */
.k-of__ph{margin:0}

.k-of__pb{display:flex;align-items:center;gap:.7rem;width:100%;
  font:inherit;font-size:1.18rem;font-weight:600;letter-spacing:-.02em;
  color:#131C2E;background:none;border:0;padding:0;margin:0;
  text-align:left;cursor:pointer}
.k-of__pt{flex:0 1 auto}
.k-of__pb:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:.5rem}

/* il riassunto di quello che si e' gia' scelto: compare solo a passo chiuso,
   se no ripeterebbe cio' che si sta guardando */
.k-of__sunto{flex:1 1 auto;min-width:0;font-size:.9rem;font-weight:500;
  color:var(--ac);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-of__p:not([data-chiuso]) .k-of__sunto{display:none}

.k-of__chev{flex:0 0 auto;margin-left:auto;width:1.4rem;height:1.4rem;
  display:grid;place-items:center;color:rgba(19,28,46,.4);transition:transform .22s}
.k-of__chev::before{content:"";width:.5rem;height:.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px)}
.k-of__p:not([data-chiuso]) .k-of__chev{transform:rotate(180deg)}

/* ⚠️ `grid-template-rows` da 0fr a 1fr e non `max-height`: con l'altezza
   massima si deve indovinare un numero, e il giorno che il contenuto cresce
   viene tagliato in silenzio. Cosi' invece si apre esattamente quanto serve. */
/* ⚠️⚠️ Dentro a `.k-of__corpo` c'e' UN SOLO figlio, `.k-of__dentro`, e non e'
   un involucro di troppo: `grid-template-rows:0fr` dimensiona la PRIMA riga,
   e con dieci figli diretti ognuno si prende una riga implicita che quello
   `0fr` non tocca — il pannello «chiuso» restava alto 794px con dentro tutto.
   Con un figlio solo, la riga e' una e si chiude davvero. */
.k-of__corpo{display:grid;grid-template-rows:1fr;transition:grid-template-rows .26s ease}
/* ⚠️⚠️ `position:relative` NON e' decorazione: dentro al passo 2 c'e' il
   campo esca (`.k-of__esca`, `position:absolute`). Un elemento assoluto viene
   tagliato da `overflow:hidden` solo se il suo riquadro di riferimento sta
   DENTRO a chi taglia; senza questa riga il riferimento era un contenitore di
   Elementor molto piu' su, e l'esca restava al suo posto naturale, in fondo
   al passo 2 aperto: 157px SOTTO il piede, a passo chiuso. La pagina si
   allungava di una striscia bianca dopo il piede (misurato a 1440, 28/10). */
.k-of__dentro{min-height:0;position:relative}
.k-of__p[data-chiuso] .k-of__corpo{grid-template-rows:0fr}
.k-of__p[data-chiuso] .k-of__dentro{overflow:hidden;visibility:hidden}
.k-of__p:not([data-chiuso]) .k-of__corpo{padding-top:.4rem}

/* a passo chiuso il riquadro si stringe: e' una riga, non una scheda vuota */
.k-of__p[data-chiuso]{padding-top:clamp(.9rem,1.8vw,1.15rem);
  padding-bottom:clamp(.9rem,1.8vw,1.15rem)}
.k-of__p[data-chiuso] .k-of__n{background:rgba(19,28,46,.14)}
.k-of__p[data-chiuso].is-fatto .k-of__n{background:var(--ac)}

@media (prefers-reduced-motion:reduce){
  .k-of__corpo,.k-of__chev{transition:none}
}
.k-of__n{display:grid;place-items:center;width:1.75rem;height:1.75rem;flex:0 0 auto;
  border-radius:999px;background:var(--ac);color:#fff;font-size:.9rem;font-weight:600}
.k-of__pd{margin:0 0 1.1rem;color:rgba(19,28,46,.62);font-size:.97rem;max-width:58ch}
.k-of__amo{color:rgba(19,28,46,.72)}
.k-of__amo strong{color:#131C2E;font-weight:600}

/* --- il campo del dominio ------------------------------------------------ */
/* ⚠️⚠️ Il pulsante «Controlla» usciva 18px PIU' IN BASSO del campo, e la riga
   sembrava storta. Due margini invisibili sommati: `align-items:flex-end`
   allinea i MARGIN BOX, e il blocco del campo porta 1,1rem di margine sotto
   (17,6px), mentre il pulsante — che e' un <button> — si prende 8px sopra dal
   tema. Nessuno dei due si vede, e insieme spostano solo uno dei due elementi.
   Qui dentro si azzerano tutti e due: in una riga dove le cose devono stare a
   filo, i margini vanno dichiarati e non ereditati. */
.k-of__cerca{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.k-of__cerca .k-of__c{flex:1 1 14rem;min-width:0;margin-bottom:0}
.k-of__cerca .k-of__ctrl{margin:0}
.k-of__ctrl{flex:0 0 auto;font:inherit;font-size:.95rem;font-weight:600;
  border:1.5px solid rgba(19,28,46,.16);background:#fff;color:#131C2E;
  border-radius:999px;padding:.7rem 1.3rem;cursor:pointer;
  transition:border-color .2s,color .2s}
.k-of__ctrl:hover{border-color:var(--ac);color:var(--ac)}

.k-of__stato{margin:.85rem 0 0;font-size:.93rem;min-height:1.2em}
.k-of__stato.is-attesa{color:rgba(19,28,46,.5)}
.k-of__stato.is-libero{color:var(--ac);font-weight:500}
.k-of__stato.is-occupato{color:#9B2C2C}
.k-of__stato.is-boh{color:#8F5406}

/* --- i campi ------------------------------------------------------------- */
.k-of__riga{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));margin-bottom:1.1rem}
/* ⚠️⚠️ `margin-top:0` DICHIARATO, come sulle carte piano: Ohio da' 8px sopra a
   ogni <label> che non sia la prima del suo contenitore, e questi campi SONO
   etichette. Risultato misurato: cinque campi a 0 e due a 8 — un ritmo
   verticale storto in due punti a caso, che si nota e non si sa perche'.
   Stessa ragione per i pallini qui sotto: il margine diventa uno solo, in
   basso e uguale per tutti, cosi' la spaziatura e' una scelta e non un
   residuo del tema. */
.k-of__c{display:flex;flex-direction:column;gap:.34rem;margin:0 0 1.1rem}
.k-of__riga .k-of__c{margin-bottom:0}
.k-of__et{font-size:.84rem;font-weight:600;color:#131C2E}
.k-of__et em{font-weight:400;font-style:normal;color:rgba(19,28,46,.45)}
.k-of__c input,.k-of__c textarea{
  font:inherit;font-size:1rem;color:#131C2E;background:#fff;
  border:1.5px solid rgba(19,28,46,.16);border-radius:.7rem;padding:.7rem .9rem;
  transition:border-color .2s,box-shadow .2s}
.k-of__c input:focus,.k-of__c textarea:focus{outline:none;border-color:var(--ac);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent)}
.k-of__c textarea{resize:vertical}

/* --- le domande a pallini ------------------------------------------------ */
.k-of__gruppo{border:0;padding:0;margin:0 0 1.3rem}
.k-of__gruppo legend{padding:0;font-size:.84rem;font-weight:600;color:#131C2E;margin-bottom:.5rem}
.k-of__aiuto{margin:-.2rem 0 .6rem;font-size:.88rem;color:rgba(19,28,46,.55);max-width:52ch}
.k-of__radio{display:flex;align-items:center;gap:.6rem;padding:.42rem 0;
  margin:0 0 .5rem;font-size:.97rem;color:#131C2E;cursor:pointer}
.k-of__radio:last-child{margin-bottom:0}
.k-of__radio input{flex:0 0 auto;margin:0}

/* --- le carte dei piani --------------------------------------------------
   ⚠️ `minmax(min(...),1fr)` e non `minmax(13rem,1fr)`: sotto i 13rem di
   larghezza la seconda forma sfonda il contenitore e la pagina scorre in
   orizzontale. Su telefono succede davvero. */
.k-of__piani{display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}

/* ⚠️⚠️ I QUATTRO PIANI IN RIGA, e i due «altri» sotto a mezza larghezza.
   Con `auto-fit` venivano 3+3: i quattro pacchetti veri finivano spezzati fra
   due righe, con «E-commerce» accanto a «Su misura» come se fossero la stessa
   cosa. Qui la prima riga tiene i quattro con un prezzo, la seconda i due che
   un prezzo non ce l'hanno — «Su misura» e «Solo il dominio» — larghi il
   doppio, che e' anche il modo di dire che sono un'altra categoria di scelta.
   ⚠️ Sotto i 60rem si torna ad `auto-fit`: in colonna la distinzione non
   servirebbe e quattro carte da 186px non ci starebbero comunque. */
@media (min-width:60rem){
  .k-of__piani{grid-template-columns:repeat(4,minmax(0,1fr))}
  .k-of__piano--largo,
  .k-of__piano--solo{grid-column:span 2}
}

/* ⚠️ `display:flex` sull'etichetta, non `block`: come figlia della griglia
   dovrebbe stirarsi da sola, e invece le carte senza bollo restavano 8px piu'
   basse della prima e finivano allineate in basso, con i bordi superiori
   sfalsati di un filo. Con l'etichetta flessibile il riquadro dentro riempie
   tutta l'altezza della riga e i quattro bordi tornano a filo.
   ⚠️ `align-items:stretch` scritto per esteso sulla griglia: `normal` si
   comporta da stretch solo finche' nessuno ci mette le mani. */
.k-of__piani{align-items:stretch}
/* ⚠️⚠️ `margin:0` NON e' pulizia preventiva: Ohio da' un margine superiore di
   8px alle <label> che non sono la prima del loro contenitore. Le carte piano
   SONO etichette, quindi la prima stava a filo e le altre tre 8px piu' in
   basso: bordi superiori sfalsati di un capello, il genere di sbavatura che si
   vede senza sapere che cosa si sta guardando. Misurato leggendo `marginTop`
   sulla prima e sulla seconda, dopo che `align-items:stretch` da solo non
   aveva risolto niente. */
.k-of__piano{position:relative;display:flex;cursor:pointer;margin:0}
.k-of .k-of__pbox{flex:1 1 auto}
.k-of__piano input{position:absolute;opacity:0;width:1px;height:1px}
/* ⚠️⚠️ IL SELETTORE E' DOPPIO APPOSTA, non è una svista. Ohio dichiara
   `input[type="radio"] + span{display:inline}` — specificità (0,1,2) — e il mio
   `.k-of__pbox` da solo è (0,1,0): perdeva. Il risultato era subdolo, perché
   `flex-direction` e `gap` passavano (Ohio non li tocca) e solo il `display`
   veniva ribaltato: le carte dei piani diventavano testo che si accavallava,
   a TUTTE le larghezze. Chi aggiunge qui uno <span> subito dopo un <input>
   deve fare lo stesso. */
.k-of .k-of__pbox{display:flex;flex-direction:column;gap:.18rem;height:100%;
  border:1.5px solid rgba(19,28,46,.14);border-radius:.9rem;
  padding:1rem .95rem;background:#fff;transition:border-color .18s,box-shadow .18s,background .18s}
.k-of__piano:hover .k-of__pbox{border-color:color-mix(in srgb, var(--k-ac,var(--ac)) 55%, transparent)}
.k-of__piano input:focus-visible + .k-of__pbox{outline:2px solid var(--k-ac,var(--ac));outline-offset:2px}
.k-of__piano input:checked + .k-of__pbox{
  border-color:var(--k-ac,var(--ac));background:var(--k-su,#F7F8F9);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--k-ac,var(--ac)) 16%, transparent)}

.k-of__bollo{align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;background:var(--k-ac,var(--ac));color:var(--k-in,#fff);
  border-radius:999px;padding:.16rem .55rem;margin-bottom:.3rem}
.k-of__pn{font-size:1.05rem;font-weight:600;color:#131C2E;letter-spacing:-.01em}
.k-of__pp{font-size:.95rem;color:rgba(19,28,46,.62);font-variant-numeric:tabular-nums}
.k-of__pp b{font-size:1.22rem;font-weight:600;color:#131C2E}
.k-of__ps{font-size:.9rem;font-weight:500;color:var(--k-ac,var(--ac))}
.k-of__pw{margin-top:.3rem;font-size:.86rem;line-height:1.4;color:rgba(19,28,46,.55)}
.k-of__piano--solo .k-of__pbox{border-style:dashed;background:#F7F8F9}

/* --- il consenso --------------------------------------------------------- */
.k-of__consenso{display:flex;gap:.65rem;align-items:flex-start;margin-top:.3rem;
  font-size:.92rem;line-height:1.5;color:rgba(19,28,46,.7);cursor:pointer}
.k-of__consenso input{flex:0 0 auto;margin-top:.22rem}
.k-of__consenso a{color:var(--ac);text-decoration:underline}

/* l'esca: fuori schermo, mai vista da una persona */
.k-of__esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- IL CONTO ------------------------------------------------------------ */
.k-of__cbox{background:#131C2E;color:#fff;border-radius:1.1rem;
  padding:clamp(1.2rem,3vw,1.6rem)}
.k-of__ch{margin:0 0 1rem;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:#fff}

.k-of__voci{margin:0 0 1rem;display:grid;gap:.55rem}
.k-of__voce{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  font-size:.94rem;padding-bottom:.55rem;border-bottom:1px solid rgba(255,255,255,.13)}
.k-of__voce dt{color:rgba(255,255,255,.55);flex:0 0 auto}
.k-of__voce dd{margin:0;display:flex;align-items:baseline;gap:.5rem;text-align:right;
  min-width:0;flex-wrap:wrap;justify-content:flex-end}
.k-of__vn{font-weight:500;word-break:break-all}
.k-of__vp{color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums;white-space:nowrap}
.k-of__vp s{color:rgba(255,255,255,.4)}
.k-of__vp em{font-style:normal;color:#fff;font-weight:600}

.k-of__tot{display:grid;gap:.1rem;margin-bottom:.9rem}
.k-of__tl{font-size:.85rem;color:rgba(255,255,255,.55)}
.k-of__tv{font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.k-of__tn{font-size:.82rem;color:rgba(255,255,255,.5)}

.k-of__risparmio{margin:0 0 1rem;font-size:.87rem;line-height:1.5;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.07);
  border-radius:.6rem;padding:.6rem .75rem}
.k-of__risparmio b{color:#fff;font-weight:600}

/* ⚠️ Il bottone è chiaro su fondo scuro, non del colore dell'area: sul navy il
   verde dell'area Web scende sotto il rapporto 4,5:1 e la scritta si legge
   male. Misurato, non deciso a occhio. */
.k-of__invia{display:block;width:100%;font:inherit;font-size:1rem;font-weight:600;
  border:0;border-radius:999px;padding:.85rem 1.2rem;cursor:pointer;
  background:#fff;color:#131C2E;transition:transform .15s,filter .2s}
.k-of__invia:hover{filter:brightness(.93)}
.k-of__invia:active{transform:translateY(1px)}
.k-of__invia:disabled{opacity:.55;cursor:default}
.k-of__invia.is-attesa{opacity:.7}

.k-of__nota{margin:.8rem 0 0;font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.6)}
.k-of__nota strong{color:#fff;font-weight:600}

.k-of__esito{margin:.7rem 0 0;font-size:.9rem;min-height:1.2em;color:rgba(255,255,255,.75)}
.k-of__esito.is-male{color:#FFB4A8}

@media (prefers-reduced-motion:reduce){
  .k-of__invia,.k-of__pbox,.k-of__ctrl{transition:none}
  .k-of__invia:active{transform:none}
}

/* ⚠️ 05/11/2026: con un dominio lungo (da ~31 caratteri, es. ?d=studio-tecnico-associato-esempio-lungo.it)
   il nome su una riga sola allargava la colonna: i passi uscivano dalla scheda e, a 360, dallo schermo.
   Le colonne non possono più crescere oltre lo spazio che hanno e il nome va a capo dove serve. */
.k-of__passi{grid-template-columns:minmax(0,1fr)}
.k-of__griglia>*,.k-of__passi>*{min-width:0}
.k-of__sunto,.k-of__vn{overflow-wrap:anywhere}
@media (max-width:59.99rem){.k-of__griglia{grid-template-columns:minmax(0,1fr)}}