@charset "utf-8";
/* CSS Document */

/* open-sans-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: url('fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-500 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/open-sans-v44-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-500italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 500;
	src: url('fonts/open-sans-v44-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 700;
	src: url('fonts/open-sans-v44-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	src: url('fonts/open-sans-v44-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 800;
	src: url('fonts/open-sans-v44-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ==========================
   VARIABILI / TOKEN COLORE
   ==========================
   Palette ufficiale a 2 colori:
     Blu     -> #004492
     Arancio -> #F27C00
*/
:root {
	--blu-primario: #004492;
	--arancio-primario: #f27c00;
	--blu-hover: #003370;
	--arancio-hover: #d96e00;
	--arancio-tint: rgba(242, 124, 0, 0.08);
	--grigio-testo: #252525;
	--grigio-chiaro-bg: #f5f5f5;
	--grigio-chiaro-brd: #cfcfcf;
	--grigio-medio: #555;
	--grigio-chiaro: #5c5c5c; /* era #707070: 4.95:1 su bianco, ma 4.54:1
	                            sul grigio di sfondo #f5f5f5, cioe' appena
	                            sopra la soglia AA. Ora 6.69:1 e 6.13:1. */
	--bianco: #fff;
	--focus-ring-color: #004492;
	--focus-ring: 0 0 0 0.25rem rgba(0, 68, 146, 0.45);
	--blu-su-arancio: #001c3d;
	--arancio-testo: #b35b00;
	--grigio-brd-forte: #8a8a8a;
}
/* ==========================
   GENERAL
========================== */
body {
	background: var(--grigio-chiaro-bg);
	font-family: "Open Sans", sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: var(--grigio-testo);
}
a {
	text-decoration: none !important;
}
a:focus-visible, 
button:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible, 
.nav-link:focus-visible, 
.dropdown-item:focus-visible, 
.bottone:focus-visible {
	outline: 3px solid var(--focus-ring-color);
	outline-offset: 2px;
}
/**/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}
}
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1080;
	padding: 0.75rem 1.25rem;
	background: var(--blu-primario);
	color: var(--bianco);
}
/* ==========================
   HEADER — struttura generale
========================== */
.site-header {
	position: relative;
	padding-top: 32px;
	background: var(--bianco);
}
.site-header .brand-row {
    position: absolute;
	top: 32px;
	left: 0;
	width: 19.792%;
	aspect-ratio: 1920 / 138;
}
.brand-row .logo {
	display: flex;
	align-items: center;
    position: relative;
	width: 100%;
	padding-top: 25.79%;
}
.logo img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
}
.brand-row .navbar-toggler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
}
.brand-row .navbar-toggler::before {
	content: "\f0c9";
	font-family: "Font Awesome 7 Free";
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--blu-primario);
	line-height: 1;
}
.brand-row .navbar-toggler:focus-visible {
	outline: 3px solid var(--focus-ring-color);
	outline-offset: 2px;
	box-shadow: none;
}
#mainNav {
	background: var(--bianco);
}
/* ==========================
   TOP ACTIONS (riga bianca superiore)
========================== */
.top-actions {
	aspect-ratio: 1920 / 98;
}
.top-menu {
	gap: 12px;
}
.top-menu a {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--grigio-medio);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.top-menu a[aria-current],
.top-menu a:hover,
.top-menu a:focus-visible {
	color: var(--blu-primario);
}
/* PULSANTE ARANCIONE */
.btn-area {
	padding: 12px 22px;
	background: var(--arancio-primario);
	border-radius: 40px;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--blu-su-arancio);
	letter-spacing: 0.3px;
}
.btn-area:hover,
.btn-area:focus-visible {
	background: var(--arancio-hover);
	color: var(--blu-su-arancio);
}
/* SOCIAL */
a.social-icons {
	color: var(--blu-primario);
	font-size: 1.75rem;
}
a.social-icons:hover, 
a.social-icons:focus-visible {
	color: var(--blu-hover);
}
a.social-icons .fa-brands {
	display: inline;
}
/* SEPARATORE */
.separator {
	width: 1px;
	height: 36px;
	background: var(--grigio-chiaro-brd);
}
/* SEARCH */
.search-btn {
	font-size: 1.4375rem;
	color: var(--grigio-medio);
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	min-width: 24px; 
	min-height: 24px;
}
.search-btn:hover,
.search-btn:focus-visible {
	color: var(--blu-primario);
}
/* LINGUA */
.dropdown-toggle::after {
	content: "\f078";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	border: 0;
	font-size: 0.7em;
	vertical-align: middle;
	display: inline-block;
	transition: transform 0.2s ease;
}
.dropdown-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}
.language-switch .dropdown-toggle {
	color: var(--grigio-medio);
	font-weight: 700;
	font-size: 1.25rem;
	border: 0;
	background: transparent;
}
.flag {
	width: 28px;
}
/* ==========================
   NAVBAR BLU + MEGA MENU
========================== */
.main-navbar {
	background: var(--blu-primario);
}
.mega-tabs {
	margin: 0;
}
.mega-tab {
	display: block;
	width: 100%;
	padding: 1.2rem 0.9rem;
	border: 0;
	background: transparent;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--bianco);
	text-align: left;
	letter-spacing: 0.3px;
	cursor: pointer;
}
.mega-tab::after {
	display: inline-block;
	margin-left: 0.6em;
	content: "\f078"; /* chevron-down, Font Awesome */
	font-family: "Font Awesome 7 Free";
	font-size: 0.75em;
	font-weight: 900;
	color: var(--arancio-primario);
	vertical-align: middle;
	transition: transform 0.2s ease;
}
.mega-tab:hover::after,
.mega-tab[aria-current]::after {
	color: var(--blu-su-arancio);
}
.mega-tab.active::after {
	transform: rotate(180deg);
	color: var(--blu-su-arancio);
}
/*.mega-tab:hover, .mega-tab:focus-visible {
	color: var(--blu-su-arancio);
}
*/
.mega-tab:focus-visible {
	outline: 3px solid var(--bianco);
	outline-offset: -4px;
}
.mega-tab:hover,
.mega-tab.active
 {
	background: var(--bianco);
	color: var(--blu-primario);
	
}

/* Aggiunto da Claude */
.mega-tab:hover:focus-visible,
.mega-tab.active:focus-visible {
  outline-color: var(--blu-primario);
}

 .mega-tab[aria-current]{
	background: var(--arancio-primario);
	border-radius: 0;
	outline-color: var(--blu-su-arancio);
	color: var(--blu-su-arancio);
}

.mega-panel {
	display: block;
	max-height: 0;
	background: var(--bianco);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0s linear 0.35s;
}
.mega-panel.mega-open {
	max-height: 90vh;
	border-bottom: 3px solid var(--blu-primario);
	opacity: 1;
	visibility: visible;
	transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0s;
	overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
.mega-panel {
	transition: none;
}
}
.mega-col {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.mega-col-title {
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--arancio-primario);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--blu-primario);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.mega-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mega-list li + li {
	margin-top: 0.6rem;
}
.mega-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	color: var(--grigio-testo);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.35rem 0;
}
.mega-list a::after {
	content: "\f105";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	color: var(--arancio-primario);
	font-size: 0.8rem;
	flex-shrink: 0;
}
.mega-list a:hover, 
.mega-list a:focus-visible {
	color: var(--arancio-testo);
}

/* Claude*/
.mega-list a[aria-current] {
  color: var(--arancio-testo);
  font-weight: 700;
}

.mega-col.active .mega-col-title {
	border-color: var(--arancio-primario);
	color: var(--arancio-testo);
}
.mega-col.active .mega-list li a.active {
	color: var(--arancio-testo);
}
/* BANNER */
.hero-news-slider {
	position: relative;
}
.heroSwiper {
	min-height: 780px;
	height: auto;
}
.swiper-slide {
	position: relative;
}
.slide-link {
	display: block;
	width: 100%;
	height: 100%;
}
.slide-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(  to top,  rgba(0, 0, 0, 0.95) 0%,  rgba(0, 0, 0, 0.55) 35%,  rgba(0, 0, 0, 0.1) 70%,  transparent 100%  );
}
.slide-content {
	position: absolute;
	left: 11%;
	right: 11%;
	bottom: 170px;
	z-index: 2;
	max-width: 650px;
}
.news-date {
	display: inline-block;
	background: var(--blu-primario);
	color: white;
	font-size: 0.9375rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 15px;
}
.news-title {
	color: white;
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	font-weight: 700;
	margin-bottom: 15px;
}
.news-description {
	color: white;
	font-size: 1.125rem;
	line-height: 1.6;
	opacity: 0;
	transform: translateY(20px);
	transition: 0.4s;
}

/* Hover attivo solo su dispositivi con mouse reale (desktop) */
@media (hover: hover) and (pointer: fine) {
	.swiper-slide:hover .news-description,
	.slide-link:focus-visible .news-description,
	.slide-link:focus-within .news-description {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Su touch/mobile o schermi piccoli: descrizione sempre visibile, niente hover */
@media (hover: none), (pointer: coarse), (max-width: 991.98px) {
	.news-description {
		opacity: 1;
		transform: translateY(0);
	}
}


/*
.news-description {
	color: white;
	font-size: 1.125rem;
	line-height: 1.6;
	opacity: 0;
	transform: translateY(20px);
	transition: 0.4s;
}


.swiper-slide:hover .news-description, 
.slide-link:focus-visible .news-description, 
.slide-link:focus-within .news-description {
	opacity: 1;
	transform: translateY(0);
}

*/
.archive-button-wrapper {
	position: absolute;
	left: 11%;
	bottom: 95px;
	z-index: 5;
}
.btn-news-archive {
	background: var(--arancio-primario);
	color: var(--blu-su-arancio);
	border-radius: 50px;
	padding: 18px 30px;
	font-size: 1.125rem;
	font-weight: 500;
}
.btn-news-archive:hover, .btn-news-archive:focus-visible {
	background: var(--arancio-hover);
	color: var(--blu-su-arancio);
}
.btn-news-archive i {
	margin-left: 12px;
}
.swiper-pagination {
	bottom: 60px !important;
}
/* Comando di pausa dello scorrimento automatico. Obbligatorio per il
   criterio WCAG 2.2.2 (livello A). Sta in basso a destra, fuori dalla
   fascia centrale occupata dai pallini. */
.swiper-pausa {
	position: absolute;
	right: 24px;
	bottom: 52px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* target minimo 44x44 (WCAG 2.5.8) */
	height: 44px;
	padding: 0;
	border: 2px solid var(--bianco);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	color: var(--bianco);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.swiper-pausa:hover {
	background: var(--arancio-primario);
	border-color: var(--arancio-primario);
	color: var(--blu-su-arancio);
}
/* Il focus ring globale e' blu (--focus-ring-color): su una foto scura
   sparisce. Qui serve bianco. */
.swiper-pausa:focus-visible {
	outline: 3px solid var(--bianco);
	outline-offset: 3px;
}
.swiper-pagination-bullet {
	width: 24px;
	height: 24px;
	background: white;
	opacity: 1;
	margin: 0 6px !important;
}
.swiper-pagination-bullet-active {
	background: var(--arancio-primario);
}
/* ==========================
   NUMERI PREVIBANK
========================== */
.numeri-di-previbank {
	padding: 120px 0;
	background: var(--bianco);
}
.numeri-di-previbank h2 {
	margin-bottom: 40px;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--blu-primario);
	text-transform: uppercase;
	text-align: center;
}
.numeri-di-previbank .card-cerchio {
	background: var(--bianco);
	width: 100%;
	max-width: 274px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	box-shadow: inset -5px -5px 8px 2px rgba(0, 0, 0, 0.05);
	margin: 0 auto;
	transition: all .3s ease-in-out;
}
.numeri-di-previbank .card-cerchio:hover {
	transform: scale(105%);
}
.numeri-di-previbank .card-cerchio h3 {
	font-size: 1.125rem;
	color: var(--grigio-medio);
	text-transform: uppercase;
	margin: 0;
	margin-top: 16px;
	padding: 0;
}
.numeri-di-previbank .card-cerchio .numero {
	font-size: 2rem;
	color: var(--blu-primario);
	font-weight: 700;
	margin-top: -8px;
	margin-bottom: 0;
	padding: 0;
}
.numeri-di-previbank .card-cerchio .icona img {
	height: 80px;
	width: 100%;
	max-width: 100px;
}
/* ==========================
   GESTIONE FINANZIARIA E ASSICURATIVA
========================== */
.gestione-finanziaria-e-assicurativa {
	background: url("../img/bg-gestione-finanziaria.png") top right no-repeat;
	background-color: var(--blu-primario);
	padding-top: 64px;
}
.gestione-finanziaria-e-assicurativa h2 {
	margin-bottom: 32px;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--arancio-primario);
	text-transform: uppercase;
	text-align: center;
}
.gestione-finanziaria-e-assicurativa .testo {
	margin-bottom: 32px;
	font-size: 1.3125rem;
	color: var(--bianco);
	text-align: center;
}
.gestione-finanziaria-e-assicurativa a.bottone {
	display: inline-block;
	margin-bottom: 32px;
	padding: 16px 32px;
	border-radius: 35px;
	background: var(--arancio-primario);
	font-size: 1.3125rem;
	color: var(--blu-su-arancio);
	text-decoration: none;
}
.gestione-finanziaria-e-assicurativa a.bottone:hover, 
.gestione-finanziaria-e-assicurativa a.bottone:focus-visible {
	background: var(--arancio-hover);
	color: var(--blu-su-arancio);
}
.gestione-finanziaria-e-assicurativa .container-comparti {
	margin-top: 64px;
}
.gestione-finanziaria-e-assicurativa .card-comparti {
	background: var(--bianco);
	border-radius: 10px;
	margin-bottom: -140px;
}
.gestione-finanziaria-e-assicurativa .card-comparti .icona {
	width: 100%;
	max-width: 160px;
	height: 160px;
	border-radius: 50%;
	margin: -72px auto 32px auto;
	box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.11);
}
.gestione-finanziaria-e-assicurativa .card-comparti .icona.finanziario {
	background: url("../img/finanziario.png") no-repeat center center;
}
.gestione-finanziaria-e-assicurativa .card-comparti .icona.bilanciato {
	background: url("../img/bilanciato.png") no-repeat center center;
}
.gestione-finanziaria-e-assicurativa .card-comparti .icona.assicurativo {
	background: url("../img/assicurativo.png") no-repeat center center;
}
.gestione-finanziaria-e-assicurativa .card-comparti h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--blu-primario);
	text-align: center;
	text-transform: uppercase;
}
.gestione-finanziaria-e-assicurativa .card-comparti .spazio-dati {
	border-bottom: 1px dotted var(--grigio-chiaro-brd);
	padding: 16px 0;
}
.gestione-finanziaria-e-assicurativa .card-comparti .spazio-dati .dato {
	color: var(--arancio-testo);
	font-size: 1.3125rem;
	font-weight: 700;
}
.gestione-finanziaria-e-assicurativa .card-comparti .spazio-dati .descrizione {
	color: var(--grigio-testo);
	font-size: 1.125rem;
}
.gestione-finanziaria-e-assicurativa .card-comparti a.bottone {
	border: 1px solid var(--arancio-testo);
	padding: 16px 24px;
	background: var(--bianco);
	margin: 32px 0 0 0;
}
.gestione-finanziaria-e-assicurativa .card-comparti a.bottone .testo {
	color: var(--grigio-testo);
	font-size: 1.125rem;
	margin: 0;
}
.gestione-finanziaria-e-assicurativa .card-comparti a.bottone i {
	color: var(--arancio-testo);
}
.gestione-finanziaria-e-assicurativa .card-comparti a.bottone:hover, 
.gestione-finanziaria-e-assicurativa .card-comparti a.bottone:focus-visible {
	background: var(--arancio-tint);
}
/* ==========================
   MOTORI DI CALCOLO
========================== */
.motori-di-calcolo {
	background-color: var(--grigio-chiaro-bg); 
	background-image: url("../img/motori-di-calcolo-blu.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 54%;
	aspect-ratio: 1920 / 820;
}
.motori-di-calcolo .mc-box {
	width: 42%;
}
.motori-di-calcolo h2 {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--blu-primario);
	margin: 0;
}
.motori-di-calcolo .testo {
	color: var(--grigio-testo);
	font-size: 1.125rem;
}
.motori-di-calcolo a.bottone {
	background: var(--blu-primario);
	border-radius: 30px;
	padding: 16px 24px;
	display: inline-flex;
}
.motori-di-calcolo a.bottone:hover, 
.motori-di-calcolo a.bottone:focus-visible {
	background: var(--blu-hover);
}
.motori-di-calcolo a.bottone .testo {
	color: var(--bianco) !important;
	font-size: 1.125rem;
	text-decoration: none !important;
}
.motori-di-calcolo a.bottone .icona i {
	color: var(--bianco) !important;
}
.bg-bianco {
	background: none;
	border: none;
	border-radius: 10px;
}
/* ==========================
   SEPARATORE BIANCO
========================== */
.separatore-bianco {
	min-height: 220px;
	background: var(--bianco);
}
/* ==========================
   AREA RISERVATA
========================== */
.area-riservata {
	background: url("../img/bg-blu.png") center center no-repeat;
	background-size: cover;
	padding: 85px 0;
}
.area-riservata .bg {
	background: url("../img/computer.png");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 1920 / 770;
}
.area-riservata .bg .scritte {
	padding: 10% 0;
	width: 50%;
	text-align: right;
}
.area-riservata .bg .scritte h5,
.area-riservata .bg .scritte .h5 {
	margin: 0;
	font-size: 2.625rem;
	font-weight: 500;
	color: var(--bianco);
	text-transform: uppercase;
}
.area-riservata .bg .scritte h3,
.area-riservata .bg .scritte .h3 {
	margin: 0;
	font-size: 3.3125rem;
	font-weight: 700;
	color: var(--arancio-primario);
	text-transform: uppercase;
}
.area-riservata .bg .scritte .testo {
	color: var(--bianco);
	font-size: 1.125rem;
}
.area-riservata .bg .scritte a.bottone {
	padding: 9px 45px;
	border: 2px solid var(--bianco);
	border-radius: 35px;
	background: var(--blu-primario);
	font-size: 1.75rem;
	color: var(--bianco);
}
.area-riservata .bg .scritte a.bottone:hover,
.area-riservata .bg .scritte a.bottone:focus-visible {
	background: var(--blu-hover);
}
/* ==========================
   FOOTER
========================== */
.footer {
	border-top: 1px solid var(--grigio-chiaro-brd);
}
.footer .footer-menu {
	background: var(--bianco);
	padding: 32px 0;
}
.footer .footer-menu ul li {
	display: flex;
	gap: 1rem;
	align-items: center;
}
.footer .footer-menu ul li::before {
	content: "\f111"; /* circle, Font Awesome */
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 0.3rem;
	color: var(--arancio-primario);
}
.footer .footer-menu ul li:first-child::before {
	display: none;
}
.footer .footer-menu ul li a {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--grigio-testo);
	text-transform: uppercase;
}
.footer .footer-menu ul li a:hover,
.footer .footer-menu ul li a:focus-visible,
.footer .footer-menu ul li a[aria-current="true"] {
	color: var(--blu-primario);
}
.footer .footer-grigio {
	padding: 64px 0;
	background: var(--grigio-chiaro-bg);
}
.footer .footer-grigio .testo {
	font-size: 1.125rem;
	color: var(--grigio-testo);
}
.footer .footer-grigio .testo a {
	color: inherit;
}
.footer .footer-grigio .contatti .codice-fiscale .icona {
	color: var(--blu-primario);
	font-size: 1.125rem;
	font-weight: 700;
}
.footer .footer-grigio .contatti .icona i {
	font-size: 1.125rem;
	color: var(--blu-primario);
}
.footer .footer-grigio .contatti .dato {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--grigio-testo);
}
.footer .footer-grigio .contatti .dato a {
	color: inherit;
}
.footer .footer-grigio .contatti .dato span {
	font-weight: 500;
}
.footer .footer-grigio .separator {
	width: 100%;
	height: 0;
	margin: 64px 0;
	border: 1px dashed var(--grigio-medio);
}
.footer .footer-grigio h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--grigio-testo);
}
.footer .footer-grigio .qr i {
	font-size: 3rem;
}
.footer .footer-grigio .logo-footer img {
	width: 100%;
	max-width: 369px;
	height: auto;
}
.footer .footer-grigio a.bottone-organi-sociali {
	background: var(--arancio-primario);
	color: var(--blu-su-arancio);
	font-weight: 700;
	padding: 16px 32px;
	border-radius: 25px;
	text-transform: uppercase;
	display: inline-block;
}
.footer .footer-grigio a.bottone-organi-sociali:hover, 
.footer .footer-grigio a.bottone-organi-sociali:focus-visible {
	background: var(--arancio-hover);
}
.footer .footer-grigio .finanza-sostenibile img {
	width: 100%;
	max-width: 359px;
	height: auto;
}
.footer .footer-grigio .qr .qr-code img {
	width: 100%;
	max-width: 110px;
	height: auto;
}
.footer .footer-grigio .social .lablel {
	color: var(--grigio-testo);
	font-size: 1.5rem;
	font-weight: 700;
}
.footer .footer-grigio .social a {
	color: var(--blu-primario);
	font-size: 1.5rem;
}
/* ==========================
   INTERNA (breadcrumb + contenuti generici + allegati)
   Riutilizzata identica da tutte le pagine interne (anticipazioni,
   notizie, faq, documenti): un'unica definizione, niente CSS duplicato
   pagina per pagina.
========================== */
.path {
	background: var(--grigio-chiaro-bg);
	color: var(--blu-primario);
	font-size: 1.125rem;
	text-transform: uppercase;
}
.path a.step-precendente {
	/* Era #6c6c6c cablato a mano: 4.82:1 sul fondo #f5f5f5 della barra.
	   Stesso ruolo della variabile, quindi ora la usa. */
	color: var(--grigio-chiaro);
}
.path a.step-precendente:hover, 
.path a.step-precendente:focus-visible {
	color: var(--blu-primario);
}
.path .icona i {
	font-size: 0.875rem;
}
.contenuti-centro {
	padding: 64px 0;
	background: var(--bianco);
}
.contenuti-centro h2 {
	color: var(--blu-primario);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 32px;
	text-transform: uppercase;
	text-align: center;
}
.contenuti-centro .testo {
	font-size: 1rem;
	color: var(--grigio-testo);
}
.contenuti-centro .testo ul {
	list-style: none;
	padding: 0;
	margin: 16px 0;
}
.contenuti-centro .testo ul li {
	position: relative;
	padding-left: 20px;
}
/* Segno di elenco comune a tutti i livelli: cambiano solo glifo,
   colore e dimensione, definiti nelle regole per livello qui sotto. */
.contenuti-centro .testo ul li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	color: var(--arancio-primario);
}

/* LIVELLO 1: triangolo pieno arancio */
.contenuti-centro .testo ul > li::before {
	content: "\f0da"; /* caret-right */
	font-size: 1em;
	top: 0;
}

/* LIVELLO 2: pallino pieno blu, piu' piccolo.
   Il glifo tondo e' otticamente piu' alto del triangolo, quindi va
   ricentrato sulla riga con top/line-height. */
.contenuti-centro .testo ul ul > li::before {
	content: "\f111"; /* circle */
	font-size: 0.4em;
	top: 0;
	line-height: 2.7;
	color: var(--blu-primario);
}

/* LIVELLO 3: trattino grigio */
.contenuti-centro .testo ul ul ul > li::before {
	content: "\f068"; /* minus */
	font-size: 0.6em;
	top: 0;
	line-height: 1.8;
	color: var(--grigio-medio);
}

/* LIVELLO 4 e oltre: cerchio vuoto.
   Stesso glifo del livello 2 ma in peso Regular (400): in Font Awesome
   il cerchio vuoto e' la variante "regular" di fa-circle, non un glifo
   a se'. Il vecchio fa-circle-o (\f10c) e' rimasto alla versione 4. */
.contenuti-centro .testo ul ul ul ul > li::before {
	content: "\f111";
	font-weight: 400;
	font-size: 0.4em;
	line-height: 2.7;
	color: var(--grigio-medio);
}

/* Rientro e spaziatura degli elenchi annidati (ul e ol).
   Il margine verticale e' piu' stretto di quello di primo livello:
   il sotto-elenco appartiene alla voce che lo precede. */
.contenuti-centro .testo ul ul,
.contenuti-centro .testo ul ol,
.contenuti-centro .testo ol ul,
.contenuti-centro .testo ol ol {
	margin: 8px 0 8px 20px;
}
.contenuti-centro .sezione-allegati {
	padding: 32px 0;
	border-top: 1px dashed var(--grigio-chiaro);
}
.contenuti-centro .sezione-allegati a.allegati {
	border: 1px solid var(--grigio-brd-forte);
	padding: 16px;
	border-radius: 10px;
}
.contenuti-centro .sezione-allegati a.allegati:hover, 
.contenuti-centro .sezione-allegati a.allegati:focus-visible {
	border-color: var(--arancio-primario);
}
.contenuti-centro .sezione-allegati a.allegati .icona {
	color: var(--arancio-testo);
}
.contenuti-centro .sezione-allegati a.allegati .testo span {
	color: var(--grigio-chiaro);
}
/* ==========================
   BOTTONI COMPARTI
========================== */
.bottoni-comparti {
	padding-bottom: 64px;
}
.bottoni-comparti a.bottone-comparto {
	border: 1px solid var(--grigio-brd-forte);
	border-radius: 10px;
	padding: 32px;
	margin-top: 16px;
}
.bottoni-comparti a.bottone-comparto:hover {
	background: var(--grigio-chiaro-bg);
}
.bottoni-comparti a.bottone-comparto .icona {
	width: 100%;
	max-width: 140px;
	height: 140px;
	border-radius: 50%;
}
.bottoni-comparti a.bottone-comparto .icona.finanziario {
	background: url("../img/finanziario.png") no-repeat center center;
}
.bottoni-comparti a.bottone-comparto .icona.bilanciato {
	background: url("../img/bilanciato.png") no-repeat center center;
}
.bottoni-comparti a.bottone-comparto .icona.assicurativo {
	background: url("../img/assicurativo.png") no-repeat center center;
}
.bottoni-comparti a.bottone-comparto h3 {
	color:  var(--blu-primario);
	font-size: 1.4rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}
/* ==========================
   COMPARTI
========================== */
.contenuti-centro h2.comparti {
	color: var(--blu-primario);
	font-size:  1.6rem;
	padding-bottom: 32px;
	border-bottom: 1px dashed var(--grigio-chiaro);
}
.contenuti-centro h2.comparti span.icona {
	width: 100%;
	max-width: 95px;
	height: 95px;
	border-radius: 50%;
	background-size: contain!important;
}
.contenuti-centro h2.comparti span.icona.finanziario {
	background: url("../img/finanziario.png") no-repeat center center;
}
.contenuti-centro h2.comparti span.icona.bilanciato {
	background: url("../img/bilanciato.png") no-repeat center center;
}
.contenuti-centro h2.comparti span.icona.assicurativo {
	background: url("../img/assicurativo.png") no-repeat center center;
}
/* ==========================
   DOCUMENTI (usata anche dalla select delle FAQ: stesso componente)
========================== */
/* Filtro categoria: dropdown Bootstrap con lo stesso stile visivo della
   vecchia <select> (riusa .select-documenti). Condiviso da Documenti e
   FAQ. Il bottone usa justify-content-between (in HTML) per spingere la
   freccia tutta a destra, come farebbe una <select> nativa; le voci del
   menu, una volta aperto, hanno sfondo grigio chiaro in hover/focus
   invece del grigio di default di Bootstrap. */
.categoria-menu {
	width: 100%;
}
.categoria-menu .dropdown-item {
	white-space: normal;
	padding: 0.6rem 1rem;
}
.categoria-menu .dropdown-item:hover, 
.categoria-menu .dropdown-item:focus, 
.categoria-menu .dropdown-item.active {
	background-color: var(--grigio-chiaro-bg);
	color: var(--grigio-testo);
	font-weight: 700;
}
.select-documenti {
	min-height: 60px;
	height: auto;
	padding: 0.75rem 1rem;
	background: var(--arancio-primario);
	color: var(--blu-su-arancio);
	border: 0;
	border-radius: 6px;
	font-size: 1.125rem;
	font-weight: 700;
}

.select-documenti span{
	
  white-space: normal;

}
.select-documenti:hover {
	background: var(--arancio-hover);
	color: var(--blu-su-arancio);
}
.select-documenti:focus {
	color: var(--blu-su-arancio);
}
.select-documenti:focus-visible {
	outline: 3px solid var(--blu-su-arancio);
	outline-offset: 2px;
	box-shadow: none;
}
.select-documenti option {
	background: var(--bianco);
	color: var(--blu-primario);
	font-weight: 500;
}
.documento {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 25px;
	margin-bottom: 12px;
	border: 1px solid var(--grigio-brd-forte);
	border-radius: 6px;
	background: var(--bianco);
	text-decoration: none;
	transition: 0.25s;
}
.documento:hover, 
.documento:focus-visible {
	background: #fafafa;
	text-decoration: none;
}
.documento .left {
	display: flex;
	align-items: center;
}
.documento .pdf {
	font-size: 2.125rem;
	color: var(--arancio-testo);
	margin-right: 18px;
}
.documento .titolo {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--blu-primario);
}
.documento .download {
	font-size: 1.375rem;
	color: var(--grigio-chiaro);
}
.documento:hover .download, 
.documento:focus-visible .download {
	color: var(--arancio-testo);
}
/* ==========================
   FAQ
========================== */
.faq-item {
	border: 1px solid var(--grigio-chiaro-brd);
	border-radius: 6px;
	margin-bottom: 15px;
	overflow: hidden;
}
.faq-item .accordion-button {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--blu-primario);
	background: var(--grigio-chiaro-bg);
	padding: 20px;
}
.accordion-item h2.accordion-header {
	margin: 0;
}
/* Bootstrap disegna la freccina dell'accordion con un'icona SVG di sfondo
   (background-image, due varianti diverse per lo stato aperto/chiuso):
   la annulliamo e usiamo un vero glifo Font Awesome, con la stessa
   rotazione a 180° già prevista da Bootstrap per lo stato aperto. */
.faq-item .accordion-button::after {
	background-image: none;
	content: "\f078"; /* chevron-down, Font Awesome */
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	color: var(--arancio-testo);
	width: auto;
	height: auto;
	font-size: 1rem;
	transition: transform 0.2s ease-in-out;
}
.faq-item .accordion-button:not(.collapsed)::after {
	background-image: none;
	transform: rotate(180deg);
}
.faq-item .accordion-button:not(.collapsed) {
	background:  var(--blu-primario);
	color: var(--bianco);
	box-shadow: none;
}
.faq-item .accordion-button:focus-visible {
	box-shadow: var(--focus-ring);
	outline: none;
	z-index: 1;
}
.faq-item .accordion-body {
	padding: 20px;
	color: var(--grigio-medio);
	line-height: 1.7;
}
/* ==========================
   NOTIZIE
========================== */
a.box-notizia {
	border: 1px solid var(--grigio-brd-forte);
	border-radius: 10px;
	padding: 32px;
	display: block;
}
a.box-notizia:hover, 
a.box-notizia:focus-visible {
	border-color: var(--arancio-primario);
}
a.box-notizia .icona i {
	font-size: 4rem;
	color: var(--arancio-primario);
}
a.box-notizia .notizia {
	border-left: 1px dashed var(--grigio-chiaro);
}
a.box-notizia .notizia .data {
	font-size: 1.125rem;
	color: var(--arancio-testo);
	font-weight: 700;
}
a.box-notizia .notizia h3 {
	font-size: 1.375rem;
	color: var(--blu-primario);
	font-weight: 700;
}
a.box-notizia .notizia .testo {
	font-size: 1.125rem;
	color: var(--grigio-testo);
}
.paginazione a {
	border: 1px solid var(--grigio-chiaro);
	color: var(--arancio-testo);
	font-weight: 700;
	font-size: 1rem;
	min-width: 48px;
	min-height: 48px;
	border-radius: 10px;
	text-align: center;
	line-height: 1;
	display: inline-flex;
	align-items: center; 
	justify-content: center;
	
}
.paginazione a.select, 
.paginazione a:hover, 
.paginazione a:focus-visible {
	background: var(--arancio-primario);
	color: var(--blu-su-arancio);
	border: 1px solid var(--arancio-primario);
}


/* Stile dei puntini di troncamento, coerente con le tue classi p-2/me-3 */
/*.paginazione .dots {
  padding: 0.5rem;
  margin-right: 1rem;
  color: #999;
  user-select: none;
}
*/
/* Utility standard per nascondere testo visivamente ma non agli screen reader */
.visually-hidden-custom {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
 
.paginazione {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
/* Tap target >= 44x44px (WCAG 2.5.5/2.5.8), mantenendo il tuo stile p-2/me-3 */
.paginazione .page-link-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  margin-right: 1rem;
  text-decoration: none;
  color: inherit;
}
 
/* Pagina corrente: span non cliccabile, ma visivamente identica a prima */
.paginazione .page-current {
 display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0.5rem;
    margin-right: 1rem;
    font-weight: bold;
    color: var(--arancio-testo);
    border: 1px solid;
    border-radius: 10px;
}
 
/* Contrasto puntini corretto: #595959 su bianco = ~7:1, ben oltre il minimo 4.5:1 */
.paginazione .dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  margin-right: 1rem;
  color: #595959;
  user-select: none;
}

.paginazione .prev-item{
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  text-decoration: none;
  color: inherit;
	margin-right: 1rem;
}
 
.paginazione .next-item
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   GRAFICI E TABELLE
   ============================================================
   Sezione dedicata a "Valori quota e rendimenti": selettore
   dell'orizzonte temporale, grafici (Chart.js) e tabella dei
   rendimenti. Tutte le classi qui sotto sono usate ESCLUSIVAMENTE
   da questa sezione, per tenerle facilmente distinguibili dal
   resto del foglio di stile.
   ============================================================ */
.sezione-grafici {
	padding: 32px 0 64px;
}
/* Selettore orizzonte temporale: bottoni "pillola" in stile coerente
   con .btn-area (stessa palette), ma outline finché non sono attivi. */
.selettore-periodo {
	margin-bottom: 24px;
}
.selettore-periodo .btn-periodo {
	border: 1px solid var(--blu-primario);
	background: var(--bianco);
	color: var(--blu-primario);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 8px 20px;
	border-radius: 30px;
	margin: 0 8px 8px 0;
	transition: background 0.2s ease, color 0.2s ease;
}
.selettore-periodo .btn-periodo:hover, 
.selettore-periodo .btn-periodo:focus-visible {
	background: var(--arancio-tint);
}
.selettore-periodo .btn-periodo.active {
	background: var(--blu-primario);
	color: var(--bianco);
}
/* Card che contiene ciascun grafico */
.grafico-card {
	background: var(--bianco);
	border: 1px solid var(--grigio-chiaro-brd);
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 32px;
}
.grafico-card h3 {
	color: var(--blu-primario);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 16px;
}
.grafico-canvas-wrapper {
	position: relative;
	height: 320px;
}
.grafico-canvas-wrapper--basso {
	height: 260px;
}
.grafico-nota {
	font-size: 0.85rem;
	color: var(--grigio-chiaro);
	margin-top: 16px;
	margin-bottom: 0;
}
/* Selettore anno della tabella: un unico blocco "segmentato" (sfondo
   grigio chiaro, voce attiva in blu pieno) invece di pillole separate —
   stesso linguaggio visivo già usato per l'accordion delle FAQ
   (chiuso: grigio chiaro; aperto/attivo: blu con testo bianco). Riusa
   comunque la classe .btn-periodo sui singoli bottoni: qui la sovrascrivo
   solo dove serve, senza duplicare tutta la regola. */
.selettore-anno {
	display: inline-flex;
	background: var(--grigio-chiaro-bg);
	border-radius: 30px;
	padding: 4px;
	margin-bottom: 24px;
}
.selettore-anno .btn-periodo {
	border: 0;
	background: transparent;
	color: var(--grigio-medio);
	border-radius: 26px;
	padding: 8px 20px;
	margin: 0;
}
.selettore-anno .btn-periodo:hover, 
.selettore-anno .btn-periodo:focus-visible {
	background: transparent;
	color: var(--blu-primario);
}
.selettore-anno .btn-periodo.active {
	background: var(--blu-primario);
	color: var(--bianco);
}
/* Tabella rendimenti */

/*
.tabella-rendimenti-wrapper {
	overflow-x: auto;
	margin-bottom: 16px;
}

*/
.tabella-rendimenti {
	width: 100%;
	border-collapse: collapse;
}
.tabella-rendimenti caption {
	caption-side: top;
	color: var(--blu-primario);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: left;
	padding: 0;
	margin-bottom: 16px;
}
.tabella-rendimenti thead th {
	background: var(--blu-primario);
	color: var(--bianco);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.3px;
	padding: 14px 16px;
	text-align: left;
	white-space: nowrap;
}
.tabella-rendimenti tbody td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--grigio-chiaro-brd);
	font-size: 0.9375rem;
	color: var(--grigio-testo);
	white-space: nowrap;
}
.tabella-rendimenti tbody tr:nth-child(even) {
	background: var(--grigio-chiaro-bg);
}
.tabella-rendimenti tbody td.rendimento-positivo {
	color: #177032;
	font-weight: 700;
}
.tabella-rendimenti tbody td.rendimento-negativo {
	color: #c0392b;
	font-weight: 700;
}
/* Titolo della pagina: h1 con la stessa resa dell'h2 esistente. */
.contenuti-centro h1 {
	color: var(--blu-primario);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 32px;
}
/* Sezione del sito (item di primo livello): sopra il titolo, più piccola
   e in maiuscolo, per non competere con l'h1.
   NOTA: colore e dimensione sono una proposta, da tarare sul design.
   Il selettore NON vincola il tag: il kicker è un <p>, perché un <h2>
   prima dell'<h1> spezza la gerarchia dei titoli. Legandolo alla sola
   classe, il giorno in cui il markup cambia ancora lo stile regge. */
.contenuti-centro .sezione {
	font-size: 1rem;
	line-height: 1.2; /* era ereditato da h1-h6 di Bootstrap */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--arancio-testo);
	margin-bottom: 8px;
	text-align: left;
}
/* Elenco delle pagine figlie: riusa il componente .documento
   (già usato per gli elenchi di file), con icone proprie.
   .icona-sx e .icona-dx replicano .pdf e .download senza toccarle. */
.contenuti-centro .sezione-figli {
	padding: 32px 0 8px;
}
.documento .icona-sx {
	font-size: 2.125rem;
	color: var(--arancio-testo);
	margin-right: 18px;
}
.documento .icona-dx {
	font-size: 1.375rem;
	color: #7f7f7f;
}
.documento:hover .icona-dx, 
.documento:focus-visible .icona-dx {
	color: var(--arancio-testo);
}
/* Peso del file accanto al titolo, con lo stesso trattamento usato per
   gli allegati della pagina interna (.sezione-allegati .testo span). */
.documento .titolo .peso {
	font-size: 1rem;
	color: var(--grigio-chiaro);
	white-space: nowrap;
}
/* Data dell'articolo: prende il posto del titolo di sezione, sopra l'h1.
   Stesso trattamento della data nelle card dell'archivio. */
.contenuti-centro .data-notizia {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--arancio-testo);
	margin-bottom: 8px;
}
/* Occhiello / sommario dell'articolo */
.contenuti-centro .abstract {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--grigio-testo);
	margin-bottom: 24px;
}
/* Titolo delle sezioni interne: Risorse correlate, Altre notizie,
   In questa sezione, Dove vuoi andare. Sempre un <h2>, mai un <h3>:
   sotto l'<h1> di pagina il primo livello disponibile e' il secondo,
   e le card delle notizie usano <h3> al loro interno, quindi la scala
   resta h1 -> h2 -> h3. Selettore su classe e non su tag, cosi' vale
   per tutti i template senza duplicare la regola. */
.contenuti-centro .titolo-sezione {
	font-size: 1.625rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--blu-primario);
}
.contenuti-centro .sezione-altre-notizie {
	padding: 32px 0;
	border-top: 1px dashed var(--grigio-chiaro);
}
/* =====================================================================
   SEZIONE GRAFICI — Highcharts + accessibilità (stile Previbank)
   ---------------------------------------------------------------------
   Da appendere in style.css dopo il blocco "GRAFICI E TABELLE".
   Sostituisce le versioni precedenti di questo file.
   ===================================================================== */
.grafico-canvas-wrapper > .grafico {
	width: 100%;
	height: 100%;
}
/* Indicatore di caricamento mostrato prima che il grafico sia disegnato */
.grafico-canvas-wrapper > .grafico > .fa-spin {
	display: block;
	margin: 24px auto;
	font-size: 1.5rem;
	color: var(--arancio-testo);
}
/* -------------------------------------------------------------------
   Focus visibile — indispensabile per chi naviga da tastiera
   ------------------------------------------------------------------- */
.selettore-periodo .btn-periodo:focus-visible,
.selettore-anno .btn-periodo:focus-visible {
	outline: 2px solid var(--blu-primario);
	outline-offset: 2px;
}
/* -------------------------------------------------------------------
   Tabella: scorrevole in orizzontale su schermi stretti.
   Il contenitore è focusabile (tabindex=0 nel markup), quindi si può
   scorrere anche da tastiera; l'outline segnala il focus.
   ------------------------------------------------------------------- */
.tabella-rendimenti-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.tabella-rendimenti-wrapper:focus-visible {
	outline: 2px solid var(--blu-primario);
	outline-offset: 2px;
}
/* -------------------------------------------------------------------
   Riduzione del movimento.
   L'animazione dei grafici è disattivata via JavaScript negli endpoint
   (chart.animation = false); qui si azzerano eventuali transizioni CSS
   residue della sezione.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.sezione-grafici * {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
}
}
/* =====================================================================
   AREA CONTENUTI CMS — formattazione di default
   ---------------------------------------------------------------------
   Stili applicati all'HTML inserito dal CMS dentro .contenuti-centro .testo
   (pagine interne, archivi, notizie, comparti...).
   Palette dal tema via variabili (:root in style.css).

   NB: nel style.css di Previbank ESISTONO GIÀ:
     - .contenuti-centro .testo  -> font-size 1rem + color var(--grigio-testo)
     - .contenuti-centro .testo ul / ul li / ul li::before  (bullet arancioni)
   Qui NON li ridichiaro: aggiungo solo line-height alla base e tutto il
   resto che manca (link, titoli, tabelle, ol, citazioni, ecc.).
   Da appendere in coda a style.css.
   ===================================================================== */
/* Base: interlinea per la leggibilità (font e colore sono già impostati) */
.contenuti-centro .testo {
	padding-bottom: 32px;
	line-height: 1.6;
}


/* Spaziatura verticale degli elementi di blocco */
.contenuti-centro .testo p,
.contenuti-centro .testo ol,
.contenuti-centro .testo table,
.contenuti-centro .testo blockquote,
.contenuti-centro .testo figure {
	margin: 0 0 1rem;
}
/* Niente margine sotto l'ultimo elemento: evita spazi vuoti in coda */
.contenuti-centro .testo > *:last-child {
	margin-bottom: 0;
}
/* -------------------------------------------------------------------
   Link (esclusi i bottoni). Coerenti con la convenzione del sito:
   nessuna sottolineatura, colore che cambia in hover/focus.
   ------------------------------------------------------------------- */
.contenuti-centro .sezione-allegati a .testo{
	padding-bottom: 0;
}

.contenuti-centro .testo a:not(.btn):not(.btn-cta):not(.documento) {
	color: var(--blu-primario);
	text-decoration: none;
	overflow-wrap: break-word;
	word-wrap: anywhere;
	/* URL lunghe non sfondano il layout */
}
.contenuti-centro .testo a:not(.btn):not(.btn-cta):not(.documento):hover {
	color: var(--arancio-testo);
}
.contenuti-centro .testo a:not(.btn):not(.btn-cta):not(.documento):focus-visible {
	outline: 2px solid var(--focus-ring-color);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------
   PULSANTI DI CHIAMATA ALL'AZIONE dentro il testo redazionale.
   Servono alle pagine in cui il contenuto e' sostanzialmente un bivio
   (es. "Area riservata": iscritto / azienda) e una riga di link non
   basta a dare gerarchia.

   Markup da inserire dall'editor del CMS:

   <div class="pulsanti-cta affiancati">
     <a class="btn-cta" href="...">Area riservata iscritto</a>
     <a class="btn-cta" href="...">Area riservata azienda</a>
   </div>

   NIENTE tag <i> per l'icona: gli editor WYSIWYG (TinyMCE, CKEditor)
   cancellano gli elementi inline vuoti al salvataggio, quindi l'icona
   sparirebbe. Viene disegnata da ::after, che l'editor non puo'
   toccare perche' vive solo nel CSS.

   Con .pulsanti-cta.affiancati i due pulsanti restano larghi uguali
   e affiancati; senza, si adattano al contenuto.
   ------------------------------------------------------------------- */
.contenuti-centro .testo .pulsanti-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0 32px;
}
.contenuti-centro .testo .pulsanti-cta.affiancati .btn-cta {
	flex: 1 1 260px;
}
.contenuti-centro .testo a.btn-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 24px;
	border: 2px solid var(--blu-primario);
	border-radius: 10px;
	background: var(--bianco);
	color: var(--blu-primario);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.contenuti-centro .testo a.btn-cta .etichetta {
	text-transform: uppercase;
	letter-spacing: .3px;
}
/* ICONA: pseudo-elemento, non tag <i>, cosi' sopravvive al salvataggio
   nell'editor del CMS. L'icona non deve restringersi quando
   l'etichetta va a capo, da qui flex-shrink a 0. */
.contenuti-centro .testo a.btn-cta::after {
	content: "\f2f6"; /* right-to-bracket */
	flex: 0 0 auto;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--arancio-testo);
	transition: color .2s ease, transform .2s ease;
}
/* Se un <i> e' comunque sopravvissuto nel contenuto, va nascosto:
   altrimenti l'icona comparirebbe due volte. */
.contenuti-centro .testo a.btn-cta i {
	display: none;
}
/* Varianti di icona, da mettere sul link insieme a .btn-cta */
.contenuti-centro .testo a.btn-cta.icona-download::after {
	content: "\f019"; /* download */
}
.contenuti-centro .testo a.btn-cta.icona-freccia::after {
	content: "\f061"; /* arrow-right */
}
.contenuti-centro .testo a.btn-cta.icona-esterno::after {
	content: "\f35d"; /* arrow-up-right-from-square */
}
.contenuti-centro .testo a.btn-cta:hover, 
.contenuti-centro .testo a.btn-cta:focus-visible {
	background: var(--blu-primario);
	border-color: var(--blu-primario);
	color: var(--bianco);
}
.contenuti-centro .testo a.btn-cta:hover::after, 
.contenuti-centro .testo a.btn-cta:focus-visible::after {
	color: var(--bianco);
	transform: translateX(4px);
}
.contenuti-centro .testo a.btn-cta:focus-visible {
	outline: 2px solid var(--focus-ring-color);
	outline-offset: 2px;
}
/* Variante piena, se serve dare piu' peso a uno dei due */
.contenuti-centro .testo a.btn-cta.pieno {
	background: var(--blu-primario);
	color: var(--bianco);
}
.contenuti-centro .testo a.btn-cta.pieno::after {
	color: var(--bianco);
}
.contenuti-centro .testo a.btn-cta.pieno:hover, 
.contenuti-centro .testo a.btn-cta.pieno:focus-visible {
	background: var(--blu-hover);
	border-color: var(--blu-hover);
}

/* -------------------------------------------------------------------
   RIGA DOCUMENTO per il testo redazionale (.doc-cta).

   Stesso aspetto di .documento (elenchi di allegati e pagine figlie),
   ma con le due icone su pseudo-elementi invece che su tag <i>: nel
   contenuto gestito dall'editor del CMS i tag inline vuoti vengono
   cancellati al salvataggio, quindi le icone sparirebbero.

   Markup da inserire dall'editor:

   <a class="doc-cta" href="...">Scarica la guida alla password</a>

   L'icona di sinistra e' un PDF; per altri tipi di file si aggiunge
   una classe: .tipo-doc .tipo-xls .tipo-zip .tipo-link.
   ------------------------------------------------------------------- */
.contenuti-centro .testo a.doc-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 18px 25px;
	margin: 16px 0 12px;
	border: 1px solid var(--grigio-chiaro-brd);
	border-radius: 6px;
	background: var(--bianco);
	color: var(--blu-primario);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: 0.25s;
}
/* ICONA DI SINISTRA: tipo di file. Il PDF e' il caso piu' frequente
   ed e' il default; le classi .tipo-* qui sotto lo sostituiscono. */
.contenuti-centro .testo a.doc-cta::before {
	content: "\f1c1"; /* file-pdf */
	flex: 0 0 auto;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 2.125rem;
	line-height: 1;
	color: var(--arancio-testo);
	transition: color .25s ease;
}
.contenuti-centro .testo a.doc-cta.tipo-doc::before {
	content: "\f1c2"; /* file-word */
}
.contenuti-centro .testo a.doc-cta.tipo-xls::before {
	content: "\f1c3"; /* file-excel */
}
.contenuti-centro .testo a.doc-cta.tipo-zip::before {
	content: "\f1c6"; /* file-zipper */
}
.contenuti-centro .testo a.doc-cta.tipo-link::before {
	content: "\f0c1"; /* link */
	font-size: 1.75rem;
}
/* ICONA DI DESTRA: azione. Download di default, freccia per i link. */
.contenuti-centro .testo a.doc-cta::after {
	content: "\f019"; /* download */
	flex: 0 0 auto;
	margin-left: auto;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 1.375rem;
	line-height: 1;
	color: var(--grigio-chiaro);
	transition: color .25s ease;
}
.contenuti-centro .testo a.doc-cta.tipo-link::after {
	content: "\f35d"; /* arrow-up-right-from-square */
}
.contenuti-centro .testo a.doc-cta:hover, 
.contenuti-centro .testo a.doc-cta:focus-visible {
	background: #fafafa;
	color: var(--blu-primario);
	text-decoration: none;
}
.contenuti-centro .testo a.doc-cta:hover::after, 
.contenuti-centro .testo a.doc-cta:focus-visible::after {
	color: var(--arancio-testo);
}
.contenuti-centro .testo a.doc-cta:focus-visible {
	outline: 2px solid var(--focus-ring-color);
	outline-offset: 2px;
}
/* Se nel contenuto e' rimasto un <i>, va nascosto per non duplicare */
.contenuti-centro .testo a.doc-cta i {
	display: none;
}

/* Il componente .documento vero e proprio (quello dei template) resta
   utilizzabile anche dentro .testo: qui serve solo evitare che la
   regola generica sui link ne cambi la decorazione. */
.contenuti-centro .testo a.documento {
	text-decoration: none;
}
/* -------------------------------------------------------------------
   Titoli — scala modulare (rapporto 1.125), stessa impostazione del
   foglio Fondenergia ma sui colori Previbank: h1-h3 blu, h4-h6 grigi.
   Scoped dentro .testo: NON tocca l'h1/h2 di pagina (che stanno fuori
   da .testo e restano quelli del template).
   ------------------------------------------------------------------- */
.contenuti-centro .testo h1,
.contenuti-centro .testo h2,
.contenuti-centro .testo h3,
.contenuti-centro .testo h4,
.contenuti-centro .testo h5,
.contenuti-centro .testo h6 {
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 1.5rem 0 0.75rem;
}
.contenuti-centro .testo h1 { font-size: 1.802rem; color: var(--blu-primario); text-align: left; }
.contenuti-centro .testo h2 { font-size: 1.602rem; color: var(--blu-primario); text-align: left; }
.contenuti-centro .testo h3 { font-size: 1.424rem; color: var(--blu-primario); text-align: left; }
.contenuti-centro .testo h4 { font-size: 1.266rem; color: var(--grigio-testo); text-align: left; }
.contenuti-centro .testo h5 { font-size: 1.125rem; color: var(--grigio-testo); text-align: left; }
.contenuti-centro .testo h6 { font-size: 1rem;     color: var(--grigio-testo); text-align: left; }
/* -------------------------------------------------------------------
   Testo in linea
   ------------------------------------------------------------------- */
.contenuti-centro .testo strong,
.contenuti-centro .testo b {
	font-weight: 700;
}
.contenuti-centro .testo small,
.contenuti-centro .testo .small {
	font-size: 0.889rem;
	line-height: 1.2;
}
/* -------------------------------------------------------------------
   Immagini e figure
   ------------------------------------------------------------------- */
.contenuti-centro .testo img {
	max-width: 100%;
	height: auto;
}
.contenuti-centro .testo figure img {
	display: block;
}
.contenuti-centro .testo figcaption {
	font-size: 0.889rem;
	color: var(--grigio-medio);
	margin-top: 0.5rem;
}
/* -------------------------------------------------------------------
   Elenchi numerati (gli ul hanno già i bullet personalizzati).
   Ripristino il padding perché il reset degli ul azzera anche gli ol.
   ------------------------------------------------------------------- */
.contenuti-centro .testo ol {
	padding-left: 1.5rem;
}
/* Numerazione differenziata per livello, come per i bullet:
   1. / a. / i. Il marcatore prende il colore d'accento. */
.contenuti-centro .testo ol {
	list-style-type: decimal;
}
.contenuti-centro .testo ol ol {
	list-style-type: lower-alpha;
}
.contenuti-centro .testo ol ol ol {
	list-style-type: lower-roman;
}
.contenuti-centro .testo ol > li::marker {
	color: var(--arancio-primario);
	font-weight: 700;
}
.contenuti-centro .testo ol ol > li::marker {
	color: var(--blu-primario);
}
.contenuti-centro .testo ol ol ol > li::marker {
	color: var(--grigio-medio);
}
.contenuti-centro .testo li {
	margin-bottom: 0.4rem;
}
/* -------------------------------------------------------------------
   Citazioni e riga orizzontale
   ------------------------------------------------------------------- */
.contenuti-centro .testo blockquote {
	border-left: 4px solid var(--arancio-primario);
	background: var(--grigio-chiaro-bg);
	padding: 1rem 1.25rem;
	color: var(--grigio-medio);
}
.contenuti-centro .testo blockquote > *:last-child {
	margin-bottom: 0;
}
.contenuti-centro .testo hr {
	border: 0;
	border-top: 1px solid var(--grigio-chiaro-brd);
	margin: 2rem 0;
}
/* -------------------------------------------------------------------
   Tabelle.
   Vale sia per le tabelle "nude" inserite dall'editor sia per quelle
   con le classi Bootstrap (.table / .table-striped).
   Intestazione blu Previbank (era verde su Fondenergia).
   ------------------------------------------------------------------- */
.contenuti-centro .testo table {
	width: 100%;
	border-collapse: collapse;
}
.contenuti-centro .testo th,
.contenuti-centro .testo td {
	padding: 10px 12px;
	border: 1px solid var(--grigio-chiaro-brd);
	vertical-align: top;
	text-align: left;
}
.contenuti-centro .testo th,
.contenuti-centro .testo .table th {
	background-color: var(--blu-primario);
	border-bottom-color: var(--bianco);
	color: var(--bianco);
	font-weight: 700;
}
.contenuti-centro .testo .table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: var(--grigio-chiaro-bg);
}
/* Variante compatta */
.contenuti-centro .testo .table.small th,
.contenuti-centro .testo .table.small td {
	line-height: 1.2;
	padding: 5px;
}
/* Tabelle larghe: scorrono in orizzontale su schermi stretti se
   l'editor le avvolge in .table-responsive (Bootstrap). */
.contenuti-centro .testo .table-responsive {
	margin: 0 0 1rem;
}
/* =====================================================================
   TORNA IN CIMA — stile del pulsante
   ---------------------------------------------------------------------
   Da appendere in coda a style.css.
   ===================================================================== */
.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1030;
	
	/* 48x48: rispetta la dimensione minima del bersaglio touch (WCAG 2.5.5) */
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	
	border: 0;
	border-radius: 50%;
	background: var(--blu-primario);
	color: var(--bianco);
	font-size: 1.125rem;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	
	/* Nascosto finché non si scrolla: opacity + visibility, così da nascosto
	 non è nemmeno raggiungibile col Tab. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.scroll-top.visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.scroll-top:hover {
	background: var(--arancio-primario);
	color: var(--blu-su-arancio);
}
.scroll-top:focus-visible {
	outline: 2px solid var(--blu-primario);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.scroll-top {
	transition: opacity 0.25s ease, visibility 0.25s;
	transform: none;
}
}
/* ==========================
   RICERCA (Sphider Lite)
==========================
   Pagina /search/search.php: form, riepilogo, elenco dei risultati
   e sfoglia-categorie. La paginazione riusa .paginazione degli
   archivi; le <select> della ricerca avanzata riusano
   .select-documenti; il bottone "Mostra le categorie" riusa
   .btn-area. Qui sotto solo quello che non esisteva gia'. */

/* BARRA DI RICERCA: input + bottone in un unico campo arrotondato.
   Il bottone sta dentro il bordo, a destra, come nel resto del sito. */
.form-ricerca .barra-ricerca {
	border: 1px solid var(--grigio-brd-forte);
	border-radius: 10px;
	background: var(--bianco);
	overflow: visible;
}
.form-ricerca .barra-ricerca:focus-within {
	border-color: var(--focus-ring-color);
}
.form-ricerca .barra-ricerca .campo {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 60px;
	height: auto;
	padding: 0.75rem 20px;
	border: 0;
	border-radius: 10px 0 0 10px;
	background: transparent;
	font-size: 1.125rem;
	color: var(--grigio-testo);
}
/* Il focus visibile lo porta il contenitore (:focus-within), quindi
   sull'input toglierei il doppio anello. */
.form-ricerca .barra-ricerca .campo:focus {
	outline: 0;
}
.form-ricerca .barra-ricerca .campo::placeholder {
	color: var(--grigio-chiaro);
	opacity: 1;
}
/* Croce di "svuota" dei campi type=search: la nascondo, il campo ha
   gia' il suo bottone e la doppia icona confonde. */
.form-ricerca .barra-ricerca .campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.form-ricerca .barra-ricerca .invia {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 0 10px 10px 0;
	background: var(--arancio-primario);
	color: var(--blu-su-arancio);
	font-size: 1.25rem;
}
.form-ricerca .barra-ricerca .invia:hover, 
.form-ricerca .barra-ricerca .invia:focus-visible {
	background: var(--arancio-hover);
}

/* RICERCA AVANZATA E AMBITO */
.form-ricerca .etichetta-ambito {
	float: none;
	width: auto;
	font-size: 1rem;
	font-weight: 700;
	color: var(--blu-primario);
}

/* Modifica Claude*/
.form-ricerca .form-check-input:checked {
	background-color: var(--arancio-primario);
	border-color: var(--arancio-primario);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23001c3d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-ricerca .form-check-input:focus {
	border-color: var(--focus-ring-color);
	box-shadow: var(--focus-ring);
}

/* RIEPILOGO: correzione, parole ignorate, conteggio */
.riepilogo-ricerca {
	font-size: 1rem;
	color: var(--grigio-testo);
}
.riepilogo-ricerca strong {
	color: var(--blu-primario);
}

/* ELENCO DEI RISULTATI */
.elenco-risultati .risultato {
	padding: 24px 0;
	border-bottom: 1px dashed var(--grigio-chiaro-brd);
}
.elenco-risultati .risultato:last-child {
	border-bottom: 0;
}
/* Risultati successivi dello stesso dominio: rientrati */
.elenco-risultati .risultato.raggruppato {
	padding-left: 24px;
}
.elenco-risultati .titolo-risultato {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 6px;
	text-align: left;
}
.elenco-risultati .titolo-risultato a {
	color: var(--blu-primario);
}
.elenco-risultati .titolo-risultato a:hover, 
.elenco-risultati .titolo-risultato a:focus-visible {
	color: var(--arancio-testo);
}
.elenco-risultati .estratto {
	font-size: 1rem;
	color: var(--grigio-testo);
}
/* Sphider marca i termini trovati dentro l'estratto */
.elenco-risultati .estratto b, 
.elenco-risultati .estratto strong {
	color: var(--blu-primario);
}
.elenco-risultati .meta-risultato {
	font-size: 0.875rem;
	color: var(--grigio-chiaro);
	margin-top: 6px;
}
.elenco-risultati .meta-risultato .url {
	word-break: break-all;
}
/* Separatore fra url e data, solo quando ci sono entrambe */
.elenco-risultati .meta-risultato .url + .data::before {
	content: "\2022";
	margin: 0 8px;
}
.elenco-risultati .altri-dominio {
	font-size: 0.9375rem;
	margin-top: 6px;
}

/* SFOGLIA PER CATEGORIA */
.categorie-ricerca .titolo-blocco {
	font-size: 1.625rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--blu-primario);
	margin-bottom: 16px;
}
.categorie-ricerca .percorso-categorie {
	font-size: 1rem;
}
.categorie-ricerca .sotto-categorie .conteggio {
	color: var(--grigio-chiaro);
}
.categorie-ricerca .categoria-madre {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--blu-primario);
}
.categorie-ricerca .categoria-madre:hover, 
.categorie-ricerca .categoria-madre:focus-visible {
	color: var(--arancio-primario);
}
.categorie-ricerca .categoria-figlie a {
	color: var(--grigio-testo);
}
.categorie-ricerca .categoria-figlie a:hover, 
.categorie-ricerca .categoria-figlie a:focus-visible {
	color: var(--arancio-primario);
}

/* SUGGERIMENTI (js_suggest): il pannello si apre sotto la barra.
   autocomplete.css definisce il resto, qui solo posizione e cornice. */
.form-ricerca #sresults {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* ==========================
   ARCHIVIO DOCUMENTI AD ALBERO
==========================
   Le voci dell'archivio possono essere annidate (item con "genitore").
   L'elenco resta piatto nel markup: la gerarchia e' resa dal rientro
   progressivo della classe .livello-N e dalle intestazioni di gruppo. */

/* INTESTAZIONE DI GRUPPO: una sottocartella dell'archivio.
   Fondo grigio pieno, come le fasce di sezione. Il selettore prende
   tutti i livelli di titolo perche' il tag varia con la profondita'. */
.lista-documenti .gruppo-documenti {
	padding: 12px 25px;
	margin: 32px 0 12px;
	border-radius: 6px;
	background: var(--grigio-chiaro-bg);
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--blu-primario);
	text-align: left;
}
/* Il primo gruppo non ha bisogno del margine superiore pieno */
.lista-documenti .gruppo-documenti:first-child {
	margin-top: 0;
}
/* Piu' si scende, meno peso ha l'intestazione: l'albero resta leggibile
   senza che ogni livello gridi quanto il primo. */
.lista-documenti .gruppo-documenti.livello-1 {
	font-size: 1rem;
}
.lista-documenti .gruppo-documenti.livello-2, 
.lista-documenti .gruppo-documenti.livello-3 {
	font-size: 0.9375rem;
	background: transparent;
	border-left: 3px solid var(--arancio-primario);
	border-radius: 0;
	padding-left: 14px;
}

/* RIENTRI: 32px per livello. Si applicano sia ai gruppi sia ai
   documenti, cosi' un documento resta allineato al proprio gruppo. */
.lista-documenti .livello-1 {
	margin-left: 0px;
}
.lista-documenti .livello-2 {
	margin-left: 32px;
}
.lista-documenti .livello-3 {
	margin-left: 64px;
}
/* Oltre il terzo livello smetto di rientrare: il contenuto diventerebbe
   troppo stretto. La gerarchia resta leggibile dalle intestazioni. */
.lista-documenti .livello-4, 
.lista-documenti .livello-5, 
.lista-documenti .livello-6 {
	margin-left: 96px;
}