/* ============================================================
   curiAMOGENOVA — foglio di stile del sito
   Veste «Bandiera»: l'impianto della pagina è la croce di San
   Giorgio, la bandiera della città e non di una parte.
   Titoli in bastone pesante, testo in graziato: la voce di un
   avviso pubblico che si legge bene.

   Marchio: proposta A, «curi» inciso in bianco sulla targa
   d'ardesia, «AMOGENOVA» in rosso San Giorgio.

   Nessun file esterno: niente font, script o immagini di terzi.
   Chi apre questa pagina non viene tracciato da nessuno.
   ============================================================ */

:root{
  --bianco:#fcfcfa;
  --bianco-2:#f4f4ef;
  --rosso:#cf2b2b;            /* San Giorgio */
  --rosso-scuro:#a41f1f;
  --inchiostro:#17191b;
  --grigio:#666b70;
  --filo:#e2e1db;

  --titolo:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --testo:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --dati:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --largo:1120px;
  --misura:700px;
  --barra:20px;               /* spessore della croce */

  /* Nomi della veste precedente, tenuti come sinonimi: le pagine
     interne e i loro blocchi <style> li usano ancora. Cambiando
     qui il colore cambia dappertutto, senza rincorrere i file. */
  /* Fondo della targa del marchio: blu scuro, non nero. Scelto il 24/07/2026
     (bozza 4B). Cambiando qui cambia in testata, nel piede e ovunque. */
  --marchio-fondo:#1c3454;

  --ardesia:var(--inchiostro);
  --ardesia-soft:#3c4145;
  --calce:var(--bianco);
  --calce-alta:var(--bianco-2);
  --fumo:var(--grigio);
  --mare:#1f4a5c;
  --display:var(--testo);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bianco);color:var(--inchiostro);
  font-family:var(--testo);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

/* --- impianto ------------------------------------------------ */
.contenitore{max-width:var(--largo);margin:0 auto;padding:0 26px}
/* La colonna di lettura è larga ~64 caratteri ma parte dal bordo sinistro
   del contenitore: i titoli restano sulla stessa verticale dell'apertura. */
.colonna{max-width:var(--misura)}
.contenitore.colonna{max-width:var(--largo)}
.contenitore.colonna > *{max-width:var(--misura)}

section{padding:56px 0}
.sezione{padding:62px 0}
section + section{border-top:1px solid var(--filo)}
.sezione-grigia{background:var(--bianco-2)}
.apertura{padding:64px 0 48px}

/* --- voce ---------------------------------------------------- */
h1{
  font-family:var(--titolo);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:.98;letter-spacing:-.028em;
  margin:0 0 18px;
}
h2{
  font-family:var(--titolo);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.35rem,2.8vw,1.85rem);line-height:1.06;letter-spacing:-.022em;
  margin:0 0 16px;
}
h3{font-family:var(--titolo);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;margin:0 0 6px}
p{margin:0 0 1.05em}
.guida{color:var(--ardesia-soft);max-width:62ch}
.piccolo{font-size:.88rem;color:var(--grigio);font-family:var(--titolo)}
.occhiello{
  font-family:var(--dati);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosso);margin:0 0 14px;
}
a{color:var(--rosso-scuro)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--rosso);outline-offset:3px;
}

/* la parola sottolineata dalla bandiera */
.marcata{position:relative;white-space:nowrap}
.marcata::after{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.09em;
  background:var(--rosso);
}

/* --- testata ------------------------------------------------- */
.testata{border-bottom:var(--barra) solid var(--rosso);background:var(--bianco)}
/* NB: .riga è lo stesso elemento di .contenitore e ne sovrascrive il padding:
   i 26px orizzontali vanno ripetuti, altrimenti su telefono tocca il bordo. */
.testata .riga{display:flex;align-items:center;gap:14px;padding:14px 26px;flex-wrap:wrap;
  max-width:var(--largo);margin:0 auto}
.testata nav{margin-left:auto;display:flex;gap:22px;font-size:.88rem;
  font-family:var(--titolo);font-weight:600}
.testata nav a{color:var(--grigio);text-decoration:none}
.testata nav a:hover{color:var(--rosso);text-decoration:underline}

/* --- il marchio: proposta A, la targa d'ardesia -------------- */
.marchio{
  display:inline-flex;align-items:stretch;text-decoration:none;
  font-family:var(--testo);font-size:1.3rem;line-height:1;letter-spacing:-.012em;
  color:var(--inchiostro);
}
.marchio .curi{
  background:var(--marchio-fondo);color:var(--bianco);
  padding:.36em .16em .38em .40em;
}

/* La bandierina di San Giorgio a fianco del nome: sostituisce il vessillo
   grande, che sul telefono risultava troppo ingombrante (bozza 4). */
.bandierina{
  margin-left:auto;flex:none;width:42px;height:28px;
  background:#fff;border:1px solid #d8d8d1;
  background-image:
    linear-gradient(var(--rosso),var(--rosso)),
    linear-gradient(var(--rosso),var(--rosso));
  background-size:16% 100%, 100% 22%;
  background-position:center center;
  background-repeat:no-repeat;
}
.marchio .amo{
  color:var(--rosso);font-weight:600;letter-spacing:.005em;
  padding:.36em .40em .38em .16em;
}
.marchio:hover .amo{text-decoration:underline;text-underline-offset:.18em}
.marchio-grande{font-size:clamp(1.9rem,5.2vw,2.9rem)}
/* Versione per fondo scuro: la targa si inverte, il rosso si schiarisce
   perché il #cf2b2b su nero non arriva al contrasto minimo. */
.marchio-negativo{color:var(--bianco)}
.marchio-negativo .curi{background:var(--bianco);color:var(--inchiostro)}
.marchio-negativo .amo{color:#f08a8a}

/* --- IL SEGNO: la croce di San Giorgio come impianto --------- */
.stemma{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--barra);
  background:var(--rosso);padding:0;
}
.quadrante{
  background:var(--bianco);padding:46px clamp(26px,4vw,54px);
  display:flex;flex-direction:column;justify-content:center;
}
.quadrante.chiaro{background:var(--bianco-2)}
.quadrante .guida{font-size:1.06rem}

/* --- azioni -------------------------------------------------- */
.azioni{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:2px solid var(--rosso);border-radius:0;
  font-family:var(--titolo);font-size:.98rem;font-weight:700;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.bottone-primario{background:var(--rosso);color:#fff}
.bottone-primario:hover{background:var(--rosso-scuro);border-color:var(--rosso-scuro)}
.bottone-secondario{background:transparent;color:var(--rosso-scuro)}
.bottone-secondario:hover{background:var(--rosso);color:#fff}
.bottone[disabled]{opacity:.45;cursor:not-allowed}

/* --- il conto delle adesioni --------------------------------- */
.conto b{
  display:block;font-family:var(--titolo);font-weight:800;
  font-size:clamp(3.2rem,9vw,5.2rem);line-height:.9;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.conto .sotto{
  display:block;font-family:var(--dati);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grigio);margin-top:12px;line-height:1.6;
}
.barra-obiettivo{height:10px;background:#e4e3dd;margin:22px 0 10px;position:relative}
.barra-obiettivo i{display:block;height:100%;background:var(--rosso);width:0}
@media (prefers-reduced-motion:no-preference){
  .barra-obiettivo i{transition:width .6s cubic-bezier(.2,.7,.3,1)}
}
/* il traguardo: la tacca a fondo corsa */
.barra-obiettivo::after{
  content:"";position:absolute;right:0;top:-5px;bottom:-5px;width:2px;
  background:var(--inchiostro);
}
.nota-conto{font-family:var(--titolo);font-size:.85rem;color:var(--grigio);margin:0}
.nota-pegli{margin-top:10px;padding-top:10px;border-top:1px solid var(--filo);font-size:.8rem}
.nota-pegli:empty{display:none}

/* --- il registro dei tempi di risposta ------------------------ */
.andamento-totali{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 16px;
  padding-bottom:14px;border-bottom:3px solid var(--inchiostro);
}
.andamento-totali b{
  display:block;font-family:var(--titolo);font-weight:800;font-size:1.55rem;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.andamento-totali span{
  display:block;font-family:var(--titolo);font-size:.72rem;color:var(--grigio);
  margin-top:5px;line-height:1.3;
}

/* --- i nove Municipi ----------------------------------------- */
.municipi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo);
  border:1px solid var(--filo);min-height:120px}
.municipio{background:var(--bianco);padding:12px 13px}
/* Un Municipio da cui è arrivato qualcosa si vede: il registro deve dire a
   colpo d'occhio dove la città sta parlando e dove tace. */
.municipio.attivo{border-left:3px solid var(--rosso);padding-left:10px}
.municipio .numero{font-family:var(--dati);font-size:.72rem;color:var(--rosso);
  letter-spacing:.12em;display:block}
.municipio .nome{font-family:var(--titolo);font-weight:700;font-size:.88rem;display:block;
  line-height:1.25;margin-top:3px}
.municipio .conta{font-family:var(--titolo);font-weight:700;font-size:.8rem;display:block;
  margin-top:5px;font-variant-numeric:tabular-nums}
.municipio.attivo .conta{color:var(--rosso)}
.municipio .gente{font-family:var(--dati);font-size:.7rem;color:var(--grigio);
  font-variant-numeric:tabular-nums;display:block;margin-top:2px}

/* --- fatti --------------------------------------------------- */
.fatti{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:32px 0 0;
  border-top:3px solid var(--inchiostro);padding-top:18px}
.fatti b{display:block;font-family:var(--titolo);font-weight:800;font-size:2rem;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.fatti b.rosso,.fatti b.nulla{color:var(--rosso)}
.fatti span{display:block;font-family:var(--titolo);font-size:.85rem;color:var(--grigio);
  margin-top:6px;line-height:1.4}

/* --- richieste ----------------------------------------------- */
.richieste{margin:34px 0 0}
.richiesta{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;
  padding:22px 0;border-top:1px solid var(--filo)}
.richiesta:last-child{border-bottom:1px solid var(--filo)}
.richiesta.patto,.richiesta.cura{
  background:linear-gradient(90deg,rgba(207,43,43,.06),transparent 70%);
  border-top:3px solid var(--rosso);
}
.etichetta{font-family:var(--dati);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--rosso);padding-top:3px}
.richiesta p{margin:0;color:var(--ardesia-soft);font-size:.97rem}

/* --- moduli -------------------------------------------------- */
.modulo{border:1px solid var(--filo);background:var(--bianco-2);padding:30px;margin-top:28px}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.pieno{grid-column:1 / -1}
label{font-family:var(--titolo);font-size:.84rem;font-weight:700}
label .opz{font-weight:400;color:var(--grigio)}
input,select,textarea{
  font-family:var(--testo);font-size:1rem;padding:12px;border:1px solid #cbcac3;
  border-radius:0;background:#fff;color:var(--inchiostro);width:100%;
}
textarea{min-height:120px;resize:vertical}
input:invalid:not(:placeholder-shown){border-color:var(--rosso)}
.aiuto{font-family:var(--titolo);font-size:.8rem;color:var(--grigio)}
/* il campo esca contro i robot: fuori dallo schermo, mai letto da chi vede */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.spunte{display:grid;gap:12px;margin:22px 0 4px}
.spunta{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;line-height:1.5}
.spunta input{width:19px;height:19px;flex:0 0 auto;margin-top:3px;accent-color:var(--rosso)}
.spunta b{font-weight:650}

.esito{margin-top:18px;padding:14px 16px;border-left:5px solid var(--grigio);
  background:#eeeeea;font-size:.94rem;display:none}
.esito.ok{border-left-color:#2f6b4f;background:#eef5f0}
.esito.ko{border-left-color:var(--rosso);background:#f8eeee}
.esito.visibile{display:block}

.avviso-bozza{border-left:5px solid var(--rosso);background:rgba(207,43,43,.07);
  padding:12px 16px;font-family:var(--titolo);font-size:.88rem;margin:0 0 22px}

/* --- gravità (pagina delle segnalazioni) --------------------- */
.scala{display:flex;gap:6px}
.scala label{
  flex:1;text-align:center;border:1px solid #cbcac3;background:#fff;padding:9px 4px;
  cursor:pointer;font-size:.85rem;font-weight:700;border-radius:0;
}
.scala input{position:absolute;opacity:0;width:0;height:0}
.scala label:has(input:checked){background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}

/* --- chiusura ------------------------------------------------ */
.piede{background:var(--inchiostro);color:#c8cbcd;border-top:var(--barra) solid var(--rosso);
  padding:44px 0 60px;font-size:.94rem}
.piede .colonne{display:grid;grid-template-columns:1.4fr 1fr;gap:34px}
.piede h4{font-family:var(--titolo);font-weight:800;text-transform:uppercase;font-size:1rem;
  letter-spacing:-.01em;color:#fff;margin:0 0 12px}
.piede ul{list-style:none;margin:0;padding:0;font-family:var(--titolo);font-size:.9rem}
.piede li{margin:0 0 7px}
.piede a{color:#eceeef}
.piede .piccolo{color:#9aa0a4}
/* il marchio nel piede, in negativo: la chiusura combacia con la testata */
.piede .marchio{font-size:1.05rem;margin:0 0 12px}

/* --- telefono ------------------------------------------------ */
@media (max-width:860px){
  .municipi{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:17px}
  section{padding:42px 0}
  .sezione{padding:44px 0}
  .apertura{padding:40px 0 32px}
  /* La croce non si può stringere in due colonne: diventa la banda
     rossa sul fianco, che è lo stesso segno letto di lato. */
  .stemma{grid-template-columns:1fr;gap:14px;border-left:14px solid var(--rosso)}
  .quadrante{padding:30px 22px}
  .fatti{grid-template-columns:1fr;gap:18px}
  .richiesta{grid-template-columns:1fr;gap:8px}
  .campi{grid-template-columns:1fr}
  .azioni .bottone{flex:1 1 100%}
  .piede .colonne{grid-template-columns:1fr}
  .marcata{white-space:normal}
  /* Mobile: marchio centrato, le voci di menu centrate sotto */
  .testata .riga{flex-direction:column;gap:12px;padding:14px 20px}
  .testata nav{margin:0;justify-content:center;flex-wrap:wrap;gap:12px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* La riga che dice a quale Municipio appartiene la delegazione scelta.
   Non e' un campo da compilare: e' il sito che risponde a una domanda che
   quasi nessuno sa ("in che Municipio sto?"), cosi la persona lo impara. */
.ricavato{
  display:none;margin:2px 0 0;font-family:var(--titolo);font-size:.82rem;
  font-weight:700;color:var(--rosso);
}
.ricavato.visibile{display:block}