@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --asfalto:#0C1C2B;          /* blu notte del logo */
  --asfalto-alto:#1B3550;
  --cemento:#E8EAEB;          /* sezioni alterne */
  --carta:#F6F7F7;            /* fondo pagina */
  --inchiostro:#1D2125;
  --tenue:#555C63;
  --linea:#C9CED2;
  --giallo:#F2C200;           /* vernice segnaletica: solo azioni */
  --giallo-premuto:#D9AE00;
  --su-giallo:#1D2125;
  --plan-fondo:#FFFFFF;
  --plan-griglia:#E3E6E8;
  --plan-tratto:#1D2125;
  --gas:#E0B000;--elettrico:#D62B2B;--acqua:#1F6FD1;--tlc:#2E9E4F;--fogna:#7A4E2D;
  --titoli:"Barlow Condensed","Arial Narrow",sans-serif;
  --testo:"Barlow",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --asfalto:#0A1622;--asfalto-alto:#1B3550;--cemento:#24282B;--carta:#1B1E21;--inchiostro:#E9EBEC;--tenue:#A7AEB4;--linea:#3A3F44;
  --plan-fondo:#202427;--plan-griglia:#2E3337;--plan-tratto:#F3F4F5;color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inchiostro);font:400 1.0625rem/1.6 var(--testo)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--giallo);outline-offset:3px;border-radius:2px}
.salta{position:absolute;left:-9999px}.salta:focus{left:16px;top:12px;z-index:10;background:var(--giallo);color:var(--su-giallo);padding:8px 12px}
.giro{max-width:1160px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.giro{padding:0 16px}}

h1,h2,h3{font-family:var(--titoli);font-weight:700;line-height:1.02;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.6rem,6.2vw,4.9rem)}
h2{font-size:clamp(2rem,4vw,3rem);max-width:22ch}
h3{font-size:1.55rem;font-weight:600}
p{margin:0}
.sotto{color:var(--tenue)}

/* bottoni: la vernice gialla è riservata alle azioni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:3px;
  font:600 1.05rem/1 var(--testo);text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-giallo{background:var(--giallo);color:var(--su-giallo)}
.btn-giallo:hover{background:var(--giallo-premuto)}
.btn-filo{border-color:currentColor;color:inherit}
.btn-filo:hover{background:rgba(127,127,127,.12)}

/* testata */
.testata{background:var(--asfalto);color:#F1F2F3}
.barra{display:flex;align-items:center;gap:24px;min-height:68px}
.marchio{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.55rem/1 var(--titoli);letter-spacing:.01em;color:#fff}
.marchio img{width:40px;height:40px}
.marchio b{color:var(--giallo);font-weight:700}
.barra nav{display:flex;gap:22px;margin-left:auto;align-items:center;font-size:1rem}
.barra nav a{text-decoration:none;opacity:.86}.barra nav a:hover{opacity:1;text-decoration:underline}
.lingue{display:flex;gap:2px;margin-left:4px}
.lingue a{padding:4px 7px;border-radius:2px;font-size:.92rem;text-decoration:none;opacity:.7}
.lingue a[aria-current=true]{opacity:1;background:var(--asfalto-alto)}
.barra .btn{min-height:40px;padding:0 16px;font-size:.98rem}
@media (max-width:860px){.barra nav .voce{display:none}}
@media (max-width:520px){.barra{flex-wrap:wrap;gap:10px;padding:12px 0}.barra nav{margin-left:0;width:100%;justify-content:space-between}}

.apertura{padding:48px 24px 0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center}
.emblema{width:100%;max-width:520px;justify-self:end;height:auto}
@media (max-width:860px){.apertura{grid-template-columns:1fr}.emblema{max-width:340px;justify-self:center;order:-1}}
@media (max-width:600px){.apertura{padding:32px 16px 0}}
.apertura h1{max-width:17ch;color:#fff}
.apertura .intro{max-width:60ch;margin-top:22px;font-size:1.2rem;color:#D9DCDF}
.apertura .azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.radargramma{margin-top:40px;position:relative;border-top:1px solid #2A4058}
.radargramma picture,.radargramma img{width:100%;height:auto}
.radargramma figcaption{display:flex;justify-content:space-between;gap:16px;padding:12px 0 18px;font-size:.92rem;color:#B9BEC3}
.cerchio{display:inline-block;width:12px;height:12px;border:2.5px solid var(--giallo);border-radius:50%;vertical-align:-1px;margin-right:6px}

/* sezioni */
section{padding:88px 0}
section.alterna{background:var(--cemento)}
.testa-sezione{display:grid;gap:14px;margin-bottom:40px;max-width:68ch}
.testa-sezione p{font-size:1.15rem;color:var(--tenue)}

.problema{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.problema .grande{font:600 clamp(1.5rem,2.6vw,2rem)/1.25 var(--titoli);max-width:30ch}
.problema ul{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.problema li{padding-left:20px;border-left:3px solid var(--linea)}
@media (max-width:860px){.problema{grid-template-columns:1fr;gap:32px}}

.passi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:passo}
.passi li{counter-increment:passo;display:grid;gap:10px;align-content:start}
.passi li::before{content:counter(passo);font:700 3.4rem/1 var(--titoli);color:var(--giallo);-webkit-text-stroke:1.5px var(--inchiostro)}
@media (prefers-color-scheme:dark){.passi li::before{-webkit-text-stroke:0}}
@media (max-width:860px){.passi{grid-template-columns:1fr}}

.prova{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
.prova figure{margin:0}
.prova svg{width:100%;height:auto;border:1px solid var(--linea)}
.plan-quota{font:600 22px var(--testo);fill:var(--plan-tratto);paint-order:stroke;stroke:var(--plan-fondo);stroke-width:6px}
.legenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:.92rem;color:var(--tenue)}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.vernice{width:22px;height:9px;border-radius:5px;opacity:.55}
.tratto{width:26px;border-top:3px solid var(--plan-tratto)}
.tratto.tr{border-top-style:dashed}
.numeri{width:100%;border-collapse:collapse;font-size:1rem}
.numeri th,.numeri td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linea);vertical-align:top}
.numeri th{font-weight:600}
.numeri td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nota{font-size:.94rem;color:var(--tenue);margin-top:14px}
@media (max-width:860px){.prova{grid-template-columns:1fr}}

.consegna{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 56px}
.consegna dl{margin:0;display:grid;gap:6px}
.consegna dt{font:600 1.3rem/1.2 var(--titoli)}
.consegna dd{margin:0;color:var(--tenue)}
@media (max-width:760px){.consegna{grid-template-columns:1fr}}

.origine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.origine .testo{display:grid;gap:18px;max-width:62ch}
@media (max-width:860px){.origine{grid-template-columns:1fr;gap:28px}}

.prezzi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--linea)}
.prezzi > div{padding:28px;display:grid;gap:8px;align-content:start}
.prezzi > div + div{border-left:1px solid var(--linea)}
.prezzi .cifra{font:700 2.6rem/1 var(--titoli)}
@media (max-width:760px){.prezzi{grid-template-columns:1fr}.prezzi > div + div{border-left:0;border-top:1px solid var(--linea)}}

.invito{background:var(--giallo);color:var(--su-giallo);padding:64px 0}
.invito .giro{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.invito h2{max-width:20ch}
.invito p{max-width:52ch;margin-top:10px;font-size:1.1rem}
.invito .btn{background:var(--inchiostro);color:var(--carta)}
@media (prefers-color-scheme:dark){.invito .btn{background:#1D2125;color:#F6F7F7}}

footer{background:var(--asfalto);color:#C3CCD6;padding:44px 0;font-size:.95rem}
footer .giro{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between}
footer a{color:#E9EBEC}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}

/* pagine di testo (privacy, note legali) */
.documento{padding:56px 0 88px}
.documento .giro{max-width:780px}
.documento h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:24px}
.documento h2{font-size:1.7rem;margin:40px 0 12px}
.documento p,.documento li{max-width:68ch;margin:0 0 12px}
.documento ul{padding-left:20px}

@media (prefers-reduced-motion:no-preference){
  .radargramma img{animation:scansione 1.6s ease-out .2s both}
  @keyframes scansione{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}