/* =========================================================================
   KAEVO
   Le regole qui sotto arrivano dal mockup "Kaevo Sito Definitivo v2.dc.html":
   sono state estratte dai fogli che il runtime del tool di design iniettava
   a pagina caricata. Non sono state riscritte né reinterpretate.
   In coda, dopo il filetto, le poche aggiunte necessarie per pubblicare.
   ========================================================================= */

/* --- classi di utilità usate dal markup ---------------------------------- */
.fx { display: flex; }
.col { display: flex; flex-direction: column; }
.grid { display: grid; }
.ac { align-items: center; }
.jc { justify-content: center; }
.jb { justify-content: space-between; }
.f1 { flex: 1 1 0%; }
.noshrink { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs20 { font-size: 20px; }
.fs22 { font-size: 22px; }
.upper { text-transform: uppercase; }
.tc { text-align: center; }
.nowrap { white-space: nowrap; }
.gap8 { gap: 8px; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap16 { gap: 16px; }
.gap24 { gap: 24px; }
.m0 { margin: 0px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.posrel { position: relative; }
.posabs { position: absolute; }
.round { border-radius: 50%; }
.ohide { overflow: hidden; }
.bbox { box-sizing: border-box; }
.pointer { cursor: pointer; }
.w100 { width: 100%; }
.b0 { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }

/* --- stati :hover e :focus dei componenti -------------------------------- */
.scp0:hover { color: rgb(255, 255, 255) !important; opacity: 0.7 !important; }
.scp1:hover { background: rgb(255, 255, 255) !important; color: rgb(10, 10, 10) !important; }
.scp2:hover { background: rgb(255, 255, 255) !important; color: var(--kv-a) !important; }
.scp3:hover { border-color: rgba(90, 130, 255, 0.95) !important; transform: translateY(-4px) !important; box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 0px inset, rgba(0, 49, 243, 0.3) 0px 0px 24px inset, rgba(0, 49, 243, 0.9) 0px 0px 0px 1px, rgba(0, 49, 243, 0.7) 0px 0px 28px, rgba(0, 49, 243, 0.4) 0px 0px 70px !important; }
.scp4:focus { border-color: var(--kv-a) !important; }
.scp5:hover { border-color: rgba(90, 130, 255, 0.95) !important; transform: translateY(-4px) !important; box-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px inset, rgba(0, 49, 243, 0.35) 0px 0px 24px inset, rgba(0, 49, 243, 0.9) 0px 0px 0px 1px, rgba(0, 49, 243, 0.75) 0px 0px 28px, rgba(0, 49, 243, 0.45) 0px 0px 70px !important; }
.scp6:hover { background: var(--kv-a) !important; color: rgb(255, 255, 255) !important; }
.scp7:hover { color: rgb(255, 255, 255) !important; }

/* --- impianto della pagina ----------------------------------------------- */
html, body { height: 100%; margin: 0px; }

/* --- il sistema visivo ---------------------------------------------------- */
:root { --kv-a: #0031F3; --kv-r: 0px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; color: rgb(255, 255, 255); background-color: rgb(5, 5, 5); background-image: radial-gradient(900px 700px at 85% 10%, rgba(0, 49, 243, 0.55), transparent 65%), radial-gradient(800px 600px at 5% 55%, rgba(0, 49, 243, 0.42), transparent 65%), radial-gradient(700px 500px at 70% 100%, rgba(70, 120, 255, 0.35), transparent 65%), radial-gradient(500px 300px at 30% 20%, rgba(120, 160, 255, 0.14), transparent 70%); background-attachment: fixed; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--kv-a); text-decoration: none; }
a:hover { color: rgb(255, 255, 255); }
@keyframes kvmarq { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes kvwipe { 
  0% { clip-path: inset(0px 100% 0px 0px); }
  100% { clip-path: inset(0px); }
}
@keyframes kvhead { 
  0% { transform: translateX(-4%); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(104%); opacity: 0; }
}
@keyframes kvup { 
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: none; }
}
@keyframes kvbob { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(8px); }
}
@keyframes kvfade { 
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: none; }
}
html.kv-cur, html.kv-cur * { cursor: none !important; }


/* =========================================================================
   AGGIUNTE PER LA PUBBLICAZIONE
   Nulla di quanto segue cambia l'aspetto del mockup: sono il salto al
   contenuto (invisibile finché non riceve il fuoco), il contorno di messa a
   fuoco per chi naviga da tastiera, il rispetto di prefers-reduced-motion e
   la resa dei campi del modulo che prima erano finti.
   ========================================================================= */

/* <picture> non deve creare una scatola propria: l'<img> si comporta
   esattamente come prima, quando era figlio diretto. */
picture { display: contents; }
/* con display:contents il <source> diventerebbe esso stesso un elemento flex
   e si prenderebbe un posto nella riga: va tolto dal flusso esplicitamente. */
picture > source { display: none; }

/* Testo che serve solo a chi usa un lettore di schermo o a chi indicizza:
   l'H1 della home è il logotipo, e un titolo senza testo non si legge. */
.kv-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Salto al contenuto: fuori schermo finché non lo si raggiunge col tab. */
.kv-salta {
  position: fixed; top: 10px; left: 10px; z-index: 2147483646;
  transform: translateY(-200%);
  background: #fff; color: #0A0A0A;
  padding: 12px 18px; font-size: 14px; font-weight: 700;
  transition: transform .18s ease;
}
.kv-salta:focus { transform: none; color: #0A0A0A; }

/* Il mockup non prevedeva un contorno di messa a fuoco: su fondo scuro
   serve, altrimenti chi naviga da tastiera non sa dov'è. */
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* Il cursore di vetro e le animazioni d'ingresso si fermano per chi ha
   chiesto meno movimento dal sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.kv-cur, html.kv-cur * { cursor: auto !important; }
  #kv-cursor { display: none !important; }
}

/* --- il modulo ------------------------------------------------------------ */
.kv-form { display: flex; flex-direction: column; gap: 20px; }
.kv-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.kv-fieldset legend { display: block; }

/* L'esca per i robot. display:none la toglie anche dall'albero di
   accessibilità: altrimenti risulta un campo senza etichetta. */
.kv-esca { display: none !important; }

/* I quattro pacchetti erano <button> finti: ora sono veri radio.
   I valori sono quelli del mockup, copiati tali e quali. */
.kv-pacchetti { display: flex; flex-wrap: wrap; gap: 9px; }
.kv-pacchetti input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.kv-chip {
  flex: 1 1 90px; text-align: center;
  font-family: inherit; font-weight: 700; font-size: 14.5px;
  padding: 13px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--kv-r);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: rgb(255, 255, 255);
  transition: background .2s, border-color .2s;
}
.kv-pacchetti input:checked + .kv-chip {
  background: rgb(0, 49, 243);
  border-color: rgb(0, 49, 243);
}
.kv-pacchetti input:focus-visible + .kv-chip { outline: 2px solid #fff; outline-offset: 2px; }

/* La casella del consenso, richiesta dal GDPR: stessa scala tipografica
   della riga di nota che le sta sotto. */
.kv-consenso {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.kv-consenso input {
  width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  accent-color: rgb(0, 49, 243);
}
.kv-consenso a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.kv-consenso a:hover { color: rgb(0, 49, 243); }

.kv-form button[disabled] { opacity: .6; cursor: progress; }
.kv-stato[data-esito="errore"] { color: #FFB4B4; }


/* =========================================================================
   VERSIONE MOBILE
   Da "Kaevo Sito Mobile.dc.html". Sotto i 768px ogni elemento
   che sul telefono cambia riceve i valori del mockup mobile. Il !important
   serve a scavalcare gli stili inline del desktop, che restano intatti.
   Le regole sono generate da strumenti/mobile.py: non vanno modificate a mano.
   ========================================================================= */

/* --- versione mobile: cosa si vede dove --------------------------------- */
@media (max-width: 767.98px) {
  .kv-desk { display: none !important; }
  /* dalla cornice del mockup: niente scorrimento orizzontale */
  body { overflow-x: clip; }
}
@media (min-width: 768px) {
  .kv-mob { display: none !important; }
}
/* il menu ha display:flex nello stile inline, che vincerebbe su [hidden] */
.kv-menu[hidden] { display: none !important; }
html.kv-menu-aperto { overflow: hidden; }

@media (max-width: 767.98px) {
  /* pagine di solo testo: privacy e 404 */
  .kvm-testo { padding: 72px 20px !important; }
  /* div */
  .kvm-f8c50d { min-height: 100svh !important; }
  /* div */
  .kvm-50a384 { padding: 14px 20px !important; gap: 10px !important; }
  /* a «Parliamone» */
  .kvm-1a390a { padding: 14px 16px !important; margin-left: auto !important; }
  /* div */
  .kvm-4cef5c { padding: 120px 20px 72px !important; gap: 32px !important; }
  /* h2 «Chi siamo» */
  .kvm-e58b81 { font-size: 48px !important; }
  /* p «Siamo e , due grafici. Disegni» */
  .kvm-2b99ca { font-size: 17px !important; }
  /* a «Scopri chi siamo» */
  .kvm-d5a14c { align-self: stretch !important; justify-content: center !important; }
  /* div */
  .kvm-4b8706 { max-width: 280px !important; padding: 36px !important; }
  /* div */
  .kvm-4c65ce { padding: 60px 20px !important; }
  /* h2 «Quello che facciamo» */
  .kvm-b96a38 { font-size: 34px !important; }
  /* div */
  .kvm-ade84d { grid-template-columns: revert !important; gap: revert !important; display: flex !important; flex-direction: column !important; background: linear-gradient(160deg, rgba(0, 49, 243, 0.35) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.06) 100%) !important; backdrop-filter: blur(22px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 0px !important; box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 0px inset, rgba(0, 0, 0, 0.4) 0px 20px 50px !important; }
  /* div */
  .kvm-fe45d8 { background: revert !important; backdrop-filter: revert !important; border: revert !important; border-radius: revert !important; box-shadow: revert !important; transition: revert !important; padding: 36px 24px 40px !important; display: flex !important; flex-direction: column !important; }
  /* h3 «Sito vetrina su misura» */
  .kvm-81351b { font-size: 24px !important; }
  /* div */
  .kvm-2794ee { gap: 6px !important; margin-top: auto !important; }
  /* span «Wireframe» */
  .kvm-86abda { white-space: nowrap !important; }
  /* div */
  .kvm-6d2b53 { background: revert !important; backdrop-filter: revert !important; border: revert !important; border-radius: revert !important; box-shadow: revert !important; transition: revert !important; padding: 36px 24px 40px !important; display: flex !important; flex-direction: column !important; border-top: 1px solid rgba(255, 255, 255, 0.16) !important; }
  /* a «Scopri tutti i servizi» */
  .kvm-604bbd { flex: 1 1 100% !important; justify-content: center !important; }
  /* div */
  .kvm-6915cb { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; }
  /* div */
  .kvm-a75930 { padding: 52px 20px !important; }
  /* h1 «Raccontaci il tuo locale.» */
  .kvm-e01325 { font-size: 38px !important; }
  /* div */
  .kvm-764211 { margin: 24px 0px !important; padding: 40px 24px !important; }
  /* div */
  .kvm-f30603 { padding: 52px 20px 36px !important; }
  /* div */
  .kvm-86eac3 { gap: 40px !important; }
  /* div */
  .kvm-4ec624 { padding: 72px 20px !important; gap: 32px !important; }
  /* div */
  .kvm-17e175 { padding: 48px 20px !important; }
  /* h2 «Vediamo se siamo i tuoi.» */
  .kvm-a2600b { font-size: 28px !important; }
  /* div */
  .kvm-1c3279 { padding: 56px 20px 40px !important; }
  /* h1 «Un sito che porta clienti al t» */
  .kvm-3ad733 { font-size: 36px !important; line-height: 1.02 !important; text-wrap: balance !important; }
  /* div */
  .kvm-890351 { max-width: 1240px !important; margin: 0px auto !important; padding: 0px 20px !important; }
  /* div */
  .kvm-c19a8f { max-width: revert !important; margin: revert !important; padding: revert !important; grid-template-columns: revert !important; gap: revert !important; display: flex !important; flex-direction: column !important; background: linear-gradient(160deg, rgba(0, 49, 243, 0.35) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.06) 100%) !important; backdrop-filter: blur(22px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 0px !important; box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 0px inset, rgba(0, 0, 0, 0.4) 0px 20px 50px !important; }
  /* div */
  .kvm-8a6dbe { background: revert !important; backdrop-filter: revert !important; border: revert !important; border-radius: revert !important; box-shadow: revert !important; transition: revert !important; padding: 32px 20px 38px !important; }
  /* div */
  .kvm-29a926 { background: revert !important; backdrop-filter: revert !important; border: revert !important; border-radius: revert !important; box-shadow: revert !important; transition: revert !important; padding: 32px 20px 38px !important; border-top: 1px solid rgba(255, 255, 255, 0.16) !important; }
  /* div */
  .kvm-1254da { padding: 60px 20px !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; gap: 32px !important; }
  /* h2 «Cosa include» */
  .kvm-12f66e { font-size: 30px !important; }
  /* div */
  .kvm-188602 { width: 560px !important; height: 560px !important; }
  /* div */
  .kvm-e44fac { width: 320px !important; height: 180px !important; }
  /* div */
  .kvm-e77575 { padding: 70px 20px !important; }
  /* div */
  .kvm-8c9217 { margin-bottom: 40px !important; }
  /* h2 «Tre pacchetti» */
  .kvm-e7fec3 { font-size: 40px !important; }
}

/* Effetti al passaggio che il mobile non prevede: valgono solo da 768px in su. */
@media (min-width: 768px) {
  .scp3-d:hover { border-color: rgba(90, 130, 255, 0.95) !important; transform: translateY(-4px) !important; box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 0px inset, rgba(0, 49, 243, 0.3) 0px 0px 24px inset, rgba(0, 49, 243, 0.9) 0px 0px 0px 1px, rgba(0, 49, 243, 0.7) 0px 0px 28px, rgba(0, 49, 243, 0.4) 0px 0px 70px !important; }
}

/* Il bottone che apre il menu e quello che lo chiude, a fuoco da tastiera */
.kv-burger:focus-visible, .kv-chiudi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }