/* Presentazione del servizio IT-NetCOM: ciò che si aggiunge ai componenti della home (hero, blocco, passo). */
.pres{max-width:1440px;margin-inline:auto}
.pres section.blocco{padding-top:0}
.pres section.blocco:last-child{padding-bottom:clamp(48px,6vw,88px)}
.pres .hero{padding-bottom:clamp(56px,8vw,112px)}
.pres .blocco h2 em{font-style:normal;color:var(--segnale)}
.pres h3{margin:0;font-family:var(--f-display);font-weight:750;font-stretch:108%;font-size:24px}
/* Il disegno animato a lato del testo; sotto i 900 px va sotto. */
.pres-come{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:center}
.pres-come .intesta{margin-bottom:0}
.pres-tela{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0}
.pres-tela .tela{aspect-ratio:600 / 330;border-block:1px solid var(--traccia)}
/* Cosa si collega: tre riquadri. */
.pres-carte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pres-carta{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--lavagna);border:1px solid var(--traccia);border-radius:4px}
.pres-carta .dati{color:var(--segnale-vivo)}
/* Il disegno in testa a ogni riquadro: tutte le tele hanno le stesse proporzioni. */
.pres-carta .tela,.pres-fai .tela{aspect-ratio:320 / 160;margin-bottom:8px;border:1px solid var(--traccia);border-radius:4px}
.pres-carta p,.pres-fai p{margin:0;color:var(--grafite);font-size:16px}
/* Le funzioni dell'area riservata: sei riquadri, il disegno in testa e l'icona rossa accanto al nome. */
.pres-fai{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pres-fai li{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--lavagna);border:1px solid var(--traccia);border-radius:4px}
.pres-fai h3{display:flex;align-items:center;gap:10px}
.pres-fai svg{flex:none;color:var(--segnale-vivo)}
.metodo.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Chiusura: invito e pulsanti, con la firma dell'azienda. */
.pres-chiusa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:clamp(24px,4vw,56px);background:var(--lavagna);border:1px solid var(--traccia);border-radius:4px}
.pres-chiusa-testo{display:flex;flex-direction:column;gap:16px}
.pres-chiusa-testo p{margin:0;color:var(--grafite);font-size:19px}
.pres-chiusa-azioni{display:flex;flex-direction:column;gap:12px;min-width:240px}
.pres-chiusa-azioni .btn{justify-content:center}
.pres-chiusa-azioni .firma{margin-top:12px}
@media (max-width:900px){
  .pres-come,.pres-carte,.pres-chiusa,.metodo.tre{grid-template-columns:minmax(0,1fr)}
  .pres-come{gap:32px}
  .pres-fai{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pres-chiusa-azioni{min-width:0}
}
@media (max-width:520px){
  .pres-fai{grid-template-columns:minmax(0,1fr)}
  .testata .al-sito{display:none}
}