/* Font ospitato qui (licenza OFL, font/LICENSE-OFL.txt): niente Google Fonts,
     quindi nessun indirizzo IP dei visitatori passa a terzi. */
  @font-face {
    font-family: "Archivo";
    src: url("font/archivo-latin-wdth-normal.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
  }
  :root {
    /* sfondo: blu profondo dal RAL 5005 (segnale, #154889) scurito per la lettura (Lorenzo 08/11) */
    --notte: #0D2A50;
    --notte-rgb: 13, 42, 80;
    --notte-2: #133763;
    --mappa: #0B2343;
    --riga: #29497A;
    --testo: #EEF0F3;
    --attenuato: #A9B8CD;
    --corallo: #FF2A55;
    --verde: #2EBD6B;
    --giallo: #F4C21B;
    --rosso: #EE3B32;
    --grigio: #8A93A3;
    --acqua: #4F7FAE;
    --misura: 1.25rem;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--notte);
    color: var(--testo);
    font-family: "Archivo", system-ui, sans-serif;
    font-variation-settings: "wdth" 100;
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  /* trama a rete in trasparenza (linee e nodi, richiamo GIS): dietro a tutto, mai cliccabile */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g stroke='%238DB4E8' stroke-opacity='.16' stroke-width='1' fill='none'><path d='M40 60L150 30L260 90M40 60L90 170L200 190L260 90M200 190L300 250M90 170L60 280L170 290L200 190M170 290L300 250M0 120L40 60M320 120L260 90M150 30L110 0M110 320L170 290M260 90L230 0M230 320L300 250M60 280L0 230M320 230L300 250'/></g><g fill='%238DB4E8' fill-opacity='.32'><circle cx='40' cy='60' r='2.5'/><circle cx='150' cy='30' r='2'/><circle cx='260' cy='90' r='2.5'/><circle cx='90' cy='170' r='2'/><circle cx='200' cy='190' r='3'/><circle cx='300' cy='250' r='2'/><circle cx='60' cy='280' r='2.5'/><circle cx='170' cy='290' r='2'/></g><g stroke='%238DB4E8' stroke-opacity='.3' fill='none'><circle cx='200' cy='190' r='7'/><circle cx='40' cy='60' r='6'/></g></svg>") 0 0 / 320px 320px repeat;
  }
  /* la trama scorre più piano della pagina (profondità); solo CSS, chi riduce le animazioni la vede ferma */
  @supports (animation-timeline: scroll()) {
    @keyframes trama-scorre { to { background-position: -80px -480px; } }
    body::before { animation: trama-scorre linear both; animation-timeline: scroll(root); }
  }
  a { color: inherit; }
  .wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
  .num { font-variant-numeric: tabular-nums; }
  :focus-visible { outline: 2px solid var(--giallo); outline-offset: 3px; }

  /* intestazione */
  header.barra { border-bottom: 1px solid var(--riga); }
  header.barra .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
  .marchio { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 600; font-variation-settings: "wdth" 112; letter-spacing: -.01em; font-size: 1.1rem; }
  .marchio img { width: auto; height: 32px; }
  .barra-destra { display: flex; align-items: center; gap: 1rem; }
  nav.menu { display: flex; gap: 1.5rem; font-size: .95rem; color: var(--attenuato); }
  nav.menu a { text-decoration: none; }
  nav.menu a:hover { color: var(--testo); }
  nav.menu a[aria-current="page"] { color: var(--testo); text-decoration: underline; text-decoration-color: var(--corallo); text-underline-offset: 6px; text-decoration-thickness: 2px; }

  /* selettore di lingua: sempre visibile, anche sul telefono, fuori dal menu a panino */
  .lingue { display: flex; align-items: center; gap: .25rem; font-size: .82rem; flex-shrink: 0; }
  .lingue a, .lingue .lingua-corrente { text-decoration: none; padding: .3rem .5rem; border-radius: 7px; line-height: 1; }
  .lingue a { color: var(--attenuato); border: 1px solid transparent; }
  .lingue a:hover { color: var(--testo); }
  .lingue .lingua-corrente { color: var(--testo); font-weight: 700; background: var(--notte-2); border: 1px solid var(--riga); }

  /* menu a panino: visibile solo sotto gli 880 px */
  .panino { display: none; align-items: center; gap: .55rem; background: none; border: 1px solid var(--riga); color: var(--testo); border-radius: 9px; padding: .5rem .8rem; font: inherit; font-size: .95rem; cursor: pointer; }
  .panino-icona, .panino-icona::before, .panino-icona::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
  .panino-icona::before, .panino-icona::after { content: ""; position: absolute; left: 0; }
  .panino-icona::before { top: -5px; } .panino-icona::after { top: 5px; }
  .panino[aria-expanded="true"] .panino-icona { background: transparent; }
  .panino[aria-expanded="true"] .panino-icona::before { top: 0; transform: rotate(45deg); }
  .panino[aria-expanded="true"] .panino-icona::after { top: 0; transform: rotate(-45deg); }

  .salta { position: absolute; left: -9999px; top: .5rem; background: var(--testo); color: var(--notte); padding: .5rem .8rem; border-radius: 6px; z-index: 10; }
  .salta:focus { left: .5rem; }

  /* pagine interne */
  .intestazione { padding-block: clamp(2.5rem, 6vw, 4.5rem) 2.5rem; }
  .intestazione .sotto { max-width: 42em; }

  /* intestazione con foto: immagine a piena larghezza dietro titolo e sottotitolo,
     velatura scura piu' forte in basso dove sta il testo (contrasto AA). Sul
     telefono l'altezza scende con il clamp, l'immagine resta ma occupa meno spazio. */
  .intestazione.con-foto {
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: clamp(150px, 30vw, 380px);
    display: flex;
    align-items: flex-end;
  }
  .intestazione-foto { position: absolute; inset: 0; }
  .intestazione-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
  .intestazione.con-foto::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(var(--notte-rgb),.15) 0%, rgba(var(--notte-rgb),.55) 60%, rgba(var(--notte-rgb),.94) 100%);
  }
  /* foto chiara (terreno e cielo di giorno): velo piu' scuro, altrimenti titolo e sottotitolo non si leggono */
  .intestazione.con-foto.foto-chiara::after { background: linear-gradient(180deg, rgba(var(--notte-rgb),.5) 0%, rgba(var(--notte-rgb),.74) 55%, rgba(var(--notte-rgb),.96) 100%); }
  .intestazione.con-foto.foto-chiara .intestazione-foto img { object-position: 30% 55%; }
  .intestazione.con-foto .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.2rem, 6vw, 3.8rem) 1.9rem; }
  .intestazione.con-foto .sotto { max-width: 42em; }
  /* foto dentro una sezione: larga quanto il testo, sotto il contenuto (o sopra con .sopra) */
  .foto-corpo { margin: clamp(2rem, 5vw, 3.5rem) 0 0; }
  .foto-corpo.sopra { margin: 0 0 clamp(2rem, 5vw, 3.5rem); }
  .foto-corpo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--riga); border-radius: 14px; }
  .modulo-titolo { font-size: 1.35rem; margin: 0 0 .3rem; }
  .testo { padding-block: clamp(2.5rem, 6vw, 4rem); max-width: 46rem; }
  .testo h2 { font-size: 1.2rem; margin: 2.2rem 0 .6rem; }
  .testo li { margin-bottom: .35rem; }
  .testo table { width: 100%; border-collapse: collapse; font-size: .95rem; }
  .testo th, .testo td { text-align: left; vertical-align: top; padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--riga); }
  .testo th { color: var(--attenuato); font-weight: 500; font-size: .85rem; }
  .testo mark { background: rgba(244,194,27,.18); color: var(--testo); padding: 0 .2rem; border-radius: 3px; }

  /* riquadri della home verso le altre pagine */
  .riquadri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .riquadro { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.3rem; border: 1px solid var(--riga); border-radius: 14px; background: var(--notte-2); text-decoration: none; color: var(--attenuato); font-size: .95rem; transition: border-color .15s; }
  .riquadro:hover { border-color: var(--attenuato); }
  .riquadro-titolo { color: var(--testo); font-weight: 600; font-size: 1.15rem; }
  .riquadro-vai { margin-top: auto; padding-top: .6rem; color: var(--testo); font-weight: 600; }
  .riquadro-vai::after { content: " →"; color: var(--corallo); }


  /* testata: a sinistra la domanda, a destra la risposta gia' disegnata */
  .testata { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(2.5rem, 6vw, 5rem) 3rem; align-items: start; }
  /* curve di livello discrete dietro il titolo e la ricerca: solo la colonna di testo,
     mai sopra il contenuto (z-index sotto, niente pointer-events, sfuma verso il basso) */
  .testata .colonna-testo { position: relative; }
  .testata .colonna-testo::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -2.5rem -1rem auto -1rem; height: 320px; opacity: .5;
    display: none; /* 08/11: sostituite dalla trama a rete su tutta la pagina */
    background-image:
      repeating-radial-gradient(circle at 12% 15%, transparent 0 25px, var(--riga) 26px 27px, transparent 28px),
      repeating-radial-gradient(circle at 78% 55%, transparent 0 32px, var(--riga) 33px 34px, transparent 35px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  }
  h1 {
    margin: 0;
    font-size: clamp(2.1rem, 3.6vw, 3.05rem);
    line-height: 1.04;
    font-weight: 620;
    font-variation-settings: "wdth" 108;
    letter-spacing: -.025em;
  }
  .sotto { margin: 1.4rem 0 0; color: var(--attenuato); max-width: 34em; }
  form.cerca { margin-top: 2rem; display: flex; gap: .5rem; }
  form.cerca input {
    flex: 1 1 auto; min-width: 0;
    background: var(--notte-2); color: var(--testo);
    border: 1px solid var(--riga); border-radius: 10px;
    padding: .95rem 1rem; font: inherit; font-size: 1rem;
  }
  form.cerca input::placeholder { color: var(--attenuato); }
  /* tendina dei suggerimenti: «Via Roma 41» esiste in tanti comuni, si sceglie quello giusto */
  form.cerca .campo { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
  .suggerimenti {
    position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; right: 0;
    margin: 0; padding: .3rem 0; list-style: none;
    background: var(--notte-2); border: 1px solid var(--riga); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35); max-height: 22rem; overflow-y: auto;
  }
  .suggerimenti li { padding: .6rem 1rem; cursor: pointer; line-height: 1.3; }
  .suggerimenti li span { display: block; font-size: .85rem; color: var(--attenuato); }
  .suggerimenti li[aria-selected="true"], .suggerimenti li:hover { background: var(--riga); }
  .bottone {
    background: var(--corallo); color: #fff; border: 0; border-radius: 10px;
    padding: .95rem 1.35rem; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  }
  .bottone:hover { background: #ff4468; }
  .esempi { margin-top: 1rem; font-size: .92rem; color: var(--attenuato); }
  .esempi button { background: none; border: 0; padding: 0; color: var(--testo); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--riga); cursor: pointer; }
  .esempi button:hover { text-decoration-color: var(--testo); }

  /* la mappa disegnata dai nostri dati */
  figure.mappa { margin: 0; }
  .tela { position: relative; background: var(--mappa); border: 1px solid var(--riga); border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; max-width: 100%; }
  #mappa { position: absolute; inset: 0; }
  /* controlli MapLibre intonati al sito scuro */
  .maplibregl-ctrl-group { background: var(--notte-2); border: 1px solid var(--riga); box-shadow: none; }
  .maplibregl-ctrl-group button + button { border-top: 1px solid var(--riga); }
  .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
  .maplibregl-ctrl-scale { background: rgba(var(--notte-rgb),.75); color: var(--testo); border-color: var(--attenuato); }
  .maplibregl-ctrl-attrib { background: rgba(var(--notte-rgb),.75) !important; color: var(--attenuato); font-size: .72rem; }
  .maplibregl-ctrl-attrib a { color: var(--testo); }
  .maplibregl-ctrl-attrib-button { filter: invert(1); }
  .maplibregl-cooperative-gesture-screen { font-family: inherit; }
  /* coordinate sotto il mouse, solo desktop (aggiunte da JS, vedi attaccaCoordinate in home.js) */
  .coord-box {
    position: absolute; left: .6rem; bottom: .6rem; z-index: 2;
    background: rgba(var(--notte-rgb),.75); color: var(--testo); border: 1px solid var(--riga);
    border-radius: 6px; padding: .3rem .55rem; font-size: .78rem; font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  @media (pointer: coarse) { .coord-box { display: none; } }
  .didascalia { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .7rem; font-size: .85rem; color: var(--attenuato); }
  .legenda { display: flex; gap: 1rem; flex-wrap: wrap; }
  .legenda span::before { content: ""; display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: .4rem; }
  .legenda .l-energia::before { border-color: #D5D9E0; }
  .legenda .l-acqua::before { border-color: var(--acqua); border-top-width: 5px; }
  .legenda .l-rete::before { width: 8px; height: 8px; border: 0; background: #D5D9E0; }
  .legenda .l-condotta::before { border-color: #4FD1C5; border-top-style: dashed; border-top-width: 3px; }
  .legenda .l-punto::before { width: 6px; height: 6px; border: 3px solid var(--corallo); border-radius: 50%; background: #fff; }
  /* mappa a tutto schermo: la tela si stende sulla finestra (vedi mappaGrande in home.js) */
  .tela.grande { position: fixed; inset: 0; z-index: 1000; aspect-ratio: auto; border: 0; border-radius: 0; }
  html.mappa-grande { overflow: hidden; }
  .ctrl-grande .maplibregl-ctrl-icon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' fill='none' stroke='%23333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12V8h4M17 8h4v4M21 17v4h-4M12 21H8v-4'/%3E%3C/svg%3E") center / 100% no-repeat; }
  .ctrl-grande[aria-pressed="true"] .maplibregl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' fill='none' stroke='%23333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v4H8M17 8v4h4M21 17h-4v4M8 17h4v4'/%3E%3C/svg%3E"); }

  /* la lettura: tre semafori affiancati. Il colore si legge prima del numero,
     il numero resta per chi deve fare i conti */
  .nota-ia { margin: 1.25rem 0 0; line-height: 1.55; max-width: 62ch; }
  .nota-ia strong { font-weight: 650; }
  .lettura { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--riga); }
  .ind { display: flex; flex-direction: column; padding: 1.4rem 1.2rem 1.3rem; }
  .ind:first-child { padding-left: 0; }
  .ind + .ind { border-left: 1px solid var(--riga); }
  .semaforo {
    width: 4rem; height: 4rem; border-radius: 50%; flex: none; margin-bottom: 1rem;
    display: grid; place-items: center;
    box-shadow: inset 0 -6px 12px rgba(0,0,0,.18), 0 0 0 5px rgba(255,255,255,.04);
    color: #fff; font-size: 1.9rem; font-weight: 600;
  }
  .nome-ind { font-weight: 600; font-size: .95rem; }
  .distanza { font-size: 2.35rem; line-height: 1.05; font-weight: 620; font-variation-settings: "wdth" 112; letter-spacing: -.025em; margin-top: .15rem; }
  .distanza small { font-size: 1.05rem; font-weight: 400; color: var(--attenuato); margin-left: .2rem; letter-spacing: 0; }
  .distanza.vuota { font-size: 1.5rem; line-height: 1.2; }
  .soglia { margin: .45rem 0 0; font-size: .92rem; }
  .fonte { color: var(--attenuato); font-size: .85rem; margin: .3rem 0 .6rem; }
  .logo-agcom { display: inline-block; line-height: 0; margin-bottom: .6rem; }
  .azioni-ind { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 1rem; font-size: .85rem; }
  .azioni-ind button, .due-acque button { background: none; border: 0; padding: 0; color: var(--testo); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .azioni-ind a { color: var(--attenuato); text-underline-offset: 3px; }
  .azioni-ind button:hover, .azioni-ind a:hover, .due-acque button:hover { color: var(--corallo); }
  /* scheda Acqua: rete e bacino una sotto l'altra, con lo stesso peso */
  .due-acque { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .85rem; color: var(--attenuato); }
  .due-acque li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
  .due-acque span { flex-basis: 100%; }
  .due-acque strong { color: var(--testo); font-size: 1rem; font-weight: 600; }
  .due-acque strong.manca { font-size: .85rem; font-weight: 400; color: var(--attenuato); }
  /* su giallo e rosso: la perizia si chiede da qui */
  .chiama-perizia { margin: 0 0 1.1rem; }
  .chiama-perizia .bottone { display: inline-block; padding: .55rem .9rem; font-size: .9rem; text-decoration: none; }
  /* in fondo, il righello: dove cade il punto rispetto alle soglie. margin-top
     auto lo allinea nelle tre colonne anche se i testi sopra vanno a capo */
  .righello { position: relative; height: 26px; margin-top: auto; }
  .righello .fasce { position: absolute; inset: 8px 0 auto 0; height: 4px; display: flex; border-radius: 2px; overflow: hidden; }
  .righello .fasce i { display: block; height: 100%; }
  .righello .tacca { position: absolute; top: 1px; width: 2px; height: 18px; background: var(--testo); border-radius: 1px; transform: translateX(-1px); }
  .righello .scala { position: absolute; top: 18px; font-size: .72rem; line-height: 1; color: var(--attenuato); transform: translateX(-50%); white-space: nowrap; }

  .legenda .l-auto::before { border-color: #6B7280; border-top-width: 4px; }
  .avviso { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--corallo); background: rgba(255,42,85,.08); font-size: .95rem; }
  .bottone[disabled] { opacity: .6; cursor: progress; }
  .tela.carica #mappa { opacity: .45; transition: opacity .2s; }
  .bollino { margin-top: 1.2rem; padding: 1rem 1.1rem; border-left: 3px solid var(--verde); background: rgba(46,189,107,.08); font-size: .95rem; }
  .bollino strong { display: block; margin-bottom: .2rem; }
  .bollino p { margin: .3rem 0 0; color: var(--attenuato); font-size: .88rem; }
  .grigio-nota { margin-top: 1.2rem; padding: 1rem 1.1rem; border-left: 3px solid var(--grigio); background: rgba(138,147,163,.08); font-size: .95rem; }
  .grigio-nota strong { display: block; margin-bottom: .2rem; }

  /* sezioni */
  section { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--riga); }
  h2 { margin: 0 0 1rem; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; font-weight: 600; font-variation-settings: "wdth" 112; letter-spacing: -.02em; max-width: 22em; }
  .intro { color: var(--attenuato); max-width: 40em; margin: 0 0 2rem; }

  table.soglie { width: 100%; border-collapse: collapse; font-size: .98rem; }
  table.soglie th, table.soglie td { text-align: left; padding: .85rem .75rem .85rem 0; border-bottom: 1px solid var(--riga); vertical-align: top; }
  table.soglie th { font-weight: 500; color: var(--attenuato); font-size: .88rem; }
  table.soglie td:first-child { font-weight: 600; white-space: nowrap; }
  table.soglie td.num { white-space: nowrap; }
  table.soglie td.num.a-capo { white-space: normal; }
  .scatola-tab { overflow-x: auto; }

  .due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .conto { margin-top: 1.5rem; font-size: 1rem; }
  .conto div { display: flex; justify-content: space-between; padding-block: .55rem; border-bottom: 1px solid var(--riga); color: var(--attenuato); }
  .conto div span:last-child { color: var(--testo); }
  .conto .totale { border-bottom: 0; padding-top: .9rem; color: var(--testo); font-weight: 600; }
  .conto .totale span:last-child { font-size: 1.6rem; font-variation-settings: "wdth" 112; }
  ul.passi { list-style: none; padding: 0; margin: 1.5rem 0 0; }
  ul.passi li { padding-block: .75rem; border-bottom: 1px solid var(--riga); }
  ul.passi li strong { display: block; }
  ul.passi li span { color: var(--attenuato); font-size: .95rem; }

  form.modulo { display: grid; gap: 1rem; }
  form.modulo label { display: grid; gap: .35rem; font-size: .9rem; color: var(--attenuato); }
  form.modulo input, form.modulo textarea, form.modulo select {
    background: var(--notte-2); color: var(--testo); border: 1px solid var(--riga); border-radius: 9px;
    padding: .8rem .9rem; font: inherit; font-size: 1rem; width: 100%;
  }
  form.modulo textarea { resize: vertical; min-height: 6.5rem; }
  .coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .piccolo { font-size: .85rem; color: var(--attenuato); margin: 0; }
  form.modulo label.spunta { display: flex; gap: .6rem; align-items: flex-start; color: var(--testo); font-size: .92rem; }
  form.modulo label.spunta input { width: auto; margin-top: .25rem; accent-color: var(--corallo); }
  .trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .esito { margin: 0; padding: .8rem 1rem; font-size: .95rem; border-left: 3px solid var(--verde); background: rgba(46,189,107,.08); }
  .esito.errore { border-left-color: var(--corallo); background: rgba(255,42,85,.08); }
  form.modulo [aria-invalid="true"] { border-color: var(--corallo); }

  .perche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem clamp(2rem, 5vw, 4.5rem); margin-top: 1rem; }
  .perche h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 600; }
  .perche p { margin: 0; color: var(--attenuato); }

  details.rete { border-top: 1px solid var(--riga); }
  details.rete:last-of-type { border-bottom: 1px solid var(--riga); }
  details.rete summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding-block: 1.3rem; font-size: 1.2rem; font-weight: 600; }
  details.rete summary::-webkit-details-marker { display: none; }
  details.rete summary span { grid-row: 2; color: var(--attenuato); font-size: .95rem; font-weight: 400; }
  details.rete summary::after { content: "+"; grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 300; font-size: 1.5rem; color: var(--attenuato); }
  details.rete[open] summary::after { content: "−"; }
  details.rete .corpo { padding-bottom: 2rem; max-width: 40rem; }

  footer.piede { border-top: 1px solid var(--riga); padding-block: 2.8rem 2rem; color: var(--attenuato); font-size: .88rem; }
  footer.piede p { margin: .5rem 0 0; max-width: 60em; }
  .piede-colonne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.4fr); gap: 2rem clamp(1.5rem, 4vw, 3.5rem); }
  .piede-col:first-child p:first-of-type { margin-top: .8rem; }
  .piede-titolo { margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--attenuato); }
  .piede-marchio { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--testo); font-weight: 600; font-size: 1.05rem; }
  .piede-marchio img { width: auto; height: 34px; }
  .piede-col nav.piede-menu { display: flex; flex-direction: column; gap: .55rem; margin: 0; }
  footer .piede-menu a { text-decoration: none; color: var(--testo); }
  footer .piede-menu a:hover { text-decoration: underline; text-underline-offset: 3px; }
  footer .piede-menu a[aria-current="page"] { color: var(--attenuato); }
  .piede-fondo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
    margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--riga); font-size: .8rem;
  }
  .piede-fondo p { margin: 0; }
  .piede-vortis { display: flex; align-items: center; gap: .5rem; }
  .piede-vortis a { display: inline-flex; align-items: center; opacity: .85; }
  .piede-vortis a:hover { opacity: 1; }
  .piede-vortis img { height: 16px; width: auto; display: block; }
  @media (max-width: 880px) {
    .piede-colonne { grid-template-columns: 1fr; gap: 1.8rem; }
    .piede-fondo { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 880px) {
    .panino { display: inline-flex; }
    header.barra .wrap { position: relative; }
    nav.menu { display: none; position: absolute; top: calc(100% + .4rem); right: clamp(1rem, 4vw, 2.5rem); left: clamp(1rem, 4vw, 2.5rem); z-index: 20; flex-direction: column; gap: 0; padding: .4rem 0; background: var(--notte-2); border: 1px solid var(--riga); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
    nav.menu.aperto { display: flex; }
    nav.menu a { padding: .85rem 1.1rem; font-size: 1.05rem; color: var(--testo); }
    nav.menu a + a { border-top: 1px solid var(--riga); }
    nav.menu a[aria-current="page"] { text-decoration: none; color: var(--corallo); }
    .riquadri { grid-template-columns: 1fr; }
    .testata, .due, .perche { grid-template-columns: 1fr; }
    .coppia { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    /* sul telefono tre colonne non ci stanno: una riga per semaforo, cerchio a sinistra */
    .lettura { grid-template-columns: 1fr; }
    .ind { display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; padding: 1.1rem 0; }
    .ind + .ind { border-left: 0; border-top: 1px solid var(--riga); }
    .ind .semaforo { grid-row: 1 / 8; margin: .2rem 0 0; }
    form.cerca { flex-direction: column; }
    /* la tabella diventa un elenco: su un telefono cinque colonne schiacciano la spiegazione */
    table.soglie thead { display: none; }
    table.soglie, table.soglie tbody, table.soglie tr, table.soglie td { display: block; }
    table.soglie tr { padding-block: 1rem; border-bottom: 1px solid var(--riga); }
    table.soglie td { border: 0; padding: .15rem 0; }
    table.soglie td:first-child { font-size: 1.1rem; }
    table.soglie td:nth-child(2) { color: var(--attenuato); margin-bottom: .5rem; }
    table.soglie td.num { display: inline-block; margin-right: 1rem; }
    table.soglie td.num::before { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; content: ""; }
    table.soglie td:nth-child(3)::before { background: var(--verde); }
    table.soglie td:nth-child(4)::before { background: var(--giallo); }
    table.soglie td:nth-child(5)::before { background: var(--rosso); }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

  /* un solo movimento: le tre linee si tracciano quando arriva il risultato */
  .collegamento { stroke-dasharray: 10 8; }
  .traccia { animation: traccia 1.1s ease-out both; }
  @keyframes traccia { from { stroke-dashoffset: 400; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }

  /* telefoni stretti (fino a 400 px): logo, IT | EN e panino non ci stavano e la pagina scorreva di lato.
     Il tasto resta di 44 px e tiene la parola «Menu» per chi usa lo screen reader */
  @media (max-width: 400px) {
    header.barra .wrap { gap: .5rem; }
    header.barra .barra-destra { gap: .4rem; }
    header.barra .marchio { font-size: 1rem; gap: .5rem; }
    header.barra .marchio img { width: auto; height: 26px; }
    header.barra .lingue a, header.barra .lingue .lingua-corrente { padding: .3rem .4rem; }
    header.barra .panino { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  }


  /* ---- Perizia: riquadro dei vantaggi, pop-up dal semaforo grigio, campo facoltativo ---- */
  .vantaggi { margin-top: 1.8rem; padding: 1.1rem 1.2rem; border: 1px solid var(--riga); border-left: 3px solid var(--corallo); border-radius: 9px; background: var(--notte-2); }
  .vantaggi h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
  .vantaggi ul, .popup ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
  .vantaggi li, .popup li { color: var(--attenuato); font-size: .95rem; }
  .vantaggi li strong, .popup li strong { color: var(--testo); }
  form.modulo .facoltativo { color: var(--attenuato); font-weight: 400; opacity: .8; }
  .popup {
    width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
    padding: 1.6rem 1.5rem 1.4rem; background: var(--notte-2); color: var(--testo);
    border: 1px solid var(--riga); border-top: 3px solid var(--grigio); border-radius: 12px;
  }
  .popup::backdrop { background: rgba(4,14,30,.74); }
  .popup h2 { margin: 0 0 .8rem; font-size: 1.3rem; line-height: 1.25; }
  .popup p { margin: 0 0 .8rem; color: var(--attenuato); }
  .popup-azioni { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.3rem; }
  .popup-azioni .bottone { text-decoration: none; }
  .popup-chiudi { background: none; border: 1px solid var(--riga); color: var(--testo); border-radius: 9px; padding: .7rem 1rem; font: inherit; cursor: pointer; }
  .popup-chiudi:hover { border-color: var(--attenuato); }