:root {
    --ice-050: #F7FBFF;
    --ice-100: #EAF7FF;
    --ice-200: #CDEFFF;
    --cyan-300: #8DDCFF;
    --cyan-500: #35BFEA;
    --blue-600: #1479B8;
    --navy-800: #083B66;
    --navy-900: #061F3A;

    --testo: var(--navy-900);
    --testo-tenue: #3C5A75;
    --fondo: var(--ice-050);
    --bordo: #D7E8F5;
    --scheda-fondo: #ffffff;

    --serif: "Spectral", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;

    --gutter: 16px;
    --max: 1200px;
    --r: 10px;
  }

  /* The palette is a light scientific one by design; dark mode keeps the same
     hues but swaps which end of the ramp carries the text. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --testo: var(--ice-050);
      --testo-tenue: #9FC4DE;
      --fondo: #04172B;
      --bordo: #12405F;
      --scheda-fondo: #07233D;
    }
  }
  :root[data-theme="dark"] {
    --testo: var(--ice-050);
    --testo-tenue: #9FC4DE;
    --fondo: #04172B;
    --bordo: #12405F;
    --scheda-fondo: #07233D;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--fondo);
    color: var(--testo);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; display: block; }

  .racchiusa { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

  h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
  h2 { font-size: clamp(28px, 4vw, 44px); }
  h3 { font-size: clamp(19px, 2vw, 23px); }
  p { margin: 0 0 1em; }
  a { color: var(--blue-600); }

  .occhiello {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--cyan-500); margin: 0 0 14px;
  }
  .scura .occhiello { color: var(--cyan-300); }

  .sezione { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
  .scura { background: linear-gradient(180deg, var(--navy-900), var(--navy-800)); color: var(--ice-100); }
  .scura h2, .scura h3 { color: #fff; }
  .scura a { color: var(--cyan-300); }

  /* A section whose own photograph sits behind it, pushed far back so the
     type never has to fight it. */
  .confondo { background-size: cover; background-position: center; }
  .confondo::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,31,58,.93), rgba(8,59,102,.93));
  }
  .confondo > .racchiusa { position: relative; }
  .confondo.chiara::before { background: linear-gradient(180deg, rgba(247,251,255,.95), rgba(234,247,255,.95)); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .confondo.chiara::before { background: linear-gradient(180deg, rgba(4,23,43,.95), rgba(6,31,58,.95)); }
  }

  .guida { max-width: 64ch; color: var(--testo-tenue); font-size: clamp(17px, 1.6vw, 19px); }
  .scura .guida, .confondo:not(.chiara) .guida { color: var(--ice-200); }

  /* ---------- intestazione ---------- */
  header { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .45s ease, box-shadow .45s ease; }
  @media (prefers-reduced-motion: reduce) { header { transition: none; } }
  header .racchiusa { display: flex; align-items: center; gap: 24px; height: 68px; }
  header.posata { background: rgba(255,255,255,.95); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--bordo); }

  .marchio { font-family: var(--serif); font-size: 15.5px; color: #fff; text-decoration: none; line-height: 1.15; max-width: 23ch; flex: none; }
  .marchio span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--cyan-300); white-space: nowrap; }
  header.posata .marchio { color: var(--navy-900); }
  header.posata .marchio span { color: var(--blue-600); }

  nav a {
    font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.88); text-decoration: none; padding: 6px 2px;
    border-bottom: 1px solid transparent;
  }
  header.posata nav a { color: var(--navy-800); }
  nav a { position: relative; }
  nav a:not(.riservata)::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
    background: var(--cyan-500); transform: scaleX(0); transform-origin: left;
    transition: transform .4s cubic-bezier(.16,.8,.3,1);
  }
  nav a:not(.riservata):hover::after, nav a:not(.riservata):focus-visible::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { nav a::after { transition: none; } }
  nav a.riservata { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 15px; }
  header.posata nav a.riservata { border-color: var(--blue-600); color: var(--blue-600); }

  :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 3px; border-radius: 4px; }

  /* ---------- hero ---------- */
  .hero { position: relative; min-height: min(92vh, 780px); display: grid; align-items: center; overflow: hidden; background: var(--navy-900); }
  .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero .velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,31,58,.92) 0%, rgba(6,31,58,.72) 45%, rgba(6,31,58,.25) 100%); }
  .hero .racchiusa { position: relative; padding-top: 68px; }
  .hero h1 { color: #fff; max-width: 15ch; font-size: clamp(34px, 5.6vw, 66px); text-wrap: balance; }
  .hero .sotto { color: var(--ice-200); max-width: 48ch; margin-top: 22px; font-size: clamp(16px, 1.8vw, 20px); }

  /* align-items: center is load-bearing. Without it the buttons stretch to the
     flex line and render as tall blobs instead of pills. */
  .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
  .bottone {
    display: inline-block; padding: 13px 26px; border-radius: 999px;
    font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
    text-decoration: none; border: 1px solid var(--cyan-500);
    transition: background .3s ease, color .3s ease, transform .3s ease;
  }
  .bottone.pieno { background: var(--cyan-500); color: var(--navy-900); }
  .bottone.contorno { color: var(--cyan-300); }
  .bottone:hover { transform: translateY(-2px); }
  .bottone.contorno:hover { background: rgba(53,191,234,.14); }
  @media (prefers-reduced-motion: reduce) { .bottone { transition: none; } .bottone:hover { transform: none; } }

  /* ---------- presentazione ---------- */
  .presentazione { padding: clamp(48px, 6vw, 76px) 0; border-bottom: 1px solid var(--bordo); }
  .presentazione .racchiusa { display: grid; grid-template-columns: 220px 1fr; gap: clamp(26px, 4vw, 52px); align-items: center; }
  @media (max-width: 760px) { .presentazione .racchiusa { grid-template-columns: 1fr; } }
  .ritratto { margin: 0; }
  .ritratto img { width: 220px; height: 220px; object-fit: cover; border-radius: 50%; border: 1px solid var(--bordo); }
  @media (max-width: 760px) { .ritratto img { width: 160px; height: 160px; } }
  .presentazione .nome { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
  .presentazione .ruolo { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-500); margin-top: 10px; }
  .presentazione .parole { margin-top: 18px; color: var(--testo-tenue); font-size: clamp(16px, 1.5vw, 18px); max-width: 58ch; }
  /* A loud, deliberate marker: an unnamed portrait of a real person must never
     reach a live site unnoticed. */
  .dacompletare {
    display: inline-block; margin-top: 12px; padding: 10px 16px; border-radius: var(--r);
    background: #FFF4D6; border: 1px solid #E3B341; color: #6B4A00;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  }

  /* ---------- navigazione con tendine ---------- */
  header .racchiusa { display: flex; align-items: center; gap: 18px; height: 70px; }

  nav { margin-left: auto; }
  nav .voci { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
  nav .voci > li { position: relative; }

  .voce {
    display: block; background: none; border: 0; cursor: pointer;
    font-family: var(--sans); font-size: 12.5px; letter-spacing: .05em;
    /* <a> inherits 300 from the body, <button> does not: without this the
       menu shows two different weights side by side. */
    font-weight: 400;
    text-transform: uppercase; text-decoration: none;
    color: rgba(255,255,255,.9); padding: 9px 10px; border-radius: 6px;
    transition: background .3s ease, color .3s ease;
    white-space: nowrap;
  }
  header.posata .voce { color: var(--navy-800); }
  .voce:hover, .voce:focus-visible { background: rgba(53,191,234,.18); color: #fff; }
  header.posata .voce:hover, header.posata .voce:focus-visible { background: var(--ice-100); color: var(--blue-600); }

  /* the little chevron tells you there is a list under the word */
  .conTendina > .voce::after {
    content: ""; display: inline-block; margin-left: 7px; vertical-align: 1px;
    width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg); transition: transform .3s ease;
  }
  .conTendina > .voce[aria-expanded="true"]::after { transform: rotate(-135deg); }

  .tendina {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
    min-width: 232px; list-style: none; margin: 0; padding: 7px;
    background: #fff; border: 1px solid var(--bordo); border-radius: var(--r);
    box-shadow: 0 16px 40px rgba(6,31,58,.22);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .conTendina > .voce[aria-expanded="true"] + .tendina { opacity: 1; visibility: visible; transform: none; }
  @media (prefers-reduced-motion: reduce) { .tendina, .conTendina > .voce::after { transition: none; } }

  .tendina a {
    display: block; padding: 9px 12px; border-radius: 6px;
    font-size: 14px; color: var(--navy-800); text-decoration: none;
    transition: background .25s ease, color .25s ease;
  }
  .tendina a:hover, .tendina a:focus-visible { background: var(--ice-100); color: var(--blue-600); }

  .voce.riservata { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 15px; }
  header.posata .voce.riservata { border-color: var(--blue-600); color: var(--blue-600); }
  .conTendina > .voce.riservata::after { margin-left: 6px; }
  li.conTendina:last-child .tendina { left: auto; right: 0; }
  .voce[aria-current="page"] { color: var(--cyan-300); }
  header.posata .voce[aria-current="page"] { color: var(--blue-600); }

  /* ---------- barra di ricerca ---------- */
  .cerca { position: relative; display: flex; align-items: center; }
  .cerca input {
    width: 150px; padding: 8px 32px 8px 13px;
    font-family: var(--sans); font-size: 13px;
    color: #fff; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
    transition: width .35s ease, background .3s ease, border-color .3s ease;
  }
  .cerca input::placeholder { color: rgba(255,255,255,.6); }
  .cerca input:focus { width: 212px; outline: none; border-color: var(--cyan-500); background: rgba(255,255,255,.18); }
  header.posata .cerca input { color: var(--navy-900); background: var(--ice-050); border-color: var(--bordo); }
  header.posata .cerca input::placeholder { color: #7FA6C2; }
  .cerca .lente {
    position: absolute; right: 11px; width: 13px; height: 13px; pointer-events: none;
    border: 1.5px solid currentColor; border-radius: 50%; color: rgba(255,255,255,.65);
  }
  .cerca .lente::after {
    content: ""; position: absolute; right: -5px; bottom: -4px;
    width: 6px; height: 1.5px; background: currentColor; transform: rotate(45deg);
  }
  header.posata .cerca .lente { color: #7FA6C2; }
  @media (prefers-reduced-motion: reduce) { .cerca input { transition: none; } }

  .esiti {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 75;
    width: 320px; max-height: 340px; overflow-y: auto;
    background: #fff; border: 1px solid var(--bordo); border-radius: var(--r);
    box-shadow: 0 16px 40px rgba(6,31,58,.22); padding: 7px; display: none;
  }
  .esiti.aperti { display: block; }
  .esiti a { display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none; }
  .esiti a:hover, .esiti a:focus-visible { background: var(--ice-100); }
  .esiti .dove { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-500); }
  .esiti .cosa { font-size: 14px; color: var(--navy-800); margin-top: 3px; line-height: 1.35; }
  .esiti .niente { padding: 14px 12px; font-size: 14px; color: #7FA6C2; }

  /* ---------- menu sul telefono ---------- */
  .hamburger {
    display: none; background: none; border: 0; cursor: pointer; padding: 8px;
    margin-left: auto;
  }
  .hamburger span { display: block; width: 22px; height: 1.5px; background: #fff; margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
  header.posata .hamburger span { background: var(--navy-900); }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .hamburger span { transition: none; } }

  /* Il menu completo sta stretto anche sugli schermi larghi: otto voci,
     cinque tendine e la ricerca sulla stessa riga. Si e' scelto il menu a
     panino a ogni misura: una voce sola, e il pannello si apre pulito. */
  @media (max-width: 20000px) {
    .hamburger { display: block; }
    .cerca { order: 3; }
    .cerca input { width: 120px; }
    nav {
      position: fixed; inset: 70px 0 auto 0; margin: 0;
      background: #fff; border-bottom: 1px solid var(--bordo);
      box-shadow: 0 20px 44px rgba(6,31,58,.2);
      max-height: calc(100vh - 70px); overflow-y: auto;
      display: none; padding: 14px var(--gutter) 22px;
    }
    nav.aperto { display: block; }
    nav .voci { flex-direction: column; align-items: stretch; gap: 0; }
    .voce { color: var(--navy-900); font-size: 14px; padding: 13px 4px; border-bottom: 1px solid var(--bordo); border-radius: 0; width: 100%; text-align: left; }
    .conTendina > .voce { display: flex; align-items: center; justify-content: space-between; }
    .conTendina > .voce::after { margin-left: 0; }
    .voce.riservata { border: 0; border-bottom: 1px solid var(--bordo); border-radius: 0; color: var(--blue-600); padding: 13px 4px; }
    .tendina {
      position: static; opacity: 1; visibility: visible; transform: none;
      box-shadow: none; border: 0; border-bottom: 1px solid var(--bordo);
      border-radius: 0; min-width: 0; padding: 0 0 8px 14px; display: none;
    }
    .conTendina > .voce[aria-expanded="true"] + .tendina { display: block; }
    .esiti { position: fixed; left: var(--gutter); right: var(--gutter); width: auto; top: 78px; }
  }
  @media (max-width: 420px) {
    .cerca input { width: 96px; }
    .cerca input:focus { width: 150px; }
  }

  /* ---------- riquadro "chi siamo" ---------- */
  .riquadro {
    margin-top: 32px; padding: clamp(26px, 4vw, 44px);
    background: var(--scheda-fondo); border: 1px solid var(--bordo); border-radius: var(--r);
    max-width: 74ch; font-size: clamp(16px, 1.5vw, 18px); color: var(--testo-tenue);
  }
  .riquadro p:last-child { margin-bottom: 0; }
  /* A visible marker, not a quiet grey: placeholder copy must never slip into
     production because nobody noticed it. */
  .daScrivere {
    display: inline-block; margin: 0 0 14px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: #6B4A00; background: #FFF4D6; border: 1px solid #E3B341;
    border-radius: 3px; padding: 4px 9px;
  }

  /* ---------- moduli di registrazione ---------- */
  .schede-moduli { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
  .linguetta {
    background: none; cursor: pointer;
    border: 1px solid rgba(141,220,255,.3); border-radius: 999px;
    padding: 10px 20px; font-family: var(--sans); font-size: 13px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ice-200);
    transition: background .3s ease, color .3s ease, border-color .3s ease;
  }
  .linguetta:hover { border-color: var(--cyan-500); color: #fff; }
  .linguetta[aria-selected="true"] { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--navy-900); }
  @media (prefers-reduced-motion: reduce) { .linguetta { transition: none; } }

  .avvisoModulo {
    margin-top: 24px; padding: 16px 20px; max-width: 74ch;
    background: rgba(227,179,65,.12); border: 1px solid rgba(227,179,65,.5);
    border-radius: var(--r); font-size: 14.5px; line-height: 1.6; color: var(--ice-200);
  }
  .avvisoModulo strong { color: #FFD98A; }

  .modulo { margin-top: 28px; max-width: 760px; }
  .campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
  .campi label {
    display: flex; flex-direction: column; gap: 7px;
    font-size: 13px; letter-spacing: .03em; color: var(--ice-200);
  }
  .campi label.lungo, .campi label.spunta { grid-column: 1 / -1; }
  .campi input[type="text"], .campi input[type="email"], .campi input[type="tel"], .campi textarea {
    font-family: var(--sans); font-size: 15px; color: #fff;
    background: rgba(255,255,255,.07); border: 1px solid rgba(141,220,255,.28);
    border-radius: 8px; padding: 11px 13px; width: 100%;
    transition: border-color .25s ease, background .25s ease;
  }
  .campi input::placeholder, .campi textarea::placeholder { color: rgba(205,239,255,.45); }
  .campi input:focus, .campi textarea:focus { outline: none; border-color: var(--cyan-500); background: rgba(255,255,255,.12); }
  .campi textarea { resize: vertical; }
  .campi label.spunta { flex-direction: row; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.5; }
  .campi label.spunta input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--cyan-500); }
  @media (prefers-reduced-motion: reduce) { .campi input, .campi textarea { transition: none; } }

  .modulo .bottone { margin-top: 26px; }
  .modulo .bottone[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* ---------- schede fluttuanti dell'apertura ---------- */
  .fluttuanti { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .fluttuante {
    position: absolute; width: min(330px, 32vw);
    padding: 18px 20px; border-radius: var(--r);
    background: rgba(8,45,80,.55); border: 1px solid rgba(141,220,255,.28);
    backdrop-filter: blur(9px);
    opacity: 0; transform: translateY(14px);
    transition: opacity 2s ease, transform 2s cubic-bezier(.16,.8,.3,1);
  }
  .fluttuante.accesa { opacity: 1; transform: none; }
  .fluttuante .chi {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--cyan-300);
  }
  .fluttuante .cosa { margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: var(--ice-100); }
  /* A quotation only ever appears once a real, sourced one has been supplied. */
  .fluttuante .cosa.virgolettata { font-family: var(--serif); font-size: 17px; font-style: italic; }
  .fluttuante .fonte { margin-top: 8px; font-size: 11.5px; color: rgba(205,239,255,.6); }

  .fluttuante.p1 { top: 14%; right: 4%; }
  .fluttuante.p2 { top: 44%; right: 13%; }
  .fluttuante.p3 { top: 71%; right: 6%; }

  /* One slot at the foot of the hero, under the buttons: there is no room
     beside the headline, and three translucent cards on the same spot only
     work if exactly one is lit — see the rotation in the script. */
  @media (max-width: 980px) {
    .fluttuanti { inset: auto var(--gutter) 24px var(--gutter); }
    .fluttuante { width: auto; left: 0; right: 0; bottom: 0; top: auto; }
    .fluttuante.p1, .fluttuante.p2, .fluttuante.p3 { top: auto; right: 0; left: 0; }
    .hero .racchiusa { padding-bottom: 200px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fluttuante { transition: none; }
  }
  /* With motion off every card is shown at once. On the phone they all share
     one slot, so stacked they would hide each other: there they go in column. */
  @media (prefers-reduced-motion: reduce) and (max-width: 980px) {
    /* order matters: in the DOM the cards come before the text block, and as
       static grid items they would land above it, under the header. */
    .fluttuanti { position: static; inset: auto; margin: 28px var(--gutter) 0; display: grid; gap: 12px; order: 2; }
    .fluttuante { position: static; }
    .hero .racchiusa { padding-bottom: 0; order: 1; }
    .hero { align-items: start; padding-top: 110px; padding-bottom: 40px; }
  }
  /* ---------- rivelazione allo scorrimento ---------- */
  .appare { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.8,.3,1); }
  .appare.visibile { opacity: 1; transform: none; }

  .passo { opacity: 0; transform: translateY(16px); transition: opacity .85s ease, transform .85s cubic-bezier(.16,.8,.3,1); }
  .visibile .passo { opacity: 1; transform: none; }

  .figura img { transform: scale(1.055); transition: transform 1.8s cubic-bezier(.16,.8,.3,1); }
  .visibile .figura img { transform: scale(1); }

  @media (prefers-reduced-motion: reduce) {
    .appare, .passo { opacity: 1; transform: none; transition: none; }
    .figura img, .visibile .figura img { transform: none; transition: none; }
  }

  /* ---------- immagini ---------- */
  .figura { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--navy-900); }
  .figura img { width: 100%; height: 100%; object-fit: cover; }
  .figura figcaption {
    font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--testo-tenue); padding-top: 10px;
  }
  .scura .figura figcaption, .confondo:not(.chiara) .figura figcaption { color: var(--cyan-300); }

  .duecolonne { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
  .duecolonne .figura img { aspect-ratio: 5 / 4; }
  @media (max-width: 860px) { .duecolonne { grid-template-columns: 1fr; } }

  .terna { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 40px; }
  .terna .figura img { aspect-ratio: 4 / 3; }

  .fascia { margin-top: 44px; border-radius: var(--r); overflow: hidden; }
  .fascia img { width: 100%; aspect-ratio: 21 / 7; object-fit: cover; }
  @media (max-width: 700px) { .fascia img { aspect-ratio: 16 / 10; } }

  .grande .figura img { aspect-ratio: 16 / 7; }
  @media (max-width: 700px) { .grande .figura img { aspect-ratio: 4 / 3; } }

  /* ---------- griglie ---------- */
  .griglia { display: grid; gap: 22px; margin-top: 44px; }
  .g3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
  .g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

  .scheda {
    border: 1px solid var(--bordo); border-radius: var(--r);
    padding: 26px; background: var(--scheda-fondo);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  }
  .scura .scheda, .confondo:not(.chiara) .scheda { background: rgba(255,255,255,.045); border-color: rgba(141,220,255,.22); }
  .scheda:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(8,59,102,.10); border-color: var(--cyan-300); }
  @media (prefers-reduced-motion: reduce) { .scheda, .scheda:hover { transition: none; transform: none; } }
  .scheda .num { font-family: var(--mono); font-size: 12px; color: var(--cyan-500); letter-spacing: .1em; }
  .scheda h3 { margin: 10px 0 8px; }
  .scheda p { color: var(--testo-tenue); font-size: 15.5px; margin: 0; }
  .scura .scheda p, .confondo:not(.chiara) .scheda p { color: var(--ice-200); }

  /* ---------- temi ---------- */
  .temi { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
  .tema {
    font-size: 13.5px; padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--bordo); color: var(--testo-tenue);
    text-decoration: none; transition: border-color .3s ease, color .3s ease, background .3s ease;
  }
  .tema:hover { border-color: var(--cyan-500); color: var(--blue-600); background: var(--ice-100); }
  .scura .tema, .confondo:not(.chiara) .tema { border-color: rgba(141,220,255,.28); color: var(--ice-200); }
  .scura .tema:hover, .confondo:not(.chiara) .tema:hover { background: rgba(53,191,234,.14); color: #fff; }
  @media (prefers-reduced-motion: reduce) { .tema { transition: none; } }

  /* ---------- atenei ---------- */
  .reteimpianto { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 44px; }
  @media (max-width: 940px) { .reteimpianto { grid-template-columns: 1fr; } }
  .reteimpianto .figura img { aspect-ratio: 4 / 5; }
  @media (max-width: 940px) { .reteimpianto .figura img { aspect-ratio: 16 / 9; } }

  /* These marks are wide lockups, roughly 3:1, not square icons: they need a
     plate, not a slot. White plate on the dark section, name underneath. */
  .atenei { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 16px; }
  .ateneo { display: block; text-decoration: none; color: inherit; transition: transform .35s ease; }
  .ateneo:hover { transform: translateY(-3px); }
  @media (prefers-reduced-motion: reduce) { .ateneo { transition: none; } .ateneo:hover { transform: none; } }
  .logo {
    display: grid; place-items: center;
    aspect-ratio: 16 / 5; padding: 9px 13px;
    background: #fff; border-radius: 8px; border: 1px solid rgba(141,220,255,.25);
    font-family: var(--mono); font-size: 16px; font-weight: 500;
    color: var(--navy-800); letter-spacing: .08em;
  }
  .logo img { width: 100%; height: 100%; object-fit: contain; }
  .ateneo .nome { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ice-200); line-height: 1.4; }
  .ateneo .capofila {
    display: inline-block; margin-top: 6px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--navy-900); background: var(--cyan-300); border-radius: 3px; padding: 2px 7px;
  }

    /* ---------- costellazione cervello/corpo ---------- */
  .costellazione { position: relative; aspect-ratio: 16 / 10; margin-top: 40px; }
  .costellazione svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .punto-cervello { fill: var(--cyan-300); }
  .raggio { stroke: rgba(53,191,234,.3); stroke-width: 1; }
  .raggio.acceso { stroke: var(--cyan-300); stroke-width: 1.8; }
  .anello { stroke: rgba(141,220,255,.14); stroke-width: 1; fill: none; }
  .impulso { fill: var(--ice-200); }
  .nodo {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 9px;
    background: none; border: 0; padding: 7px 11px; cursor: pointer;
    color: var(--ice-100); font-family: var(--sans); font-size: 13.5px;
    border-radius: 999px; transition: background .3s ease, color .3s ease;
    text-align: left;
  }
  .nodo .pallino {
    flex: none; width: 11px; height: 11px; border-radius: 50%;
    background: var(--cyan-500); box-shadow: 0 0 0 0 rgba(53,191,234,.45);
    transition: transform .3s ease, box-shadow .5s ease;
  }
  .nodo:hover, .nodo:focus-visible, .nodo.acceso { background: rgba(53,191,234,.16); color: #fff; }
  .nodo:hover .pallino, .nodo:focus-visible .pallino, .nodo.acceso .pallino {
    transform: scale(1.45); box-shadow: 0 0 0 7px rgba(53,191,234,.17);
  }
  .nodo .spiegazione {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .pannello { margin-top: 10px; min-height: 92px; border-top: 1px solid rgba(141,220,255,.2); padding-top: 20px; }
  .pannello .quale { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-300); }
  .pannello .cosa { font-size: 17px; color: var(--ice-200); margin-top: 8px; max-width: 70ch; }
  @media (prefers-reduced-motion: reduce) { .nodo, .nodo .pallino { transition: none; } }
  @media (max-width: 760px) {
    .costellazione { aspect-ratio: auto; display: grid; gap: 8px; }
    .costellazione svg { display: none; }
    .nodo {
      position: static; transform: none; width: 100%;
      align-items: flex-start; flex-direction: column; gap: 7px;
      border: 1px solid rgba(141,220,255,.2); border-radius: var(--r);
      padding: 15px 17px;
    }
    .nodo .testa { display: flex; align-items: center; gap: 10px; }
    .nodo.acceso .spiegazione {
      position: static; width: auto; height: auto;
      clip-path: none; white-space: normal;
      font-size: 14.5px; color: var(--ice-200); line-height: 1.55;
    }
    .pannello { display: none; }
  }

  /* ---------- video ---------- */
  .video-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; margin-top: 44px; }
  .video { display: block; }

  @media (max-width: 760px) {
    .video-griglia {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 78%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-left: calc(var(--gutter) * -1);
      margin-right: calc(var(--gutter) * -1);
      padding: 0 var(--gutter) 6px;
    }
    .video-griglia::-webkit-scrollbar { display: none; }
    .video { scroll-snap-align: start; }
  }
  .anteprima {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border: 0; padding: 0; cursor: pointer; overflow: hidden;
    border-radius: var(--r); background: var(--navy-900) center/cover no-repeat;
    display: block;
  }
  .anteprima::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,31,58,.25), rgba(6,31,58,.72));
  }
  .anteprima .play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 62px; height: 62px; border-radius: 50%; z-index: 2;
    background: rgba(53,191,234,.92); display: grid; place-items: center;
    transition: transform .35s ease, background .35s ease;
  }
  .anteprima .play::before {
    content: ""; display: block;
    border-left: 17px solid var(--navy-900);
    border-top: 11px solid transparent; border-bottom: 11px solid transparent;
    margin-left: 5px;
  }
  .anteprima:hover .play { transform: translate(-50%, -50%) scale(1.08); background: var(--cyan-300); }
  @media (prefers-reduced-motion: reduce) { .anteprima .play { transition: none; } .anteprima:hover .play { transform: translate(-50%, -50%); } }
  .anteprima iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
  .video .titolo { font-family: var(--serif); font-size: 18px; line-height: 1.3; margin-top: 14px; }
  .video .canale { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-500); margin-top: 7px; }
  .scura .video .canale, .confondo:not(.chiara) .video .canale { color: var(--cyan-300); }

  /* ---------- stato vuoto ---------- */
  .vuoto {
    border: 1px dashed var(--bordo); border-radius: var(--r);
    padding: 40px 26px; text-align: center; color: var(--testo-tenue);
    margin-top: 40px; font-size: 15.5px;
  }
  .scura .vuoto, .confondo:not(.chiara) .vuoto { border-color: rgba(141,220,255,.26); color: var(--ice-200); }
  .vuoto strong { display: block; font-family: var(--serif); font-size: 19px; color: var(--testo); margin-bottom: 6px; font-weight: 400; }
  .scura .vuoto strong, .confondo:not(.chiara) .vuoto strong { color: #fff; }

  /* ---------- numeri ---------- */
  .cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px; margin-top: 44px; }
  .cifra .v { font-family: var(--mono); font-size: clamp(28px, 3.4vw, 40px); color: var(--cyan-500); font-weight: 500; line-height: 1; }
  .cifra .e { font-size: 13px; color: var(--testo-tenue); margin-top: 8px; }
  .scura .cifra .e, .confondo:not(.chiara) .cifra .e { color: var(--ice-200); }

  /* ---------- chiamata finale ---------- */
  .finale { text-align: center; }
  .finale h2 { max-width: 20ch; margin: 0 auto; }
  .finale .guida { margin: 20px auto 0; text-align: center; }
  .finale .azioni { justify-content: center; }

  /* ---------- piede ---------- */
  footer { background: var(--navy-900); color: var(--ice-200); padding: 64px 0 36px; font-size: 14.5px; }
  footer .colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
  footer h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-300); margin: 0 0 14px; font-weight: 500; }
  footer a { display: block; color: var(--ice-200); text-decoration: none; padding: 4px 0; }
  footer a:hover { color: #fff; }
  footer .coda { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(141,220,255,.18); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 12.5px; color: #7FA6C2; }

  /* Hidden from the screen, still read aloud: a plain display:none would
     take it away from screen readers too. */
  .solo-lettori {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }

  .salta { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--navy-900); padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--r) 0; }
  .salta:focus { left: 0; }

  /* ====================== pagina "Network Nazionale" ====================== */

  /* The dark band under the fixed header: it gives the white-on-dark menu
     something to sit on, exactly as the home page's hero does. */
  .testa-pagina {
    background: var(--navy-900); color: #fff;
    padding: calc(70px + clamp(54px, 7vw, 96px)) 0 clamp(48px, 7vw, 86px);
    position: relative; overflow: hidden;
  }
  .testa-pagina h1 { font-size: clamp(34px, 5vw, 58px); margin: 10px 0 0; line-height: 1.08; }
  .testa-pagina .sotto {
    margin-top: 20px; max-width: 62ch;
    font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; color: var(--ice-200);
  }

  /* La carta a sinistra, la scheda del coordinatore subito a destra: sono
     le due cose che si guardano insieme. I loghi stanno sopra, a tutta
     larghezza, perche' sono sedici e in colonna starebbero stretti. */
  .rete-impianto {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 34px;
    scroll-margin-top: 90px;
  }
  .colonna-carta { min-width: 0; }
  @media (max-width: 900px) { .rete-impianto { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- i sedici loghi ---------- */
  .loghi-rete {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px; margin: 36px 0 0; padding: 0; list-style: none;
  }
  .tessera-ateneo {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    width: 100%; cursor: pointer; text-align: center;
    background: var(--scheda-fondo); border: 1px solid var(--bordo); border-radius: var(--r);
    padding: 13px 10px 11px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .tessera-ateneo:hover { border-color: var(--cyan-500); transform: translateY(-2px); }
  .tessera-ateneo[aria-selected="true"] {
    border-color: var(--cyan-500);
    box-shadow: 0 0 0 2px rgba(53,191,234,.35), 0 10px 24px rgba(6,31,58,.12);
  }
  .tessera-ateneo .marca {
    height: 62px; width: 100%; display: flex; align-items: center; justify-content: center;
  }
  .tessera-ateneo img { max-height: 62px; max-width: 100%; object-fit: contain; }
  /* Shown only when no logo file answers: initials, never a broken-image icon. */
  .tessera-ateneo .sigla {
    font-family: var(--serif); font-size: 19px; letter-spacing: .04em;
    color: var(--blue-600); background: var(--ice-100);
    border-radius: 7px; padding: 6px 13px;
  }
  .tessera-ateneo .nome {
    font-size: 11.5px; line-height: 1.35; color: var(--testo-tenue); hyphens: auto;
  }
  .tessera-ateneo[aria-selected="true"] .nome { color: var(--blue-600); font-weight: 500; }
  @media (prefers-reduced-motion: reduce) { .tessera-ateneo { transition: none; } }

  /* ---------- la carta ---------- */
  /* The frame is sized by the drawing's own ratio, so the map is always whole:
     nothing is cropped at any width. */
  .carta-telaio {
    position: relative; margin: 0 auto;
    /* La colonna decide la larghezza; l'altezza segue da sola il rapporto del
       disegno, percio' la carta non viene mai tagliata a nessuna misura.
       Il tetto vale solo quando la colonna e' una sola, sul telefono. */
    max-width: 780px;
    background: var(--navy-900); border-radius: var(--r); overflow: hidden;
    padding: clamp(10px, 1.6vw, 20px);
  }
  .carta-telaio svg { display: block; width: 100%; height: auto; }
  .reticolo { stroke: rgba(141,220,255,.16); stroke-width: .6; fill: none; }
  .etichetta-grado { fill: rgba(141,220,255,.42); font-family: var(--mono); font-size: 7.5px; }
  .filo { stroke: rgba(53,191,234,.26); stroke-width: .7; fill: none; }
  .ancora { stroke: rgba(141,220,255,.5); stroke-width: .6; }
  .punto-vero { fill: rgba(141,220,255,.85); }
  .segno { fill: rgba(141,220,255,.22); stroke: var(--cyan-300); stroke-width: 1.1; transition: all .3s ease; }
  .segno.scelto { fill: var(--cyan-500); stroke: #fff; stroke-width: 1.6; }
  @media (prefers-reduced-motion: reduce) { .segno { transition: none; } }

  /* Real buttons over the drawing: the shapes alone would be unreachable by
     keyboard and unnamed to a screen reader. */
  .prese { position: absolute; inset: clamp(10px, 1.6vw, 20px); pointer-events: none; }
  .presa {
    position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    padding: 0; border: 0; border-radius: 50%; background: none;
    cursor: pointer; pointer-events: auto;
  }
  .presa:focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 2px; }
  .nome-sulla-carta {
    position: absolute; transform: translate(-50%, -100%);
    margin-top: -14px; white-space: nowrap; pointer-events: none;
    font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--navy-900); background: var(--cyan-300);
    padding: 3px 8px; border-radius: 4px;
  }
  .didascalia-carta {
    margin: 12px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--testo-tenue);
  }

  /* ---------- il pannello del coordinatore ---------- */
  .scheda-coord {
    position: sticky; top: 92px;
    background: var(--scheda-fondo); border: 1px solid var(--bordo); border-radius: var(--r);
    padding: clamp(20px, 2.4vw, 28px);
  }
  @media (max-width: 1020px) { .scheda-coord { position: static; } }
  .scheda-coord .marca-grande { height: 54px; display: flex; align-items: center; margin-bottom: 18px; }
  .scheda-coord .marca-grande img { max-height: 54px; max-width: 210px; object-fit: contain; }
  .scheda-coord .marca-grande .sigla {
    font-family: var(--serif); font-size: 24px; color: var(--blue-600);
    background: var(--ice-100); border-radius: 8px; padding: 8px 16px;
  }
  .scheda-coord .ateneo-nome {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--cyan-500); line-height: 1.5;
  }
  .scheda-coord h3 { font-family: var(--serif); font-size: 25px; margin: 10px 0 6px; line-height: 1.2; }
  .scheda-coord .carica { font-size: 14px; line-height: 1.5; color: var(--testo-tenue); }
  .scheda-coord .sede {
    margin-top: 16px; padding: 11px 14px; border-radius: 8px;
    background: var(--ice-100); font-size: 13px; color: var(--navy-800);
  }
  .scheda-coord .sede .gradi { font-family: var(--mono); font-size: 12px; color: var(--blue-600); display: block; margin-top: 3px; }

  .caselle { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bordo); }
  .caselle li { padding: 13px 0; border-bottom: 1px solid var(--bordo); }
  .caselle .voce-nome {
    font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--testo-tenue);
  }
  .caselle .voce-valore { margin-top: 7px; font-size: 14.5px; line-height: 1.55; color: var(--testo); }
  .caselle .voce-valore:empty { display: none; }

  /* ---------- l'elenco completo, leggibile senza cliccare ---------- */
  .elenco-coordinatori { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--r); overflow: hidden; }
  .elenco-coordinatori li { background: var(--scheda-fondo); padding: 16px clamp(14px, 2vw, 22px); display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: center; }
  @media (max-width: 860px) {
    /* Sul telefono il volto resta a sinistra e le tre righe gli stanno accanto. */
    .elenco-coordinatori li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
    .elenco-coordinatori .faccino { grid-row: 1 / span 3; }
  }

  /* ---------- i volti dei coordinatori ---------- */
  /* Dove la foto non c'e' resta il cerchio con le iniziali: mai un riquadro rotto. */
  .faccino, .volto {
    border-radius: 50%; overflow: hidden; flex: none; background: var(--ice-100);
    display: flex; align-items: center; justify-content: center; color: var(--blue-600);
  }
  .faccino img, .volto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .faccino { width: 44px; height: 44px; font-size: 13px; font-weight: 500; }
  .volto { width: 84px; height: 84px; font-family: var(--serif); font-size: 26px; }
  .persona { display: flex; align-items: center; gap: 16px; margin: 10px 0 6px; }
  .persona > div { min-width: 0; }
  .scheda-coord .persona h3 { margin: 0 0 4px; }
  .elenco-coordinatori .chi { font-weight: 500; }
  .elenco-coordinatori .dove { font-size: 13.5px; color: var(--testo-tenue); }
  .elenco-coordinatori .che { font-size: 13.5px; color: var(--testo-tenue); }