/*
  =========================================================
  KLIK MODULES V1 - CSS HOMEPAGE COMMENTATO
  =========================================================

  Questo file controlla i blocchi della homepage:

  1. Variabili generali
  2. Reset interno dei moduli
  3. Spazio sotto slider
  4. Larghezza piena delle sezioni
  5. Contenitore interno
  6. Icone SVG
  7. Titoli di sezione
  8. Hero principale
  9. Box Casa / Business
  10. Pulsanti
  11. Verifica copertura
  12. Specifiche di rete
  13. Recensioni
  14. Business / Cloud finale
  15. Responsive tablet
  16. Responsive smartphone

  NOTA IMPORTANTE:
  Nel CSS originale erano presenti più blocchi duplicati:
  - CSS originale
  - FIX HERO PRINCIPALE
  - FIX COMPLETO BOX HOMEPAGE

  In questa versione li ho unificati in un solo CSS ordinato.
  Così sai dove intervenire senza modificare tre volte la stessa regola.
*/


/* =========================================================
   1. VARIABILI GENERALI

   Qui modifichi colori, larghezze, raggi, transizioni e spazi.
   Le variabili vengono riutilizzate in tutto il file.
   ========================================================= */

.klik-moduli-v1 {
  /*
    BLU PRINCIPALE DEL SITO

    Cambia questo valore per modificare:
    - sfondo del primo box hero
    - sfondo del blocco business finale
    - colore principale dei titoli
    - colore principale dei pulsanti
  */
  --km-bg-slate: #131445;

  /*
    Sfondo delle card bianche.
    Usato per box Casa/Business, card features, recensioni, ecc.
  */
  --km-bg-card: #ffffff;

  /*
    Sfondo grigio chiaro per sezioni alternate e form.
  */
  --km-bg-section: #f3f5f9;

  /*
    Bordo chiaro delle card.
  */
  --km-border-light: #e1e5ef;

  /*
    Bordo scuro/trasparente per card su sfondo blu.
  */
  --km-border-dark: rgba(255, 255, 255, 0.14);

  /*
    Testo principale scuro.
    È stato portato allo stesso blu del sito.
  */
  --km-text-dark: #131445;

  /*
    Testo chiaro su sfondo blu.
  */
  --km-text-light: #ffffff;

  /*
    Testo secondario/grigio.
  */
  --km-text-muted: #667085;

  /*
    Colore oro usato per icone, hover e dettagli.
  */
  --km-accent-gold: #d4af37;

  /*
    Oro più acceso per eventuali hover.
  */
  --km-accent-gold-hover: #f5bd22;

  /*
    Arrotondamento delle card interne.
    I box principali a tutta larghezza restano invece squadrati.
  */
  --km-radius: 10px;

  /*
    Transizione generale per hover e animazioni leggere.
  */
  --km-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*
    Larghezza massima del contenuto interno.
    Le sezioni esterne vanno a tutta larghezza,
    ma testi e card restano centrati dentro questo limite.
  */
  --km-content-max: 1140px;

  /*
    Padding laterale interno delle sezioni.
    Se vuoi più aria laterale dentro i box, aumenta questi valori.
  */
  --km-side-padding: clamp(18px, 4vw, 48px);

  /*
    Immagine hero originale.
    Al momento non viene usata perché il nuovo hero è blu pieno.
    Puoi riattivarla dentro .km-hero se vuoi usare una immagine.
  */
  --km-hero-image: url('images/home.jpg');

  /*
    Compensazione laterale del layout del sito.

    Nel tema sono presenti rientri laterali dati da:
    - .container circa 15px
    - .wrapper circa 15px

    Totale: 30px per lato.

    Se vedi ancora spazio bianco laterale:
    aumenta a 35px o 40px.

    Se il box esce troppo:
    riduci a 20px o 15px.
  */
  --km-page-bleed: 30px;

  width: 100%;
  max-width: none;

  color: var(--km-text-dark);

  -webkit-font-smoothing: antialiased;

  /*
    IMPORTANTE:
    Nel CSS originale era presente overflow-x: clip.
    Quel valore tagliava i box allargati con margini negativi.
    Deve restare visible.
  */
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}


/* =========================================================
   2. RESET INTERNO SOLO PER I MODULI KLIK

   Queste regole non toccano body, header, footer o altri elementi del sito.
   Servono solo a rendere prevedibile il layout dei blocchi .klik-moduli-v1.
   ========================================================= */

.klik-moduli-v1,
.klik-moduli-v1 * {
  box-sizing: border-box;
}

.klik-moduli-v1 :where(h1, h2, h3, h4, h5, p, ul, li) {
  margin: 0;
  padding: 0;
}

.klik-moduli-v1 :where(a) {
  text-decoration: none;
}


/* =========================================================
   3. SPAZIO SOTTO LO SLIDER

   Se tra lo slider e il primo box resta uno spazio bianco,
   intervieni qui.
   ========================================================= */

.slider_block.full_width {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   4. REGOLE COMUNI A TUTTE LE SEZIONI PRINCIPALI

   Queste regole fanno riempire ai box tutto il contenitore principale.

   Se devi regolare gli spazi bianchi laterali, NON modificare qui:
   cambia la variabile --km-page-bleed in alto.
   ========================================================= */

.klik-moduli-v1 .km-hero,
.klik-moduli-v1 .km-coverage,
.klik-moduli-v1 .km-features,
.klik-moduli-v1 .km-reviews,
.klik-moduli-v1 .km-business {
  display: block;
  position: relative;

  width: auto;
  max-width: none;

  /*
    Elimina le bande bianche laterali generate dal contenitore del sito.
  */
  margin-left: calc(var(--km-page-bleed) * -1);
  margin-right: calc(var(--km-page-bleed) * -1);

  /*
    I box principali devono combaciare con i bordi del contenitore.
  */
  border-radius: 0;

  box-sizing: border-box;
}


/* =========================================================
   5. CONTENITORE INTERNO

   Le sezioni esterne vanno larghe.
   Il contenuto interno rimane centrato e leggibile.
   ========================================================= */

.klik-moduli-v1 .km-inner {
  width: 100%;
  max-width: var(--km-content-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* =========================================================
   6. ICONE SVG

   Controlla dimensioni e tratto delle icone SVG interne.
   ========================================================= */

.klik-moduli-v1 .km-icon svg {
  width: 1em;
  height: 1em;
  display: block;

  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  fill: none;
}


/* =========================================================
   7. TITOLI DI SEZIONE

   Titoli come:
   - Verifica istantaneamente la velocità della tua zona
   - Specifiche di Rete Native
   - Feedback dai Nodi Attivi
   - Cloud Storage & Data Nodes

   Per ridurre lo spazio sotto i titoli:
   modifica margin-bottom.
   ========================================================= */

.klik-moduli-v1 .km-section-title {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  text-align: center;
  text-transform: uppercase;

  color: var(--km-text-dark);

  /*
    Distanza sotto i titoli delle sezioni.
  */
  margin-bottom: 30px;
}


/* =========================================================
   8. HERO PRINCIPALE

   Box con titolo:
   "Un'architettura di rete pensata per essere differente."

   Qui modifichi:
   - colore sfondo
   - altezza del box
   - spazio sopra/sotto
   - allineamento testo
   ========================================================= */

.klik-moduli-v1 .km-hero {
  /*
    Margini verticali del box.
    0 significa attaccato allo slider sopra e alla sezione dopo.
  */
  margin-top: 0;
  margin-bottom: 0;

  /*
    Spazi interni del box hero.

    Per ridurre altezza:
    diminuisci padding-top e padding-bottom.

    Per aumentare altezza:
    aumenta padding-top e padding-bottom.
  */
  padding-top: 32px;
  padding-right: 48px;
  padding-bottom: 42px;
  padding-left: 48px;

  /*
    Sfondo blu pieno del sito.
  */
  background: var(--km-bg-slate);
  background-color: var(--km-bg-slate);

  /*
    Rimuove immagine e gradiente precedenti.

    Per riattivare l'immagine hero, sostituisci background-image:none
    con questo blocco:

    background:
      radial-gradient(circle at center, rgba(11, 19, 41, 0.45) 0%, var(--km-bg-slate) 90%),
      var(--km-hero-image) no-repeat center center;
    background-size: cover;
  */
  background-image: none;

  color: var(--km-text-light);
  text-align: center;

  box-shadow: none;
}


/* Titolo principale hero */
.klik-moduli-v1 .km-hero-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;

  color: var(--km-text-light);

  max-width: 900px;

  /*
    Il terzo valore controlla lo spazio sotto il titolo.
    Esempio: margin: 0 auto 18px;
  */
  margin: 0 auto 12px;

  /*
    Rimuove l'ombra del testo usata con l'immagine di sfondo.
  */
  text-shadow: none;
}


/* Testo descrittivo sotto il titolo hero */
.klik-moduli-v1 .km-hero-lead {
  font-size: clamp(1.5rem, 1.6vw, 1.15rem);
  line-height: 1.5;

  color: rgba(255, 255, 255, 0.9);

  max-width: 680px;

  /*
    Controlla la distanza tra il testo e i box Casa/Business.
  */
  margin: 0 auto 28px;

  text-shadow: none;
}


/* =========================================================
   9. BOX CASA / BUSINESS

   Due card interne nel primo blocco hero.

   Qui modifichi:
   - distanza tra le due card
   - altezza interna delle card
   - ombra
   - hover
   ========================================================= */

.klik-moduli-v1 .km-target-grid {
  display: flex;

  /*
    Distanza orizzontale tra box Casa e box Business.
  */
  gap: 26px;

  margin-top: 0;
}

.klik-moduli-v1 .km-target-card {
  flex: 1 1 0;

  background: var(--km-bg-card);
  border: 1px solid var(--km-border-light);
  border-radius: var(--km-radius);

  /*
    Padding interno delle card Casa/Business.
    Riduci questi valori se le card sono troppo alte.
  */
  padding-top: 30px;
  padding-right: 32px;
  padding-bottom: 30px;
  padding-left: 32px;

  text-align: left;

  transition: var(--km-transition);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.klik-moduli-v1 .km-target-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 35px -5px rgba(212, 175, 55, 0.15);
  border-color: var(--km-accent-gold);
}

.klik-moduli-v1 .km-icon-box {
  width: 52px;
  height: 52px;

  border-radius: var(--km-radius);

  background: var(--km-bg-section);
  border: 1px solid var(--km-border-light);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--km-text-muted);

  /*
    Distanza tra icona e titolo della card.
  */
  margin-bottom: 24px;

  transition: var(--km-transition);

  font-size: 26px;
}

.klik-moduli-v1 .km-target-card:hover .km-icon-box {
  color: var(--km-text-dark);
  background: var(--km-accent-gold);
  border-color: var(--km-accent-gold);
}

.klik-moduli-v1 .km-target-card h3 {
  font-size: clamp(2.3rem, 2.2vw, 1.6rem);
  color: var(--km-text-dark);

  /*
    Distanza tra titolo della card e paragrafo.
  */
  margin-bottom: 12px;

  font-weight: 600;
}

.klik-moduli-v1 .km-target-card p {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--km-text-muted);

  /*
    Distanza tra paragrafo e pulsante.
  */
  margin-bottom: 28px;
}


/* =========================================================
   10. PULSANTI GENERALI

   Pulsanti come:
   - Vedi Profili Casa
   - Vedi Specifiche Aziendali
   - Inizializza Query Console
   ========================================================= */

.klik-moduli-v1 .km-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 24px;

  border-radius: var(--km-radius);

  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;

  color: var(--km-text-dark);
  background: var(--km-bg-section);
  border: 1px solid var(--km-border-light);

  transition: var(--km-transition);

  width: fit-content;
}

.klik-moduli-v1 .km-target-card:hover .km-btn {
  background: var(--km-text-dark);
  color: #ffffff;
  border-color: var(--km-text-dark);
}

.klik-moduli-v1 .km-btn-light {
  background: var(--km-bg-card);
  color: var(--km-text-dark);
  border-color: var(--km-bg-card);
  font-weight: 700;
}


/* =========================================================
   11. SEZIONE VERIFICA COPERTURA

   Box con campo indirizzo e pulsante "Avvia Verifica".

   Qui modifichi:
   - altezza sezione
   - sfondo
   - campo input
   - pulsante
   ========================================================= */

.klik-moduli-v1 .km-coverage {
  margin-top: 0;
  margin-bottom: 0;

  /*
    Altezza della sezione.
    Riduci padding-top e padding-bottom per renderla più compatta.
  */
  padding-top: 42px;
  padding-right: 48px;
  padding-bottom: 44px;
  padding-left: 48px;

  background: #ffffff;
  color: var(--km-text-dark);
}

.klik-moduli-v1 .km-coverage .km-inner {
  max-width: 800px;
  text-align: center;
}

.klik-moduli-v1 .km-coverage .km-section-title {
  font-size: clamp(1.8rem, 2vw, 1.5rem);

  /*
    Distanza tra titolo e form.
  */
  margin-bottom: 22px;
}

.klik-moduli-v1 .km-form-group {
  display: flex;

  background: var(--km-bg-section);

  /*
    Spazio interno tra bordo del form e input/pulsante.
  */
  padding: 6px;

  border-radius: var(--km-radius);
  border: 1px solid var(--km-border-light);

  transition: var(--km-transition);
}

.klik-moduli-v1 .km-form-group:focus-within {
  border-color: var(--km-accent-gold);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}

.klik-moduli-v1 .km-input {
  flex: 1;
  min-width: 0;

  border: 0;

  /*
    Padding interno del campo indirizzo.
  */
  padding: 12px 20px;

  font-size: 1.5rem;

  outline: 0;
  background: transparent;
  color: var(--km-text-dark);
}

.klik-moduli-v1 .km-submit {
  background: var(--km-text-dark);
  color: #ffffff;

  border: 0;

  /*
    Larghezza interna del pulsante.
  */
  padding: 0 28px;

  border-radius: var(--km-radius);

  font-weight: 600;
  font-size: 1.5rem;

  cursor: pointer;

  transition: var(--km-transition);

  display: inline-flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;
}

.klik-moduli-v1 .km-submit:hover {
  background: var(--km-accent-gold);
  color: var(--km-text-dark);
}


/* =========================================================
   12. SEZIONE SPECIFICHE DI RETE

   Box "Specifiche di Rete Native".

   Qui modifichi:
   - sfondo sezione
   - distanza tra card
   - padding interno card
   ========================================================= */

.klik-moduli-v1 .km-features {
  margin-top: 0;
  margin-bottom: 0;

  /*
    Altezza della sezione.
  */
  padding-top: 48px;
  padding-right: 48px;
  padding-bottom: 54px;
  padding-left: 48px;

  background: var(--km-bg-section);
}

.klik-moduli-v1 .km-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /*
    Distanza tra le card.
  */
  gap: 14px;
}

.klik-moduli-v1 .km-feature-card {
  background: #ffffff;
  border: 1px solid var(--km-border-light);
  border-radius: var(--km-radius);

  /*
    Padding interno delle card.
  */
  padding: 26px;

  transition: var(--km-transition);

  box-shadow: 0 6px 18px rgba(19, 20, 69, 0.06);
}

.klik-moduli-v1 .km-feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--km-accent-gold);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.02);
}

.klik-moduli-v1 .km-feature-card .km-icon-wrapper {
  color: var(--km-accent-gold);

  /*
    Distanza tra icona e titolo della card.
  */
  margin-bottom: 16px;

  display: inline-block;
  font-size: 28px;
}

.klik-moduli-v1 .km-feature-card h4 {
  font-size: 1.5rem;
  color: var(--km-text-dark);

  /*
    Distanza tra titolo e testo.
  */
  margin-bottom: 8px;

  font-weight: 600;
}

.klik-moduli-v1 .km-feature-card p {
  font-size: 1.5rem;
  color: var(--km-text-muted);
  line-height: 1.6;
}



/* Card assistenza con sfondo blu */
.klik-moduli-v1 .km-feature-card.km-feature-card-blue {
  background: var(--km-bg-slate);
  border-color: var(--km-border-dark);
  color: var(--km-text-light);

  box-shadow: 0 8px 22px rgba(19, 20, 69, 0.18);
}

/* Titolo bianco */
.klik-moduli-v1 .km-feature-card.km-feature-card-blue h4 {
  color: var(--km-text-light);
}

/* Testo bianco leggermente attenuato */
.klik-moduli-v1 .km-feature-card.km-feature-card-blue p {
  color: rgba(255, 255, 255, 0.78);
}

/* Icona oro */
.klik-moduli-v1
  .km-feature-card.km-feature-card-blue
  .km-icon-wrapper {
  color: var(--km-accent-gold);
}

/* Hover come le card del blocco business */
.klik-moduli-v1 .km-feature-card.km-feature-card-blue:hover {
  background: #191a55;
  border-color: var(--km-accent-gold);
  transform: translateY(-2px);

  box-shadow: 0 12px 26px rgba(19, 20, 69, 0.24);
}


/* =========================================================
   13. SEZIONE RECENSIONI

   Box "Feedback dai Nodi Attivi".

   Qui modifichi:
   - altezza sezione
   - badge
   - card recensioni
   - pallini carosello
   ========================================================= */

.klik-moduli-v1 .km-reviews {
  margin-top: 0;
  margin-bottom: 0;

  /*
    Altezza della sezione recensioni.
  */
  padding-top: 8px;
  padding-right: 48px;
  padding-bottom: 54px;
  padding-left: 48px;

  background: #ffffff;
  text-align: center;
}

.klik-moduli-v1 .km-reviews .km-section-title {
  /*
    Distanza tra titolo e badge.
  */
  margin-bottom: 1px;
}

.klik-moduli-v1 .km-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: var(--km-bg-section);
  border: 1px solid var(--km-border-light);

  padding: 8px 16px;

  border-radius: var(--km-radius);

  font-weight: 600;
  font-size: 1.85rem;

  /*
    Distanza tra badge e carosello.
  */
  margin-bottom: 22px;

  color: var(--km-text-dark);
}

.klik-moduli-v1 .km-carousel {
  position: relative;
  max-width: 850px;

  margin: 0 auto;

  overflow: hidden;
}

.klik-moduli-v1 .km-carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.klik-moduli-v1 .km-review-slide {
  flex: 0 0 100%;

  /*
    Padding laterale interno di ogni slide.
  */
  padding: 10px clamp(0px, 4vw, 40px);
}

.klik-moduli-v1 .km-review-card {
  background: #ffffff;
  border: 1px solid var(--km-border-light);
  border-radius: var(--km-radius);

  /*
    Padding interno card recensione.
  */
  padding: 32px;

  text-align: left;

  box-shadow: 0 6px 18px rgba(19, 20, 69, 0.06);
}

.klik-moduli-v1 .km-stars {
  color: var(--km-accent-gold);

  /*
    Distanza tra stelle e testo recensione.
  */
  margin-bottom: 20px;

  display: flex;
  gap: 4px;
}

.klik-moduli-v1 .km-stars svg {
  fill: currentColor;
  stroke: currentColor;
}

.klik-moduli-v1 .km-review-text {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.6;

  color: var(--km-text-dark);

  font-style: italic;

  /*
    Distanza tra testo recensione e autore.
  */
  margin-bottom: 24px;
}

.klik-moduli-v1 .km-review-author {
  font-weight: 600;
  color: var(--km-text-dark);
  font-size: 1.5rem;
}

.klik-moduli-v1 .km-review-role {
  font-size: 1.2rem;
  color: var(--km-text-muted);
  margin-top: 2px;
}

.klik-moduli-v1 .km-carousel-nav {
  display: flex;
  justify-content: center;
  gap: 12px;

  /*
    Distanza tra card recensione e pallini.
  */
  margin-top: 22px;
}

.klik-moduli-v1 .km-nav-dot {
  width: 8px;
  height: 8px;

  border: 0;
  padding: 0;

  border-radius: 50%;

  background: #cbd5e1;

  cursor: pointer;

  transition: var(--km-transition);
}

.klik-moduli-v1 .km-nav-dot.is-active {
  background: var(--km-text-dark);

  /*
    Larghezza del pallino attivo.
  */
  width: 20px;

  border-radius: 4px;
}


/* =========================================================
   14. SEZIONE BUSINESS / CLOUD FINALE

   Box blu finale:
   "Cloud Storage & Data Nodes"

   Qui modifichi:
   - sfondo blu
   - altezza sezione
   - distanza tra colonne
   - card interne
   ========================================================= */

.klik-moduli-v1 .km-business {
  margin-top: 0;
  margin-bottom: 0;

  /*
    Altezza della sezione finale.
  */
  padding-top: 54px;
  padding-right: 48px;
  padding-bottom: 60px;
  padding-left: 48px;

  background: var(--km-bg-slate);

  /*
    Separatore superiore.
    Lascia 0 se vuoi il blocco pieno senza linea.
  */
  border-top: 0;
}

.klik-moduli-v1 .km-business-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  /*
    Distanza tra colonna testo e griglia card.
  */
  gap: 48px;

  align-items: center;
  color: var(--km-text-light);
}

.klik-moduli-v1 .km-business-info .km-section-title {
  text-align: left;

  /*
    Distanza tra titolo e paragrafo.
  */
  margin-bottom: 18px;

  color: var(--km-text-light);
}

.klik-moduli-v1 .km-business-info > p {
  font-size: 1.5rem;
  line-height: 1.6;

  /*
    Colore testo descrittivo su sfondo blu.
  */
  color: rgba(255, 255, 255, 0.72);

  /*
    Distanza tra paragrafo e lista.
  */
  margin-bottom: 26px;
}

.klik-moduli-v1 .km-feature-list {
  list-style: none;

  /*
    Distanza tra lista e pulsante.
  */
  margin-bottom: 30px;
}

.klik-moduli-v1 .km-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  /*
    Distanza tra le voci della lista.
  */
  margin-bottom: 16px;

  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.92);
}

.klik-moduli-v1 .km-feature-list .km-icon {
  color: var(--km-accent-gold);
  margin-top: 3px;
  flex: 0 0 auto;
}

.klik-moduli-v1 .km-evolved-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  /*
    Distanza tra le card interne del blocco business.
  */
  gap: 18px;
}

.klik-moduli-v1 .km-evolved-card {
  /*
    Sfondo delle card su blu.
  */
  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--km-radius);

  /*
    Padding interno delle card finali.
  */
  padding: 26px;

  transition: var(--km-transition);
}

.klik-moduli-v1 .km-evolved-card:hover {
  border-color: var(--km-accent-gold);
  background: rgba(255, 255, 255, 0.06);
}

.klik-moduli-v1 .km-evolved-card .km-card-icon {
  color: var(--km-accent-gold);

  /*
    Distanza tra icona e titolo card.
  */
  margin-bottom: 20px;

  font-size: 32px;
}

.klik-moduli-v1 .km-evolved-card h5 {
  font-size: 1.5rem;
  color: var(--km-text-light);

  /*
    Distanza tra titolo e testo card.
  */
  margin-bottom: 10px;

  font-weight: 600;
}

.klik-moduli-v1 .km-evolved-card p {
  font-size: 1.5rem;
  line-height: 1.5;

  color: rgba(255, 255, 255, 0.68);
}


/* =========================================================
   15. RESPONSIVE TABLET

   Valido sotto 991px.

   Qui intervieni se su tablet:
   - i box sono troppo alti
   - il padding laterale è troppo grande
   - le card hanno troppo spazio interno
   ========================================================= */

@media (max-width: 991px) {
  .klik-moduli-v1 .km-hero,
  .klik-moduli-v1 .km-coverage,
  .klik-moduli-v1 .km-features,
  .klik-moduli-v1 .km-reviews,
  .klik-moduli-v1 .km-business {
    /*
      Padding laterale delle sezioni su tablet.
    */
    padding-right: 32px;
    padding-left: 32px;
  }

  .klik-moduli-v1 .km-hero {
    padding-top: 28px;
    padding-bottom: 36px;
  }

  .klik-moduli-v1 .km-coverage {
    padding-top: 36px;
    padding-bottom: 38px;
  }

  .klik-moduli-v1 .km-features,
  .klik-moduli-v1 .km-reviews {
    padding-top: 42px;
    padding-bottom: 46px;
  }

  .klik-moduli-v1 .km-business {
    padding-top: 46px;
    padding-bottom: 52px;
  }

  .klik-moduli-v1 .km-target-grid,
  .klik-moduli-v1 .km-business-grid {
    display: grid;
    grid-template-columns: 1fr;

    /*
      Distanza verticale tra elementi quando diventano a colonna.
    */
    gap: 40px;
  }

  .klik-moduli-v1 .km-business-info .km-section-title {
    text-align: center;
  }

  .klik-moduli-v1 .km-target-card {
    padding: 28px;
  }

  .klik-moduli-v1 .km-feature-card,
  .klik-moduli-v1 .km-review-card,
  .klik-moduli-v1 .km-evolved-card {
    padding: 24px;
  }
}


/* =========================================================
   16. RESPONSIVE SMARTPHONE

   Valido sotto 640px.

   Qui intervieni se su mobile:
   - i box escono troppo lateralmente
   - il testo è troppo grande
   - i padding sono eccessivi
   - il form non si vede bene
   ========================================================= */

@media (max-width: 640px) {
  .klik-moduli-v1 .km-hero,
  .klik-moduli-v1 .km-coverage,
  .klik-moduli-v1 .km-features,
  .klik-moduli-v1 .km-reviews,
  .klik-moduli-v1 .km-business {
    /*
      Mantiene i box larghi anche su mobile.

      Se su mobile vedi tagli laterali:
      riduci --km-page-bleed da 30px a 20px.

      Se invece vedi ancora spazio bianco:
      aumenta --km-page-bleed da 30px a 35px.
    */
    margin-left: calc(var(--km-page-bleed) * -1);
    margin-right: calc(var(--km-page-bleed) * -1);

    /*
      Padding interno laterale su smartphone.
    */
    padding-right: 18px;
    padding-left: 18px;
  }

  .klik-moduli-v1 .km-hero {
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .klik-moduli-v1 .km-hero-title {
    /*
      Grandezza titolo principale su smartphone.
    */
    font-size: 28px;
    line-height: 1.2;

    /*
      Spazio sotto il titolo.
    */
    margin-bottom: 10px;
  }

  .klik-moduli-v1 .km-hero-lead {
    /*
      Grandezza testo hero su smartphone.
    */
    font-size: 16px;
    line-height: 1.45;

    /*
      Spazio tra testo e card Casa/Business.
    */
    margin-bottom: 22px;
  }

  .klik-moduli-v1 .km-target-grid {
    /*
      Distanza tra card Casa e Business su mobile.
    */
    gap: 18px;
  }

  .klik-moduli-v1 .km-target-card {
    /*
      Padding interno card Casa/Business su mobile.
    */
    padding: 24px 20px;
  }

  .klik-moduli-v1 .km-target-card p {
    margin-bottom: 22px;
  }

  .klik-moduli-v1 .km-coverage {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  .klik-moduli-v1 .km-features,
  .klik-moduli-v1 .km-reviews {
    padding-top: 36px;
    padding-bottom: 40px;
  }

  .klik-moduli-v1 .km-business {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  .klik-moduli-v1 .km-section-title {
    /*
      Titoli sezione su mobile.
    */
    margin-bottom: 24px;
    font-size: 22px;
    line-height: 1.25;
  }

  .klik-moduli-v1 .km-form-group {
    /*
      Su mobile input e pulsante vengono messi uno sotto l'altro.
    */
    display: grid;
    gap: 8px;
  }

  .klik-moduli-v1 .km-input {
    width: 100%;
    padding: 12px 14px;
  }

  .klik-moduli-v1 .km-submit {
    min-height: 44px;
    justify-content: center;
    width: 100%;
  }

  .klik-moduli-v1 .km-features-grid {
    gap: 18px;
  }

  .klik-moduli-v1 .km-feature-card,
  .klik-moduli-v1 .km-review-card,
  .klik-moduli-v1 .km-evolved-card {
    padding: 22px;
  }

  .klik-moduli-v1 .km-review-slide {
    padding-left: 0;
    padding-right: 0;
  }

  .klik-moduli-v1 .km-evolved-grid {
    grid-template-columns: 1fr;
  }
}
.km-stars {
  display: flex;
  gap: 4px;
  align-items: center;
}

.km-stars svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* =========================================================
   FIX HERO CON IMMAGINE DI SFONDO
   ========================================================= */

.klik-moduli-v1 .km-hero.km-hero-sitefull {
  position: relative;
  overflow: hidden;

  padding-top: 110px;
  padding-right: 48px;
  padding-bottom: 130px;
  padding-left: 48px;

  background:
    radial-gradient(
      circle at center,
      rgba(19, 20, 69, 0.35) 0%,
      rgba(19, 20, 69, 0.88) 88%
    ),
    var(--km-hero-image) center center / cover no-repeat;

  color: var(--km-text-light);
  text-align: center;
}

/* Overlay scuro extra per rendere testo e card più leggibili */
.klik-moduli-v1 .km-hero.km-hero-sitefull::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(19, 20, 69, 0.28) 0%,
    rgba(19, 20, 69, 0.55) 45%,
    rgba(19, 20, 69, 0.92) 100%
  );
}

/* Porta titolo, testo e card sopra overlay e immagine */
.klik-moduli-v1 .km-hero.km-hero-sitefull .km-inner {
  position: relative;
  z-index: 1;
}

/* Titolo hero come nel layout con immagine */
.klik-moduli-v1 .km-hero.km-hero-sitefull .km-hero-title {
  margin-bottom: 24px;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* Testo sotto titolo */
.klik-moduli-v1 .km-hero.km-hero-sitefull .km-hero-lead {
  margin-bottom: 60px;
  color: #dbe4f0;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}

/* Card Casa / Business più simili al mockup */
.klik-moduli-v1 .km-hero.km-hero-sitefull .km-target-grid {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive tablet */
@media (max-width: 991px) {
  .klik-moduli-v1 .km-hero.km-hero-sitefull {
    padding-top: 80px;
    padding-right: 32px;
    padding-bottom: 90px;
    padding-left: 32px;
  }

  .klik-moduli-v1 .km-hero.km-hero-sitefull .km-hero-lead {
    margin-bottom: 42px;
  }
}

/* Responsive smartphone */
@media (max-width: 640px) {
  .klik-moduli-v1 .km-hero.km-hero-sitefull {
    padding-top: 64px;
    padding-right: 18px;
    padding-bottom: 72px;
    padding-left: 18px;

    background-position: center top;
  }

  .klik-moduli-v1 .km-hero.km-hero-sitefull .km-hero-title {
    margin-bottom: 14px;
  }

  .klik-moduli-v1 .km-hero.km-hero-sitefull .km-hero-lead {
    margin-bottom: 30px;
  }
}