/* Stili del template articolo, scritti a mano: vanno nel corpo della
   pagina, dove stavano su WordPress. */
/* ============================ TOKEN ============================ */
.elementor-3984 {
  --blue-600: #2B53A0;
  --navy-950: #0B1730;
  --navy-900: #112140;
  --blue-700: #22417f;
  --blue-500: #3f6bc0;
  --blue-100: #dbe6fa;
  --blue-50:  #f4f8ff;

  --gold-600: #956b17;
  --gold-500: #c9962b;
  --gold-300: #ffd98a;
  --gold-200: #ffe6a3;
  --gold-50:  #fff9e6;

  --ink:      #0a2540;
  --slate-700:#3a4b63;
  --slate-600:#526077;
  --slate-400:#64748b;
  --line:     #e3e9f3;
  --line-soft:#eef2f9;
  --paper:    #ffffff;
  --canvas:   #f7f9fd;

  --font-display: "Fraunces", "Roboto Slab", Georgia, serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --lettura: 72ch;
}

/* ============================ LA TESTATA DELL'ARTICOLO ============================ */
/* La prima sezione del template ha gia' uno sfondo azzurro suo: qui
   diventa il navy di famiglia, e sopra ci vanno briciole, titolo e
   data in bianco. Senza questo, il titolo scuro finiva su fondo blu e
   non si leggeva. */
.elementor-3984 .elementor-element-64303d5:not(.elementor-motion-effects-element-type-background) {
  background-color: transparent !important;
  background-image:
    radial-gradient(1100px 620px at 78% -10%, rgba(63,107,192,.45), transparent 62%),
    linear-gradient(160deg, #112140 0%, #0B1730 100%) !important;
}
.elementor-3984 .elementor-element-64303d5 { padding: 3rem 0 3.5rem !important; }

/* le briciole */
.elementor-3984 .elementor-widget-breadcrumbs,
.elementor-3984 .elementor-widget-breadcrumbs p {
  font-family: var(--font-body) !important;
  font-size: .85rem !important;
  color: rgba(255,255,255,.62) !important;
  margin-bottom: 1.2rem;
}
.elementor-3984 .elementor-widget-breadcrumbs a {
  color: rgba(255,255,255,.82) !important;
  text-decoration: none;
}
.elementor-3984 .elementor-widget-breadcrumbs a:hover { color: #ffd98a !important; text-decoration: underline; }

/* ============================ TITOLO ============================ */
.elementor-3984 .elementor-widget-theme-post-title .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 1.55rem + 2.1vw, 3rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em;
  color: #ffffff !important;
  max-width: 24ch;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* ============================ DATA E AUTORE ============================ */
.elementor-3984 .elementor-post-info {
  display: flex !important;
  flex-wrap: wrap;
  gap: .6rem .75rem !important;
  padding: 0 !important;
  margin: 1rem 0 0 !important;
  list-style: none;
}
/* la pastiglia e' la voce intera: se la si mette sui figli, l'icona
   e il testo diventano due pastiglie separate */
.elementor-3984 .elementor-post-info .elementor-icon-list-item {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  margin: 0 !important;
  font-family: var(--font-body);
  font-size: .89rem !important;
  font-weight: 500;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .4em 1em !important;
  transition: border-color .18s ease, background-color .18s ease;
}
.elementor-3984 .elementor-post-info .elementor-icon-list-item:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
}
.elementor-3984 .elementor-post-info .elementor-icon-list-item > a {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-decoration: none;
}
.elementor-3984 .elementor-post-info .elementor-icon-list-item:hover > a { color: #fff !important; }
.elementor-3984 .elementor-post-info .elementor-icon-list-icon { display: inline-flex; }
.elementor-3984 .elementor-post-info .elementor-icon-list-icon i { color: #ffd98a; font-size: 13px; }
.elementor-3984 .elementor-post-info .elementor-icon-list-text { color: inherit !important; }
/* il separatore "." fra una voce e l'altra: non serve piu', ora sono
   pastiglie staccate */
.elementor-3984 .elementor-post-info .elementor-inline-item:not(:last-child)::after { content: none !important; }

/* ==================================================================
   IL TESTO DELL'ARTICOLO
   E' la parte che conta: qui si legge, o non si legge.
   ================================================================== */

.elementor-3984 .elementor-widget-theme-post-content {
  font-family: var(--font-body);
  font-size: 1.09rem;
  line-height: 1.8;
  color: var(--slate-700);
}
.elementor-3984 .elementor-widget-theme-post-content > .elementor-widget-container {
  max-width: var(--lettura);
  margin-inline: auto;
}

/* paragrafi */
.elementor-3984 .elementor-widget-theme-post-content p { margin: 0 0 1.4em; }
.elementor-3984 .elementor-widget-theme-post-content strong,
.elementor-3984 .elementor-widget-theme-post-content b { color: var(--ink); font-weight: 600; }

/* titoli interni */
.elementor-3984 .elementor-widget-theme-post-content h2,
.elementor-3984 .elementor-widget-theme-post-content h3,
.elementor-3984 .elementor-widget-theme-post-content h4 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em;
  color: var(--ink) !important;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
.elementor-3984 .elementor-widget-theme-post-content h2 {
  font-size: 1.72rem !important;
  margin: 2.4em 0 .8em !important;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}
.elementor-3984 .elementor-widget-theme-post-content h2:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.elementor-3984 .elementor-widget-theme-post-content h3 { font-size: 1.32rem !important; margin: 2em 0 .7em !important; }
.elementor-3984 .elementor-widget-theme-post-content h4 { font-size: 1.12rem !important; margin: 1.8em 0 .6em !important; }

/* link dentro il testo */
.elementor-3984 .elementor-widget-theme-post-content a {
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue-100);
  transition: text-decoration-color .18s ease, color .18s ease;
}
.elementor-3984 .elementor-widget-theme-post-content a:hover {
  color: var(--blue-700);
  text-decoration-color: var(--blue-600);
}

/* elenchi: puntino blu invece del pallino grigio */
.elementor-3984 .elementor-widget-theme-post-content ul { list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.elementor-3984 .elementor-widget-theme-post-content ul > li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .6em;
}
.elementor-3984 .elementor-widget-theme-post-content ul > li::before {
  /* il tema mette un rombo blu con margin-left:-1.2em su ogni voce:
     senza azzerare quel margine, la spunta finisce staccata dal testo */
  content: "";
  margin: 0 !important;
  position: absolute; left: 0; top: .48em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b53a0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.elementor-3984 .elementor-widget-theme-post-content ol { padding-left: 1.4rem; margin: 0 0 1.4em; }
.elementor-3984 .elementor-widget-theme-post-content ol > li { margin-bottom: .6em; padding-left: .3rem; }
.elementor-3984 .elementor-widget-theme-post-content ol > li::marker { color: var(--blue-600); font-weight: 700; }

/* citazioni */
.elementor-3984 .elementor-widget-theme-post-content blockquote {
  margin: 2em 0;
  padding: 1.2em 1.6em;
  background: var(--gold-50);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--slate-700);
}
.elementor-3984 .elementor-widget-theme-post-content blockquote p:last-child { margin-bottom: 0; }

/* immagini */
.elementor-3984 .elementor-widget-theme-post-content img {
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
  height: auto;
}
.elementor-3984 .elementor-widget-theme-post-content figure { margin: 2em 0; }
.elementor-3984 .elementor-widget-theme-post-content figcaption {
  margin-top: .7em;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--slate-600);
  text-align: center;
}

/* tabelle: sul telefono scorrono da sole invece di sfondare la pagina */
.elementor-3984 .elementor-widget-theme-post-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2em 0;
  font-size: .96rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
/* sul telefono la tabella scorre di lato invece di sfondare la pagina.
   Sul desktop resta una tabella normale, larga quanto la colonna:
   con display:block perderebbe la larghezza e si stringerebbe. */
@media (max-width: 700px) {
  .elementor-3984 .elementor-widget-theme-post-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.elementor-3984 .elementor-widget-theme-post-content th {
  background: var(--navy-900);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: .9em 1em;
  border-bottom: 2px solid var(--gold-500);
}
.elementor-3984 .elementor-widget-theme-post-content td {
  padding: .9em 1em;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
}
.elementor-3984 .elementor-widget-theme-post-content tbody tr:hover td { background: var(--blue-50); }

/* ============================ L'INDICE "CONTENUTI" ============================ */
.elementor-3984 .elementor-widget-table-of-contents .elementor-toc {
  background: var(--canvas) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  max-width: var(--lettura);
  margin-inline: auto;
}
.elementor-3984 .elementor-toc__header {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 1rem 1.4rem !important;
}
.elementor-3984 .elementor-toc__header-title {
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-600) !important;
  margin: 0 !important;
}
.elementor-3984 .elementor-toc__body { padding: 1rem 1.4rem !important; }
.elementor-3984 .elementor-toc__list-item-text {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--slate-600) !important;
  text-decoration: none;
}
.elementor-3984 .elementor-toc__list-item-text:hover,
.elementor-3984 .elementor-toc__list-item.elementor-item-active > .elementor-toc__list-item-text {
  color: var(--blue-600) !important;
}
.elementor-3984 .elementor-toc__list-item { margin-bottom: .5em; }

/* ============================ IL MODULO DELLA CONSULENZA ============================ */
.elementor-3984 .elementor-widget-form.elementor-widget-form {
  max-width: 640px;
  margin-inline: auto !important;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-300);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 20px 25px -5px rgba(10,37,64,.08), 0 8px 10px -6px rgba(10,37,64,.04);
}
@media (max-width: 640px) {
  .elementor-3984 .elementor-widget-form.elementor-widget-form { padding: 1.5rem; border-radius: 14px; }
}
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-field-group { margin-bottom: 1.15rem !important; }
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-field-group > .elementor-field-label {
  font-family: var(--font-body) !important;
  font-size: .89rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: .5rem !important;
}
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-field-textual {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  background-color: var(--canvas) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: .8em 1em !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-field-textual:focus {
  background-color: #fff !important;
  border-color: var(--blue-500) !important;
  box-shadow: 0 0 0 3px rgba(63,107,192,.16) !important;
  outline: none;
}
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-acceptance-field {
  appearance: none; -webkit-appearance: none;
  width: 20px !important; height: 20px !important; min-width: 20px;
  border: 1.5px solid var(--slate-400) !important;
  border-radius: 4px !important;
  background: #fff;
  cursor: pointer;
}
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-acceptance-field:checked {
  background: var(--blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat !important;
  border-color: var(--blue-600) !important;
}
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-button {
  width: 100%;
  justify-content: center;
  font-family: var(--font-body) !important;
  font-size: 1.11rem !important;
  font-weight: 700 !important;
  background-color: var(--gold-300) !important;
  color: var(--navy-900) !important;
  border-radius: 6px !important;
  padding: 1em 2em !important;
  transition: background-color .18s ease, transform .18s ease;
}
.elementor-3984 .elementor-widget-form.elementor-widget-form .elementor-button:hover {
  background-color: var(--gold-200) !important;
  transform: translateY(-1px);
}

/* ============================ IL RIQUADRO DELL'AUTORE ============================ */
.elementor-3984 .elementor-author-box {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem;
  gap: 1.5rem;
}
@media (max-width: 640px) { .elementor-3984 .elementor-author-box { padding: 1.25rem; } }
.elementor-3984 .elementor-author-box__avatar img {
  border-radius: 50%;
  border: 3px solid var(--paper);
  box-shadow: 0 6px 16px rgba(10,37,64,.14);
}
.elementor-3984 .elementor-author-box__name {
  font-family: var(--font-display) !important;
  font-size: 1.28rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: .4rem !important;
}
.elementor-3984 .elementor-author-box__bio {
  font-size: .96rem;
  line-height: 1.7;
  color: var(--slate-600);
}
.elementor-3984 .elementor-author-box__bio strong { color: var(--ink); font-weight: 600; }

/* ============================ PRECEDENTE / SUCCESSIVO ============================ */
.elementor-3984 .elementor-post-navigation {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10,37,64,.05);
}
.elementor-3984 .elementor-post-navigation__link a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  text-decoration: none !important;
  transition: background-color .18s ease;
}
.elementor-3984 .elementor-post-navigation__link a:hover { background: var(--blue-50); }
.elementor-3984 .post-navigation__arrow-wrapper i { color: var(--blue-600); font-size: 22px; }
.elementor-3984 .post-navigation__prev--label,
.elementor-3984 .post-navigation__next--label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: .3rem;
}
.elementor-3984 .post-navigation__prev--title,
.elementor-3984 .post-navigation__next--title {
  font-family: var(--font-display) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
}
.elementor-3984 .elementor-post-navigation__link a:hover .post-navigation__prev--title,
.elementor-3984 .elementor-post-navigation__link a:hover .post-navigation__next--title { color: var(--blue-600) !important; }
.elementor-3984 .elementor-post-navigation__next { border-left: 1px solid var(--line); }

/* ============================ COMMENTI ============================ */
.elementor-3984 .elementor-widget-post-comments { font-family: var(--font-body); }
.elementor-3984 .comment-reply-title,
.elementor-3984 .comments-title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.elementor-3984 .comment-form input[type="text"],
.elementor-3984 .comment-form input[type="email"],
.elementor-3984 .comment-form input[type="url"],
.elementor-3984 .comment-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .8em 1em;
  width: 100%;
}
.elementor-3984 .comment-form input:focus,
.elementor-3984 .comment-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(63,107,192,.16);
}
.elementor-3984 .comment-form .submit {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  background: var(--blue-600);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: .9em 1.8em;
  cursor: pointer;
  transition: background-color .18s ease;
}
.elementor-3984 .comment-form .submit:hover { background: var(--blue-700); }

/* ============================ ARTICOLI CORRELATI ============================ */
.elementor-3984 .elementor-widget-posts .elementor-posts-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.5rem !important;
}
.elementor-3984 .elementor-widget-posts .elementor-post__card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10,37,64,.05) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.elementor-3984 .elementor-widget-posts .elementor-post:hover .elementor-post__card {
  border-color: var(--blue-600) !important;
  box-shadow: 0 20px 25px -5px rgba(10,37,64,.10), 0 8px 10px -6px rgba(10,37,64,.05) !important;
  transform: translateY(-3px);
}
.elementor-3984 .elementor-widget-posts .elementor-post__thumbnail {
  padding-bottom: 0 !important;
  aspect-ratio: 16 / 10;
  background: var(--blue-50);
  overflow: hidden;
}
.elementor-3984 .elementor-widget-posts .elementor-post__thumbnail img {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0 !important;
}
.elementor-3984 .elementor-widget-posts .elementor-post__text { padding: 1.25rem !important; flex: 1; display: flex; flex-direction: column; }
.elementor-3984 .elementor-widget-posts .elementor-post__title {
  font-family: var(--font-display) !important;
  font-size: 1.12rem !important;
  line-height: 1.3 !important;
  margin: 0 0 .8rem !important;
}
.elementor-3984 .elementor-widget-posts .elementor-post__title a {
  display: block !important;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  text-decoration: none;
}
.elementor-3984 .elementor-widget-posts .elementor-post:hover .elementor-post__title a { color: var(--blue-600) !important; }
.elementor-3984 .elementor-widget-posts .elementor-post__read-more {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  margin: auto 0 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: 1rem 0 0 !important;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-600) !important;
  text-decoration: none;
  box-shadow: none !important;
  transform: none !important;
}
.elementor-3984 .elementor-widget-posts .elementor-post__read-more:hover {
  background: transparent !important;
  color: var(--blue-700) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ============================ I DUE PULSANTI FLOTTANTI ============================ */
/* "Indice" e "Condividi": restano dove sono e aprono i loro popup,
   qui prendono solo i colori di casa */
.elementor-3984 .elementor-widget-button .elementor-button {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background-color: var(--navy-900) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(10,37,64,.25);
  transition: background-color .18s ease, transform .18s ease;
}
.elementor-3984 .elementor-widget-button .elementor-button:hover {
  background-color: var(--blue-600) !important;
  transform: translateY(-1px);
}

/* ============================ COSE GENERALI ============================ */
.elementor-3984 :focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .elementor-3984 *, .elementor-3984 *::before, .elementor-3984 *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* FIX: il menu deve stare sopra al contenuto. */
.elementor-location-header { position: relative; z-index: 100; }
.elementor-location-header .elementor-nav-menu--dropdown { z-index: 101; }

/* il widget HTML che porta questo CSS non deve occupare spazio */
.elementor-3984 .elementor-widget-html:has(> .elementor-widget-container > style:only-child) {
  margin: 0 !important;
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   L'INDICE CHE RESTA

   La colonna di destra e' alta quanto tutto l'articolo — sedicimila pixel
   su una guida lunga — quindi l'indice scorreva via dopo due schermate e
   per tornarci bisognava risalire tutto. Adesso la colonna si stacca dal
   flusso e resta ferma sotto l'intestazione.

   L'intestazione e' fissa e alta 142px (barra dei contatti 48 + menu 97,
   che si sovrappongono di 3): l'indice parte da li' in giu', con un po'
   d'aria. Se un giorno l'intestazione cambia altezza, e' l'unico numero
   da rifare — sta nella variabile qui sotto.

   `align-self: flex-start` serve perche' senza, la colonna e' un elemento
   flex stirato per tutta l'altezza del fratello: sticky su una cosa alta
   quanto il suo contenitore non si muove mai, e sembrerebbe non funzionare.
   ══════════════════════════════════════════════════════════════════════ */
.elementor-3984 { --altezza-intestazione: 142px; --aria-indice: 16px; }

/* PERCHE' QUESTA RIGA ESISTE.

   Il CSS personalizzato di WordPress ha `html, body { overflow-x: hidden }`
   per non far uscire niente di lato. `hidden` pero' fa del <body> un
   contenitore di scorrimento, e un elemento `sticky` si aggancia al suo
   contenitore di scorrimento: siccome a scorrere e' <html> e non <body>,
   l'indice restava incollato a una cosa che non si muove mai — cioe' non
   si incollava affatto, e scorreva via come prima.

   `clip` taglia allo stesso modo ma NON crea un contenitore di
   scorrimento, quindi sticky torna a guardare la finestra. Si cambia
   qui e non nel file originale, che resta com'e' (vedi CLAUDE.md), e
   questo foglio lo caricano solo gli articoli. */
html, body { overflow-x: clip; }

@media (min-width: 1025px) {
  /* SI INCOLLA SOLO L'INDICE, NON TUTTA LA COLONNA.

     Sopra all'indice ci sono il riquadro «Questo e' un articolo
     verificato» e la scheda dell'autore. Tenendo ferma tutta la colonna
     si portavano dietro anche quelli, e su un indice lungo la roba non
     ci stava piu' nello schermo: compariva una barra di scorrimento
     dentro la colonna, cioe' una seconda barra accanto a quella della
     pagina. Due barre verticali affiancate sono un errore di
     progettazione, non una soluzione.

     Adesso quei due riquadri scorrono via come il resto della pagina —
     si leggono in cima e poi hanno finito il loro lavoro — e resta
     fermo solo l'indice, che e' la cosa che serve mentre si legge. */
  /* La colonna NON va messa a `flex-start`: cosi' si accorcia al suo
     contenuto, e un elemento `sticky` non puo' scorrere oltre il proprio
     contenitore — se ne va insieme a lui dopo tre schermate. Deve restare
     stirata per tutta l'altezza dell'articolo, che e' la pista su cui
     l'indice scivola. */

  .elementor-3984 .elementor-element-4ba9503 .elementor-widget-table-of-contents {
    position: sticky;
    top: calc(var(--altezza-intestazione) + var(--aria-indice));
    max-height: calc(100vh - var(--altezza-intestazione) - var(--aria-indice) * 2);

    /* La barra di scorrimento non si vede mai — e' quello che serve, due
       barre verticali affiancate sono un errore. Lo scorrimento pero'
       resta possibile: gli indici si stringono per entrare (vedi sotto) e
       nella grande maggioranza dei casi ci entrano, ma su un portatile
       basso e con diciotto voci qualche riga finirebbe sotto il bordo, e
       una voce irraggiungibile e' peggio di una barra. Cosi' non si vede
       niente e non si perde niente. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .elementor-3984 .elementor-element-4ba9503 .elementor-widget-table-of-contents::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* ENTRARCI SENZA BARRE.

     Le voci vanno da 2 a 18, e diciotto titoli lunghi in un'altezza di
     schermo non entrano alla misura normale. Quante sono lo si chiede al
     CSS stesso — `:has(.voce:nth-child(9))` vuol dire «da nove in su» —
     e da li' si stringono interlinea e corpo, a scatti, solo quando
     serve. Un indice corto resta comodo da leggere; uno lungo si compatta
     invece di tagliarsi o di farsi scorrere. */
  .elementor-3984 .elementor-toc__list-item-text { line-height: 1.35; }

  .elementor-3984 .elementor-toc__body:has(.elementor-toc__list-item:nth-child(9)) .elementor-toc__list-item {
    font-size: .93em;
    margin-bottom: .4em;
  }
  .elementor-3984 .elementor-toc__body:has(.elementor-toc__list-item:nth-child(13)) .elementor-toc__list-item {
    font-size: .86em;
    margin-bottom: .28em;
  }
  .elementor-3984 .elementor-toc__body:has(.elementor-toc__list-item:nth-child(16)) .elementor-toc__list-item {
    font-size: .78em;
    margin-bottom: .12em;
  }
  .elementor-3984 .elementor-toc__body:has(.elementor-toc__list-item:nth-child(9)) .elementor-toc__list-item-text {
    line-height: 1.25;
  }
  .elementor-3984 .elementor-toc__body:has(.elementor-toc__list-item:nth-child(16)) .elementor-toc__list-item-text {
    line-height: 1.2;
  }
}

/* Cliccando una voce, il titolo non deve finire sotto l'intestazione
   fissa: e' il difetto classico degli indici ancorati, si clicca e si
   atterra a meta' del paragrafo precedente. */
.elementor-3984 .entry-content :is(h2, h3, h4)[id] {
  scroll-margin-top: calc(var(--altezza-intestazione) + 12px);
}

/* La voce della sezione che si sta leggendo. La marca lo script
   dell'indice, guardando quali titoli sono in vista. */
.elementor-3984 .elementor-toc__list-item.e-attiva > .elementor-toc__list-item-text-wrapper {
  color: var(--blue-700);
  font-weight: 600;
}
.elementor-3984 .elementor-toc__list-item.e-attiva {
  border-left: 2px solid var(--gold-500);
  margin-left: -10px;
  padding-left: 8px;
}
.elementor-3984 .elementor-toc__list-item { transition: border-color .15s ease; border-left: 2px solid transparent; margin-left: -10px; padding-left: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   LA FASCIA IN BASSO, DA TELEFONO — «Indice» e «Condividi»

   Su schermo largo l'indice sta nella colonna a destra. Su un telefono
   quella colonna non c'e' (Elementor la nasconde), e in fondo alla pagina
   c'era questa barra: due pulsanti che aprono l'indice e la condivisione
   senza dover risalire venti schermate.

   PERCHE' ERA SPARITA. La sezione dichiara `"sticky":"bottom"` nelle sue
   impostazioni, ma a leggerle e ad applicare `position: fixed` era il
   JavaScript di Elementor Pro — che qui non c'e' piu', tolto di proposito
   insieme al resto del page builder. Il markup restava, la barra no:
   finiva in mezzo alla pagina, alta 65px e invisibile, mentre in fondo
   restavano i 72px di spazio che il CSS le teneva libero.

   Si rifa' in CSS, senza JavaScript, leggendo la stessa impostazione che
   scriveva Elementor: cosi' vale anche per altre sezioni che un domani
   venissero marcate «sticky bottom», senza inseguire un identificativo.
   ══════════════════════════════════════════════════════════════════════ */
.elementor-3984 .elementor-section[data-settings*='"sticky":"bottom"'] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  /* Sopra la barra di casa degli iPhone, non sotto. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Un'ombra corta la stacca dal testo che le scorre sotto: senza, su
     fondo chiaro sembra parte dell'articolo. */
  box-shadow: 0 -6px 20px rgba(11, 23, 48, .18);
}

/* I due pulsanti: bersagli veri per un dito. Erano alti quanto il testo. */
.elementor-3984 .elementor-section[data-settings*='"sticky":"bottom"'] .elementor-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* La barra copre il fondo: l'ultima riga del piede di pagina deve poter
   uscire da sotto. Il valore tiene conto della barra di casa. */
@media (max-width: 1024px) {
  body.single-post { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════════════════════════════════════════════════
   RIFINITURE DELL'ARTICOLO SINGOLO
   ═══════════════════════════════════════════════════════════ */

/* ── Il modulo non e' una scheda dentro una scheda ──
   Elementor disegnava DUE riquadri bianchi annidati: il contenitore
   `-3c832d8f` con bordo oro da 3px, e dentro il `form` con un suo bordo
   azzurro da 1px, un suo raggio e una sua ombra. Due bordi a un
   centimetro l'uno dall'altro, che e' quello che si vedeva.
   Era cosi' anche su WordPress: e' un difetto ereditato, non una
   regressione. Il riquadro lo tiene quello esterno, che e' l'aspetto di
   Athena; il modulo dentro torna trasparente. */
.elementor-element-3c832d8f .elementor-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Le frecce «articolo precedente / prossimo» ──
   Al passaggio del mouse il cerchio si riempie di blu scuro e il testo
   passa a bianco, ma la freccia e' un'icona Font Awesome con un COLORE
   PROPRIO, che non eredita: restava blu su blu e spariva.
   Le altre due righe tolgono il tremolio — la sottolineatura che
   compariva sul titolo e il salto dell'icona, che ha una sua
   `translateY(-5%)` di Elementor. */
.elementor-widget-post-navigation .elementor-post-navigation__link:hover .post-navigation__arrow-wrapper i {
  color: #fff !important;
}
.elementor-widget-post-navigation .elementor-post-navigation__link .post-navigation__arrow-wrapper i {
  transform: none;
  transition: color .18s ease;
}
.elementor-widget-post-navigation .elementor-post-navigation__link:hover .post-navigation__prev--title,
.elementor-widget-post-navigation .elementor-post-navigation__link:hover .post-navigation__next--title {
  text-decoration: none;
}