/*
 * base.css — Centro Studi Tecnojus
 * Foglio di stile principale: variabili, reset, navbar, hero,
 * sezioni, card, accordion, footer.
 * Utilizzato da: index.html (root)
 * Percorso: css/base.css
 *
 * Font caricati esternamente tramite Google Fonts (link in <head>):
 * - Libre Baskerville (serif) — titoli e slogan
 * - Source Sans 3 (sans-serif) — corpo testo e interfaccia
 */

/* ═══════════════════════════════════════════
   PALETTE — dai loghi ufficiali
═══════════════════════════════════════════ */
:root {
  --blu:        #3F6E9C;   /* blu Tecnojus ufficiale */
  --blu-scuro:  #2D3E50;   /* blu scuro Accademia */
  --blu-medio:  #5585aa;
  --blu-nav:    #3F6E9C;   /* navbar = blu Tecnojus */
  --blu-lt:     #c8daea;
  --blu-xlt:    #eaf2f8;
  --arancione:  #D25400;   /* arancione Accademia ufficiale */
  --arancione-lt:#e8620a;
  --bianco:     #ffffff;
  --carta:      #fafafa;
  --carta-b:    #ffffff;
  --testo:      #1e2a36;
  --testo-m:    #445566;
  --testo-lt:   #7a8fa0;
  --bordo:      #c8d4e0;
  --bordo-lt:   #e0e8f0;

  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-sans:  'Source Sans 3', 'Helvetica Neue', sans-serif;

  /* spacing scale mobile-first — compresso */
  --sp-xs:  .5rem;
  --sp-sm:  .9rem;
  --sp-md:  1.4rem;
  --sp-lg:  2rem;
  --sp-xl:  2.8rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  background: var(--carta);
  color: var(--testo);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── ANIMAZIONI ─────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.fu  { animation: fadeUp .6s ease both; }
.d1  { animation-delay:.08s; }
.d2  { animation-delay:.18s; }
.d3  { animation-delay:.28s; }
.d4  { animation-delay:.38s; }

/* ══════════════════════════════════════════
   NAVBAR — blu Tecnojus #3F6E9C
   Testo bianco pieno per accessibilità.
   Border-bottom crea lo stacco netto
   con la hero che segue su sfondo chiaro.
══════════════════════════════════════════ */
nav.navbar {
  background: var(--blu-nav);
  color: #fff;
  padding: 0 1.25rem;
  min-height: 50px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  border-bottom: 1px solid var(--arancione); /* stacco visivo verso hero chiara */
}

nav.navbar .navbar-inner {
  max-width: 1020px;
  margin: 0 auto;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  flex-wrap: wrap;
}

nav.navbar a.logo {
  flex: 0 0 auto;
}

nav.navbar a.logo img { height: 34px; display: block; }
nav.navbar ul { list-style: none; display: flex; flex-wrap: wrap; }

nav.navbar ul li a {
  display: block;
  padding: .75rem .75rem;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .03em;
  transition: color .15s;
  white-space: nowrap;
}
nav.navbar ul li a:hover,
nav.navbar ul li a.attivo {
  color: var(--arancione);
}
.nav-print {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 3px;
  color: rgba(255,255,255,.8);
  padding: .28rem .65rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.nav-print:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}


.nav-search { margin-left: auto; display: flex; }
.nav-search input {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-right: none;
  color: #fff;
  padding: .35rem .7rem;
  font-size: .78rem;
  font-family: var(--font-sans);
  border-radius: 3px 0 0 3px;
  width: 170px;
  outline: none;
  transition: background .2s;
}
.nav-search input::placeholder { color: rgba(255,255,255,.55); }
.nav-search input:focus { background: rgba(255,255,255,.25); }
.nav-search button {
  background: var(--arancione);
  border: none; color: #fff;
  padding: .35rem .7rem;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
  font-size: .85rem;
  transition: background .2s;
}
.nav-search button:hover { background: var(--arancione-lt); }

/* Percorso contestuale delle pagine trasversali */
.page-breadcrumb {
  background: var(--carta-b);
  border-bottom: 1px solid var(--bordo-lt);
  font-family: var(--font-sans);
  font-size: .76rem;
  color: var(--testo-lt);
}
.page-breadcrumb .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.page-breadcrumb a {
  color: var(--blu);
  font-weight: 600;
  text-decoration: none;
}
.page-breadcrumb a:hover,
.page-breadcrumb a:focus-visible {
  color: var(--arancione);
  text-decoration: underline;
}
.page-breadcrumb [aria-current="page"] { color: var(--testo-m); }

/* Navigazione contestuale interna alle pagine lunghe */
.page-context-nav {
  position: sticky;
  top: 50px;
  z-index: 150;
  overflow: hidden;
  background: #f4f8fc;
  border-bottom: 1px solid var(--blu-lt);
}
.page-context-nav__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.page-context-nav__label {
  flex: 0 0 auto;
  margin-right: .1rem;
  color: var(--testo-lt);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.page-context-nav__link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2rem;
  padding: .34rem .72rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--carta-b);
  color: var(--blu-scuro);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.page-context-nav__link:hover,
.page-context-nav__link:focus-visible {
  background: #f7fafc;
  border-color: var(--blu-lt);
  color: var(--arancione);
  transform: translateY(-1px);
}
.page-context-nav ~ section[id],
.page-context-nav ~ section #mappa-collana {
  scroll-margin-top: 112px;
}
@media (min-width: 1050px) {
  .page-context-nav__inner { padding-right: 0; padding-left: 0; }
}
@media print {
  .page-context-nav { display: none; }
}


/* Navbar inner responsive */
nav.navbar ul {
  flex: 0 1 auto;
  min-width: 0;
}

.nav-search {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  nav.navbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  nav.navbar .navbar-inner {
    gap: .55rem .75rem;
  }

  nav.navbar ul li a {
    padding-left: .6rem;
    padding-right: .6rem;
  }

  .nav-search input {
    width: 150px;
  }
}

@media (max-width: 760px) {
  nav.navbar .navbar-inner {
    justify-content: space-between;
  }

  nav.navbar ul {
    order: 3;
    width: 100%;
  }

  .nav-search {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  nav.navbar ul {
    gap: 0;
  }

  nav.navbar ul li a {
    padding: .55rem .5rem;
    font-size: .74rem;
  }

  .nav-search {
    width: 100%;
    order: 4;
  }

  .nav-search input {
    width: 100%;
  }
}

/* ══════════════════════════════════════════
   HERO — sfondo carta chiara, testo scuro.
   Stacco netto dalla navbar blu.
   Logo Tecnojus come grafica di sfondo
   a destra, semitrasparente in blu tenue.
   Gerarchia: NOME CENTRO > slogan > target
══════════════════════════════════════════ */
.hero {
  background: #f4f8fc;  /* bianco con leggerissima tinta blu — non puro */
  border-bottom: 1px solid var(--blu-lt);
  padding: var(--sp-md) 1.25rem var(--sp-md);
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* logo grande semitrasparente a destra — solo il "disegno" visibile */
.hero-bg-logo {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, 52vw);
  opacity: .22;   /* PNG con trasparenza reale — nessun blend mode necessario */
  pointer-events: none;
  user-select: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  width: 100%;
}

/* 1 — NOME DEL CENTRO: primo piano, massima gerarchia */
.hero-nome {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--blu-scuro);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: .5rem;
}
.hero-nome span {
  color: var(--arancione); /* "TECNOJUS" in arancione */
}

/* 2 — SLOGAN: secondo piano, serif corsivo */
.hero-slogan {
  font-family: var(--font-serif);
  font-size: clamp(.95rem, 2.2vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--blu);
  line-height: 1.4;
  margin-bottom: .6rem;
}

/* separatore sottile */
.hero-divider {
  width: 36px; height: 2px;
  background: var(--arancione);
  margin: .55rem auto .6rem;
  border: none; border-radius: 2px;
}

/* 3 — DESTINATARI: terzo piano, sans piccolo */
.hero-target-testo {
  font-family: var(--font-sans);
  font-size: clamp(.75rem, 1.6vw, .88rem);
  font-weight: 400;
  color: var(--testo-m);
  line-height: 1.55;
  max-width: 580px;
  margin: 0 auto;
}
.hero-target-testo strong {
  font-weight: 600;
  color: var(--testo);
}

/* ══════════════════════════════════════════
   LAYOUT SEZIONI — padding compresso
══════════════════════════════════════════ */
.sez {
  padding: var(--sp-lg) 1.25rem;
}
@media (min-width: 768px) {
  .sez { padding: var(--sp-xl) 2rem; }
}
.container { max-width: 1020px; margin: 0 auto; }

.sez-label {
  font-family: var(--font-sans);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arancione);
  margin-bottom: .5rem;
}
.sez-titolo {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: var(--blu-scuro);
  line-height: 1.25;
  margin-bottom: var(--sp-sm);
  max-width: 680px;
}
.sez-testo {
  font-family: var(--font-sans);
  font-size: .93rem;
  color: var(--testo-m);
  line-height: 1.72;
  max-width: 700px;
  margin-bottom: .7rem;
}
.sez-testo strong { color: var(--testo); font-weight: 600; }

/* ══════════════════════════════════════════
   IDENTITÀ — tre pilastri
══════════════════════════════════════════ */
.sez-identita { background: var(--carta-b); }

/* layout due colonne: testo | logo filigrana */
.identita-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-lg);
  align-items: start;
}
@media (max-width: 680px) {
  .identita-layout {
    grid-template-columns: 1fr;
  }
  .identita-logo { display: none; }
}

.identita-testo { min-width: 0; }

/* logo grande in filigrana sulla destra — identica tecnica della hero */
.identita-logo {
  position: relative;
  flex-shrink: 0;
  width: min(300px, 52vw);
  align-self: stretch;
}
.identita-logo img {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: min(300px, 52vw);
  opacity: .45;
  display: block;
  pointer-events: none;
  user-select: none;
}

.pilastri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.pilastro {
  border-top: 3px solid var(--blu-lt);
  padding-top: var(--sp-sm);
  transition: border-top-color .25s;
}
.pilastro:hover { border-top-color: var(--arancione); }
.pilastro-num {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blu-lt);
  line-height: 1;
  margin-bottom: .35rem;
}
.pilastro h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--blu-scuro);
  margin-bottom: .35rem;
  font-family: var(--font-sans);
}
.pilastro p {
  font-family: var(--font-sans);
  font-size: .83rem;
  color: var(--testo-m);
  line-height: 1.58;
}

/* ══════════════════════════════════════════
   AREE TEMATICHE — versione definitiva home
══════════════════════════════════════════ */
.sez-aree {
  background: var(--blu-xlt);
}

.sez-aree .aree-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
  margin-top: var(--sp-md);
  justify-items: stretch;
}

@media (max-width: 980px) {
  .sez-aree .aree-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .sez-aree .aree-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .sez-aree .aree-grid {
    grid-template-columns: 1fr;
  }
}

.sez-aree .area-card {
  background: var(--carta-b);
  border: 1px solid var(--bordo-lt);
  border-top: 2px solid var(--blu-lt);
  border-radius: 6px;
  padding: .62rem .5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .28rem;
  width: 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s ease, border-top-color .18s ease, transform .18s ease;
}

.sez-aree .area-card:hover {
  box-shadow: 0 2px 10px rgba(40, 60, 80, .08);
  border-top-color: var(--arancione);
  transform: translateY(-1px);
}

.sez-aree .area-icona {
  width: 36px;
  height: 36px;
  background: #f4f8fc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .05rem;
  flex-shrink: 0;
  transition: background .18s ease;
}

.sez-aree .area-card:hover .area-icona {
  background: #f8efe8;
}

.sez-aree .area-icona svg {
  width: 18px;
  height: 18px;
  color: var(--blu-medio);
  display: block;
  transition: color .18s ease, transform .18s ease;
}

.sez-aree .area-card:hover .area-icona svg {
  color: var(--arancione);
  transform: scale(1.06);
}

.sez-aree .area-nome {
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #2c3e55;
  line-height: 1.32;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.sez-aree .area-desc {
  display: none;
}

/* ══════════════════════════════════════════
   ATTIVITÀ — card con icone e hover
══════════════════════════════════════════ */
.sez-attivita { background: var(--carta-b); }

.attivita-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
@media (max-width: 640px) {
  .attivita-grid { grid-template-columns: 1fr; }
}

.att-card {
  border: 1px solid var(--bordo);
  border-top: 3px solid var(--blu);
  padding: var(--sp-sm) var(--sp-sm);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  background: var(--carta-b);
  border-radius: 8px;
  transition: box-shadow .22s, transform .2s;
  position: relative;
  overflow: hidden;
}
.att-card:hover {
  box-shadow: 0 4px 18px rgba(40,60,80,.1);
  transform: translateY(-2px);
}
.att-card:hover .att-icona svg { color: var(--arancione); transform: scale(1.1) rotate(-4deg); }
.att-card:hover .att-link { color: var(--arancione); }

.att-card.accademia {
  border-top-color: var(--arancione);
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-md);
}
@media (max-width: 640px) {
  .att-card.accademia { flex-direction: column; }
}

.att-icona {
  margin-bottom: .5rem;
}
.att-icona svg {
  width: 28px; height: 28px;
  color: var(--blu);
  transition: color .2s, transform .25s;
  display: block;
}
.att-card.accademia .att-icona svg { color: var(--arancione); }

.att-badge {
  font-family: var(--font-sans);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blu-medio);
  margin-bottom: .45rem;
  display: block;
}
.att-card.accademia .att-badge { color: var(--arancione); }

.att-titolo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blu-scuro);
  margin-bottom: .45rem;
  line-height: 1.25;
}
.att-testo {
  font-family: var(--font-sans);
  font-size: .84rem;
  color: var(--testo-m);
  line-height: 1.6;
  flex: 1;
}
.att-testo ul { list-style: none; margin-top: .4rem; }
.att-testo ul li { padding-left: 1rem; position: relative; margin-bottom: .18rem; }
.att-testo ul li::before {
  content: '—';
  position: absolute; left: 0;
  color: var(--arancione);
  font-size: .75rem;
}
.att-link {
  display: inline-block;
  margin-top: var(--sp-sm);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  color: var(--blu);
  text-decoration: none;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--blu-lt);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.att-link:hover { color: var(--arancione); border-color: var(--arancione); }
.att-card.accademia .att-link { color: var(--arancione); border-color: #f0c8a0; }

.acc-body { flex: 1; min-width: 0; }
.acc-aside {
  flex: 0 0 200px;
  background: var(--blu-xlt);
  border: 1px solid var(--bordo-lt);
  border-radius: 3px;
  padding: var(--sp-sm);
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--testo-m);
  line-height: 1.6;
}
.acc-aside strong {
  display: block;
  font-size: .63rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-lt);
  margin-bottom: .4rem;
}
.acc-logo {
  height: 28px;
  margin-bottom: .7rem;
  display: block;
}

/* ══════════════════════════════════════════
   AGGIORNAMENTI
══════════════════════════════════════════ */
.sez-aggiornamenti { background: var(--blu-xlt); }

.agg-lista { margin-top: var(--sp-md); }
.agg-item {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: .75rem;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--bordo-lt);
  text-decoration: none;
  color: inherit;
}
.agg-item:first-child { border-top: 1px solid var(--bordo-lt); }
.agg-item:hover .agg-titolo { color: var(--arancione); }
.agg-item:hover .agg-arrow  { color: var(--arancione); }
.agg-data {
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--testo-lt);
}
.agg-corpo { display: flex; flex-direction: column; gap: .12rem; }
.agg-fonte {
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blu-medio);
}
.agg-titolo {
  font-size: .9rem;
  color: var(--blu-scuro);
  transition: color .2s;
}
.agg-arrow {
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--bordo);
  transition: color .2s;
}
.link-archivio {
  display: inline-block;
  margin-top: var(--sp-sm);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  color: var(--blu);
  text-decoration: none;
  letter-spacing: .04em;
}
.link-archivio:hover { color: var(--arancione); }

/* ══════════════════════════════════════════
   CURATORE — foto + bio + accordion pubbl.
══════════════════════════════════════════ */
.sez-curatore { background: var(--carta-b); }

.curatore-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
  align-items: start;
}
@media (max-width: 540px) {
  .curatore-grid { grid-template-columns: 1fr; }
}

/* placeholder foto — sostituire con <img> reale */
.curatore-foto {
  width: 110px;
  height: 140px;
  border-radius: 3px;
  background: var(--blu-lt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: var(--blu-medio);
  font-family: var(--font-sans);
  font-size: .7rem;
  text-align: center;
  border: 2px dashed var(--bordo);
  flex-shrink: 0;
}
.curatore-foto svg { width: 32px; height: 32px; color: var(--blu-medio); }
/* quando verrà inserita la foto reale: */
.curatore-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.curatore-nome {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blu-scuro);
  margin-bottom: .12rem;
}
.curatore-ruolo {
  font-family: var(--font-sans);
  font-size: .74rem;
  color: var(--arancione);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: .7rem;
}
.curatore-bio {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--testo-m);
  line-height: 1.68;
  margin-bottom: .85rem;
}

/* ACCORDION pubblicazioni */
.accordion {
  border: 1px solid var(--bordo-lt);
  border-radius: 3px;
  overflow: hidden;
}
.accordion-btn {
  width: 100%;
  background: var(--blu-xlt);
  border: none;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  color: var(--blu-scuro);
  letter-spacing: .05em;
  text-align: left;
  transition: background .18s;
}
.accordion-btn:hover { background: var(--blu-lt); }
.accordion-btn .acc-icon {
  font-size: 1rem;
  color: var(--arancione);
  transition: transform .25s;
  line-height: 1;
  flex-shrink: 0;
}
.accordion-btn[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
}
.accordion-body.open { max-height: 500px; }

.pubbl-lista {
  list-style: none;
  padding: .7rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .38rem;
}
.pubbl-lista li {
  font-family: var(--font-sans);
  font-size: .82rem;
  color: var(--testo-m);
  padding-left: 1rem;
  position: relative;
  line-height: 1.4;
}
.pubbl-lista li::before {
  content: '›';
  position: absolute; left: 0;
  color: var(--arancione);
  font-weight: 700;
}
.pubbl-lista li strong { color: var(--blu-scuro); }

/* ══════════════════════════════════════════
   GOVERNANCE — compatta
══════════════════════════════════════════ */
.sez-governance { background: var(--blu-xlt); }

.gov-titolo-sez {
  font-family: var(--font-sans);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--testo-lt);
  margin-bottom: var(--sp-sm);
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--blu-lt);
}
.gov-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem var(--sp-md);
}
.gov-persona { font-family: var(--font-sans); font-size: .85rem; }
.gov-ruolo {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-lt);
  margin-bottom: .06rem;
}
.gov-nome { color: var(--blu-scuro); font-weight: 600; }

/* ══════════════════════════════════════════
   AREA SOCI — login form
══════════════════════════════════════════ */
.sez-soci {
  background: var(--carta-b);
  padding: var(--sp-md) 1.25rem;
  border-top: 1px solid var(--bordo);
}

.login-inline {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.login-inline-label {
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--testo-m);
  white-space: nowrap;
}

.login-inline-input {
  font-family: var(--font-sans);
  font-size: .82rem;
  color: var(--testo);
  background: var(--carta-b);
  border: 1px solid var(--bordo);
  border-radius: 3px;
  padding: .35rem .6rem;
  outline: none;
  width: 120px;
  transition: border-color .18s, box-shadow .18s;
}
.login-inline-input:focus {
  border-color: var(--blu);
  box-shadow: 0 0 0 2px rgba(63,110,156,.12);
}

.login-inline-btn {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--blu);
  border: none;
  border-radius: 3px;
  padding: .35rem .85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
}
.login-inline-btn:hover { background: var(--blu-scuro); }

.login-inline-errore {
  font-family: var(--font-sans);
  font-size: .76rem;
  color: #8b1a10;
  margin-top: .35rem;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  background: var(--blu-scuro);
  padding: var(--sp-md) 1.25rem;
}
.footer-inner {
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: space-between;
  align-items: end;
}
.footer-copy {
  font-family: var(--font-sans);
  font-size: .74rem;
  color: #7a9ab8;
  line-height: 1.65;
}
.footer-copy a { color: #a0c0d8; text-decoration: none; }
.footer-copy a:hover { color: #fff; }
.footer-nota {
  font-family: var(--font-sans);
  font-size: .68rem;
  color: #4a6a82;
  line-height: 1.55;
  max-width: 260px;
  text-align: right;
}
@media (max-width: 580px) { .footer-nota { text-align: left; max-width: none; } }

/* HERO UNIFICATA TECNOJUS */
.site-hero{background:#f4f8fc;border-bottom:1px solid #d9e2ec;}


/* ══════════════════════════════════════════
   HOME — INTESTAZIONE E NAVIGAZIONE CONTESTUALE
══════════════════════════════════════════ */
.home-header {
  border-bottom: 0;
  box-shadow: none;
}
.home-header .container {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.home-sub {
  max-width: 760px;
}
.home-claim {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  font-style: italic;
  color: var(--blu);
  line-height: 1.45;
  max-width: 760px;
}
.home-target {
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--testo-m);
  line-height: 1.6;
  max-width: 760px;
}
.home-target strong {
  color: var(--testo);
  font-weight: 700;
}
.home-header + .home-area-nav {
  position: sticky;
  top: 50px;              /* altezza della navbar */
  z-index: 150;           /* sotto la navbar, sopra i contenuti */
  background: #f4f8fc;
  border-bottom: 1px solid var(--blu-lt);
}
.home-header + .home-area-nav .area-nav-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: .85rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  background: #f4f8fc;
}
@media (min-width: 768px) {
  .home-header + .home-area-nav .area-nav-inner { padding: .9rem 0; }
}
.home-header + .home-area-nav .area-nav-label {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--testo-lt);
  margin-right: .2rem;
}
.home-header + .home-area-nav .area-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2rem;
  padding: .34rem .78rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--carta-b);
  color: var(--blu-scuro);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.home-header + .home-area-nav .area-nav-link:hover {
  background: #f7fafc;
  border-color: var(--blu-lt);
  color: var(--arancione);
  transform: translateY(-1px);
}
.home-header + .home-area-nav .area-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.home-header + .home-area-nav .dot-evidenza { background: var(--arancione); }
.home-header + .home-area-nav .dot-aggiornamenti { background: var(--blu); }
.home-header + .home-area-nav .dot-identita { background: #7d4c8f; }
.home-header + .home-area-nav .dot-attivita { background: #486581; }
.home-header + .home-area-nav .dot-curatore { background: #8c3f2b; }
.home-header + .home-area-nav .dot-governance { background: #2d5a2d; }

/* ══════════════════════════════════════════
   HOME — PRIMO BLOCCO: AGGIORNAMENTI + IN EVIDENZA
══════════════════════════════════════════ */
.sez-home-primo {
  background: linear-gradient(180deg, #f8fbfe 0%, #ffffff 100%);
}
.home-primo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .9fr);
  gap: var(--sp-md);
  align-items: start;
}
.home-aggiornamenti,
.home-evidenza {
  min-width: 0;
}
.home-aggiornamenti .sez-titolo {
  margin-bottom: .2rem;
}
.home-radar-note {
  max-width: 68ch;
  margin: .15rem 0 0;
  color: var(--testo-2);
  font-size: .92rem;
  line-height: 1.5;
}
.home-aggiornamenti .agg-lista {
  margin-top: .75rem;
}
.home-evidenza .sez-label {
  margin-bottom: .7rem;
}
.evidenza-card {
  background: var(--carta-b);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(33, 52, 74, .06);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.evidenza-media {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background: #e6edf5;
}
.evidenza-badge {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  display: inline-flex;
  align-self: flex-start;
  padding: .2rem .55rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(45, 62, 80, .32);
  backdrop-filter: blur(2px);
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.evidenza-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e6edf5;
}
.evidenza-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease, filter .28s ease;
}
.evidenza-cover:hover img {
  transform: scale(1.02);
  filter: brightness(.94);
}
.evidenza-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 62, 80, .72);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: background .2s ease, transform .2s ease;
}
.evidenza-cover:hover .evidenza-play {
  background: rgba(210, 84, 0, .92);
  transform: translate(-50%, -50%) scale(1.04);
}
.evidenza-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.evidenza-titolo {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--blu-scuro);
  line-height: 1.25;
  margin-bottom: .6rem;
}
.evidenza-testo {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--testo-m);
  line-height: 1.62;
  margin-bottom: .7rem;
}
.evidenza-link {
  display: inline-block;
  margin-top: .15rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 700;
  color: var(--blu-scuro);
  text-decoration: none;
}
.evidenza-link:hover {
  color: var(--arancione);
}

@media (max-width: 900px) {
  .home-primo-grid {
    grid-template-columns: 1fr;
  }
}