/* ==========================================================================
   ARMONIE MUSICALI CATERINESI APS — foglio di stile comune a tutto il sito

   Qui dentro c'e' il TELAIO: i colori dell'associazione, il corpo del testo,
   il menu in alto e il pie' di pagina. Vale per tutte e dieci le pagine.

   ATTENZIONE: quello che si cambia qui cambia OVUNQUE — ed e' esattamente il
   motivo per cui questo file esiste. Prima ogni pagina aveva la sua copia del
   telaio, le copie erano diventate diverse fra loro (il logo aveva misure
   diverse, il pie' di pagina colori diversi) e il sito appariva incoerente.

   Cio' che riguarda UNA SOLA pagina resta scritto dentro quella pagina.
   ========================================================================== */

/* I colori e le misure dell'associazione. Sono la tavolozza del sito:
   cambiarli qui cambia l'aspetto di tutte le pagine insieme. */
:root{
  --crema: #FAF8F0;
  --avorio: #F2EEE0;
  --carta: #FFFEF8;
  --testo: #1C1A0E;
  --testo-mid: #4A4535;
  --testo-dim: #6E6A50;
  --verde: #1E7A58;
  --verde-s: #145C40;
  --verde-pal: #EBF5EF;
  --oro: #C8922A;
  --oro-light: #F0C86A;
  --oro-testo: #8A6110;
  --oro-pal: #FDF3DC;
  --bordeaux: #7A1F3D;
  --blu: #1A3A6B;
  --violetto: #3C2F8A;
  --border: rgba(28,26,14,.1);
  --shadow: 0 2px 20px rgba(28,26,14,.08);
  --font-serif: 'Cormorant Garamond',Georgia,serif;
  --font-sans: 'Jost',sans-serif;
  --radius: 6px;
  --max-w: 1160px;
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--crema);color:var(--testo);font-family:var(--font-sans);font-weight:300;line-height:1.75;overflow-x:hidden;padding-bottom:52px}
a{color:var(--verde);text-decoration:none;transition:color .2s}
.container{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.2rem,5vw,2.5rem)}
/* Il menu resta agganciato in alto mentre si scorre: su una pagina lunga
   perderlo significa dover risalire fino in cima per cambiare pagina.
   La regola stava solo dentro quattro pagine su quattordici. */
nav{position:sticky;top:0;z-index:200;background:#fff;
  border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.nav-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex-shrink:0}
.nav-logo{width:40px;height:40px;background:var(--verde);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo svg{width:20px;height:20px;fill:#fff}
.nav-name{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;color:var(--testo);line-height:1.2}
.nav-name span{display:block;font-size:.56rem;font-family:var(--font-sans);font-weight:500;color:var(--testo-dim);letter-spacing:.12em;text-transform:uppercase}
.nav-links{display:flex;gap:.1rem;list-style:none;align-items:center}
.nav-links>li>a,.nav-links>li>button{font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--testo-mid);background:none;border:none;cursor:pointer;padding:.4rem .65rem;border-radius:4px;font-family:var(--font-sans);transition:color .2s,background .2s;display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.nav-links>li>a:hover,.nav-links>li>button:hover{color:var(--verde);background:var(--verde-pal)}
.nav-links>li>a.active{color:var(--verde);font-weight:700}
.nav-cta{background:var(--verde)!important;color:#fff!important;padding:.5rem 1.1rem!important;border-radius:var(--radius)!important;font-weight:600!important}
.nav-cta:hover{background:var(--verde-s)!important}
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(28,26,14,.12);min-width:230px;z-index:300;overflow:hidden}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;font-size:.8rem;font-weight:500;color:var(--testo-mid);border-bottom:1px solid var(--border);transition:background .15s;text-decoration:none}
.nav-dropdown-menu a:last-child{border-bottom:none}
.nav-dropdown-menu a:hover{background:var(--verde-pal);color:var(--verde)}
.nav-dropdown-menu .dd-icon{font-size:.9rem;width:20px;text-align:center;flex-shrink:0}
.nav-dropdown-menu .dd-label{flex:1;line-height:1.35}
.nav-dropdown-menu .dd-sub{font-size:.72rem;color:var(--testo-dim);display:block;text-transform:none;letter-spacing:normal;font-weight:400;margin-top:.15rem}
.nav-dropdown.open .dd-arrow{transform:rotate(180deg)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;border:none;background:none;flex-shrink:0}
.nav-hamburger span{width:24px;height:2px;background:var(--testo);border-radius:2px;transition:.3s}
.mobile-menu{visibility:hidden;opacity:0;pointer-events:none;position:fixed;inset:0;background:#fff;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transition:opacity .25s}
.mobile-menu.open{visibility:visible;opacity:1;pointer-events:auto}
.mobile-close{position:absolute;top:1.2rem;right:1.2rem;font-size:1.5rem;cursor:pointer;background:none;border:none;color:var(--testo)}
.mob-link{font-family:var(--font-serif);font-size:1.5rem;color:var(--testo);font-weight:400;text-decoration:none}
.mob-link:hover{color:var(--verde)}
.mob-sub{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center}
.mob-sub a{font-size:.9rem;color:var(--verde);text-decoration:none}
.mob-cta{background:var(--verde);color:#fff!important;padding:.8rem 2rem;border-radius:var(--radius);font-family:var(--font-sans)!important;font-size:.9rem!important;font-weight:600;text-decoration:none}
.mob-bordeaux{background:var(--bordeaux);color:#fff!important;padding:.6rem 1.5rem;border-radius:var(--radius);font-family:var(--font-sans)!important;font-size:.82rem!important;font-weight:600;text-decoration:none;margin-top:-.5rem}
/* STICKY 5×1000 */
    .sticky-5x1000{position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--verde);display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem 1rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);box-shadow:0 -2px 12px rgba(28,26,14,.15)}
.sticky-5x1000 a{color:var(--oro-pal);font-weight:700;text-decoration:none}
.sticky-5x1000 a:hover{color:#fff}
/* FOOTER */
    footer{background:var(--testo);padding:3rem 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
.footer-nome{font-family:var(--font-serif);font-size:1.1rem;color:#fff;font-weight:600;margin-bottom:.2rem}
.footer-sub{font-size:.62rem;color:rgba(255,255,255,.3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.footer-info{font-size:.8rem;color:rgba(255,255,255,.45);line-height:2}
.footer-info a{color:rgba(255,255,255,.45)}
.footer-info a:hover{color:var(--oro-light)}
.footer-col-title{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:.8rem}
.footer-links{display:flex;flex-direction:column;gap:.4rem}
.footer-links a{font-size:.82rem;color:rgba(255,255,255,.5);text-decoration:none}
.footer-links a:hover{color:var(--oro-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:2.5rem;padding-top:1.5rem;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem}
.footer-legal{font-size:.7rem;color:rgba(255,255,255,.22);line-height:1.9}
.footer-legal a{color:rgba(255,255,255,.22)}
.footer-legal a:hover{color:var(--oro-light)}
/* TORNA SU */
    .torna-su{position:fixed;bottom:70px;right:1.2rem;width:40px;height:40px;background:var(--verde);color:#fff;border:none;border-radius:50%;font-size:1.3rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s;z-index:100}
.torna-su.visible{opacity:1;pointer-events:auto}

@media(max-width:480px){
  .nav-name{font-size:.9rem}
  .nav-name span{font-size:.5rem}
}

/* il menu esteso lascia il posto a quello a scomparsa: 7 voci non stanno
   su una riga sotto i 1100px */
@media(max-width:1100px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}

@media(max-width:480px){
  .sticky-5x1000{font-size:.65rem;gap:.5rem}
}

@media(max-width:680px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .footer-grid>div:first-child{grid-column:1/-1}
}


/* --------------------------------------------------------------------------
   Elementi comuni a piu' pagine ma non presenti nella home: il filo di briciole
   (Home > Pagina), la barra fissa in basso, il tasto 'torna su', i link di
   ritorno. Recuperati qui perche' il telaio era stato ricavato dalla sola home.
   -------------------------------------------------------------------------- */
.breadcrumb a:hover{color:var(--verde)}
.breadcrumb a{color:var(--testo-dim)}
.breadcrumb span{color:var(--verde);font-weight:600}
.breadcrumb-inner{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.breadcrumb{padding:.7rem 0;font-size:.75rem;color:var(--testo-dim);background:#fff;border-bottom:1px solid var(--border)}
.footer-copy{font-size:.7rem;color:rgba(255,255,255,.3);line-height:1.8;text-align:center}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.mob-bord{background:var(--bordeaux);color:#fff!important;padding:.6rem 1.5rem;border-radius:var(--radius);font-family:var(--font-sans)!important;font-size:.82rem!important;font-weight:600;text-decoration:none}
.mobile-cta{background:var(--verde);color:#fff!important;padding:.8rem 2.5rem;border-radius:var(--radius);font-family:var(--font-sans)!important;font-size:.9rem!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mobile-menu a:hover{color:var(--verde)}
.mobile-menu a{font-family:var(--font-serif);font-size:1.6rem;color:var(--testo);font-weight:400}
.nav-back:hover{color:var(--verde-s)}
.nav-back{font-size:.75rem;color:var(--verde);font-weight:600;display:flex;align-items:center;gap:.3rem}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-home{font-weight:600!important}
.nav-links a:hover{color:var(--verde)}
.nav-links a{font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-mid);transition:color .2s}
.nav-links>li>a.active,.nav-links>li>button.active{color:var(--verde);font-weight:600}
.sticky-5k a:hover{color:#fff}
.sticky-5k a{color:var(--oro-light);font-weight:700;text-decoration:none}
.sticky-5k{position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--verde-s);display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem 1rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.sticky-5x1000 .cf{color:#fff;font-weight:700}
.sticky-bar a:hover{color:#fff}
.sticky-bar a{color:var(--oro-light);font-weight:700;text-decoration:none}
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--verde-s);display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem 1rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.sticky-close:hover{color:#fff}
.sticky-close{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:1rem;padding:0 .3rem;flex-shrink:0}
.torna-su:hover{background:var(--verde-s)}


/* --------------------------------------------------------------------------
   LEGGIBILITA' DEL TESTO
   Una riga troppo lunga stanca: l'occhio fatica a ritrovare l'inizio di quella
   dopo. La misura usata dai quotidiani e dai libri sta fra i 45 e i 75
   caratteri; qui il limite e' 68. Su schermi larghi il testo si ferma, invece
   di distendersi per tutta la pagina.
   I titoli e le voci brevi non sono toccati: il limite vale per i paragrafi.
   -------------------------------------------------------------------------- */
p{max-width:68ch}
/* nei blocchi centrati il paragrafo resta centrato */
/* solo dove il blocco e' dichiaratamente centrato il paragrafo si centra;
   nelle intestazioni di pagina resta allineato a sinistra col titolo */
[style*="text-align:center"] p,
footer p{margin-left:auto;margin-right:auto}
/* dove il paragrafo e' una didascalia dentro una scheda, il limite non serve */
.att-card p,
.nav-dropdown-menu p,
.mobile-menu p{max-width:none}


/* --------------------------------------------------------------------------
   La striscia bordeaux in cima a ogni pagina ('Entra in AMC').
   Stava scritta dentro le singole pagine: qui vale per tutte.
   -------------------------------------------------------------------------- */
.top-soci{background:var(--bordeaux);color:rgba(255,255,255,.85);font-size:.7rem;font-weight:500;padding:.4rem 0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-soci a{color:var(--oro-light);font-weight:700;text-decoration:none;margin-left:.5rem}
.top-soci a:hover{color:#fff}
.top-soci-inner{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.top-soci-sep{color:rgba(255,255,255,.25);font-size:.8rem}


/* --------------------------------------------------------------------------
   ACCESSIBILITA'
   - 'Salta al contenuto': invisibile col mouse, compare a chi naviga da
     tastiera (primo TAB) e serve a saltare il menu, che altrimenti va
     riascoltato a ogni pagina con il lettore vocale.
   - I bottoni hanno un'altezza minima comoda da toccare col dito.
   - Chi si muove da tastiera deve vedere dov'e'.
   -------------------------------------------------------------------------- */
.salta-contenuto{position:absolute;left:-9999px;top:0;z-index:999;background:var(--verde);
  color:#fff;padding:.7rem 1.2rem;border-radius:0 0 var(--radius) 0;font-weight:600;
  font-size:.9rem;text-decoration:none}
.salta-contenuto:focus{left:0}
a:focus-visible,button:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
.nav-cta,.mob-cta,.mob-bordeaux{min-height:44px;display:inline-flex;align-items:center;justify-content:center}


/* --------------------------------------------------------------------------
   NAVIGARE DENTRO LA PAGINA

   Le pagine lunghe senza un indice perdono buona parte dei lettori a meta'
   strada: chi scorre non sa quanto manca ne' cosa c'e' piu' avanti.
   Qui ci sono i due strumenti che servono:
   1. l'INDICE, in cima alla pagina, con i collegamenti alle sezioni;
   2. le SEZIONI APRIBILI, per i contenuti che interessano solo a una parte
      dei lettori (per esempio: il percorso adatto a una certa eta').
   -------------------------------------------------------------------------- */

/* il menu in alto e' fisso: senza questo, cliccando una voce dell'indice
   il titolo della sezione finisce nascosto dietro al menu */
html{scroll-behavior:smooth;scroll-padding-top:90px}

.indice{background:var(--carta);border:1px solid var(--border);border-radius:10px;
  padding:1.1rem 1.3rem;margin:0 auto 2rem;max-width:860px}
.indice-tit{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verde-s);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.indice-tit::before{content:'';width:20px;height:2px;background:var(--oro)}
.indice ol{list-style:none;counter-reset:i;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.15rem .9rem}
.indice li{counter-increment:i}
.indice a{display:flex;gap:.55rem;padding:.4rem 0;font-size:.95rem;color:var(--testo-mid);
  text-decoration:none;line-height:1.4;align-items:baseline}
.indice a::before{content:counter(i) '.';color:var(--oro-testo);font-weight:700;font-size:.82rem;flex-shrink:0}
.indice a:hover{color:var(--verde)}

/* sezioni che si aprono e si chiudono */
.apribile{background:var(--carta);border:1px solid var(--border);border-radius:10px;
  margin-bottom:.8rem;overflow:hidden}
.apribile>summary{cursor:pointer;padding:1.05rem 1.2rem;list-style:none;display:flex;
  align-items:flex-start;gap:.9rem;transition:background .2s}
.apribile>summary::-webkit-details-marker{display:none}
.apribile>summary:hover{background:var(--verde-pal)}
.apribile>summary::after{content:'+';margin-left:auto;font-size:1.5rem;line-height:1;
  color:var(--verde);font-weight:300;flex-shrink:0;transition:transform .2s}
.apribile[open]>summary::after{content:'\2212'}
.apribile[open]>summary{background:var(--verde-pal);border-bottom:1px solid var(--border)}
.apr-eta{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oro-testo);display:block;margin-bottom:.2rem}
.apr-tit{font-family:var(--font-serif);font-size:1.16rem;font-weight:600;color:var(--verde-s);line-height:1.3}
.apr-corpo{padding:1.1rem 1.2rem 1.3rem}
.apr-corpo p{margin-bottom:.8rem;font-size:.98rem;line-height:1.75;color:var(--testo-mid)}
.apr-corpo p:last-child{margin-bottom:0}
.apribile summary:focus-visible{outline:3px solid var(--oro);outline-offset:-3px}
@media(max-width:560px){
  .apr-tit{font-size:1.05rem}
  .indice ol{grid-template-columns:1fr}
}


/* --------------------------------------------------------------------------
   NAVIGAZIONE DI SEZIONE (resta agganciata mentre si scorre)

   Il menu in alto serve a cambiare pagina. Questa serve a muoversi DENTRO una
   pagina lunga, senza dover risalire in cima ogni volta.
   Su computer sta a lato del contenuto; su telefono diventa una striscia
   orizzontale agganciata sotto il menu, che scorre con il dito.
   La voce della sezione che si sta leggendo si illumina da sola.
   -------------------------------------------------------------------------- */
.con-nav{display:grid;grid-template-columns:210px 1fr;gap:2.4rem;align-items:start}
.nav-sez{position:sticky;top:90px}
.nav-sez-tit{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--testo-dim);margin-bottom:.7rem}
.nav-sez a{display:block;padding:.45rem 0 .45rem .8rem;font-size:.9rem;color:var(--testo-mid);
  text-decoration:none;border-left:2px solid var(--border);line-height:1.35;transition:all .15s}
.nav-sez a:hover{color:var(--verde);border-left-color:var(--verde)}
.nav-sez a.qui{color:var(--verde-s);font-weight:600;border-left-color:var(--oro);background:var(--verde-pal)}

@media(max-width:900px){
  .con-nav{grid-template-columns:1fr;gap:0}
  .nav-sez{position:sticky;top:69px;z-index:100;background:var(--carta);
    border-bottom:1px solid var(--border);margin:0 -1.2rem 1.4rem;padding:.55rem 1.2rem;
    display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .nav-sez::-webkit-scrollbar{display:none}
  .nav-sez-tit{display:none}
  .nav-sez a{border-left:none;border:1px solid var(--border);border-radius:100px;
    padding:.35rem .85rem;white-space:nowrap;font-size:.82rem;flex-shrink:0}
  .nav-sez a.qui{background:var(--verde);color:#fff;border-color:var(--verde)}
}


/* --------------------------------------------------------------------------
   BARRA DELLE PAGINE SORELLE

   Le pagine stanno in famiglie: Chi siamo, Le nostre strutture, Sostienici.
   Il menu in alto serve a scegliere la famiglia; questa barra serve a
   muoversi DENTRO la famiglia, senza dover riaprire la tendina ogni volta.
   In evidenza la pagina che si sta leggendo.
   -------------------------------------------------------------------------- */
.sotto-nav{background:var(--crema);border-bottom:1px solid var(--border)}
.sotto-nav-in{display:flex;align-items:center;gap:.25rem;padding:.35rem 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sotto-nav-in::-webkit-scrollbar{display:none}
.sotto-nav-eti{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--testo-dim);margin-right:.7rem;white-space:nowrap;flex-shrink:0}
.sotto-nav a{display:inline-flex;align-items:center;min-height:44px;padding:.3rem .85rem;
  border-radius:100px;font-size:.85rem;color:var(--testo-mid);text-decoration:none;
  white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s}
.sotto-nav a:hover{color:var(--verde-s);background:var(--verde-pal)}
.sotto-nav a.qui{background:var(--verde);color:#fff;font-weight:600}
@media(max-width:700px){.sotto-nav-eti{display:none}}


/* --------------------------------------------------------------------------
   I PARTNER

   Prima compariva un solo partner su quattro pagine, e sembrava l'unico.
   O ci sono tutti o non c'e' nessuno: qui ci sono tutti, con il nome per
   esteso e il documento che regola il rapporto, e il rimando alla sezione
   dove sono spiegati per intero.
   -------------------------------------------------------------------------- */
.partner-fascia{background:var(--avorio);border-top:1px solid var(--border);
  padding:clamp(1.5rem,3vw,2.5rem) 0}
.partner-righe{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:.9rem;margin-top:.9rem}
.partner-voce{display:flex;align-items:center;gap:1rem;background:var(--carta);
  border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem;
  text-decoration:none;min-height:44px}
.partner-voce:hover{border-color:var(--verde)}
.partner-mini{width:46px;height:46px;object-fit:contain;flex-shrink:0;border-radius:4px}
.partner-voce strong{display:block;font-family:var(--font-serif);font-size:1rem;
  font-weight:600;color:var(--testo);line-height:1.25;margin-bottom:.2rem}
.partner-voce em{display:block;font-style:normal;font-size:.78rem;color:var(--testo-dim)}
.partner-tutti{margin-top:.9rem;font-size:.86rem}
.partner-tutti a{color:var(--verde);font-weight:600;text-decoration:none}
.partner-tutti a:hover{text-decoration:underline}


/* --------------------------------------------------------------------------
   ISCRIVERSI

   Prima l'iscrizione era una riga di testo in fondo alla pagina, con scritto
   "scrivici". Chi deve decidere se iscrivere un figlio ha bisogno di sapere
   tre cose: che cosa fare adesso, che cosa succede dopo, e che non gli costa
   fatica. Questo riquadro dice quelle tre cose.
   -------------------------------------------------------------------------- */
.iscriviti{background:var(--verde-pal);border:1px solid rgba(30,122,88,.2);
  border-radius:10px;padding:clamp(1.2rem,3vw,1.8rem)}
.iscriviti-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;background:var(--verde);color:#fff;padding:.9rem 2rem;
  border-radius:var(--radius);font-weight:700;text-decoration:none;font-size:1rem}
.iscriviti-btn:hover{background:var(--verde-s)}
.iscriviti-nota{font-size:.86rem;color:var(--testo-mid);margin:.7rem 0 0}
.iscriviti-passi{margin:1.1rem 0 0;padding-left:1.2rem;font-size:.94rem;
  color:var(--testo-mid);line-height:1.7}
.iscriviti-passi li{margin-bottom:.35rem}
.iscriviti-alt{font-size:.88rem;color:var(--testo-dim);margin:1rem 0 0;
  padding-top:.8rem;border-top:1px solid rgba(30,122,88,.15)}

/* le tre vie per entrare in associazione */
.scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
.scelta{display:flex;flex-direction:column;gap:.4rem;background:var(--carta);
  border:1px solid var(--border);border-radius:10px;padding:1.2rem;text-decoration:none;
  border-top:4px solid var(--verde)}
.scelta:hover{border-color:var(--verde);box-shadow:var(--shadow)}
.scelta strong{font-family:var(--font-serif);font-size:1.12rem;color:var(--testo)}
.scelta span{font-size:.9rem;color:var(--testo-mid);line-height:1.55;flex:1}
.scelta em{font-style:normal;font-size:.88rem;font-weight:600;color:var(--verde);
  min-height:44px;display:flex;align-items:flex-end}


/* --------------------------------------------------------------------------
   DOVE SI VA ADESSO

   In fondo a una pagina lunga c'era solo la freccia per tornare in cima. Ma
   chi arriva in fondo ha finito di leggere: ha bisogno di sapere qual e' la
   pagina dopo, non di ricominciare da capo. E' il modo in cui chiudono le
   pagine i grandi enti e i manuali: precedente e successiva, con il nome.
   -------------------------------------------------------------------------- */
.prosegui{background:var(--crema);border-top:1px solid var(--border);
  padding:clamp(1.2rem,3vw,2rem) 0}
.prosegui-in{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.prosegui-voce{display:flex;flex-direction:column;gap:.25rem;background:var(--carta);
  border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;
  text-decoration:none;min-height:44px}
.prosegui-voce:hover{border-color:var(--verde)}
.prosegui-voce.succ{text-align:right}
.prosegui-eti{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--testo-dim)}
.prosegui-voce strong{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;
  color:var(--verde-s);line-height:1.25}
@media(max-width:560px){
  .prosegui-in{grid-template-columns:1fr}
  .prosegui-voce.succ{text-align:left}
}


/* --------------------------------------------------------------------------
   CONDIVIDERE

   Un pulsante solo. Sul telefono apre il foglio di condivisione del sistema,
   dove ci sono WhatsApp, Telegram, Instagram, Messenger, la mail: quelli che
   la persona ha davvero, e in cui e' gia' dentro. Sul computer, dove quel
   foglio non esiste, si apre un piccolo menu con le stesse voci.
   -------------------------------------------------------------------------- */
.cond{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.5rem 1.1rem;background:var(--carta);color:var(--verde-s);
  border:1.5px solid var(--verde);border-radius:100px;font-family:var(--font-sans);
  font-size:.85rem;font-weight:600;cursor:pointer}
.cond:hover{background:var(--verde);color:#fff}
.cond-avvolge{position:relative;display:inline-block}
.cond-menu{position:absolute;z-index:300;margin-top:.4rem;background:var(--carta);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);
  padding:.4rem;display:flex;flex-direction:column;min-width:170px}
.cond-menu a,.cond-menu button{display:block;padding:.6rem .8rem;min-height:44px;
  background:none;border:none;text-align:left;font-family:var(--font-sans);
  font-size:.88rem;color:var(--testo-mid);text-decoration:none;cursor:pointer;
  border-radius:6px}
.cond-menu a:hover,.cond-menu button:hover{background:var(--verde-pal);color:var(--verde-s)}


/* --------------------------------------------------------------------------
   IL PASSAGGIO DA UNA SEZIONE ALL'ALTRA

   Dentro una pagina lunga le sezioni finivano per sembrare un testo unico:
   cambiava il titolo, ma niente diceva all'occhio "qui comincia un'altra
   cosa". Ora ogni sezione si apre con una testata: una riga che taglia la
   colonna, il numero progressivo, l'etichetta e il titolo. Il numero serve a
   sapere dove si e' arrivati, come nei capitoli.
   -------------------------------------------------------------------------- */
.sez-testa{display:flex;align-items:flex-start;gap:1rem;border-top:2px solid var(--verde);
  padding-top:1.4rem;margin-bottom:1.5rem}
.sez-n{font-family:var(--font-serif);font-size:1.6rem;font-weight:600;color:var(--oro);
  line-height:1.05;flex-shrink:0;font-variant-numeric:tabular-nums}
.sez-eti{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verde);margin:0 0 .3rem;display:block}
.sez-tit{font-family:var(--font-serif);font-size:clamp(1.4rem,3.2vw,2rem);font-weight:600;
  color:var(--verde-s);line-height:1.2;margin:0}
.con-nav [id][style*="scroll-margin-top"]+[id][style*="scroll-margin-top"]{margin-top:4rem}

/* una scheda per quello che c'e' ma non ha ancora una data */
.att-attesa{border-style:dashed;background:var(--crema)}
.st-attesa{color:var(--oro-testo)}

.att-azione{display:inline-flex;align-items:center;min-height:44px;margin-top:.2rem;
  font-size:.88rem;font-weight:600;color:var(--verde);text-decoration:none}
.att-azione:hover{text-decoration:underline}


/* --------------------------------------------------------------------------
   IL CALENDARIO

   Due cose diverse. "Aggiungi al calendario" serve a chi legge un appuntamento
   e lo vuole nel proprio telefono: Google Calendar per chi usa Android o
   Gmail, un file .ics per Apple e Outlook. Il colpo d'occhio serve a chi
   guarda l'associazione da fuori - un Comune, una fondazione - e in due
   secondi vuole capire se lavora tutto l'anno o una volta sola.
   -------------------------------------------------------------------------- */
.cal-menu{position:absolute;z-index:300;margin-top:.4rem;background:var(--carta);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);
  padding:.4rem;display:flex;flex-direction:column;min-width:190px}
.cal-menu a{display:block;padding:.6rem .8rem;min-height:44px;font-size:.88rem;
  color:var(--testo-mid);text-decoration:none;border-radius:6px}
.cal-menu a:hover{background:var(--verde-pal);color:var(--verde-s)}

.occhio{background:var(--crema);border:1px solid var(--border);border-radius:10px;
  padding:1rem 1.1rem;margin-bottom:1.2rem}
.occhio-tit{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--testo-dim);margin-bottom:.7rem}
.occhio-riga{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.occhio-anno{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;
  color:var(--verde-s);background:none;border:none;cursor:pointer;padding:.2rem .1rem;
  min-height:44px;flex-shrink:0;width:3.2rem;text-align:left}
.occhio-anno:hover{color:var(--oro-testo);text-decoration:underline}
.occhio-mesi{display:flex;gap:.22rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.occhio-mesi::-webkit-scrollbar{display:none}
.occhio-mese{display:inline-flex;align-items:center;justify-content:center;
  width:1.55rem;height:1.55rem;border-radius:4px;font-size:.62rem;font-weight:600;
  background:var(--avorio);color:var(--testo-dim);flex-shrink:0}
.occhio-mese.pieno{color:#fff}
.occhio-nota{font-size:.78rem;color:var(--testo-dim);margin:.7rem 0 0;line-height:1.6}