/* Pagine commerciali a blocchi (servizi, zone, settori): si appoggia a sito.css (= stile della home,
   estratto in automatico da static/index.php a ogni build). Qui solo i blocchi che la home non ha. */
.pg .sec{padding:96px 0}
.pg .head{margin-bottom:48px}
.pg .head h2{font-size:clamp(30px,4.6vw,52px)}

/* B1 hero di pagina */
.phero{background:var(--black);color:#fff;padding:120px 0 80px}
.phero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.phero .crumbs{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:26px}
.phero .crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.phero .crumbs a:hover{color:#fff}
.phero .eyebrow{color:var(--green)}
.phero h1{font-size:clamp(34px,4.8vw,58px);line-height:1.04;letter-spacing:-.04em;font-weight:700;margin:16px 0 22px;text-wrap:balance}
.phero .sub{color:rgba(255,255,255,.7);font-size:clamp(17px,1.8vw,20px);line-height:1.5;max-width:620px}
.phero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.phero .ticker{position:static;transform:none;justify-content:flex-start;text-align:left;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.04em}
.phero .ticker span::before{content:"✓ ";color:var(--green)}
.phero .art{width:100%;height:auto;max-width:420px;justify-self:end}
.phero figcaption{font-size:12px;color:rgba(255,255,255,.45);margin-top:8px;text-align:center}

/* B2 in breve */
.breve{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green-deep);border-radius:20px;padding:28px 32px}
.breve .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);margin-bottom:10px}
.breve p{font-size:clamp(17px,1.8vw,19px);line-height:1.55}

/* B3/zona: riquadri problema o caratteristiche (riusa .who della home) */
.pg .who strong{font-size:21px}

/* B7 quando serve / quando no */
.ql{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ql > div{border-radius:24px;padding:34px;background:#fff}
.ql h3{font-size:22px;letter-spacing:-.02em;margin-bottom:16px}
.ql ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.ql li{padding-left:30px;position:relative;color:var(--gray);font-size:16px;line-height:1.5}
.ql .si li::before{content:"✓";position:absolute;left:0;color:var(--green-deep);font-weight:700}
.ql .no li::before{content:"–";position:absolute;left:4px;color:var(--dim);font-weight:700}

/* B8 tabelle e mappe */
.tab{width:100%;border-collapse:collapse;font-size:15.5px;background:#fff;border-radius:20px;overflow:hidden}
.tab th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-text);padding:16px 18px;border-bottom:1px solid var(--line)}
.tab td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--gray)}
.tab td:first-child{color:var(--ink);font-weight:600}
.tab tr:last-child td{border-bottom:0}
.mappa{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start}
.mappa figure{background:var(--black);border-radius:24px;padding:22px}
.mappa svg{width:100%;height:auto;display:block}
.mappa figcaption{color:rgba(255,255,255,.55);font-size:13px;margin-top:10px;line-height:1.45}

/* B9 approfondimento */
.appro{max-width:760px;margin:0 auto}
.appro h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.03em;line-height:1.15;margin:46px 0 14px}
.appro h2:first-child{margin-top:0}
.appro h3{font-size:20px;margin:28px 0 8px}
.appro p,.appro li{font-size:17.5px;line-height:1.65;color:#3a3a3c}
.appro p{margin:0 0 16px}
.appro ul,.appro ol{margin:0 0 18px 22px}
.appro li{margin-bottom:8px}
.appro a{color:var(--green-text)}
.appro table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px}
.appro th,.appro td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.appro th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-text)}
.appro .box{background:var(--mist);border-radius:18px;padding:22px 24px;margin:22px 0}

/* B15 CTA intermedia */
.ctamid{background:#E9F8EE;padding:42px 0}
.ctamid .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ctamid p{font-size:clamp(19px,2.2vw,24px);font-weight:600;letter-spacing:-.02em;max-width:680px}

/* B10 il percorso */
.perc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.perc a,.perc div{display:block;background:#fff;border-radius:20px;padding:22px;text-decoration:none;color:var(--ink);border:1px solid transparent}
.perc .on{background:var(--black);color:#fff}
.perc .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--green-text);text-transform:uppercase}
.perc .on .n{color:var(--green)}
.perc strong{display:block;font-size:18px;margin:8px 0 6px;letter-spacing:-.02em}
.perc span.d{font-size:14px;color:var(--gray);line-height:1.45}
.perc .on span.d{color:rgba(255,255,255,.6)}
.perc a:hover{border-color:var(--green-deep)}

/* B12 dal blog / link a pagine */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards a{display:flex;flex-direction:column;background:var(--mist);border-radius:22px;padding:26px;text-decoration:none;color:var(--ink);min-height:170px;transition:transform .3s var(--ease)}
.cards a:hover{transform:translateY(-3px)}
.cards .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-text)}
.cards strong{font-size:18px;line-height:1.3;margin-top:10px;letter-spacing:-.015em}
.cards span.more{margin-top:auto;padding-top:14px}

/* B13 fonti e data */
.fonti-pg{max-width:760px;margin:0 auto;font-size:14px;color:var(--gray)}
.fonti-pg summary{cursor:pointer;font-weight:600;color:var(--ink)}
.fonti-pg ol{margin:12px 0 0 20px}
.fonti-pg li{margin-bottom:6px}
.fonti-pg a{color:var(--green-text)}
.aggiornato{font-size:13px;color:var(--dim);text-align:center;margin-top:24px}

/* B14 CTA finale */
.ctafin{text-align:center}
.ctafin .head{margin-bottom:28px}
.ctafin p.t{max-width:680px;margin:0 auto 30px;color:rgba(255,255,255,.65);font-size:18px}

.pg .cases{grid-template-columns:repeat(2,1fr)}
.pg .case{min-height:0}

@media (max-width:860px){
  .phero{padding:100px 0 56px}
  .phero .wrap,.mappa,.ql{grid-template-columns:1fr}
  .phero .art{justify-self:center;max-width:320px}
  .perc{grid-template-columns:1fr 1fr}
  .cards,.pg .cases{grid-template-columns:1fr}
  .pg .sec{padding:72px 0}
  .breve{padding:22px}
  .tab{font-size:14px}
  .tab th,.tab td{padding:12px}
}

.tile.w6{grid-column:span 6;min-height:0}
@media (max-width:860px){.tile.w6{grid-column:auto}}
.breve{background:var(--mist);border-color:transparent}