/* ============================================================================
   ELE DESIGN SYSTEM · Fondazione Eleutheria
   v1.0.6 · 2026-09-04 · header compatto (logo 75px, padding −15 %); v1.0.5 · 2026-09-02 · patch 06a-bis, 05a-bis, 09b pagine legali
   ----------------------------------------------------------------------------
   MAPPA DEL FILE
   01 @font-face (self-hosted, cartella fonts/)
   02 :root — tutte le variabili --ele-*
   03 Reset mirato
   04 Base: html, body, tipografia, link, immagini, tabelle, form
   05 Override Salient (header, navigazione, page header, row/colonne,
      bottoni, footer, form, animazioni, skin)
   06 Componenti .ele-*
   07 Utility
   08 Motion e prefers-reduced-motion
   09 Media query mobile-first (380/480/600/680/768/980/1200)
   10 Registro degli !important
   ----------------------------------------------------------------------------
   ENQUEUE NEL CHILD THEME (functions.php):

     add_action('wp_enqueue_scripts', function () {
       wp_enqueue_style(
         'ele-design-system',
         get_stylesheet_directory_uri() . '/ele-design-system.css',
         array('main-styles'),          // handle degli stili di Salient
         '1.0.0'
       );
     }, 20);

   Aggiungere la classe radice al body (stesso functions.php):

     add_filter('body_class', function ($c) { $c[] = 'ele-site'; return $c; });

   FONT: spegnere il caricamento Google Fonts di Salient
   (Salient → Typography: impostare ogni famiglia su "Default"; nessuna
   richiesta a fonts.googleapis.com deve partire dal tema). I tre font sono
   self-hosted in /fonts/ del child theme:
     cormorant-garamond-v###-latin-ext_latin-500.woff2
     cormorant-garamond-v###-latin-ext_latin-500italic.woff2
     cormorant-garamond-v###-latin-ext_latin-600.woff2
     source-sans-3-v###-latin-ext_latin-regular.woff2
     source-sans-3-v###-latin-ext_latin-italic.woff2
     source-sans-3-v###-latin-ext_latin-600.woff2
     oswald-v###-latin-ext_latin-300.woff2
   (scaricare da Google Fonts con subset latin + latin-ext: i glifi cechi
   ř ě ů č š ž ý á í é stanno in latin-ext).
   ----------------------------------------------------------------------------
   Il file funziona anche senza Salient: gli override della sezione 05 sono
   additivi, i componenti della sezione 06 sono autonomi.
   ============================================================================ */

/* == 01 · FONT ============================================================ */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-400italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}

/* == 02 · TOKEN =========================================================== */
:root {
  /* Colori — palette derivata dal logo (nero freddo, hue ≈ 215°) */
  --ele-color-nero: #14191E;          /* Nero Moldava */
  --ele-color-bianco: #FAFBFC;        /* Bianco Calce */
  --ele-color-grigio-100: #EFF1F4;
  --ele-color-grigio-200: #E1E5E9;
  --ele-color-grigio-300: #CBD1D7;
  --ele-color-grigio-400: #ACB4BD;    /* mai per testo */
  --ele-color-grigio-500: #8A939E;    /* solo testo large (3.00:1) */
  --ele-color-grigio-600: #6C7580;    /* didascalie (4.51:1) */
  --ele-color-grigio-700: #505965;    /* testo secondario (6.85:1) */
  --ele-color-grigio-800: #363E48;
  --ele-color-grigio-900: #21272F;
  --ele-color-oltremare: #2C4E9C;         /* accento unico (7.57:1 su bianco) */
  --ele-color-oltremare-scuro: #1F3A78;   /* hover (10.48:1) */
  --ele-color-oltremare-chiaro: #9FB6E4;  /* link su nero (8.66:1) */
  --ele-color-successo: #2E6B4F;      --ele-color-successo-fondo: #E9F1EC;
  --ele-color-avviso: #85601C;        --ele-color-avviso-fondo: #F6EFDE;
  --ele-color-errore: #9E2B33;        --ele-color-errore-fondo: #F8E9E9;

  /* Tipografia */
  --ele-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --ele-font-testo: "Source Sans 3", "Segoe UI", sans-serif;
  --ele-font-etichette: "Oswald", "Arial Narrow", sans-serif;
  --ele-text-didascalia: 0.75rem;   /* 12px */
  --ele-text-piccolo: 0.875rem;     /* 14px */
  --ele-text-corpo: 1.0625rem;      /* 17px — base, rapporto 1.25 */
  --ele-text-lettura: 1.3125rem;    /* 21px */
  --ele-text-titolo-s: 1.6875rem;   /* 27px */
  --ele-text-titolo-m: 2.0625rem;   /* 33px */
  --ele-text-titolo-l: 2.625rem;    /* 42px */
  --ele-text-display-s: 3.25rem;    /* 52px */
  --ele-text-display: 4.0625rem;    /* 65px */
  --ele-peso-display: 500;
  --ele-peso-display-forte: 600;
  --ele-peso-testo: 400;
  --ele-peso-testo-forte: 600;
  --ele-peso-etichette: 300;
  --ele-interlinea-display: 1.08;
  --ele-interlinea-titoli: 1.18;
  --ele-interlinea-corpo: 1.6;
  --ele-interlinea-didascalie: 1.45;
  --ele-tracking-maiuscole: 0.08em; /* dal wordmark: gap ≈ 10% delle capitali */
  --ele-prosa-max: 68ch;

  /* Spazio — base 8 px */
  --ele-space-1: 8px;  --ele-space-2: 16px; --ele-space-3: 24px;
  --ele-space-4: 32px; --ele-space-5: 40px; --ele-space-6: 48px;
  --ele-space-7: 56px; --ele-space-8: 64px; --ele-space-9: 72px;
  --ele-space-10: 80px; --ele-space-11: 88px; --ele-space-12: 96px;

  /* Layout */
  --ele-max-width: 1280px;
  --ele-gutter: 24px;
  --ele-radius-0: 0px;        /* il sistema è a spigolo vivo, come il quadrato del logo */
  --ele-radius-pill: 999px;   /* unica eccezione arrotondata */
  --ele-hairline: 1px;
  --ele-shadow-1: 0 1px 2px rgba(20, 25, 30, 0.06);
  --ele-shadow-2: 0 6px 24px rgba(20, 25, 30, 0.10);
  --ele-header-h: 72px;

  /* Motion — curva dell'ala: attacco rapido, planata lunga */
  --ele-ease: cubic-bezier(0.2, 0.65, 0.3, 1);
  --ele-duration-1: 400ms;
  --ele-duration-2: 600ms;
  --ele-duration-3: 800ms;

  /* Z-index */
  --ele-z-base: 0;
  --ele-z-header: 100;
  --ele-z-overlay: 200;
  --ele-z-cookie: 300;

  /* Focus */
  --ele-focus: 0 0 0 2px var(--ele-color-bianco), 0 0 0 4px var(--ele-color-oltremare);
}

/* == 03 · RESET MIRATO ==================================================== */
body.ele-site h1, body.ele-site h2, body.ele-site h3, body.ele-site h4,
body.ele-site h5, body.ele-site h6, body.ele-site p, body.ele-site figure,
body.ele-site blockquote, body.ele-site fieldset {
  margin: 0; padding: 0;
}
body.ele-site ul[class], body.ele-site ol[class] {
  margin: 0; padding: 0; list-style: none;
}
body.ele-site *, body.ele-site *::before, body.ele-site *::after {
  box-sizing: border-box;
}

/* == 04 · BASE ============================================================ */
html.ele-html { scroll-behavior: smooth; }
body.ele-site {
  margin: 0;
  background: var(--ele-color-bianco);
  color: var(--ele-color-nero);
  font-family: var(--ele-font-testo);
  font-size: var(--ele-text-corpo);
  font-weight: var(--ele-peso-testo);
  line-height: var(--ele-interlinea-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.ele-site ::selection {
  background: var(--ele-color-oltremare);
  color: var(--ele-color-bianco);
}
body.ele-site h1, body.ele-site h2, body.ele-site h3 {
  font-family: var(--ele-font-display);
  font-weight: var(--ele-peso-display);
  line-height: var(--ele-interlinea-titoli);
  text-wrap: balance;
}
body.ele-site h4, body.ele-site h5, body.ele-site h6 {
  font-family: var(--ele-font-testo);
  font-weight: var(--ele-peso-testo-forte);
  line-height: var(--ele-interlinea-titoli);
}
body.ele-site a {
  color: var(--ele-color-oltremare);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--ele-duration-1) var(--ele-ease);
}
body.ele-site a:hover { color: var(--ele-color-oltremare-scuro); }
body.ele-site a:focus-visible,
body.ele-site button:focus-visible,
body.ele-site input:focus-visible,
body.ele-site select:focus-visible,
body.ele-site textarea:focus-visible,
body.ele-site summary:focus-visible {
  outline: none;
  box-shadow: var(--ele-focus);
}
body.ele-site img, body.ele-site svg, body.ele-site video {
  max-width: 100%; height: auto; display: block;
}
body.ele-site table {
  border-collapse: collapse; width: 100%;
  font-variant-numeric: tabular-nums;
}
body.ele-site th, body.ele-site td {
  text-align: left; vertical-align: top;
  padding: var(--ele-space-1) var(--ele-space-2) var(--ele-space-1) 0;
  border-bottom: var(--ele-hairline) solid var(--ele-color-grigio-200);
}
body.ele-site th {
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  color: var(--ele-color-grigio-700);
}
body.ele-site :is(input, select, textarea, button):not([class*="ele-"]) {
  font: inherit; color: inherit;
}
/* Date, dimensioni delle opere, contatori: cifre tabulari */
body.ele-site time, body.ele-site .ele-num { font-variant-numeric: tabular-nums; }

/* == 05 · OVERRIDE SALIENT ================================================
   Tutti sotto body.ele-site per vincere di specificità senza !important,
   salvo dove Salient scrive inline o usa !important (v. registro, sez. 10). */

/* -- 05a · Header e navigazione: fondo bianco, hairline, niente ombre.
      Sovrascrive: #header-outer (bg e ombra da opzioni tema, spesso inline). */
body.ele-site #header-outer,
body.ele-site #header-outer[data-transparent-header="false"] {
  background-color: var(--ele-color-bianco) !important; /* override: stile inline "background-color" da opzioni tema */
  box-shadow: none;
  border-bottom: var(--ele-hairline) solid var(--ele-color-grigio-200);
}
body.ele-site #header-space { height: var(--ele-header-h); background: transparent; }
body.ele-site #header-outer #logo img { height: 75px !important; width: auto !important; max-height: none !important; } /* override: Salient imposta height inline dall'opzione logo; 88 → 75 (−15 %, richiesta 04/09) */
body.ele-site #header-outer #logo { margin-top: 8.5px !important; margin-bottom: 8.5px !important; } /* override: data-padding="10" di Salient, −15 % */
body.ele-site #header-outer[data-format="centered-menu-under-logo"] #top nav > ul > li > a,
body.ele-site #header-outer[data-format="centered-menu-under-logo"] #top nav > ul > li > a.sf-with-ul { margin-bottom: 17px !important; } /* override: respiro sotto le voci 20 → 17 (−15 %) */
body.ele-site #header-outer[data-format="centered-menu-under-logo"] #top nav > ul.buttons { padding-bottom: 17px !important; }
body.ele-site #header-outer .sf-menu > li > a,
body.ele-site header#top nav > ul > li > a {
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-piccolo);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  color: var(--ele-color-nero) !important; /* override: Salient colora le voci menu inline da Typography */
  text-decoration: none;
}
body.ele-site #header-outer .sf-menu > li > a:hover,
body.ele-site #header-outer .sf-menu > li.current-menu-item > a {
  color: var(--ele-color-oltremare) !important; /* override: idem, colore hover inline */
}
body.ele-site #search-outer { background: var(--ele-color-bianco); }

/* -- 05a-bis · Sottomenu (dropdown) e sottolineatura voce attiva.
      Tipografia etichette (Oswald 300, maiuscolo, tracking del wordmark), fondo bianco, hairline,
      hover nero/bianco, accento Salient (#3452ff) eliminato. Tutto con !important, richiesto:
      Salient applica l'accento da salient-dynamic-styles.css e colori inline dalle opzioni tema.
      Registro sez. 10, voci 10–14. */
body.ele-site #header-outer .sf-menu ul,
body.ele-site #header-outer .sf-menu li ul.sub-menu,
body.ele-site #header-outer .sf-menu li ul.sub-menu ul {
  background: var(--ele-color-bianco) !important;
  border: var(--ele-hairline) solid var(--ele-color-grigio-200) !important;
  border-radius: 0 !important;
  box-shadow: var(--ele-shadow-2) !important;
  padding: var(--ele-space-1) 0 !important;
  margin-top: 0 !important;
  min-width: 240px !important;
}
body.ele-site #header-outer .sf-menu ul li,
body.ele-site #header-outer .sf-menu ul li a {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.ele-site #header-outer .sf-menu ul li a,
body.ele-site #header-outer .sf-menu ul li a .menu-title-text,
body.ele-site #header-outer .sf-menu ul li a span {
  font-family: var(--ele-font-etichette) !important;
  font-weight: var(--ele-peso-etichette) !important;
  font-size: var(--ele-text-piccolo) !important;
  letter-spacing: var(--ele-tracking-maiuscole) !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  color: var(--ele-color-nero) !important;
  text-decoration: none !important;
  text-underline-offset: 0 !important;
}
body.ele-site #header-outer .sf-menu ul li a {
  display: block !important;
  padding: 12px 20px !important;
  transition: background-color var(--ele-duration-1) var(--ele-ease), color var(--ele-duration-1) var(--ele-ease) !important;
}
body.ele-site #header-outer .sf-menu ul li a:hover,
body.ele-site #header-outer .sf-menu ul li a:focus-visible,
body.ele-site #header-outer .sf-menu ul li.sfHover > a,
body.ele-site #header-outer .sf-menu ul li.current-menu-item > a,
body.ele-site #header-outer .sf-menu ul li.current_page_item > a {
  background: var(--ele-color-nero) !important;
  color: var(--ele-color-bianco) !important;
}
body.ele-site #header-outer .sf-menu ul li a:hover .menu-title-text,
body.ele-site #header-outer .sf-menu ul li a:hover span,
body.ele-site #header-outer .sf-menu ul li a:focus-visible .menu-title-text,
body.ele-site #header-outer .sf-menu ul li.sfHover > a .menu-title-text,
body.ele-site #header-outer .sf-menu ul li.current-menu-item > a .menu-title-text,
body.ele-site #header-outer .sf-menu ul li.current_page_item > a .menu-title-text {
  color: var(--ele-color-bianco) !important;
}
body.ele-site #header-outer .sf-menu ul li a:focus-visible {
  outline: 2px solid var(--ele-color-oltremare) !important;
  outline-offset: -2px !important;
}
/* Sottolineatura della voce attiva/hover di primo livello: da accento Salient a oltremare, 1px */
body.ele-site #header-outer .sf-menu > li > a .menu-title-text:after,
body.ele-site #header-outer .sf-menu > li > a:after,
body.ele-site #header-outer .sf-menu > li > a .menu-title-text:before {
  background-color: var(--ele-color-oltremare) !important;
  border-color: var(--ele-color-oltremare) !important;
  height: 1px !important;
}
/* Rinforzo di specificità: salient-dynamic-styles.css usa
   "#header-outer:not([data-format=\"left-header\"]) #top nav > ul > li:not(.megamenu) .sfHover > a" (2,3,4) con !important.
   Qui (2,5,7): due id, cinque classi/pseudo-classi, sette elementi. */
body.ele-site #header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.menu-item a:hover,
body.ele-site #header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.menu-item a:focus-visible,
body.ele-site #header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.sfHover > a,
body.ele-site #header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.current-menu-item > a,
body.ele-site #header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.current_page_item > a {
  background: var(--ele-color-nero) !important;
  background-color: var(--ele-color-nero) !important;
  color: var(--ele-color-bianco) !important;
}
body.ele-site #header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.menu-item a { background-color: transparent !important; }
body.ele-site #header-outer #top nav ul.sf-menu > li.menu-item > a .menu-title-text:after,
body.ele-site #header-outer #top nav ul.sf-menu > li.menu-item > a .menu-title-text:before {
  height: 1px !important;
  background-color: var(--ele-color-oltremare) !important;
}
/* Freccia del sottomenu (icona tema): nero, mai accento */
body.ele-site #header-outer .sf-menu > li > a .sf-sub-indicator,
body.ele-site #header-outer .sf-menu > li > a .sf-sub-indicator i,
body.ele-site #header-outer .sf-menu > li > a .sf-sub-indicator [class^="icon-"] {
  color: var(--ele-color-nero) !important;
}

/* -- 05b · Page header del tema: tipografia display, niente parallax decorativi.
      Sovrascrive: #page-header-bg h1 (famiglia e peso da opzioni tema). */
body.ele-site #page-header-bg h1, body.ele-site .nectar-page-header h1 {
  font-family: var(--ele-font-display);
  font-weight: var(--ele-peso-display);
  font-size: var(--ele-text-display-s);
  line-height: var(--ele-interlinea-titoli);
  color: var(--ele-color-nero);
}
body.ele-site #page-header-bg .subheader {
  font-family: var(--ele-font-testo);
  color: var(--ele-color-grigio-700);
}

/* -- 05c · Row e colonne WPBakery: il ritmo verticale è del sistema, non del tema.
      Sovrascrive: padding di default di .wpb_row e margini di .wpb_text_column. */
body.ele-site .container-wrap { background-color: var(--ele-color-bianco); padding-bottom: 0; }
body.ele-site .wpb_row { margin-bottom: 0; }
body.ele-site .wpb_text_column { margin-bottom: var(--ele-space-3); }
body.ele-site .vc_column-inner > .wpb_wrapper > :last-child { margin-bottom: 0; }
body.ele-site .container, body.ele-site .row .col { color: inherit; }

/* -- 05d · Bottoni Nectar: riportati alla famiglia .ele-btn.
      Sovrascrive: .nectar-button (bg/colore scritti inline dal builder). */
body.ele-site .nectar-button,
body.ele-site .nectar-button.large, body.ele-site .nectar-button.medium {
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-piccolo);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  border-radius: var(--ele-radius-0);
  box-shadow: none;
  padding: 14px 28px;
  background-color: var(--ele-color-nero) !important; /* override: bg inline data-color-override del builder */
  color: var(--ele-color-bianco) !important;          /* override: colore inline del builder */
  transition: background-color var(--ele-duration-1) var(--ele-ease),
              transform var(--ele-duration-1) var(--ele-ease);
}
body.ele-site .nectar-button:hover { background-color: var(--ele-color-oltremare-scuro) !important; /* override: hover inline del builder */ }
body.ele-site .nectar-button.see-through {
  background-color: transparent !important; /* override: bg inline del builder */
  color: var(--ele-color-nero) !important;  /* override: colore inline del builder */
  border: var(--ele-hairline) solid var(--ele-color-nero);
}

/* -- 05e · Footer: pannello nero istituzionale.
      Sovrascrive: #footer-outer (bg da opzioni tema), widget headings. */
body.ele-site #footer-outer {
  background-color: var(--ele-color-nero) !important; /* override: bg inline da opzioni tema */
  color: var(--ele-color-grigio-300);
}
body.ele-site #footer-outer a { color: var(--ele-color-bianco); }
body.ele-site #footer-outer a:hover { color: var(--ele-color-oltremare-chiaro); }
body.ele-site #footer-outer .widget h4 {
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  color: var(--ele-color-grigio-500);
}
body.ele-site #copyright { border-top: var(--ele-hairline) solid var(--ele-color-grigio-800); }

/* -- 05f · Form del tema (search, commenti, WPBakery form).
      Sovrascrive: bordi arrotondati e ombre degli skin. */
body.ele-site input[type="text"], body.ele-site input[type="email"],
body.ele-site input[type="search"], body.ele-site input[type="tel"],
body.ele-site input[type="url"], body.ele-site textarea, body.ele-site select {
  border: var(--ele-hairline) solid var(--ele-color-grigio-400);
  border-radius: var(--ele-radius-0);
  background: var(--ele-color-bianco);
  box-shadow: none;
  padding: 12px 14px;
  font-size: max(1rem, var(--ele-text-corpo)); /* ≥16px: niente zoom iOS */
}

/* -- 05g · Animazioni del tema: spente. Il sistema anima da stato visibile.
      Sovrascrive: opacity:0 iniziale di .wpb_animate_when_almost_visible. */
body.ele-site .wpb_animate_when_almost_visible {
  opacity: 1 !important;   /* override: Salient parte da opacity:0 inline — contenuto mai nascosto in attesa */
  transform: none !important; /* override: idem, transform iniziale inline */
  animation: none;
}

/* -- 05h · Skin del tema (material / ascend / minimal): neutralizzati.
      Sovrascrive: raggi e ombre "material", maiuscole forzate "ascend". */
body.ele-site.material .nectar-button, body.ele-site.material input,
body.ele-site.material .widget, body.ele-site.material .post {
  border-radius: var(--ele-radius-0); box-shadow: none;
}
body.ele-site.ascend .nectar-button { letter-spacing: var(--ele-tracking-maiuscole); }
body.ele-site #to-top {
  border-radius: var(--ele-radius-0);
  background-color: var(--ele-color-nero) !important; /* override: bg inline con !important del tema */
}
body.ele-site #to-top:hover { background-color: var(--ele-color-oltremare) !important; /* override: idem */ }

/* -- 05i · Off-canvas menu (mobile): pannello nero, voci etichetta. */
body.ele-site #slide-out-widget-area,
body.ele-site #slide-out-widget-area-bg {
  background-color: var(--ele-color-nero) !important; /* override: bg inline da opzioni tema */
}
body.ele-site #slide-out-widget-area a {
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  color: var(--ele-color-bianco);
  text-decoration: none;
}

/* == 06 · COMPONENTI ====================================================== */

/* -- Contenitore */
.ele-container {
  max-width: var(--ele-max-width);
  margin-inline: auto;
  padding-inline: var(--ele-gutter);
}

/* -- Eyebrow: etichetta di sezione in maiuscolo spaziato */
.ele-eyebrow {
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  color: var(--ele-color-grigio-700);
}

/* -- Separatore di sezione con il segno (il segno in filigrana, mai deformato) */
.ele-sep {
  display: flex; align-items: center; gap: var(--ele-space-2);
  margin-block: var(--ele-space-8);
}
.ele-sep::before, .ele-sep::after {
  content: ""; flex: 1; height: var(--ele-hairline);
  background: var(--ele-color-grigio-200);
}
.ele-sep .ele-sep-segno {
  width: 40px; height: 40px; opacity: 0.55; color: var(--ele-color-grigio-600);
}

/* -- Bottoni: tre e basta (primario, secondario, testuale; freccia = modificatore) */
.ele-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ele-space-1);
  min-height: 48px;
  padding: 12px 28px;
  border: var(--ele-hairline) solid transparent;
  border-radius: var(--ele-radius-0);
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-piccolo);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ele-duration-1) var(--ele-ease),
              color var(--ele-duration-1) var(--ele-ease),
              border-color var(--ele-duration-1) var(--ele-ease);
}
.ele-btn--primario { background: var(--ele-color-nero); color: var(--ele-color-bianco); }
.ele-btn--primario:hover { background: var(--ele-color-oltremare-scuro); color: var(--ele-color-bianco); }
.ele-btn--secondario { background: transparent; color: var(--ele-color-nero); border-color: var(--ele-color-nero); }
.ele-btn--secondario:hover { background: var(--ele-color-nero); color: var(--ele-color-bianco); }
.ele-btn--testuale {
  min-height: 44px; padding: 10px 2px;
  background: transparent; color: var(--ele-color-nero);
}
.ele-btn--testuale:hover { color: var(--ele-color-oltremare); }
.ele-btn:active { transform: translateY(1px); }
.ele-btn[disabled], .ele-btn[aria-disabled="true"] {
  background: var(--ele-color-grigio-200); color: var(--ele-color-grigio-500);
  border-color: transparent; cursor: not-allowed; transform: none;
}
.ele-btn .ele-btn-freccia { transition: transform var(--ele-duration-1) var(--ele-ease); }
.ele-btn:hover .ele-btn-freccia { transform: translateX(4px); }
/* -- 06a-bis · Bottoni-link: un <a class="ele-btn"> deve vincere su body.ele-site a (sez. 04, 0,1,1)
   e su body a di salient-dynamic-styles.css (0,1,1). Specificità 0,2,1; le pagine (0,3,0) restano sopra. */
body.ele-site a.ele-btn, body.ele-site a.ele-btn:hover { text-decoration: none; }
body.ele-site a.ele-btn--primario, body.ele-site a.ele-btn--primario:hover { color: var(--ele-color-bianco); }
body.ele-site a.ele-btn--secondario { color: var(--ele-color-nero); }
body.ele-site a.ele-btn--secondario:hover { color: var(--ele-color-bianco); }
body.ele-site a.ele-btn--testuale { color: var(--ele-color-nero); }
body.ele-site a.ele-btn--testuale:hover { color: var(--ele-color-oltremare); }

/* -- Pill / tag. Statiche (metadato) e interattive (filtro). Unica forma arrotondata. */
.ele-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  border: var(--ele-hairline) solid var(--ele-color-grigio-300);
  border-radius: var(--ele-radius-pill);
  background: transparent;
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia);
  letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase;
  color: var(--ele-color-grigio-700);
  text-decoration: none;
  white-space: nowrap;
}
.ele-pill .ele-pill-n { color: var(--ele-color-grigio-500); font-variant-numeric: tabular-nums; }
button.ele-pill, a.ele-pill { cursor: pointer; min-height: 32px;
  transition: border-color var(--ele-duration-1) var(--ele-ease),
              background-color var(--ele-duration-1) var(--ele-ease),
              color var(--ele-duration-1) var(--ele-ease); }
button.ele-pill:hover, a.ele-pill:hover { border-color: var(--ele-color-nero); color: var(--ele-color-nero); }
.ele-pill[aria-pressed="true"], .ele-pill--attiva {
  background: var(--ele-color-oltremare); border-color: var(--ele-color-oltremare);
  color: var(--ele-color-bianco);
}
.ele-pill[aria-pressed="true"] .ele-pill-n { color: var(--ele-color-oltremare-chiaro); }

/* -- Barra filtri con stato vuoto */
.ele-filters { display: flex; flex-wrap: wrap; gap: var(--ele-space-1); }
.ele-filters-vuoto {
  padding: var(--ele-space-6) 0;
  border-block: var(--ele-hairline) solid var(--ele-color-grigio-200);
  color: var(--ele-color-grigio-700);
  font-size: var(--ele-text-lettura);
  font-family: var(--ele-font-display);
  font-style: italic;
  text-align: center;
}

/* -- Selettore lingua: discreto, sempre visibile */
.ele-lang { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ele-font-etichette);
  font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia);
  letter-spacing: var(--ele-tracking-maiuscole);
}
.ele-lang a {
  color: var(--ele-color-grigio-600); text-decoration: none; padding: 10px 2px;
}
.ele-lang a:hover { color: var(--ele-color-nero); }
.ele-lang a[aria-current="true"] {
  color: var(--ele-color-nero);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}
.ele-lang .ele-lang-sep { color: var(--ele-color-grigio-300); }

/* -- Famiglia card: una anatomia (media / eyebrow / titolo / meta), sei varianti */
.ele-card { position: relative; display: flex; flex-direction: column; gap: var(--ele-space-2); }
.ele-card-media {
  overflow: hidden; background: var(--ele-color-grigio-100);
  aspect-ratio: 3 / 2;
}
.ele-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--ele-duration-2) var(--ele-ease);
}
.ele-card:hover .ele-card-media img { transform: translateY(-4px); }
.ele-card-titolo {
  font-family: var(--ele-font-display);
  font-weight: var(--ele-peso-display);
  font-size: var(--ele-text-titolo-s);
  line-height: var(--ele-interlinea-titoli);
}
.ele-card-titolo a { color: var(--ele-color-nero); text-decoration: none; }
.ele-card-titolo a::after { content: ""; position: absolute; inset: 0; } /* intera card cliccabile */
.ele-card:hover .ele-card-titolo a { color: var(--ele-color-oltremare-scuro); }
.ele-card-meta { color: var(--ele-color-grigio-700); font-size: var(--ele-text-piccolo); }
.ele-card--opera .ele-card-media { aspect-ratio: 4 / 5; }
.ele-card--opera .ele-card-media img { object-fit: contain; padding: var(--ele-space-3); }
.ele-card--persona .ele-card-media { aspect-ratio: 4 / 5; }
.ele-card--dialogo .ele-card-media, .ele-card--evento .ele-card-media { aspect-ratio: 16 / 9; }
.ele-card--libro .ele-card-media { aspect-ratio: 4 / 5; }
.ele-card--libro .ele-card-media img {
  object-fit: contain; padding: var(--ele-space-4);
  filter: drop-shadow(0 6px 12px rgba(20, 25, 30, 0.18)); /* ombra "oggetto" della copertina */
}
.ele-card-durata { position: absolute; top: var(--ele-space-2); right: var(--ele-space-2);
  background: var(--ele-color-nero); color: var(--ele-color-bianco);
  font-family: var(--ele-font-etichette); font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia); letter-spacing: var(--ele-tracking-maiuscole);
  padding: 3px 10px; font-variant-numeric: tabular-nums;
}

/* -- Didascalia museale: Autore, Titolo in corsivo, anno. Tecnica, dimensioni. */
.ele-didascalia {
  font-size: var(--ele-text-piccolo);
  line-height: var(--ele-interlinea-didascalie);
  color: var(--ele-color-grigio-700);
}
.ele-didascalia .ele-didascalia-autore { color: var(--ele-color-nero); font-weight: var(--ele-peso-testo-forte); }
.ele-didascalia cite, .ele-didascalia .ele-didascalia-titolo { font-style: italic; }
.ele-didascalia .ele-didascalia-dati { font-variant-numeric: tabular-nums; }

/* -- Facade video: poster + play, iframe solo al click */
.ele-facade { position: relative; aspect-ratio: 16 / 9; background: var(--ele-color-nero); overflow: hidden; }
.ele-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.ele-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ele-facade-play {
  position: absolute; inset: 0; margin: auto;
  width: 88px; height: 88px;
  display: grid; place-items: center;
  background: var(--ele-color-bianco); color: var(--ele-color-nero);
  border: none; border-radius: var(--ele-radius-pill);
  cursor: pointer;
  transition: transform var(--ele-duration-1) var(--ele-ease),
              background-color var(--ele-duration-1) var(--ele-ease);
}
.ele-facade-play:hover { transform: scale(1.06); background: var(--ele-color-oltremare); color: var(--ele-color-bianco); }
.ele-facade-durata { position: absolute; right: var(--ele-space-2); bottom: var(--ele-space-2);
  background: rgba(20, 25, 30, 0.85); color: var(--ele-color-bianco);
  font-family: var(--ele-font-etichette); font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia); letter-spacing: var(--ele-tracking-maiuscole);
  padding: 3px 10px; font-variant-numeric: tabular-nums; }

/* -- Citazione editoriale */
.ele-quote {
  max-width: var(--ele-prosa-max);
  margin-inline: auto;
  padding-block: var(--ele-space-4);
  text-align: center;
}
.ele-quote p {
  font-family: var(--ele-font-display);
  font-style: italic;
  font-weight: var(--ele-peso-display);
  font-size: var(--ele-text-titolo-m);
  line-height: 1.3;
  color: var(--ele-color-nero);
  text-wrap: pretty;
}
.ele-quote footer { margin-top: var(--ele-space-3); }

/* -- Timeline della Storia */
.ele-timeline { position: relative; padding-left: var(--ele-space-4); }
.ele-timeline::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: var(--ele-hairline); background: var(--ele-color-grigio-300); }
.ele-timeline-voce { position: relative; padding-bottom: var(--ele-space-6); }
.ele-timeline-voce::before { content: ""; position: absolute; left: calc(-1 * var(--ele-space-4) - 3.5px);
  top: 12px; width: 8px; height: 8px; background: var(--ele-color-nero); }
.ele-timeline-anno {
  font-family: var(--ele-font-display); font-weight: var(--ele-peso-display-forte);
  font-size: var(--ele-text-titolo-m); line-height: 1; font-variant-numeric: tabular-nums;
}
.ele-timeline-voce--picco .ele-timeline-anno { color: var(--ele-color-oltremare); }
.ele-timeline-voce--picco::before { background: var(--ele-color-oltremare); }

/* -- Breadcrumb */
.ele-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--ele-space-1); align-items: center;
  font-family: var(--ele-font-etichette); font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia); letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase; }
.ele-breadcrumb a { color: var(--ele-color-grigio-600); text-decoration: none; }
.ele-breadcrumb a:hover { color: var(--ele-color-oltremare); }
.ele-breadcrumb [aria-current="page"] { color: var(--ele-color-nero); }
.ele-breadcrumb .ele-breadcrumb-sep { color: var(--ele-color-grigio-400); }

/* -- Paginazione */
.ele-pagination { display: flex; gap: var(--ele-space-1); font-variant-numeric: tabular-nums; }
.ele-pagination a, .ele-pagination span {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  border: var(--ele-hairline) solid transparent;
  color: var(--ele-color-grigio-700); text-decoration: none;
}
.ele-pagination a:hover { border-color: var(--ele-color-grigio-400); color: var(--ele-color-nero); }
.ele-pagination [aria-current="page"] { background: var(--ele-color-nero); color: var(--ele-color-bianco); }

/* -- Form (candidature ET CETERA e contatti) */
.ele-form { display: grid; gap: var(--ele-space-3); }
.ele-form-campo { display: grid; gap: 6px; }
.ele-form-campo label {
  font-family: var(--ele-font-etichette); font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia); letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase; color: var(--ele-color-grigio-800);
}
.ele-form-campo .ele-form-aiuto { font-size: var(--ele-text-piccolo); color: var(--ele-color-grigio-600); }
.ele-form input[type="text"], .ele-form input[type="email"], .ele-form input[type="tel"],
.ele-form input[type="url"], .ele-form select, .ele-form textarea {
  border: var(--ele-hairline) solid var(--ele-color-grigio-400);
  background: var(--ele-color-bianco);
  padding: 12px 14px;
  font-size: max(1rem, var(--ele-text-corpo)); /* ≥16 px: niente zoom su iOS */
  border-radius: var(--ele-radius-0);
  transition: border-color var(--ele-duration-1) var(--ele-ease);
}
.ele-form input:hover, .ele-form select:hover, .ele-form textarea:hover { border-color: var(--ele-color-grigio-600); }
.ele-form input:focus-visible, .ele-form select:focus-visible, .ele-form textarea:focus-visible { border-color: var(--ele-color-oltremare); }
.ele-form [aria-invalid="true"] { border-color: var(--ele-color-errore); }
.ele-form-errore { font-size: var(--ele-text-piccolo); color: var(--ele-color-errore); }
.ele-form-upload {
  border: var(--ele-hairline) dashed var(--ele-color-grigio-400);
  padding: var(--ele-space-4); text-align: center; color: var(--ele-color-grigio-700);
}
.ele-form-consenso { display: flex; gap: var(--ele-space-2); align-items: flex-start;
  font-size: var(--ele-text-piccolo); color: var(--ele-color-grigio-700); }
.ele-form-consenso input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--ele-color-oltremare); flex: none;
}
.ele-form-conferma {
  border: var(--ele-hairline) solid var(--ele-color-successo);
  background: var(--ele-color-successo-fondo); color: var(--ele-color-successo);
  padding: var(--ele-space-3);
}
.ele-form-avviso { background: var(--ele-color-avviso-fondo); color: var(--ele-color-avviso); padding: var(--ele-space-3); }
.ele-form-bocciato { background: var(--ele-color-errore-fondo); color: var(--ele-color-errore); padding: var(--ele-space-3); }

/* -- Cookie banner: una riga sobria, non un rettangolo da plugin */
.ele-cookie {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--ele-z-cookie);
  background: var(--ele-color-bianco);
  border-top: var(--ele-hairline) solid var(--ele-color-grigio-300);
  padding: var(--ele-space-2) var(--ele-gutter);
}
.ele-cookie-inner { max-width: var(--ele-max-width); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: var(--ele-space-2); align-items: center; justify-content: space-between; }
.ele-cookie p { font-size: var(--ele-text-piccolo); color: var(--ele-color-grigio-700); max-width: 62ch; }
.ele-cookie .ele-btn { min-height: 44px; padding: 8px 20px; }

/* -- Footer istituzionale */
.ele-footer { background: var(--ele-color-nero); color: var(--ele-color-grigio-300); }
.ele-footer a { color: var(--ele-color-bianco); text-decoration: none; }
.ele-footer a:hover { color: var(--ele-color-oltremare-chiaro); text-decoration: underline; text-underline-offset: 0.18em; }
.ele-footer-griglia {
  display: grid; gap: var(--ele-space-6);
  padding-block: var(--ele-space-10) var(--ele-space-6);
}
.ele-footer h2 {
  font-family: var(--ele-font-etichette); font-weight: var(--ele-peso-etichette);
  font-size: var(--ele-text-didascalia); letter-spacing: var(--ele-tracking-maiuscole);
  text-transform: uppercase; color: var(--ele-color-grigio-500);
  margin-bottom: var(--ele-space-2);
}
.ele-footer ul { display: grid; gap: 10px; font-size: var(--ele-text-piccolo); }
.ele-footer-legale {
  border-top: var(--ele-hairline) solid var(--ele-color-grigio-800);
  padding-block: var(--ele-space-3);
  display: flex; flex-wrap: wrap; gap: var(--ele-space-2); justify-content: space-between;
  font-size: var(--ele-text-didascalia); color: var(--ele-color-grigio-500);
}
.ele-footer .ele-lang a { color: var(--ele-color-grigio-400); }
.ele-footer .ele-lang a:hover, .ele-footer .ele-lang a[aria-current="true"] { color: var(--ele-color-bianco); }

/* == 07 · UTILITY ========================================================= */
.ele-prose { max-width: var(--ele-prosa-max); }
.ele-prose p { margin-bottom: var(--ele-space-3); text-wrap: pretty; }
.ele-prose p:last-child { margin-bottom: 0; }
.ele-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* == 08 · MOTION ==========================================================
   Una sola animazione per schermata. Sempre da stato visibile: il fallback
   (niente @supports, niente JS) è il contenuto fermo e leggibile. */
@keyframes ele-alzati {
  from { opacity: 0.001; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ele-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.045) translateY(-6px); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ele-reveal {
      animation: ele-alzati var(--ele-duration-2) var(--ele-ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
  .ele-kenburns { animation: ele-kenburns 14s var(--ele-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  body.ele-site *, body.ele-site *::before, body.ele-site *::after {
    animation-duration: 0.01ms !important;   /* override: azzera ogni animazione, anche di Salient (che usa !important) */
    animation-iteration-count: 1 !important; /* override: idem */
    transition-duration: 0.01ms !important;  /* override: idem */
  }
  html.ele-html { scroll-behavior: auto; }
}

/* == 09 · MEDIA QUERY (mobile-first) ====================================== */
@media (min-width: 380px) {
  .ele-cookie-inner { flex-wrap: nowrap; }
}
@media (min-width: 480px) {
  .ele-footer-griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 600px) {
  .ele-filters { gap: 10px; }
}
@media (min-width: 680px) {
  .ele-footer-griglia { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  :root { --ele-header-h: 88px; }
  .ele-container { padding-inline: var(--ele-space-5); }
  .ele-quote p { font-size: var(--ele-text-titolo-l); }
}
@media (min-width: 980px) {
  .ele-footer-griglia { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 1200px) {
  .ele-container { padding-inline: var(--ele-space-6); }
}

/* == 09b · PAGINE LEGALI (.ele-legale) ====================================
   Privacy, cookie, preferenze: misura di lettura 68ch, tabelle hairline, nota di bozza. */
.ele-legale { max-width: 68ch; }
.ele-legale .ele-lead { font-size: var(--ele-text-lettura); line-height: 1.5; color: var(--ele-color-grigio-800); margin: 0 0 var(--ele-space-5); }
.ele-legale .ele-nota-bozza { font-size: var(--ele-text-piccolo); color: var(--ele-color-grigio-600); border-left: 2px solid var(--ele-color-oltremare); padding-left: var(--ele-space-2); margin: 0 0 var(--ele-space-4); }
body.ele-site .ele-legale h2 { font-family: var(--ele-font-display); font-weight: var(--ele-peso-display-forte); font-size: var(--ele-text-titolo-s); line-height: var(--ele-interlinea-titoli); margin: var(--ele-space-6) 0 var(--ele-space-2); color: var(--ele-color-nero); }
body.ele-site .ele-legale h3 { font-family: var(--ele-font-testo); font-weight: var(--ele-peso-testo-forte); font-size: var(--ele-text-corpo); line-height: var(--ele-interlinea-titoli); margin: var(--ele-space-4) 0 var(--ele-space-1); color: var(--ele-color-nero); }
.ele-legale p { margin: 0 0 var(--ele-space-2); }
.ele-legale table.ele-tabella { width: 100%; border-collapse: collapse; margin: var(--ele-space-2) 0 var(--ele-space-3); font-size: var(--ele-text-piccolo); line-height: 1.4; }
.ele-legale table.ele-tabella th { font-family: var(--ele-font-etichette); font-weight: var(--ele-peso-etichette); font-size: var(--ele-text-didascalia); letter-spacing: var(--ele-tracking-maiuscole); text-transform: uppercase; color: var(--ele-color-grigio-600); text-align: left; padding: 8px 12px 8px 0; border-bottom: var(--ele-hairline) solid var(--ele-color-grigio-800); }
.ele-legale table.ele-tabella td { padding: 10px 12px 10px 0; border-bottom: var(--ele-hairline) solid var(--ele-color-grigio-200); vertical-align: top; }
.ele-legale table.ele-tabella td:first-child { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.8125rem; color: var(--ele-color-nero); }
.ele-legale .ele-ck-stav { font-size: var(--ele-text-piccolo); color: var(--ele-color-grigio-600); }
@media (max-width: 599px) { .ele-legale table.ele-tabella { display: block; overflow-x: auto; } }

/* == 10 · REGISTRO DEGLI !important =======================================
   Usati solo dove Salient scrive stili inline o usa !important a sua volta:
   1. #header-outer background-color        (inline da opzioni tema)
   2. voci .sf-menu color + hover           (inline da Typography)
   3. .nectar-button background/color/hover (inline dal builder)
   4. .nectar-button.see-through bg/color   (inline dal builder)
   5. #footer-outer background-color        (inline da opzioni tema)
   6. .wpb_animate_when_almost_visible opacity/transform (inline del tema)
   7. #to-top background (normale e hover)  (il tema usa !important)
   8. #slide-out-widget-area background     (inline da opzioni tema)
   9. prefers-reduced-motion: reduce        (deve vincere su tutto, incluso Salient)
  10. sottomenu .sf-menu ul: fondo, bordo, ombra, padding (accento e stili inline da opzioni tema)
  11. voci sottomenu: font, tracking, maiuscolo, colore, text-decoration (Typography inline + accento)
  12. voci sottomenu hover/attiva: fondo nero, testo bianco (hover accento da salient-dynamic-styles.css)
  13. sottolineatura voce di primo livello: colore e altezza (accento da salient-dynamic-styles.css)
  14. indicatore sottomenu: colore (accento da salient-dynamic-styles.css)
   ========================================================================== */