/* ============================================================
   Alma Formazione — sezioni e schede
   ============================================================ */

/* ---------- SEZIONI ---------- */
.alma-sezione { padding-top: 64px; padding-bottom: 64px; }
.alma-sezione--beige { background: var(--beige); border-top: 1px solid var(--bordo); }
.alma-sezione--blu { background: var(--blu-profondo); color: var(--bianco); }
.alma-sezione--blu h2 { color: var(--bianco); }

.alma-testata-sezione { max-width: 58ch; margin-bottom: 28px; }
.alma-testata-sezione h2 { font-size: 38px; line-height: 1.12; margin: 0 0 12px; }

/* Titolo a sinistra, link a destra allineato alla base del titolo. */
.alma-testata-sezione--riga {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	max-width: none;
	margin-bottom: 30px;
}
.alma-testata-sezione--riga > div { max-width: 56ch; }
.alma-link-sezione {
	font-family: var(--font-titoli);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- PER CHI È ---------- */
.alma-profili { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.alma-profilo img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}
.alma-profilo__testo { padding: 14px 4px 0; }
.alma-profilo h3 { font-size: 16px; margin: 0 0 4px; }
.alma-profilo p { font-size: 14px; line-height: 1.5; color: var(--testo-muto); margin: 0; }

/* ---------- AREE DI STUDIO ---------- */
.alma-aree { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alma-area {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 22px;
	border-top: 3px solid var(--blu);
}
.alma-area h3 { font-size: 18px; margin: 0; }
.alma-area p { font-size: 14.5px; line-height: 1.5; color: var(--testo-muto); margin: 0; }
.alma-area__conteggio {
	margin: auto 0 0;
	font-family: var(--font-titoli);
	font-size: 13px;
	font-weight: 600;
	color: var(--blu);
}
.alma-area--altre {
	background: var(--beige);
	border-top: none;
	justify-content: center;
}
.alma-area--altre p {
	font-family: var(--font-titoli);
	font-size: 15px;
	font-weight: 600;
	color: var(--testo-medio);
	line-height: 1.45;
}

/* ---------- PERCHÉ NOI ---------- */
.alma-perche { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.alma-perche h2 { font-size: 34px; margin: 0 0 12px; }
.alma-perche__testo { font-size: 16.5px; line-height: 1.6; color: var(--blu-chiaro); margin: 0; }
.alma-vantaggi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; list-style: none; }
/* Il filo colorato a sinistra distingue i quattro vantaggi senza
   aggiungere riquadri: quattro box su fondo blu peserebbero. */
.alma-vantaggio { padding-left: 15px; border-left: 3px solid var(--giallo); display: flex; flex-direction: column; gap: 7px; }
.alma-vantaggio:nth-child(2) { border-left-color: var(--verde); }
.alma-vantaggio:nth-child(3) { border-left-color: var(--arancio); }
.alma-vantaggio:nth-child(4) { border-left-color: var(--rosso); }
.alma-vantaggio h3 { font-size: 16.5px; color: var(--bianco); margin: 0; }
.alma-vantaggio p { font-size: 14.5px; line-height: 1.55; color: var(--blu-chiaro); margin: 0; }

/* ---------- CHI SIAMO / ATENEI ---------- */
.alma-chisiamo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.alma-chisiamo h2 { font-size: 34px; line-height: 1.14; margin: 0 0 16px; }
.alma-chisiamo p { font-size: 16.5px; line-height: 1.65; color: var(--testo-medio); }
/* Il logo del Polo qui è più grande dei marchi di ateneo accanto:
   la gerarchia si legge dalla dimensione, non da una didascalia. */
.alma-chisiamo__logo { display: block; height: var(--logo-polo-chisiamo, 56px); width: auto; margin-bottom: 20px; }

.alma-atenei__etichetta {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--testo-muto);
	margin: 0 0 18px;
}
.alma-atenei__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alma-ateneo {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Poco fianco: la cella e' larga ~208px e i marchi devono
	   arrivarci dentro alla misura voluta, non essere ristretti
	   dal riempimento. */
	padding: 26px 10px;
	min-height: 130px;
}
/* Larghezza calcolata sull'altezza voluta: i tre marchi hanno
   proporzioni diverse, quindi fissare l'altezza li rende ottici
   di dimensioni diverse. Si fissa la larghezza, uno per uno. */
.alma-ateneo img { display: block; height: auto; }
.alma-ateneo--pegaso img { width: var(--logo-pegaso, 150px); }
.alma-ateneo--mercatorum img { width: var(--logo-mercatorum, 185px); }
.alma-ateneo--sanraffaele img { width: var(--logo-sanraffaele, 194px); }
/* Le larghezze qui sopra sono quelle volute a schermo largo. Nella
   cella stretta di un telefono vanno lette come un massimo, non
   come una misura fissa: senza questo il marchio sfonda. */
.alma-ateneo img { max-width: 100%; }

.alma-conteggi { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: none; }
.alma-conteggio { padding: 12px 18px; text-align: center; }
.alma-conteggio strong {
	display: block;
	font-family: var(--font-titoli);
	font-size: 15px;
	font-weight: 700;
	color: var(--blu);
}
.alma-conteggio span { font-size: 12.5px; color: var(--testo-muto); }
.alma-atenei__nota { font-size: 13.5px; line-height: 1.6; color: var(--testo-muto); margin: 16px 0 0; }

/* ---------- CHIUSURA ---------- */
.alma-chiusura {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-top: 44px;
	padding-bottom: 44px;
}
.alma-chiusura__testo { max-width: 60ch; }
.alma-chiusura h2 { font-size: 27px; margin: 0 0 8px; }
.alma-chiusura p { font-size: 16.5px; line-height: 1.55; margin: 0; }
.alma-chiusura .alma-bottone { padding: 16px 32px; font-size: 16.5px; white-space: nowrap; }

/* ---------- SCHEDA CORSO (nella griglia) ---------- */
.alma-corsi-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alma-corso-scheda {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border-top: 3px solid var(--blu);
}
.alma-corso-scheda__pill { display: flex; flex-wrap: wrap; gap: 6px; }
.alma-corso-scheda__pill .alma-pill { font-size: 10.5px; padding: 2.5px 8px; }
.alma-corso-scheda__pill .alma-pill--classe { letter-spacing: 0; text-transform: none; }
.alma-corso-titolo { font-family: var(--font-titoli); font-size: 17px; font-weight: 700; line-height: 1.28; margin: 0; }
.alma-corso-titolo a { color: var(--blu-profondo); }
.alma-corso-titolo a:hover { color: var(--blu); }
.alma-corso-abstract { font-size: 14px; line-height: 1.5; color: var(--testo-muto); margin: 0; }
.alma-corso-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--bordo);
	font-size: 13px;
	color: var(--testo-muto);
	list-style: none;
}
.alma-corso-stato { font-family: var(--font-titoli); font-size: 12.5px; font-weight: 600; color: var(--verde-scuro); }
.alma-corso-stato--chiuso { color: var(--testo-muto); }

/* ---------- ARCHIVIO: filtri ---------- */
.alma-archivio { display: grid; grid-template-columns: 264px 1fr; gap: 40px; padding-bottom: 56px; }
.alma-filtri { display: flex; flex-direction: column; gap: 26px; align-self: start; }
.alma-filtro + .alma-filtro { padding-top: 22px; border-top: 1px solid var(--bordo); }
.alma-filtro__titolo {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--testo-muto);
	margin: 0 0 10px;
}
.alma-filtro__lista { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.alma-filtro__voce {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--raggio);
	font-size: 15px;
	color: var(--testo);
}
.alma-filtro__voce:hover { background: var(--beige); color: var(--testo); }
.alma-filtro__voce span { font-size: 13px; color: var(--testo-muto); }
/* La voce attiva è piena, non solo grassetto: si deve vedere da
   lontano quale filtro sta restringendo l'elenco. */
.alma-filtro__voce--attiva { background: var(--blu); color: var(--bianco); font-weight: 600; }
.alma-filtro__voce--attiva:hover { background: var(--blu); color: var(--bianco); }
.alma-filtro__voce--attiva span { color: var(--blu-chiaro); }
.alma-filtro__voce--tenue { background: var(--pill-blu); color: var(--blu); font-weight: 600; }
.alma-filtro__voce--tenue:hover { background: var(--pill-blu); color: var(--blu); }
.alma-filtro__voce--tenue span { color: var(--blu); }
.alma-filtro__voce--area { padding: 8px 12px; font-size: 14.5px; }
.alma-filtro__pallino { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.alma-filtro__voce--area > span:first-child { display: flex; align-items: center; gap: 9px; color: inherit; font-size: inherit; }

/* ---------- ARCHIVIO: barra strumenti ---------- */
.alma-risultati { display: flex; flex-direction: column; gap: 18px; }
.alma-strumenti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bordo);
}
.alma-strumenti__sinistra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.alma-conteggio-risultati { font-family: var(--font-titoli); font-size: 16px; font-weight: 600; color: var(--blu-profondo); }
.alma-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px;
	background: var(--pill-blu);
	border-radius: var(--raggio-pill);
	font-size: 13px;
	color: var(--blu);
}
.alma-chip svg { width: 12px; height: 12px; }
.alma-azzera { font-size: 13.5px; }
.alma-vuoto { padding: 40px 0; font-size: 16px; color: var(--testo-muto); }

/* ---------- SCHEDA CORSO: pagina singola ---------- */
.alma-corso-testata { background: var(--beige); border-bottom: 1px solid var(--bordo); padding-top: 34px; padding-bottom: 40px; }
.alma-corso-testata__griglia { display: grid; grid-template-columns: 1fr 380px; gap: 48px; }
.alma-corso-badge { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.alma-corso-testata h1 { font-size: 44px; line-height: 1.06; margin: 0 0 20px; }

/* Il marchio dell'ateneo che rilascia il titolo, accanto alla
   dicitura che spiega che cosa rilascia. */
.alma-attribuzione {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	align-self: flex-start;
}
.alma-attribuzione span { font-size: 15px; line-height: 1.5; color: var(--testo-medio); }
.alma-attribuzione img { display: block; height: auto; width: var(--logo-ateneo-scheda, 97px); }

.alma-corso-abstract-grande { font-size: 18.5px; line-height: 1.55; color: var(--testo-medio); margin: 0 0 26px; }
.alma-corso-dati { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alma-dato { padding: 15px 18px; }
.alma-dato__etichetta {
	display: block;
	font-family: var(--font-titoli);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--testo-muto);
	margin-bottom: 4px;
}
.alma-dato__valore { font-family: var(--font-titoli); font-size: 21px; font-weight: 700; color: var(--blu-profondo); }

.alma-corso-corpo { display: grid; grid-template-columns: 1fr 340px; gap: 56px; padding-top: 44px; padding-bottom: 56px; }
/* Niente limite in caratteri qui: la colonna e' gia' delimitata
   dalla griglia, e un secondo limite lasciava mezza pagina vuota
   accanto al testo. Il ritmo di lettura lo danno la misura della
   colonna e l'interlinea, non un tetto arbitrario. */
.alma-corso-main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.alma-blocco h2 { font-size: 26px; margin: 0 0 12px; }
.alma-blocco p { font-size: 16.5px; line-height: 1.7; }
.alma-tag { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 12px; }
.alma-tag li { padding: 7px 13px; background: var(--beige); border-radius: var(--raggio-pill); font-size: 14.5px; }

.alma-piano { display: flex; flex-direction: column; gap: 1px; background: var(--bordo); border: 1px solid var(--bordo); list-style: none; }
.alma-piano li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	background: var(--bianco);
}
.alma-piano__nome { font-family: var(--font-titoli); font-size: 15.5px; font-weight: 600; color: var(--blu-profondo); }
.alma-piano__cfu { font-size: 14px; color: var(--testo-muto); }

/* Chi rilascia il titolo: blocco esplicito, non una nota a piè. */
.alma-rilascio { padding: 22px 26px; background: var(--beige); border-left: 3px solid var(--blu); }
.alma-rilascio h2 { font-size: 20px; margin: 0 0 14px; }
.alma-rilascio__riga { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.alma-rilascio__logo { background: var(--bianco); border: 1px solid var(--bordo); padding: 12px 16px; flex-shrink: 0; }
.alma-rilascio__logo img { display: block; height: auto; width: var(--logo-ateneo-scheda, 97px); }
.alma-rilascio p { font-size: 15.5px; line-height: 1.6; margin: 0; }
.alma-rilascio__link { font-family: var(--font-titoli); font-size: 14.5px; font-weight: 600; }

.alma-corso-lato { display: flex; flex-direction: column; gap: 22px; align-self: start; }
.alma-box { border: 1px solid var(--bordo); padding: 22px; }
.alma-box__etichetta {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--testo-muto);
	margin: 0 0 14px;
}
.alma-box__lista { display: flex; flex-direction: column; gap: 12px; list-style: none; font-size: 15.5px; line-height: 1.45; }
.alma-box--scuro { background: var(--blu-profondo); color: var(--bianco); border: none; }
.alma-box--scuro h3 { font-size: 17px; color: var(--bianco); margin: 0 0 8px; }
.alma-box--scuro p { font-size: 14.5px; line-height: 1.6; color: var(--blu-chiaro); margin: 0 0 14px; }

.alma-azione-box { align-self: start; }
.alma-azione-box h2 { font-size: 20px; margin: 0 0 6px; }
.alma-azione-box__sub { font-size: 14.5px; line-height: 1.55; color: var(--testo-muto); margin: 0 0 18px; }
.alma-telefono { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.alma-telefono span { display: block; font-size: 13.5px; color: var(--testo-medio); margin-bottom: 2px; }
.alma-telefono a { font-family: var(--font-titoli); font-size: 20px; font-weight: 700; }

.alma-affini { padding-top: 40px; padding-bottom: 56px; border-top: 1px solid var(--bordo); }
.alma-affini h2 { font-size: 26px; margin: 0 0 20px; }

/* ---------- PRODOTTI ---------- */
.alma-prodotti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.alma-prodotto { display: flex; flex-direction: column; border: 1px solid var(--bordo); }
.alma-prodotto__figura { position: relative; margin: 0; }
.alma-prodotto__figura img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-bottom: 1px solid var(--bordo);
}
.alma-prodotto__badge {
	position: absolute;
	top: 11px; left: 11px;
	padding: 3px 9px;
	font-family: var(--font-titoli);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bianco);
	background: var(--rosso);
	border-radius: var(--raggio-pill);
}
.alma-prodotto__badge--gratis { background: var(--verde); }
.alma-prodotto__corpo { display: flex; flex-direction: column; gap: 9px; padding: 18px; flex-grow: 1; }
.alma-prodotto__corpo .alma-pill { align-self: flex-start; font-size: 10.5px; }
.alma-prodotto h3 { font-size: 16.5px; margin: 0; }
.alma-prodotto h3 a { color: var(--blu-profondo); }
.alma-prodotto h3 a:hover { color: var(--blu); }
.alma-prodotto__descrizione { font-size: 14px; line-height: 1.5; color: var(--testo-muto); margin: 0; }
.alma-prodotto__piede {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
}
.alma-prezzo { font-family: var(--font-titoli); font-size: 25px; font-weight: 700; color: var(--blu-profondo); }
.alma-prezzo--gratis { color: var(--verde-scuro); }
.alma-prezzo del { font-size: 16px; color: var(--testo-muto); font-weight: 400; margin-right: 6px; }
.alma-prezzo ins { text-decoration: none; }
.alma-prodotto__piede .alma-bottone { padding: 10px 16px; font-size: 14px; }

/* ---------- CONTENUTO EDITORIALE ---------- */
/* Le pagine che il cliente scrive dal pannello passano di qui:
   deve poter impaginare senza chiedere a noi. */
.alma-contenuto { max-width: 68ch; font-size: 16.5px; line-height: 1.7; }
.alma-contenuto h2 { font-size: 26px; margin: 34px 0 12px; }
.alma-contenuto h3 { font-size: 20px; margin: 28px 0 10px; }
.alma-contenuto > *:first-child { margin-top: 0; }
.alma-contenuto ul, .alma-contenuto ol { margin: 0 0 1em; padding-left: 1.4em; }
.alma-contenuto li { margin-bottom: 0.4em; }
.alma-contenuto img { height: auto; margin: 20px 0; }
.alma-contenuto blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--blu);
	color: var(--testo-medio);
}
.alma-contenuto table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.alma-contenuto th, .alma-contenuto td { padding: 10px 12px; border: 1px solid var(--bordo); text-align: left; }
.alma-contenuto th { background: var(--beige); font-family: var(--font-titoli); font-weight: 600; }
/* Una tabella larga scorre dentro di sé, non trascina la pagina. */
.alma-tabella-scorrevole { overflow-x: auto; }

.alma-paginazione { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; list-style: none; }
.alma-paginazione a, .alma-paginazione span {
	display: inline-block;
	padding: 9px 14px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	font-family: var(--font-titoli);
	font-size: 14px;
	font-weight: 600;
}
.alma-paginazione .current { background: var(--blu); border-color: var(--blu); color: var(--bianco); }

/* ============================================================
   Contenimento del contenuto migrato

   I testi arrivano da anni di Elementor e di editor diversi:
   contengono immagini con larghezze fisse, icone SVG senza
   dimensioni e tabelle piu' larghe della colonna. Senza queste
   regole sfondano il layout, e non possiamo riscriverli tutti
   a mano: sono 83 pagine e 46 corsi.
   ============================================================ */

/* La colonna del testo non deve scendere sotto una larghezza
   leggibile, ma la regola vale solo dove c'e' spazio per due
   colonne: sotto quella soglia responsive.css passa a una sola,
   e un minimo di 300px sfonderebbe lo schermo del telefono. */
@media (min-width: 1201px) {
	.alma-corso-testata__griglia { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
	/* La colonna del testo si ferma dove la riga resta leggibile,
	   invece di allargarsi fino al bordo. Cosi' il limite non
	   serve sui paragrafi, dove lasciava un vuoto dentro la
	   colonna oltre a quello accanto alla laterale. Le misure sono
	   in pixel e non in caratteri: "74ch" con questo carattere,
	   che e' stretto, dava una colonna piu' magra della laterale. */
	.alma-corso-corpo { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
}
.alma-corso-testata__griglia > *,
.alma-corso-corpo > * { min-width: 0; }

/* Le celle dei dati non possono restringersi sotto il contenuto. */
.alma-corso-dati { grid-auto-rows: minmax(64px, auto); }
.alma-dato { min-width: 0; overflow-wrap: break-word; }
.alma-dato__valore { display: block; line-height: 1.25; }

/* Immagini e SVG del contenuto: mai piu' larghi della colonna.
   Un SVG senza width/height si disegna alla sua dimensione
   intrinseca, che puo' essere enorme. */
.alma-contenuto img,
.alma-contenuto svg,
.alma-contenuto video,
.alma-contenuto iframe {
	max-width: 100%;
	height: auto;
}
.alma-contenuto svg { max-height: 140px; max-width: 140px; }

/* Le icone dentro gli elenchi restano icone: il limite generale
   sopra le lascerebbe crescere fino alla larghezza della colonna. */
.alma-contenuto li svg,
.alma-contenuto li img {
	max-width: 1.4em;
	max-height: 1.4em;
	vertical-align: -0.15em;
}

/* I loghi dentro il testo di un corso: riportati a una misura
   ragionevole. Nel contenuto migrato arrivano a 496px, che dentro
   una colonna di lettura sono fuori scala e spezzano il ritmo. */
.alma-contenuto img[src*="logo"],
.alma-contenuto img[src*="Logo"],
.alma-contenuto img[src*="unipegaso"],
.alma-contenuto img[src*="mercatorum"],
.alma-contenuto img[src*="raffaele"] {
	max-width: min(100%, 240px);
	height: auto;
}

/* Le immagini singole in un paragrafo restano dentro una misura
   leggibile: a piena colonna diventano banner involontari. */
.alma-contenuto p > img:only-child { max-width: min(100%, 420px); }

/* Parole lunghissime (URL incollati, codici) non allargano la
   colonna: vanno a capo dove capita, ma restano dentro. */
.alma-contenuto { overflow-wrap: break-word; }
.alma-contenuto pre { overflow-x: auto; max-width: 100%; }

/* Gli elenchi del contenuto migrato spesso arrivano senza
   pallini perche' Elementor li azzerava: li ripristiniamo. */
.alma-contenuto ul { list-style: disc; }
.alma-contenuto ol { list-style: decimal; }
.alma-contenuto ul ul { list-style: circle; }

/* Elementor lascia in giro contenitori a larghezza piena: dentro
   la nostra colonna devono stare al loro posto. */
.alma-contenuto .elementor-section,
.alma-contenuto .elementor-container,
.alma-contenuto .elementor-widget-wrap { max-width: 100%; }

/* ---------- Rifiniture della scheda prodotto ---------- */

/* Il bottone non va mai a capo: su due righe si disallinea dal
   prezzo accanto e la fila di card perde il filo comune. */
.alma-prodotto__piede .alma-bottone,
.alma-prodotto__piede .button {
	white-space: nowrap;
	flex-shrink: 0;
	align-self: center;
}

/* Il prezzo puo' contenere prezzo pieno barrato piu' scontato:
   li teniamo su una riga sola, allineati alla base. */
.alma-prezzo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	line-height: 1.1;
}
.alma-prezzo del { font-size: 15px; opacity: 0.75; }
.alma-prezzo .woocommerce-Price-amount { white-space: nowrap; }

/* La descrizione occupa sempre lo stesso numero di righe, cosi'
   i piedi delle card restano allineati fra loro. */
.alma-prodotto__descrizione {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Lo stesso per il titolo, che altrimenti su tre righe sposta
   in giu' tutto quello che segue nella card. */
.alma-prodotto h3 a,
.alma-corso-titolo a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* WooCommerce aggiunge i propri stili al bottone: li riportiamo
   ai nostri, altrimenti convivono due aspetti diversi. */
.alma-prodotto__piede .added_to_cart { display: none; }
.alma-prodotto__piede .button.loading { opacity: 0.7; }

/* ---------- Rifiniture delle aree ---------- */

/* Il filo giallo sopra una card bianca non si vede: per le aree
   che lo userebbero passiamo a una tonalita' piu' scura. */
.alma-area[style*="#f0d80c"],
.alma-area[style*="#b58a00"] { border-top-color: #b58a00 !important; }

/* Le card delle aree hanno tutte la stessa altezza minima: una
   sola riga di descrizione non deve accorciare la card rispetto
   alle vicine. */
.alma-area { min-height: 128px; }

/* Le certificazioni in home stanno su quattro colonne, ma solo
   dove c'e' spazio: uno stile scritto nell'attributo non si puo'
   sovrascrivere con le media query, e su telefono le quattro card
   diventavano illeggibili. */
@media (min-width: 1201px) {
	.alma-prodotti--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   Pagine ereditate da Elementor

   Il tema nuovo non ricarica il CSS di Elementor per le pagine
   che non lo usano piu': i contenuti restano validi ma perdono
   la loro impaginazione. Qui diamo un aspetto decoroso a quello
   che resta, senza toccare il testo salvato.
   ============================================================ */

/* Piu' loghi in fila, non uno sotto l'altro in colonna.
   Nel contenuto migrato sono spesso paragrafi consecutivi, e a
   piena larghezza diventano tre banner impilati. */
.alma-contenuto p:has(> img:only-child) { margin: 14px 0; }

/* Le liste che contengono solo un'icona e un recapito tornano a
   essere righe leggibili invece di un elenco puntato slegato. */
.alma-contenuto li > svg,
.alma-contenuto li > img,
.alma-contenuto li > a > svg {
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.15em;
	margin-right: 8px;
}

/* Icone social e widget: contenute a misura di icona, non di
   immagine. Una di queste occupava mezza pagina. */
.alma-contenuto a[href*="wa.me"] img,
.alma-contenuto a[href*="whatsapp"] img,
.alma-contenuto img[src*="whatsapp"],
.alma-contenuto img[src*="icon"],
.alma-contenuto img[alt*="icon" i] {
	max-width: 48px;
	height: auto;
}

/* I campi dei moduli ereditati prendono l'aspetto dei nostri:
   senza, restano quelli grezzi del browser. */
.alma-contenuto input[type="text"],
.alma-contenuto input[type="email"],
.alma-contenuto input[type="tel"],
.alma-contenuto input[type="number"],
.alma-contenuto select,
.alma-contenuto textarea {
	width: 100%;
	max-width: 420px;
	padding: 11px 13px;
	font-family: var(--font-testo);
	font-size: 15px;
	color: var(--testo);
	background: var(--bianco);
	border: 1px solid var(--bordo-campo);
	border-radius: var(--raggio);
}
.alma-contenuto label { display: inline-block; margin-bottom: 4px; }

/* Le scelte a pallino stanno sulla stessa riga della loro
   etichetta, non sopra di essa. */
.alma-contenuto input[type="radio"],
.alma-contenuto input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin-right: 8px;
	vertical-align: -3px;
	accent-color: var(--arancio);
}

/* I bottoni ereditati prendono l'aspetto dei nostri. */
.alma-contenuto button,
.alma-contenuto input[type="submit"] {
	padding: 13px 24px;
	font-family: var(--font-titoli);
	font-size: 15px;
	font-weight: 600;
	color: var(--bianco);
	background: var(--arancio);
	border: none;
	border-radius: var(--raggio);
	cursor: pointer;
}

/* Le domande frequenti in <details> diventano leggibili. */
.alma-contenuto details {
	padding: 12px 0;
	border-bottom: 1px solid var(--bordo);
}
.alma-contenuto summary {
	cursor: pointer;
	font-family: var(--font-titoli);
	font-weight: 600;
	color: var(--blu-profondo);
}

/* Le pillole delle convenzioni: erano bottoni Elementor, ora
   sono link nudi. Diamo loro la forma che avevano. */
.alma-contenuto a[href^="#"]:not(.alma-bottone) {
	display: inline-block;
	padding: 6px 13px;
	margin: 0 4px 6px 0;
	font-size: 14px;
	background: var(--beige);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-pill);
	color: var(--testo);
}
.alma-contenuto a[href^="#"]:not(.alma-bottone):hover { border-color: var(--blu); color: var(--blu); }

/* La fascia dei loghi ereditati: in fila, allineati fra loro. */
.alma-fascia-loghi {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px 40px;
	margin: 20px 0 26px;
	padding: 20px 24px;
	background: var(--beige);
	border: 1px solid var(--bordo);
}
.alma-fascia-loghi p { margin: 0; }
.alma-fascia-loghi img { max-width: 150px; height: auto; display: block; }

/* Le immagini molto grandi che nel contenuto fanno da icona:
   un simbolo WhatsApp a piena colonna non e' un'illustrazione,
   e' un'icona ingrandita per errore. Le riportiamo a misura. */
.alma-contenuto p > a > img:only-child,
.alma-contenuto p > img:only-child {
	max-width: min(100%, 380px);
}
.alma-contenuto a[href*="wa.me"] > img,
.alma-contenuto a[href*="whatsapp"] > img,
.alma-contenuto a[href*="tel:"] > img,
.alma-contenuto a[href*="mailto:"] > img {
	max-width: 44px;
	height: auto;
}

/* Gli elenchi di recapiti: via i pallini, l'icona fa gia' da
   segnaposto e il pallino accanto raddoppia il segnale. */
.alma-contenuto li:has(> svg:first-child),
.alma-contenuto li:has(> a > svg:first-child) {
	list-style: none;
	margin-left: -1.4em;
}

/* ============================================================
   Scheda corso — impaginazione del corpo

   Il testo di un corso e' lungo: paragrafi, elenchi di indirizzi,
   sbocchi, costi. Va letto, quindi ha bisogno di ritmo — non di
   una colonna stretta con mezza pagina bianca accanto.
   ============================================================ */

/* Dentro la scheda il contenuto riempie la sua colonna, ma le
   righe di testo no: su 877px una riga arriva a centocinque
   caratteri e l'occhio, tornando a capo, sbaglia riga. Il limite
   sta sui paragrafi, non sul contenitore, cosi' elenchi e tabelle
   restano liberi di occupare tutta la larghezza. */
/* Il testo riempie la colonna, ma il corpo cresce un filo: su una
   riga larga un carattere piu' grande tiene il numero di parole
   per riga entro il comodo, senza doverla restringere e lasciare
   un vuoto a destra. */
.alma-corso-main .alma-contenuto { max-width: none; }

/* I blocchi si distinguono fra loro con una riga sottile invece
   che con la sola distanza: su testi lunghi la distanza da sola
   non basta a dire dove finisce una sezione. */
.alma-corso-main > .alma-blocco + .alma-blocco {
	padding-top: 38px;
	border-top: 1px solid var(--bordo);
}

/* Il titolo di sezione porta un segno colorato a sinistra: da'
   un appiglio all'occhio che scorre un testo lungo, e distingue
   le sezioni della scheda dai titoli del testo migrato. */
.alma-blocco h2 {
	position: relative;
	padding-left: 16px;
	font-size: 27px;
	line-height: 1.2;
	margin: 0 0 18px;
}
.alma-blocco h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: 2px;
	background: var(--arancio);
}

/* I titoli dentro il testo migrato: spesso sono in maiuscolo e
   tutti della stessa misura. Li riportiamo alla scala del tema. */
.alma-corso-main .alma-contenuto h2 {
	font-size: 21px;
	margin: 34px 0 12px;
	padding-top: 22px;
	border-top: 1px solid var(--bordo);
	text-transform: none;
	color: var(--blu-profondo);
}
/* Il primo titolo del testo non ha nulla sopra da separare. */
.alma-corso-main .alma-contenuto > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.alma-corso-main .alma-contenuto h3 {
	font-size: 18.5px;
	margin: 24px 0 10px;
}

/* Gli elenchi di indirizzi e sbocchi: due colonne quando sono
   voci brevi, cosi' non diventano una lista lunghissima. */
.alma-corso-main .alma-contenuto ul {
	columns: 2;
	column-gap: 40px;
	padding-left: 1.2em;
}
.alma-corso-main .alma-contenuto ul li {
	break-inside: avoid;
	margin-bottom: 0.45em;
}
/* Un elenco di poche voci resta su una colonna: due colonne con
   tre voci lasciano un buco a destra. */
.alma-corso-main .alma-contenuto ul:has(li:nth-child(-n+3):last-child) { columns: 1; }

/* I paragrafi del corso respirano un po' di piu': l'interlinea
   larga e' quel che rende leggibile un testo lungo. */
.alma-corso-main .alma-contenuto p {
	font-size: 17.5px;
	line-height: 1.7;
	margin-bottom: 1.15em;
}
/* Dopo la ripulitura restano paragrafi e collegamenti vuoti dove
   stavano immagini e bottoni: senza questo lasciano buchi. */
.alma-corso-main .alma-contenuto p:empty,
.alma-corso-main .alma-contenuto h2:empty,
.alma-corso-main .alma-contenuto h3:empty { display: none; }

/* La colonna laterale resta in vista mentre si scorre: il modulo
   di contatto e la valutazione CFU sono le due azioni della
   pagina, e dopo duemila parole sarebbero fuori schermo. */
@media (min-width: 1201px) {
	.alma-corso-lato {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}
}

/* Il riquadro del titolo: il logo dell'Ateneo accanto alla
   dicitura, non a tutta larghezza. */
.alma-attribuzione { display: inline-flex; }

@media (max-width: 700px) {
	/* Su schermo stretto una colonna sola: due colonne di elenco
	   su 390px danno righe di tre parole. */
	.alma-corso-main .alma-contenuto ul { columns: 1; }
	.alma-blocco h2 { font-size: 22px; }
}

/* ---------- ARTICOLO ---------- */
.alma-articolo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
	padding-top: 36px;
	padding-bottom: 52px;
}
.alma-articolo__corpo { min-width: 0; }
.alma-articolo__lato { display: flex; flex-direction: column; gap: 18px; }

/* Il titolo di un articolo e' piu' lungo di quello di una pagina:
   senza un tetto la riga arriva a centoventi caratteri. */
.alma-articolo__titolo { max-width: 24ch; font-size: 38px; line-height: 1.15; }

.alma-articolo__dati {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--testo-muto);
}
.alma-articolo__dati .alma-pill { font-size: 11px; }
.alma-articolo__dati time,
.alma-articolo__dati span { display: inline-flex; align-items: center; }
/* Un punto separa data e durata: due valori accostati senza segno
   si leggono come uno solo. */
.alma-articolo__dati span::before { content: '·'; margin-right: 14px; color: var(--bordo); }

/* L'immagine di apertura non deve riempire la schermata: sopra i
   settecento pixel diventa un muro da scavalcare prima del testo. */
.alma-articolo__figura {
	margin: 0 0 32px;
	border-radius: var(--raggio);
	overflow: hidden;
}
.alma-articolo__figura img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

.alma-articolo__testo { max-width: none; font-size: 17px; line-height: 1.75; }
.alma-articolo__testo h2 {
	font-size: 25px;
	margin: 40px 0 14px;
	padding-top: 26px;
	border-top: 1px solid var(--bordo);
	color: var(--blu-profondo);
	scroll-margin-top: 24px;
}
.alma-articolo__testo h3 {
	font-size: 20px;
	margin: 32px 0 12px;
	color: var(--blu-profondo);
	scroll-margin-top: 24px;
}
.alma-articolo__testo > *:first-child { margin-top: 0; }

/* Le immagini dentro l'articolo si fermano prima di diventare un
   muro: un quadrato da mille pixel obbliga a scorrere mezza
   pagina per tornare al testo. Restano centrate, cosi' il taglio
   non sbilancia la colonna. */
.alma-articolo__testo figure.wp-block-image { margin: 26px auto; text-align: center; }
.alma-articolo__testo figure.wp-block-image img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	max-height: 420px;
	border-radius: var(--raggio);
}
.alma-articolo__testo figure.wp-block-image figcaption {
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--testo-muto);
}
.alma-articolo__testo h2:first-child { padding-top: 0; border-top: none; }
.alma-articolo__testo ul,
.alma-articolo__testo ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.alma-articolo__testo li { margin-bottom: 0.5em; }
/* Il bottone dentro il testo prende l'arancione del tema: quello
   dell'editor e' nero su grigio. */
.alma-articolo__testo .wp-block-button__link {
	display: inline-flex;
	padding: 13px 24px;
	background: var(--arancio);
	border-radius: var(--raggio);
	color: var(--bianco);
	font-family: var(--font-titoli);
	font-weight: 600;
	text-decoration: none;
}
.alma-articolo__testo .wp-block-button__link:hover { background: var(--arancio-scuro); color: var(--bianco); }

.alma-articolo__tag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--bordo);
}
.alma-articolo__tag span {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--testo-muto);
	margin-right: 4px;
}
.alma-articolo__tag a {
	padding: 4px 11px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-pill);
	font-size: 13.5px;
	color: var(--testo-medio);
}
.alma-articolo__tag a:hover { border-color: var(--blu); color: var(--blu); }

.alma-articolo__affini-titolo { font-size: 26px; margin: 0 0 22px; }

/* L'indice resta in vista mentre si scorre: su un articolo lungo
   serve proprio quando si e' gia' a meta' pagina. */
.alma-indice {
	position: sticky;
	top: 20px;
	padding: 20px 22px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-left: 3px solid var(--blu);
	border-radius: var(--raggio);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}
.alma-indice__titolo {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--blu);
	margin: 0 0 12px;
}
.alma-indice ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.alma-indice a { font-size: 14.5px; line-height: 1.4; color: var(--testo-medio); }
.alma-indice a:hover { color: var(--blu); }
/* Il rientro dice che il titolo appartiene a quello sopra. */
.alma-indice__voce--h3 { padding-left: 14px; }
.alma-indice__voce--h3 a { font-size: 13.5px; color: var(--testo-muto); }

/* ---------- PAGINA MAD ---------- */
.alma-mad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 44px;
	align-items: start;
	padding-top: 38px;
	padding-bottom: 56px;
}
.alma-mad__corpo { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.alma-mad__lato { display: flex; flex-direction: column; gap: 18px; }
.alma-mad__corpo > .alma-blocco + .alma-blocco {
	padding-top: 38px;
	border-top: 1px solid var(--bordo);
}

/* I due destinatari affiancati: sono alternative, non un elenco
   da leggere in ordine, e chi arriva qui si riconosce in uno dei
   due a colpo d'occhio. */
.alma-destinatari { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.alma-destinatario {
	display: flex;
	gap: 14px;
	padding: 20px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
}
.alma-destinatario__segno {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--pill-blu);
	color: var(--blu);
}
.alma-destinatario__segno svg { width: 20px; height: 20px; }
.alma-destinatario h3 { font-size: 16.5px; margin: 0 0 5px; color: var(--blu-profondo); }
.alma-destinatario p { font-size: 15px; line-height: 1.55; color: var(--testo-medio); margin: 0; }

/* I due tagli: la scelta fra 100 e 500 invii e' la prima
   decisione, quindi sta in chiaro e non dentro una frase. */
.alma-tagli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.alma-taglio {
	position: relative;
	padding: 26px 22px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	text-align: center;
}
/* Il taglio consigliato ha il bordo pieno: non un colore diverso,
   che sembrerebbe un'altra categoria di prodotto. */
.alma-taglio--scelto { border-color: var(--blu); border-width: 2px; padding: 25px 21px; }
.alma-taglio__bollo {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 12px;
	border-radius: var(--raggio-pill);
	background: var(--blu);
	color: var(--bianco);
	font-family: var(--font-titoli);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.alma-taglio__invii {
	font-family: var(--font-titoli);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--blu-profondo);
	margin: 0;
}
.alma-taglio__invii span { font-size: 15px; font-weight: 600; color: var(--testo-muto); }
.alma-taglio__prezzo {
	font-family: var(--font-titoli);
	font-size: 26px;
	font-weight: 700;
	color: var(--arancio);
	margin: 10px 0 6px;
}
.alma-taglio__nota { font-size: 14px; line-height: 1.5; color: var(--testo-muto); margin: 0; }

/* I passi numerati: qui l'ordine conta davvero - prima si paga,
   poi si mandano i documenti - quindi il numero e' informazione,
   non decorazione. */
.alma-passi { list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.alma-passi li {
	counter-increment: passo;
	position: relative;
	padding: 0 0 22px 52px;
}
.alma-passi li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--blu);
	color: var(--bianco);
	font-family: var(--font-titoli);
	font-size: 15px;
	font-weight: 700;
}
/* La riga che unisce i passi: dice che sono una sequenza, non
   quattro cose staccate. L'ultimo non ha nulla da collegare. */
.alma-passi li::after {
	content: '';
	position: absolute;
	left: 15.5px;
	top: 36px;
	bottom: 6px;
	width: 1px;
	background: var(--bordo);
}
.alma-passi li:last-child { padding-bottom: 0; }
.alma-passi li:last-child::after { display: none; }
.alma-passi h3 { font-size: 16.5px; margin: 5px 0 4px; color: var(--blu-profondo); }
.alma-passi p { font-size: 15.5px; line-height: 1.6; color: var(--testo-medio); margin: 0; }

.alma-conto {
	padding: 24px;
	background: var(--beige);
	border: 1px solid var(--bordo);
	border-left: 3px solid var(--blu);
	border-radius: var(--raggio);
}
.alma-conto dl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.alma-conto dt {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--testo-muto);
	margin: 0 0 3px;
}
.alma-conto dd { font-size: 16px; color: var(--testo); margin: 0; }
/* L'IBAN si copia a mano: cifre della stessa larghezza e un po'
   di respiro fra i gruppi lo rendono ricopiabile senza errori. */
.alma-conto__iban {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	font-size: 17px;
	font-weight: 600;
	overflow-wrap: break-word;
}
.alma-conto__invio {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--bordo);
	font-size: 15px;
	line-height: 1.55;
	color: var(--testo-medio);
}

/* ---------- PAGINA CONTATTI ---------- */
/* Le tre vie per scrivere, affiancate: chi ha fretta sceglie qui
   senza scorrere fino al modulo. Sono riquadri cliccabili per
   intero, non solo il numero: su un telefono il bersaglio piccolo
   si sbaglia. */
.alma-vie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.alma-via {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	color: var(--testo);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.alma-via:hover {
	border-color: var(--blu);
	box-shadow: 0 2px 14px rgba(27, 33, 80, 0.08);
	color: var(--testo);
}
.alma-via__icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--pill-blu);
	color: var(--blu);
	flex-shrink: 0;
}
.alma-via__icona svg { width: 21px; height: 21px; }
/* Il verde e' il colore con cui WhatsApp si riconosce: usarne un
   altro farebbe esitare prima di toccarlo. */
.alma-via--whatsapp .alma-via__icona { background: #e6f5ea; color: #128c4a; }
.alma-via--whatsapp .alma-via__icona svg { width: 23px; height: 23px; }
.alma-via--whatsapp:hover { border-color: #128c4a; }
.alma-via__testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.alma-via__testo strong {
	font-family: var(--font-titoli);
	font-size: 16.5px;
	font-weight: 600;
	color: var(--blu-profondo);
}
.alma-via__testo > span {
	font-size: 15px;
	color: var(--testo-medio);
	overflow-wrap: break-word;
}
.alma-via__nota {
	margin-top: auto;
	padding-top: 4px;
	font-size: 13px;
	color: var(--testo-muto);
}

/* Il modulo prende la parte larga: e' quello che si compila. */
.alma-contatti-corpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 36px;
	align-items: start;
	padding-top: 16px;
	padding-bottom: 48px;
}
.alma-contatti-corpo__lato { display: flex; flex-direction: column; gap: 16px; }

.alma-blocco-lato {
	padding: 20px 22px;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
}
.alma-blocco-lato__titolo {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--blu);
	margin: 0 0 10px;
}
.alma-blocco-lato__testo { font-size: 15.5px; line-height: 1.55; color: var(--testo-medio); margin: 0; }
.alma-blocco-lato__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-family: var(--font-titoli);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--blu);
}
.alma-blocco-lato__link svg { width: 15px; height: 15px; }
.alma-blocco-lato__link:hover { color: var(--arancio); }
/* L'avvertenza sul titolo di studio non e' un recapito: il fondo
   diverso la stacca dagli altri riquadri. */
.alma-blocco-lato--nota { background: var(--beige); }
.alma-blocco-lato--nota .alma-blocco-lato__titolo { color: var(--testo-muto); }
.alma-blocco-lato--nota .alma-blocco-lato__testo { font-size: 14.5px; }

.alma-social { display: flex; gap: 10px; }
.alma-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--bordo);
	border-radius: 50%;
	color: var(--blu);
}
.alma-social a:hover { background: var(--blu); border-color: var(--blu); color: var(--bianco); }
.alma-social svg { width: 19px; height: 19px; }

/* ---------- CONTATTI RAPIDI ---------- */
.alma-contatti-rapidi {
	border: 1px solid var(--bordo);
	border-left: 3px solid var(--blu);
	padding: 20px 22px;
}
.alma-contatti-rapidi__titolo {
	font-family: var(--font-titoli);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--blu);
	margin: 0 0 14px;
}
.alma-contatti-rapidi__lista {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.alma-contatti-rapidi a,
.alma-contatti-rapidi__voce {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--testo);
}
.alma-contatti-rapidi a:hover { color: var(--blu); }
/* L'icona sta ferma mentre il testo puo' andare a capo: senza
   flex-shrink si schiaccerebbe fino a sparire. */
.alma-contatti-rapidi svg {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	color: var(--blu);
}
.alma-contatti-rapidi__voce { color: var(--testo-medio); }

.alma-contatti-rapidi--scuro {
	background: var(--blu-profondo);
	border: none;
	color: var(--bianco);
}
.alma-contatti-rapidi--scuro .alma-contatti-rapidi__titolo { color: var(--giallo); }
.alma-contatti-rapidi--scuro a,
.alma-contatti-rapidi--scuro .alma-contatti-rapidi__voce { color: var(--bianco); }
.alma-contatti-rapidi--scuro a:hover { color: var(--giallo); }
.alma-contatti-rapidi--scuro svg { color: var(--giallo); }

/* ============================================================
   Contenitori Elementor senza il CSS di Elementor

   Le pagine costruite con Elementor conservano la loro struttura
   a contenitori flex, ma senza il foglio che li governa ogni
   colonna si stringe al contenuto minimo: il testo finisce in una
   striscia a sinistra e mezza pagina resta bianca.

   Qui ridiamo loro un comportamento sensato, senza reinstallare
   nulla e senza toccare il contenuto salvato.
   ============================================================ */

/* Le pagine Elementor usano tutta la colonna disponibile: il
   limite in caratteri serve a un testo scritto per essere letto
   di fila, non a una pagina impaginata a blocchi. */
.elementor-page .alma-contenuto { max-width: none; }

/* Il contenitore di primo livello e' una riga che riempie la
   larghezza; i figli si dividono lo spazio in parti uguali. */
.alma-contenuto .e-con,
.alma-contenuto .elementor-section,
.alma-contenuto .elementor-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px 36px;
	width: 100%;
	max-width: 100%;
	margin-bottom: 24px;
}

/* Un contenitore figlio e' una colonna: cresce fino a riempire
   lo spazio, ma non scende sotto una misura leggibile. Sotto i
   280px il testo va a capo ogni tre parole.

   Elementor imposta width e flex sui propri elementi con regole
   piu' specifiche delle nostre: senza !important le colonne
   restano alle larghezze che aveva calcolato lui, e una finisce
   larga meta' dell'altra. */
.alma-contenuto .e-child,
.alma-contenuto .e-con > .e-con,
.alma-contenuto .elementor-column,
.alma-contenuto .elementor-widget-wrap {
	flex: 1 1 300px !important;
	width: auto !important;
	min-width: 0;
	max-width: 100%;
}

/* Un contenitore con un figlio solo non ha colonne da dividere:
   occupa tutta la riga. */
.alma-contenuto .e-con > .e-child:only-child,
.alma-contenuto .e-con > .e-con:only-child,
.alma-contenuto .elementor-container > .elementor-column:only-child {
	flex-basis: 100% !important;
}

/* I widget stanno nel flusso normale: senza questo ereditano
   larghezze che Elementor calcolava con il proprio JavaScript. */
.alma-contenuto .elementor-widget,
.alma-contenuto .elementor-element {
	width: auto;
	max-width: 100%;
}
.alma-contenuto .elementor-widget-container { max-width: 100%; }

/* Le immagini dentro i widget riempiono la loro colonna invece
   di restare alla dimensione del file. */
.alma-contenuto .elementor-widget-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* I titoli dei widget prendono la scala tipografica del tema:
   arrivavano con le misure di Elementor, tutte uguali fra loro. */
.alma-contenuto .elementor-heading-title {
	font-family: var(--font-titoli);
	font-weight: 700;
	color: var(--blu-profondo);
	line-height: 1.2;
	margin: 0 0 12px;
}
.alma-contenuto h1.elementor-heading-title { font-size: 30px; }
.alma-contenuto h2.elementor-heading-title { font-size: 24px; }
.alma-contenuto h3.elementor-heading-title { font-size: 19px; }
.alma-contenuto h4.elementor-heading-title { font-size: 17px; }

/* Le tabelle prezzo di Elementor: senza il loro CSS diventano
   un elenco slegato. Le riportiamo a un riquadro leggibile. */
.alma-contenuto .elementor-widget-price-table {
	padding: 22px;
	background: var(--beige);
	border: 1px solid var(--bordo);
	border-top: 3px solid var(--blu);
}

@media (max-width: 900px) {
	/* Su schermo stretto una colonna sola: due colonne da 280px
	   non ci stanno affiancate. */
	.alma-contenuto .e-child,
	.alma-contenuto .elementor-column,
	.alma-contenuto .elementor-widget-wrap { flex-basis: 100%; }
	.alma-contenuto .e-con,
	.alma-contenuto .elementor-section,
	.alma-contenuto .elementor-container { gap: 20px; }
}

/* Le pagine impaginate a blocchi usano tutta la larghezza: il
   limite di 68 caratteri regola la lunghezza della riga in un
   testo scritto per essere letto di fila, e su una pagina con
   immagini e colonne lascia solo mezza pagina bianca.
   Il limite resta dove serve: sui paragrafi lunghi. */
.alma-contenuto--pagina { max-width: none; }
.alma-contenuto--pagina > p,
.alma-contenuto--pagina > ul,
.alma-contenuto--pagina > ol,
.alma-contenuto--pagina > blockquote { max-width: 72ch; }

/* Le righe di contenitori non lasciano buchi verticali: senza
   questo una colonna corta accanto a una lunga lascia un vuoto
   alto quanto la differenza, e la pagina sembra interrotta.
   Il margine fra righe consecutive basta a separarle. */
.alma-contenuto > .e-con + .e-con,
.alma-contenuto .e-con > .e-con + .e-con { margin-top: 8px; }

/* L'ultimo contenitore non aggiunge spazio in coda: il piede
   arriva subito dopo il contenuto. */
.alma-contenuto > .e-con:last-child,
.alma-contenuto > *:last-child { margin-bottom: 0; }

/* I widget vuoti — divisori senza contenuto, contenitori che
   Elementor riempiva via JavaScript — non occupano spazio. */
.alma-contenuto .elementor-widget-container:empty,
.alma-contenuto .e-con:empty,
.alma-contenuto .elementor-element:empty { display: none; }

/* Un'immagine sola in una riga sta alla sua misura, non stirata
   a tutta larghezza: uno striscione da 1024px ingrandito a 1300
   diventa sgranato. */
.alma-contenuto .e-con > .elementor-widget-image:only-child img,
.alma-contenuto .e-con > .e-child:only-child .elementor-widget-image img {
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}