/* Vivi Occhieppo: stessa impronta dei servizi digitali del Comune (Occhi@perti, F@tto).
   Palette della copertina istituzionale, Titillium Web auto ospitato. */
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-Black.ttf') format('truetype');font-weight:900;font-display:swap}

:root{
  --blu:#0C2952; --blu-cupo:#0A1B3D; --blu-chiaro:#A9C0DE;
  --carta:#F5F0EA; --carta-scura:#EFE9E2;
  --verde:#2E7D4F; --rosso:#C8352C; --oro:#C89B3C;
  /* --oro sui caratteri non arriva a 3:1 sul bianco (2,56): per il testo si usa
     questa variante piu' scura (4,94:1). --oro resta per bordi e decorazioni. */
  --oro-testo:#8F6A22;
  --testo:#1D2430; --tenue:#5C6673; --linea:#E2DCD2;
  --r:16px;
  --ombra:0 8px 26px rgba(12,41,82,.10), 0 1px 2px rgba(12,41,82,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:'Titillium',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--testo);background:var(--carta);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blu)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--blu);outline-offset:3px}
.testata a:focus-visible{outline-color:var(--oro)}
h1,h2,h3{margin:0;line-height:1.15;font-weight:700;color:var(--blu-cupo)}
code{font-size:.92em;background:var(--carta-scura);padding:1px 5px;border-radius:5px}

.salta{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--blu);padding:10px 14px;
  border-radius:9px;font-weight:700;z-index:100}
.salta:focus{left:12px}

.testata{background:var(--blu);padding:12px 20px;display:flex;align-items:center}
.marchio{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;min-width:0}
.marchio .stemma{height:46px;width:46px;flex:0 0 auto}
.marchio .nome{display:block;font-weight:900;font-size:19px;letter-spacing:.4px;line-height:1.1}
.marchio .paese{display:block;font-size:13px;color:var(--blu-chiaro);letter-spacing:.3px}
.tricolore{height:5px;display:flex}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--verde)}
.tricolore i:nth-child(2){background:#fff}
.tricolore i:nth-child(3){background:var(--rosso)}

/* stessa fascia gialla dei servizi in dimostrazione: testo scuro su oro, 8,9:1 */
.fascia-demo{background:var(--oro);color:#2B2205;font-weight:700;font-size:14px;
  padding:9px 18px;text-align:center;line-height:1.45}

/* la copertina istituzionale, intera: ha già dentro stemma, nome e motto, quindi niente
   testo sopra e niente ritagli. Il titolo del portale sta sotto. */
.copertina{margin:0;background:var(--carta)}
.copertina img{display:block;width:100%;height:auto}
.titolo{font-size:40px;font-weight:900;letter-spacing:.3px}
.sottotitolo{font-size:20px;color:var(--tenue);margin:4px 0 16px}

.foglio{max-width:1080px;margin:0 auto;padding:34px 20px 20px}
.foglio.stretto{max-width:820px}
.scheda{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:26px;box-shadow:var(--ombra)}
.scheda h1{font-size:28px;margin-bottom:6px}
.scheda h2{font-size:20px;margin:26px 0 8px}
.aiuto{color:var(--tenue);font-size:14.5px}

.intro{font-size:18px;max-width:760px;margin:0 0 26px}

/* i servizi */
.servizi{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.servizio{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);
  border-top:6px solid var(--blu);border-radius:var(--r);padding:26px;box-shadow:var(--ombra);
  text-decoration:none;color:var(--testo);transition:transform .15s, box-shadow .15s}
.servizio:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(12,41,82,.16)}
.servizio .per{font-size:12.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--tenue)}
.servizio .app{font-size:30px;font-weight:900;color:var(--blu);line-height:1.1;margin-top:6px}
.servizio .app b{color:var(--oro-testo);font-weight:900}
.servizio h2{font-size:21px;margin:8px 0 10px}
.servizio p{margin:0 0 18px;font-size:16px;flex:1}
.servizio .motto{font-style:italic;color:var(--tenue);font-size:14.5px;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--blu);color:#fff;
  font-weight:700;font-size:16px;padding:13px 22px;border-radius:12px;text-decoration:none}
.servizio:hover .btn{background:var(--blu-cupo)}

.nota{margin-top:26px;background:#fff;border:1px solid var(--linea);border-left:5px solid var(--oro);
  border-radius:12px;padding:16px 20px;font-size:15.5px}

.avviso{background:#fff;border:1px solid var(--linea);border-left:5px solid var(--oro);
  border-radius:11px;padding:13px 16px;font-size:15px;margin-bottom:18px}
.avviso.attenzione{border-left-color:var(--rosso);background:#FBECEA}

.piede{text-align:center;color:var(--tenue);font-size:14px;padding:20px 16px 44px;line-height:1.6}
.piede p{margin:8px 0}
.piede strong{color:var(--blu-cupo)}
.piede .collegamenti a{color:var(--blu);font-weight:600}
.piede .fornitore{font-size:13px}
.mascotte-piede{display:block;margin:10px auto 14px;max-width:170px;border-radius:14px}

@media (max-width:760px){
  .servizi{grid-template-columns:1fr}
  .titolo{font-size:31px}
  .sottotitolo{font-size:17px}
  .foglio{padding:24px 14px 14px}
  .scheda{padding:19px}
  .intro{font-size:16.5px}
}

/* Un servizio annunciato ma non ancora aperto: si vede, non si clicca. */
.servizio.in-arrivo{ opacity:.72; cursor:default; }
.servizio.in-arrivo:hover{ transform:none; box-shadow:var(--ombra); }
.btn.spento{ background:var(--carta-scura); color:var(--tenue); border:1px dashed var(--linea); }