/* ============================================================
   DLG — Blocchi delle landing page di servizio
   Vive nel PLUGIN, non nel tema: un widget Elementor deve
   portarsi dietro i propri stili e funzionare con qualunque tema.
   Le variabili del tema hanno tutte un valore di riserva.
   ============================================================ */

:root {
  /* ─── Correzioni di accessibilita' ─────────────────────────
     Il rosso del brand (#c0361a) sta a 3.58:1 sul fondo scuro e
     il muted originale (#6b5f58) a 3.22:1: sotto il minimo AA di
     4.5:1 per il testo normale. Restano corretti per i titoli
     grandi, dove la soglia e' 3:1.
     Queste due varianti servono al testo piccolo e ai link.      */
  --link:       #e0522f;  /* 5.12:1 */
  --link-h:     #e8663f;  /* 6.05:1 */
  --muted-a11y: #8d8078;  /* 5.19:1 — sostituisce --muted nel corpo */

  /* Stessa larghezza del contenitore del tema (.wrap): il contenuto delle
     landing deve allinearsi a quello del resto del sito, non stirarsi. */
  --lp-gutter:  clamp(1.375rem, 4.4vw, 3rem);
  --lp-max:     1240px;
}

/* ─── Impalcatura ────────────────────────────────────────── */
/* Ogni blocco si porta dietro il proprio spazio e il proprio contesto:
   sono widget Elementor, vanno messi in qualunque pagina senza dipendere
   da un contenitore che li avvolga. */
.dlg-lhero,
.dlg-steps,
.dlg-faq,
.dlg-related,
.dlg-cta {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  /*
   * Contenuto centrato entro --lp-max senza bisogno di un elemento
   * contenitore: il padding laterale cresce da solo su schermi larghi.
   * Sotto la soglia resta il margine minimo.
   *
   * Serviva perche' i blocchi avevano solo il padding: su un monitor da
   * 2560px le righe di testo diventavano lunghissime e illeggibili.
   */
  padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-max)) / 2));
}

/*
 * Contenitori Elementor "nudi" — quelli che ospitano un widget standard
 * invece di un blocco DLG, come il modulo della pagina contatti. Non
 * avevano alcun rientro laterale: sul telefono i campi toccavano i bordi
 * dello schermo mentre il testo accanto partiva da 22px. Stessa misura
 * degli altri blocchi, cosi' la colonna e' una sola.
 */
/* Elementor non legge padding-inline: compone il padding dalle proprie
   variabili, che il CSS della pagina azzera. Si scrivono quelle. Messe
   sull'elemento stesso vincono sul valore ereditato dal contenitore,
   qualunque sia la specificita' della regola che lo imposta li'. */
.elementor .e-con > .e-con-inner {
  /* Elementor centra gia' il contenitore entro la propria larghezza: il
     rientro si sommava al suo e il modulo finiva 100px piu' dentro del
     titolo sopra. Si toglie il suo limite e si usa una misura sola,
     la stessa degli altri blocchi. */
  max-width: none;
  padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-max)) / 2));
}

/* Dentro il popup lo spazio lo mette gia' il popup: qui si annulla.
   E l'altezza dev'essere libera: Elementor impone height:100% al
   contenitore, cosi' il contenuto piu' alto della finestra sbordava
   invece di scorrere, e il pulsante di invio finiva 40px sotto il bordo
   del popup, tagliato. */
.dlg-popup .e-con > .e-con-inner {
  padding-inline: 0;
  height: auto;
}

/* ─── Elementi ricorrenti ────────────────────────────────── */
.dlg-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .69rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red, #c0361a);
  margin: 0 0 1.6rem;
}

.dlg-eyebrow--muted { color: var(--muted-a11y); }

.dlg-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red, #c0361a);
  box-shadow: 0 0 9px var(--red, #c0361a);
  flex-shrink: 0;
}

.dlg-eyebrow--plain::before { display: none; }

.dlg-accent { color: var(--red, #c0361a); }

.dlg-lhero a:not(.btn-red):not(.btn-outline),
.dlg-steps a,
.dlg-faq a,
.dlg-related a:not(.dlg-related__name a) {
  color: var(--link);
  border-bottom: 1px solid rgba(224, 82, 47, .35);
  transition: color .2s, border-color .2s;
}
.dlg-lhero a:not(.btn-red):not(.btn-outline):hover,
.dlg-steps a:hover,
.dlg-faq a:hover,
.dlg-related a:hover {
  color: var(--link-h);
  border-color: rgba(232, 102, 63, .6);
}

/* Il focus deve restare visibile: la navigazione da tastiera e'
   l'unica strada per chi non usa il mouse. */
.dlg-lhero,
.dlg-steps,
.dlg-faq,
.dlg-related,
.dlg-cta {
  --focus-ring: var(--link);
}
.dlg-lhero :focus-visible,
.dlg-steps :focus-visible,
.dlg-faq :focus-visible,
.dlg-related :focus-visible,
.dlg-cta :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.dlg-faq__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--cream, #ede5de);
  margin: 0 0 1rem;
  max-width: 20ch;
  text-wrap: balance;
}

.dlg-faq__list {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line, rgba(237,229,222,.07));
}

.dlg-faq__item {
  border-bottom: 1px solid var(--line, rgba(237,229,222,.07));
}

.dlg-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--cream, #ede5de);
  transition: color .2s;
}

/* Nasconde il triangolino nativo su tutti i motori. */
.dlg-faq__q::-webkit-details-marker { display: none; }
.dlg-faq__q::marker { content: ''; }

.dlg-faq__q:hover { color: var(--link); }

.dlg-faq__icon {
  flex-shrink: 0;
  margin-top: .35em;
  color: var(--muted-a11y);
  transition: color .2s, transform .3s var(--ease, cubic-bezier(0.16,1,0.3,1));
}

.dlg-faq__item[open] .dlg-faq__icon { color: var(--red, #c0361a); }

/* Il segno "+" diventa "−": si nasconde solo la barra verticale. */
.dlg-faq__item[open] .dlg-faq__bar-v { opacity: 0; }
.dlg-faq__bar-v { transition: opacity .2s; }

.dlg-faq__a {
  padding: 0 0 1.7rem;
  max-width: 76ch;
}

.dlg-faq__a p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text, #c8bcb4);
  margin: 0 0 .9rem;
}
.dlg-faq__a p:last-child { margin-bottom: 0; }

/* ─── Motion ─────────────────────────────────────────────── */
/* Sulle landing il movimento e' un dettaglio, non la sostanza:
   un solo fade-up all'ingresso in viewport. */
.dlg-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease, cubic-bezier(0.16,1,0.3,1)), transform .6s var(--ease, cubic-bezier(0.16,1,0.3,1));
}
.dlg-reveal.vis {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dlg-reveal,
  .dlg-reveal.vis {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dlg-faq__icon,
  .dlg-faq__bar-v { transition: none; }
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dlg-faq__q {
    gap: 1rem;
    padding: 1.3rem 0;
    /* Area di tocco piena: su mobile il bersaglio non deve
       essere solo il testo. */
    min-height: 44px;
  }
}

/* ─── Landing hero ───────────────────────────────────────── */
.dlg-lhero {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3.4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.dlg-lhero__title {
  font-family: 'Montserrat', sans-serif;
  /* Il coefficiente vw e' calibrato perche' righe come "Direzione tecnica"
     stiano su una riga sola a 1440px: andare a capo a meta' frase spezza
     la lettura del titolo. Sotto i 900px le righe possono girare. */
  font-size: clamp(2.5rem, 5.5vw, 5.25rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .95;
  color: var(--cream, #ede5de);
  margin: 0 0 1.7rem;
  text-wrap: balance;
}

.dlg-lhero__line { display: block; }

.dlg-lhero__text {
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.8;
  color: var(--text, #c8bcb4);
  max-width: 34ch;
  margin: 0 0 2.4rem;
  text-wrap: pretty;
}

.dlg-lhero__ctas {
  display: flex;
  gap: .875rem;
  flex-wrap: wrap;
  align-items: center;
}

.dlg-lhero__stats {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.6vw, 2.1rem);
  padding-top: clamp(0rem, 3vw, 3.75rem);
}

.dlg-lhero__value {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2.4rem, 4.2vw, 3.875rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--cream, #ede5de);
}

.dlg-lhero__label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-a11y);
  margin-top: .55rem;
}

/* ─── Fasi ───────────────────────────────────────────────── */
.dlg-steps__title,
.dlg-related__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--cream, #ede5de);
  margin: 0 0 1rem;
  max-width: 18ch;
  text-wrap: balance;
}

.dlg-steps__intro {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text, #c8bcb4);
  max-width: 60ch;
  margin: 0;
}

.dlg-steps__list {
  list-style: none;
  margin: clamp(2.2rem, 4.5vw, 3.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.6rem, 3vw, 2rem);
}

.dlg-steps__item {
  border-top: 2px solid var(--line, rgba(237,229,222,.07));
  padding-top: 1.6rem;
}

/* La prima fase e' evidenziata: e' il punto di ingresso del metodo. */
.dlg-steps__item.is-first { border-top-color: var(--red, #c0361a); }

.dlg-steps__head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: .9rem;
}

.dlg-steps__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: rgba(237, 229, 222, .14);
}

.dlg-steps__meta {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-a11y);
}

.dlg-steps__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--cream, #ede5de);
  margin: 0 0 .8rem;
}

.dlg-steps__text {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text, #c8bcb4);
  margin: 0;
  text-wrap: pretty;
}

/* ─── Approfondimenti ────────────────────────────────────── */
.dlg-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.6rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.dlg-related__item {
  border-top: 1px solid rgba(237, 229, 222, .14);
  padding-top: 1.5rem;
}

.dlg-related__kicker {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-a11y);
  margin: 0 0 .75rem;
}

.dlg-related__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0 0 .9rem;
}

/* Il link copre il titolo: bersaglio ampio, e il testo del link resta
   descrittivo per chi naviga con screen reader. */
.dlg-related__name a {
  color: var(--cream, #ede5de);
  border-bottom: none;
}
.dlg-related__name a:hover { color: var(--link); }

.dlg-related__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--link);
}

/* ─── Banda CTA ──────────────────────────────────────────── */
.dlg-cta {
  background: var(--red, #c0361a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.8rem, 4vw, 3rem);
  flex-wrap: wrap;
}

.dlg-cta__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 2.875rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
  margin: 0 0 .85rem;
}

.dlg-cta__body {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
  margin: 0;
}

.dlg-cta__action {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-start;
}

/* Sul rosso il pulsante torna scuro: e' l'inversione che gli da' peso. */
.dlg-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  background: var(--bg, #0c0907);
  color: var(--cream, #ede5de);
  border-bottom: none;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1.1875rem 2.5rem;
  border-radius: 2px;
  transition: background .2s, transform .2s var(--ease, cubic-bezier(0.16,1,0.3,1));
}
.dlg-cta__btn:hover {
  background: #000;
  color: var(--cream, #ede5de);
  transform: translateY(-2px);
}

.dlg-cta__note {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .7rem;
  color: rgba(255, 255, 255, .74);
  margin: 0;
}

.dlg-cta { --focus-ring: #fff; }
.dlg-cta :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dlg-lhero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .dlg-lhero__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.75rem 2.5rem;
    padding-top: 0;
  }

  .dlg-lhero__text { max-width: none; }

  .dlg-lhero__ctas > * { flex: 1 1 100%; justify-content: center; }

  .dlg-cta { flex-direction: column; align-items: flex-start; }
  .dlg-cta__btn { width: 100%; justify-content: center; }
}

/* ─── Dati fiscali (pagina contatti) ─────────────────────── */
.dlg-fiscal {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-a11y);
  margin: 0;
  /* Sta fuori dai contenitori dei blocchi e restava rasente al bordo
     mentre il testo sopra partiva da 22px. */
  padding-inline: max(var(--lp-gutter), calc((100% - var(--lp-max)) / 2));
}
.dlg-fiscal strong {
  color: var(--cream, #ede5de);
  font-weight: 500;
}

/* ─── Rimando alla landing dentro gli articoli ───────────── */
/* Inserito dopo il secondo paragrafo: e' il collegamento che fa
   convertire il traffico del blog. Deve distinguersi dal testo senza
   interromperne la lettura. */
.dlg-inline-cta {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
  margin: 2.25rem 0;
  padding: 1.4rem 1.6rem;
  background: rgba(237, 229, 222, .035);
  border-left: 2px solid var(--red, #c0361a);
  border-radius: 0 2px 2px 0;
}

.dlg-inline-cta__text {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text, #c8bcb4);
  margin: 0;
  text-wrap: pretty;
}

.dlg-inline-cta__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--link, #e0522f);
  border-bottom: 1px solid rgba(224, 82, 47, .4);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.dlg-inline-cta__link:hover {
  color: var(--link-h, #e8663f);
  border-color: rgba(232, 102, 63, .7);
}

.dlg-inline-cta__link:focus-visible {
  outline: 2px solid var(--link, #e0522f);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dlg-inline-cta__link { transition: none; }
}

/* ─── Pannello della pagina contatti ─────────────────────── */
/* Sta a fianco del modulo e risponde alle domande che una persona si fa
   prima di scrivere a uno sconosciuto: chi legge, quando risponde, quanto
   costa. Niente riquadri: la separazione dal modulo la fanno lo spazio e
   le righe sottili, come nel resto del sito. */
.dlg-cpanel {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 4vw, 3.25rem);
}

.dlg-cpanel__block + .dlg-cpanel__block {
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--lp-line, rgba(237, 229, 222, .09));
}

.dlg-cpanel__h {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .69rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red, #c0361a);
  margin: 0 0 1.5rem;
}

/* ─── Cosa succede dopo ──────────────────────────────────── */
.dlg-cpanel__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.dlg-cpanel__step {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .1rem 1rem;
  align-items: start;
}

.dlg-cpanel__num {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--red, #c0361a);
  /* Allineato alla prima riga del titolo accanto, non al suo centro. */
  padding-top: .12rem;
}

.dlg-cpanel__stepname {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--cream, #ede5de);
  margin: 0 0 .35rem;
}

.dlg-cpanel__steptext {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--muted-a11y, #8d8078);
  margin: 0;
  text-wrap: pretty;
}

/* ─── Recapiti diretti ───────────────────────────────────── */
.dlg-cpanel__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.dlg-cpanel__link {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid var(--lp-line, rgba(237, 229, 222, .09));
  border-radius: 2px;
  transition: border-color .2s, background .2s;
}

.dlg-cpanel__link:hover {
  border-color: rgba(192, 54, 26, .45);
  background: rgba(237, 229, 222, .03);
}

.dlg-cpanel__link:focus-visible {
  outline: 2px solid var(--red, #c0361a);
  outline-offset: 2px;
}

.dlg-cpanel__linklabel {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-a11y, #8d8078);
  flex: none;
}

.dlg-cpanel__linkval {
  font-size: .92rem;
  color: var(--cream, #ede5de);
  word-break: break-word;
}

.dlg-cpanel__ext { color: var(--red, #c0361a); }

/* ─── Quando ha senso, quando no ─────────────────────────── */
.dlg-cpanel__fit {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dlg-cpanel__fith {
  font-family: 'Montserrat', sans-serif;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--cream, #ede5de);
  margin: 0 0 .9rem;
}

.dlg-cpanel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.dlg-cpanel__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .89rem;
  line-height: 1.7;
  color: var(--muted-a11y, #8d8078);
  text-wrap: pretty;
}

/* Il segno davanti alla voce dice subito di quale dei due elenchi si
   tratta, senza doverne leggere il titolo. */
.dlg-cpanel__list--yes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .78em;
  width: 9px;
  height: 1px;
  background: var(--red, #c0361a);
}

.dlg-cpanel__list--no li::before {
  content: '×';
  position: absolute;
  left: 0;
  top: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #6b5f58;
}

/* ─── Schermi stretti ────────────────────────────────────── */
@media (max-width: 767px) {
  /* Il pannello segue il modulo: qui lo stacco si vede meglio con una
     riga sopra, altrimenti sembra la coda del modulo. */
  .dlg-cpanel {
    padding-top: clamp(2rem, 7vw, 3rem);
    border-top: 1px solid var(--lp-line, rgba(237, 229, 222, .09));
  }
}