/* ===========================================================
   LA GUIDA — copertina, due colonne, colonna laterale
   27/08/2026 — ag.72

   La colonna laterale sta appiccicata sotto la barra alta, che
   e' position:sticky con altezza minima 82px. Il valore qui non
   e' inventato: e' quello, piu' respiro.
   =========================================================== */

/* ---------- COPERTINA ---------- */
.g-copertina{
  position:relative;overflow:hidden;margin:0 0 clamp(28px,4vw,52px);
  height:clamp(260px,38vh,440px);background:var(--blu,#000a3f);
}
.g-copertina img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:saturate(.86) contrast(1.03) brightness(.95);
  transform:scale(1.04);animation:gCop 14s ease forwards;
}
@keyframes gCop{to{transform:scale(1)}}
.g-copertina::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,10,63,.12) 0%,rgba(0,10,63,0) 48%,rgba(0,10,63,.42) 100%);
}

/* ---------- IMPIANTO A DUE COLONNE ---------- */
.g-corpo .wrap.g-due{
  display:grid;
  grid-template-columns:minmax(0,1fr) 306px;
  gap:clamp(32px,4vw,64px);
  align-items:start;
}

/* STICKY VERO, corretto 27/08: un elemento position:sticky piu ALTO del
   viewport non si appiccica mai, scorre via e basta. La colonna aveva
   quattro blocchi impilati, oltre mille pixel. Due erano copie e sono
   stati tolti dal template. Qui resta la rete per gli articoli con
   sedici sezioni: altezza limitata allo schermo e scorrimento interno. */
/* ---------- COLONNA LATERALE ---------- */
/* LO SCORRIMENTO STA NELL'INDICE, NON NELLA COLONNA — 28/08 ag.72.
   Prima max-height e overflow erano su .g-lato: la barra correva su
   TUTTA la colonna, riquadro dei recapiti compreso, e il taglio in
   fondo sembrava un errore. Ora la colonna e' alta quanto vuole e
   scorre solo l'elenco delle sezioni, che e' l'unica cosa lunga. */
.g-lato{position:sticky;top:104px;align-self:start}
.g-lato > * + *{margin-top:20px}

/* l'elenco: alto quanto lo schermo lasciato libero, con la sfumatura
   in fondo che dice «c'e' altro sotto». La sfumatura e' una maschera
   sul contenuto, non un velo bianco sopra: cosi' funziona su
   qualunque fondo e non copre il testo. */
.g-indice ol{max-height:300px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding-right:10px;
  /* la sfumatura NON arriva a trasparente: si ferma al 35%, cosi'
     l'ultima voce visibile resta LEGGIBILE e si capisce solo che
     sotto continua. A zero spariva, ed e' un menu, non un effetto. */
  -webkit-mask-image:linear-gradient(180deg,#000 0 88%,rgba(0,0,0,.35) 100%);
  mask-image:linear-gradient(180deg,#000 0 88%,rgba(0,0,0,.35) 100%)}
.g-indice ol::-webkit-scrollbar{width:5px}
.g-indice ol::-webkit-scrollbar-thumb{background:var(--linea,#DDE0E9);border-radius:3px}
.g-indice ol::-webkit-scrollbar-track{background:transparent}

.g-scheda{
  border:1px solid var(--linea,#DDE0E9);background:var(--neve,#FBFAF8);
  padding:20px 22px;
}
.g-scheda > h4{
  font-family:var(--U,sans-serif);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.17em;color:var(--oro,#B08D57);
  margin:0 0 14px;
}

/* --- indice --- */
.g-indice ol{list-style:none;margin:0;padding:0;counter-reset:vv}
.g-indice li{counter-increment:vv;position:relative}
.g-indice a{
  display:block;padding:7px 0 7px 30px;font-size:.9rem;line-height:1.35;
  color:var(--grigio,#545b6b);border-left:2px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.g-indice a::before{
  content:counter(vv,decimal-leading-zero);
  position:absolute;left:10px;top:8px;
  font-family:var(--U,sans-serif);font-size:.64rem;font-weight:700;
  letter-spacing:.08em;color:var(--grigio-2,#bbbecc);
}
.g-indice a:hover{color:var(--blu,#000a3f)}
.g-indice a.qui{
  color:var(--blu,#000a3f);font-weight:600;
  border-left-color:var(--oro,#B08D57);
}
.g-indice a.qui::before{color:var(--oro,#B08D57)}

/* --- scheda dei dati --- */
.g-dati{font-size:.86rem}
.g-dati dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px}
.g-dati dt{color:var(--grigio-2,#bbbecc);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;padding-top:2px}
.g-dati dd{margin:0;color:var(--blu,#000a3f)}

/* --- richiamo telefonico --- */
.g-chiama{background:var(--blu,#000a3f);border-color:var(--blu,#000a3f);color:#C8D4E1}
.g-chiama h4{color:var(--oro-chiaro,#D3B889)}
.g-chiama p{margin:0 0 14px;font-size:.86rem;line-height:1.5;color:#9FB0C4}
.g-chiama .num{
  display:block;font-family:var(--D,Georgia,serif);font-size:1.42rem;
  color:#fff;letter-spacing:.01em;
}
.g-chiama .num small{
  display:block;font-family:var(--U,sans-serif);font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--oro-chiaro,#D3B889);
  margin-bottom:3px;
}
.g-chiama .num:hover{color:var(--oro-chiaro,#D3B889)}

/* --- guide vicine, in colonna --- */
.g-vicine a{
  display:block;padding:11px 0;border-bottom:1px solid var(--linea,#DDE0E9);
  font-size:.9rem;line-height:1.35;color:var(--grigio,#545b6b);
  transition:color .25s ease;
}
.g-vicine a:last-child{border-bottom:0;padding-bottom:0}
.g-vicine a:first-of-type{padding-top:0}
.g-vicine a:hover{color:var(--blu,#000a3f)}

/* --- l'ancora non deve finire sotto la barra alta --- */
.g-testo h2{scroll-margin-top:104px}

/* ---------- TELEFONO E TAVOLETTA ---------- */
@media(max-width:1040px){
  .g-corpo .wrap.g-due{grid-template-columns:1fr;gap:36px}
  .g-lato{position:static;top:auto}
  /* in colonna unica l'indice va SOPRA il testo: e' li' che serve,
     in fondo sarebbe un sommario di cose gia' lette */
  .g-lato{display:grid;gap:18px}
  .g-lato .g-indice{order:-1}
  /* sul telefono l indice sta in cima e ci sta tutto: niente
     scorrimento dentro lo scorrimento, e niente sfumatura che
     farebbe sembrare tagliata l ultima voce. */
  .g-indice ol{max-height:none;min-height:0;overflow:visible;
    -webkit-mask-image:none;mask-image:none;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .g-copertina img{animation:none;transform:none}
}

/* ===========================================================
   IL CORPO DELL'ARTICOLO — tipografia
   27/08/2026 — ag.72

   SEDE UNICA: queste regole stavano in sito.css e sono state
   SPOSTATE qui, non copiate. Due sedi per la stessa decisione
   sono la pila che aveva spento le immagini di questo tema.

   MISURATO su tutti e 125 gli articoli prima di scrivere:
     2.008 h2 · 630 h3 · 489 liste · 92 TABELLE · 4.200 grassetti
   Le tabelle non avevano NESSUNA regola: 92 tabelle uscivano
   nude, ed e' questo che faceva sembrare il testo buttato li'.
   =========================================================== */

.g-testo{
  max-width:66ch;
  font-size:1.075rem;
  line-height:1.82;
  color:#2B2E33;
}
.g-testo > *:first-child{margin-top:0}
.g-testo > *:last-child{margin-bottom:0}

.g-testo p{margin:0 0 1.35em}

/* --- L'ATTACCO: il primo capoverso apre, e si vede che apre --- */
.g-testo > p:first-of-type{
  font-family:var(--D,Georgia,serif);
  font-size:1.32rem;line-height:1.62;font-weight:300;
  color:var(--blu,#000a3f);
  margin-bottom:1.6em;
}

/* --- TITOLI DI SEZIONE: numerati, con un filetto che apre.
   La numerazione e' automatica: gli articoli hanno da 8 a 16
   sezioni e nessuno le rinumera a mano quando ne aggiunge una. --- */
.g-testo{counter-reset:sez}
.g-testo h2{
  counter-increment:sez;
  position:relative;
  font-family:var(--D,Georgia,serif);font-weight:400;
  font-size:clamp(1.46rem,2.5vw,1.92rem);line-height:1.22;
  color:var(--blu,#000a3f);
  margin:2.9em 0 .85em;padding-top:1.5em;
}
.g-testo h2::before{
  content:"";position:absolute;top:0;left:0;
  width:56px;height:2px;background:var(--oro,#B08D57);
}
.g-testo h2::after{
  content:counter(sez,decimal-leading-zero);
  position:absolute;top:.7em;right:100%;margin-right:22px;
  font-family:var(--U,sans-serif);font-size:.7rem;font-weight:700;
  letter-spacing:.1em;color:var(--grigio-2,#bbbecc);
}
/* il numero fuori colonna esiste solo se c'e' spazio: sotto i
   1240px rientrerebbe sopra il testo */
@media(max-width:1240px){ .g-testo h2::after{display:none} }

.g-testo h3{
  font-family:var(--D,Georgia,serif);font-weight:400;
  font-size:clamp(1.14rem,1.7vw,1.34rem);line-height:1.34;
  color:var(--blu,#000a3f);
  margin:2.1em 0 .5em;
}
.g-testo h4{
  font-family:var(--U,sans-serif);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--oro,#B08D57);margin:2em 0 .7em;
}

/* --- LISTE: il segno e' un filetto, non un pallino di sistema --- */
.g-testo ul,.g-testo ol{margin:0 0 1.5em;padding:0;list-style:none}
.g-testo li{position:relative;padding-left:26px;margin-bottom:.62em;line-height:1.72}
.g-testo li:last-child{margin-bottom:0}
.g-testo ul > li::before{
  content:"";position:absolute;left:2px;top:.82em;
  width:11px;height:1px;background:var(--oro,#B08D57);
}
.g-testo ol{counter-reset:vc}
.g-testo ol > li{counter-increment:vc;padding-left:34px}
.g-testo ol > li::before{
  content:counter(vc,decimal-leading-zero);
  position:absolute;left:0;top:.16em;
  font-family:var(--U,sans-serif);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;color:var(--oro,#B08D57);
}
.g-testo li > ul,.g-testo li > ol{margin:.55em 0 0}

/* --- TABELLE: novantadue, e non ne avevano una di regola.
   Scorrono in orizzontale invece di sfondare la colonna: su
   telefono una tabella a tre colonne non ci sta e basta. --- */
.g-testo table{
  width:100%;border-collapse:collapse;
  margin:2em 0;font-size:.96rem;line-height:1.6;
  display:block;overflow-x:auto;
}
.g-testo table thead th{
  font-family:var(--U,sans-serif);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--oro,#B08D57);text-align:left;
  padding:0 18px 11px 0;border-bottom:1px solid var(--blu,#000a3f);
  white-space:nowrap;
}
.g-testo table td{
  padding:13px 18px 13px 0;
  border-bottom:1px solid var(--linea,#DDE0E9);
  vertical-align:top;
}
.g-testo table tbody tr:last-child td{border-bottom:0}
.g-testo table td:first-child{color:var(--blu,#000a3f);font-weight:500}
.g-testo table tbody tr:hover td{background:var(--panna,#F2EFE9)}
/* senza intestazione la prima riga fa da intestazione */
.g-testo table > tbody > tr:first-child > th{
  font-family:var(--U,sans-serif);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--oro,#B08D57);
  text-align:left;padding:0 18px 11px 0;
  border-bottom:1px solid var(--blu,#000a3f);
}

/* --- RICHIAMI DENTRO IL TESTO --- */
.g-testo strong{font-weight:600;color:var(--blu,#000a3f)}
.g-testo em{font-style:italic;color:var(--blu-2,#1f2c71)}
.g-testo a{
  color:var(--blu,#000a3f);
  border-bottom:1px solid var(--oro-chiaro,#D3B889);
  transition:border-color .25s ease,color .25s ease;
}
.g-testo a:hover{color:var(--oro,#B08D57);border-bottom-color:var(--oro,#B08D57)}

.g-testo blockquote{
  margin:2.1em 0;padding:0 0 0 26px;
  border-left:2px solid var(--oro,#B08D57);
  font-family:var(--D,Georgia,serif);font-size:1.2rem;
  font-style:italic;font-weight:300;line-height:1.6;
  color:var(--blu,#000a3f);
}
.g-testo blockquote p:last-child{margin-bottom:0}

.g-testo hr{
  border:0;height:1px;background:var(--linea,#DDE0E9);
  margin:2.6em 0;
}

.g-testo img{margin:2em 0;width:100%;height:auto}
.g-testo figcaption{
  margin-top:10px;font-family:var(--U,sans-serif);font-size:.78rem;
  color:var(--grigio,#545b6b);
}

/* --- LA CHIUSURA --- */
.g-fine{
  margin-top:3.4em;padding:30px 32px;
  background:var(--panna,#F2EFE9);
  border-left:2px solid var(--oro,#B08D57);
}
.g-fine h3{margin:0 0 .5em;font-family:var(--D,Georgia,serif);
  font-weight:400;font-size:1.3rem;color:var(--blu,#000a3f)}
.g-fine p{margin:0;color:var(--grigio,#545b6b);font-size:1rem;line-height:1.7}

@media(max-width:700px){
  .g-testo{font-size:1.03rem;line-height:1.78}
  .g-testo > p:first-of-type{font-size:1.18rem}
  .g-testo h2{margin-top:2.4em;padding-top:1.2em}
  .g-fine{padding:24px 22px}
}

/* ===========================================================
   LA TESTATA CON LA FOTOGRAFIA SOTTO — 27/08, ag.72
   Il testo sta SOPRA l'immagine, non accanto. La sfumatura e'
   la stessa famiglia gia' misurata per lastra e fascia: velo
   blu piu' fitto in basso, dove sta la scritta, e quasi nullo
   in alto, dove la foto deve vedersi.
   =========================================================== */
.guida-single.con-foto{position:relative;overflow:hidden;background:var(--blu,#000a3f)}
.guida-single.con-foto .gs-sfondo{position:absolute;inset:0;z-index:0}
.guida-single.con-foto .gs-sfondo img{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
  filter:saturate(.8) contrast(1.03) brightness(.9);
  transform:scale(1.05);animation:gsZoom 16s ease forwards;
}
@keyframes gsZoom{to{transform:scale(1)}}
.guida-single.con-foto::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,10,63,.42) 0%,rgba(0,10,63,.30) 34%,
    rgba(0,10,63,.72) 78%,rgba(0,10,63,.88) 100%);
}
.guida-single.con-foto > .wrap{
  position:relative;z-index:2;
  padding-top:clamp(52px,7vw,110px);padding-bottom:clamp(38px,5vw,74px);
  min-height:clamp(300px,42vh,460px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.guida-single.con-foto h1{color:#fff;text-shadow:0 2px 24px rgba(0,10,63,.5)}
.guida-single.con-foto .briciole a{color:var(--oro-chiaro,#D3B889)}
.guida-single.con-foto .briciole span{color:rgba(255,255,255,.5)}
.guida-single.con-foto .g-meta{color:#C8D4E1}
.g-corpo{padding-top:clamp(34px,4vw,60px)}
@media(prefers-reduced-motion:reduce){
  .guida-single.con-foto .gs-sfondo img{animation:none;transform:none}
}