/* Pixelized.ch — sito pubblico
   Colori ufficiali dal file vettoriale del marchio:
   blu scuro #064667 · blu #0075B2 · grigio del testo #414142 */

:root{
  --navy:#064667;
  --navy-scuro:#053A55;
  --blu:#0075B2;
  --blu-chiaro:#6FB4DA;
  --testo:#414142;
  --corpo:#54565A;
  --tenue:#7C8085;
  --linea:#DCE3E8;
  --velo:#F4F7F9;
  --bianco:#fff;
  --raggio:4px;
  --colonna:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bianco);color:var(--corpo);
  font:16px/1.62 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;color:var(--testo);font-weight:600;line-height:1.18;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.2vw,48px)}
h2{font-size:clamp(23px,2.6vw,31px)}
h3{font-size:20px}
p{margin:0 0 14px 0}
p:last-child{margin-bottom:0}
img,svg{max-width:100%;display:block}
a{color:var(--blu);text-decoration:none}
a:hover{color:var(--navy)}
:focus-visible{outline:2px solid var(--blu);outline-offset:2px}

.riga{max-width:var(--colonna);margin:0 auto;padding:0 28px}
.sezione{padding:72px 0}
.fascia-chiara{background:var(--velo);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.fascia-scura{background:var(--navy);color:#C9DCE8;padding:72px 0}
.fascia-scura h1,.fascia-scura h2,.fascia-scura h3,.fascia-scura b{color:#fff}
.fascia-scura a{color:#fff}

.salta{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:10px 16px;z-index:99}
.salta:focus{left:12px;top:12px;color:#fff}

/* ---------- testata ---------- */
.testata{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:40}
.testata-in{display:flex;align-items:center;gap:30px;padding-top:16px;padding-bottom:16px}
.marchio img{height:30px;width:auto}
.menu{display:flex;gap:26px;font-size:15.5px;margin-left:auto}
.menu a{color:var(--testo);padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--blu)}
.menu a.on{color:var(--blu);border-bottom-color:var(--blu)}
.telefono{font-size:14.5px;color:var(--tenue);white-space:nowrap}
.telefono:hover{color:var(--blu)}
.apri-menu,.bottone-menu{display:none}

/* ---------- apertura ---------- */
.apertura{position:relative;overflow:hidden;background:#fff;padding:84px 0 56px 0}
.rombo{position:absolute;width:210px;height:210px;transform:rotate(45deg);border-radius:12px;opacity:.06;pointer-events:none}
.rombo-a{background:var(--navy);top:-70px;right:170px}
.rombo-b{background:var(--blu);top:120px;right:-60px}
.apertura h1{max-width:900px;margin-bottom:22px}
.occhiello{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--blu);font-weight:600;margin-bottom:18px}
.occhiello.chiaro{color:var(--blu-chiaro)}
.sommario{font-size:18.5px;max-width:680px;color:var(--corpo)}
.fascia-scura .sommario{color:#C9DCE8}

.testa-pagina{padding:76px 0 40px 0}
.testa-pagina h1{max-width:880px;margin-bottom:20px}

/* ---------- schede e griglie ---------- */
.scheda{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:28px 26px}
.griglia-due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.griglia-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.due-colonne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}

.strade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:8px;padding-bottom:76px}
.strada h2{margin:12px 0 12px 0;font-size:28px}
.azioni{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}

.bottone{display:inline-block;padding:13px 26px;border-radius:var(--raggio);background:var(--blu);
  color:#fff !important;font-weight:600;font-size:15px;border:1px solid var(--blu)}
.bottone:hover{background:var(--navy);border-color:var(--navy)}
.bottone.vuoto{background:transparent;color:var(--navy) !important;border-color:#B9C6D0}
.bottone.vuoto:hover{border-color:var(--blu);color:var(--blu) !important}
.bottone.chiaro{background:#fff;color:var(--navy) !important;border-color:#fff}
.bottone.chiaro:hover{background:#E7F0F6}
.oltre{font-size:15px;font-weight:500}
.oltre::after{content:" \2192"}
.nota{font-size:14.5px;color:var(--tenue)}
.fascia-scura .nota{color:#9FBDCE}
.minuta{font-size:13px;margin-top:14px}

.filetto{display:block;width:44px;height:3px;background:var(--blu);border-radius:2px;margin-bottom:18px}
.intestazione-sezione{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin-bottom:32px}
.intestazione-sezione h2{max-width:660px}
.intestazione-sezione .nota{max-width:280px}
h2.piccolo{font-size:20px;margin-bottom:20px}

/* ---------- numeri ---------- */
.numeri{padding:52px 0}
.numeri-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.numero{font-size:clamp(30px,3.6vw,44px);font-weight:600;color:#fff;line-height:1;margin:0}
.numero-etichetta{font-size:14.5px;color:#9FBDCE;margin:10px 0 0 0}

/* ---------- progetti ---------- */
.scheda-progetto{display:flex;flex-direction:column;gap:10px;color:var(--corpo)}
.scheda-progetto:hover{border-color:var(--blu);color:var(--corpo)}
.scheda-progetto p{font-size:15px;margin:0}
.titolo-riga{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stato{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;border-radius:2px;background:var(--velo);color:var(--tenue);border:1px solid var(--linea);white-space:nowrap}
.stato.acceso{background:var(--blu);color:#fff;border-color:var(--blu)}
.scheda-futura{border-style:dashed;background:transparent}
.scheda-futura h3{color:var(--tenue)}

.percorso{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding-top:52px;padding-bottom:52px}
.momento{padding:0 22px;border-left:1px solid var(--linea)}
.momento:first-child{padding-left:0;border-left:0}
.momento-numero{font-size:12px;letter-spacing:.12em;color:var(--blu);font-weight:600;margin-bottom:10px}
.momento h2{font-size:17px;min-height:46px;margin-bottom:14px}
.momento-progetti{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--linea);margin-bottom:10px}
.momento-progetti a{font-weight:600;color:var(--navy);font-size:15.5px}
.momento-progetti a:hover{color:var(--blu)}
.momento-vuoto{font-weight:600;color:var(--tenue);font-size:15.5px;margin:0}
.momento-futuro{opacity:.75}

/* ---------- scheda progetto ---------- */
.briciole{padding-top:22px;font-size:13.5px;color:var(--tenue)}
.briciole a{color:var(--tenue)}
.briciole a:hover{color:var(--blu)}
.testa-progetto{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;padding-top:26px;padding-bottom:56px}
.riga-stato{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.testa-progetto h1{margin-bottom:16px}
.scheda-dati{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:6px 24px}
.scheda-dati>div{padding:16px 0;border-bottom:1px solid #EEF2F5}
.scheda-dati>div:last-child{border-bottom:0}
.scheda-dati span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:5px}
.scheda-dati b{font-weight:500;color:var(--testo)}
.scheda-dati.scura{background:transparent;border-color:#1D5A7D}
.scheda-dati.scura>div{border-bottom-color:#1D5A7D}
.scheda-dati.scura span{color:#9FBDCE}
.scheda-dati.scura b{color:#fff}

/* ---------- servizi ---------- */
.elenco-capacita{padding-bottom:40px;border-top:1px solid var(--linea)}
.capacita{display:grid;grid-template-columns:64px minmax(0,1fr) 300px;gap:34px;padding:30px 0;border-bottom:1px solid var(--linea);align-items:start}
.capacita h2{font-size:23px;margin-bottom:8px}
.capacita p{font-size:15.5px;margin:0;max-width:620px}
.capacita-numero{font-size:15px;font-weight:600;color:var(--blu);padding-top:4px;margin:0}
.prova{border-left:3px solid var(--blu);padding:2px 0 2px 18px}
.prova-titolo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:5px}
.prova p{color:var(--testo);font-size:15px}
.su-richiesta{background:var(--velo);display:flex;align-items:center;justify-content:space-between;gap:36px;margin-bottom:76px}
.su-richiesta strong{color:var(--testo)}

/* ---------- listino hosting ---------- */
.tabella-scorrevole{overflow-x:auto;-webkit-overflow-scrolling:touch}
.listino{width:100%;border-collapse:collapse;min-width:900px}
.listino td,.listino th{text-align:left;font-weight:400}
.listino .vuota{border:0;background:#fff}
.listino .famiglia{padding:0 18px 8px 18px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--navy)}
.listino .piano{padding:14px 18px 18px 18px;vertical-align:bottom;border-bottom:1px solid var(--linea);
  border-top:3px solid transparent}
.listino .piano.evidenza{border-top-color:var(--blu)}
.listino .etichetta{display:inline-block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;background:var(--blu);color:#fff;padding:3px 8px;border-radius:2px;margin-bottom:8px}
.listino .piano-nome{display:block;font-size:19px;font-weight:600;color:var(--testo);margin-bottom:8px}
.listino .piano-prezzo{display:block;font-size:31px;font-weight:600;color:var(--navy);line-height:1}
.listino .piano-prezzo small{font-size:13px;font-weight:400;color:var(--tenue);margin-left:6px}
.listino tbody th{padding:13px 20px 13px 0;font-size:14.5px;color:var(--corpo);white-space:nowrap;
  border-bottom:1px solid #EEF2F5}
.listino tbody td{padding:13px 18px;font-size:14.5px;color:var(--testo);border-bottom:1px solid #EEF2F5}
.listino .evidenza{background:#F1F8FC}
.listino tfoot td{padding:22px 18px 26px 18px;border:0}
.listino .si{color:var(--blu);font-weight:700}
.listino .no{color:#C3CED6}
.opzioni{margin-top:4px}
.opzione{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:20px 24px}
.opzione span{color:var(--testo)}
.opzione b{color:var(--navy);white-space:nowrap}

/* ---------- nomi clienti ---------- */
.nomi{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:17.5px;color:var(--testo);margin:0}
.nomi i{color:#C3CED6;font-style:normal}

/* ---------- contatti ---------- */
.contatti{padding-bottom:80px;gap:72px}
.dati-contatto .voce{padding:18px 0;border-bottom:1px solid var(--linea)}
.dati-contatto .voce:first-child{padding-top:0}
.dati-contatto .voce:last-child{border-bottom:0}
.voce-titolo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:6px}
.dati-contatto p{color:var(--testo);margin:0}

.modulo{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:28px 26px}
.campo{margin-bottom:18px}
.campo label{display:block;font-size:13px;color:var(--tenue);margin-bottom:6px}
.campo input,.campo textarea{width:100%;padding:12px 14px;border:1px solid var(--linea);
  border-radius:3px;font:inherit;font-size:16px;color:var(--testo);background:#fff}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--blu);outline-offset:1px;border-color:var(--blu)}
.modulo button{cursor:pointer;font-family:inherit}
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.avviso{border-radius:var(--raggio);padding:16px 18px;font-size:15px}
.avviso-ok{background:#EAF6EE;border:1px solid #BFE3CC;color:#1B5E32}
.avviso-errore{background:#FDECEA;border:1px solid #F3C4BF;color:#8E2018;margin-bottom:20px}

/* ---------- chiusura ---------- */
.chiusura{background:var(--navy);color:#9FBDCE;padding:64px 0 26px 0;font-size:15px;margin-top:0}
.chiusura h2{color:#fff;font-size:15px;font-weight:600;margin-bottom:14px}
.chiusura a{color:#C9DCE8}
.chiusura a:hover{color:#fff}
.chiusura-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.marchio-negativo{height:26px;width:auto;margin-bottom:16px;opacity:.96}
.fitto{line-height:1.8}
.idi{color:#7EA3B8;font-size:13.5px}
.sotto-titolo{margin:-6px 0 22px 0;max-width:620px}
.chiusura-fondo{margin-top:48px;padding-top:20px;border-top:1px solid #1D5A7D;
  display:flex;justify-content:space-between;font-size:13px;color:#7EA3B8}
.versione{opacity:.8}

/* ---------- adattamento ---------- */
@media (max-width:1080px){
  .capacita{grid-template-columns:48px minmax(0,1fr);gap:20px}
  .prova{grid-column:2;margin-top:6px}
  .testa-progetto{grid-template-columns:1fr;gap:34px}
  .percorso{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
  .momento{padding:0 20px}
  .momento:nth-child(odd){padding-left:0;border-left:0}
  .momento h2{min-height:0}
  .chiusura-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .numeri-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
}

@media (max-width:820px){
  .riga{padding:0 20px}
  .sezione{padding:56px 0}
  .strade,.griglia-tre,.griglia-due,.due-colonne{grid-template-columns:1fr;gap:18px}
  .due-colonne{gap:34px}
  .intestazione-sezione{flex-direction:column;align-items:flex-start;gap:16px}
  .intestazione-sezione .nota{max-width:none}
  .su-richiesta{flex-direction:column;align-items:flex-start;gap:16px}
  .contatti{gap:40px}
  .rombo{display:none}

  /* menu a scomparsa, senza JavaScript */
  .testata-in{flex-wrap:wrap;gap:14px}
  .marchio{margin-right:auto}
  .telefono{order:2}
  .bottone-menu{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:38px;padding:0 8px;border:1px solid var(--linea);border-radius:3px;cursor:pointer}
  .bottone-menu span{display:block;height:2px;background:var(--testo);border-radius:2px}
  .menu{display:none;order:5;width:100%;flex-direction:column;gap:0;margin:0}
  .menu a{padding:12px 0;border-bottom:1px solid var(--linea)}
  .menu a.on{border-bottom-color:var(--linea)}
  .apri-menu:checked ~ .menu{display:flex}
}

@media (max-width:520px){
  .numeri-griglia{grid-template-columns:1fr;gap:24px}
  .chiusura-griglia{grid-template-columns:1fr}
  .capacita{grid-template-columns:1fr}
  .prova{grid-column:1}
  .percorso{grid-template-columns:1fr}
  .momento{padding:0;border-left:0}
}