/* ============================================================================
   MEEC — Sezioni delle pagine
   ----------------------------------------------------------------------------
   Le pagine sono fatte di blocchi del core di WordPress (Gruppo, Copertina,
   Colonne, Elenco, Dettagli, Query) con le classi qui sotto: il redattore
   modifica i testi in Gutenberg, l'aspetto lo decide il tema. Cambiando tema i
   contenuti restano leggibili, perche' sono blocchi standard.
   Misure dal Figma "Master MEEC" (DEF desktop 1440 / DEF mobile 393).
   ============================================================================ */

/* --- Modello "Pagina a sezioni": niente contenitori di GeneratePress ------- */
.meec-modello-sezioni .site.grid-container{max-width:none;padding:0;margin:0}
.meec-modello-sezioni .site-content{display:block;padding:0}
.meec-pagina > *{margin-block:0}

/* I Gruppi del core in layout "flow" danno ai figli un margine superiore
   (blockGap, 24px). Dentro griglie e colonne la spaziatura la decide gap:
   qui si azzera il margine, con due classi per battere la regola del core. */
.meec-pagina :is(.meec-griglia,.meec-caratteristiche,.meec-affiancati,.meec-invito,.meec-metriche__elenco,
.meec-card,.meec-caratteristica,.meec-metriche__voce,.meec-notizia,.meec-notizia__corpo,
.meec-domande,.meec-hero__testo,.meec-sezione__testata,.meec-affiancati__testo) > *{margin-block:0}
.meec-pagina .meec-sezione__testata{display:flex;flex-direction:column;gap:var(--meec-sp-3)}
.meec-pagina .meec-sezione__testata--centro{align-items:center}
/* Introduzione centrata: le righe si bilanciano invece di lasciare un moncone
   in fondo (l'ultima riga della FAQ era 143px su 757). Vale solo per le
   testate centrate: a bandiera il ritorno a capo naturale va bene. */
.meec-sezione__testata--centro > .meec-sottotitolo{text-wrap:balance}
.meec-pagina .meec-affiancati__testo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--meec-sp-3)}
.meec-pagina .meec-affiancati__testo > .meec-lista-spunte{margin-top:var(--meec-sp-2)}
/* Figma: 24px fra testo e elenco (16 di gap della colonna + 8): il margine del sottotitolo qui non serve */
.meec-pagina .meec-affiancati__testo > .meec-sottotitolo:has(+ .meec-lista-spunte){margin-bottom:0}
.meec-pagina .meec-affiancati__testo > .wp-block-buttons{margin-top:var(--meec-sp-7)}
.meec-pagina .meec-contenitore > :first-child{margin-top:0}
.meec-pagina .meec-contenitore > :last-child{margin-bottom:0}

/* --- Icone decorative come maschera --------------------------------------
   Classe meec-ico-<nome> sull'elemento (card, voce): l'icona e' un ::before,
   quindi nel contenuto non c'e' markup SVG da mantenere. File in assets/icone/. */
[class*="meec-ico-"]::before{
	content:"";display:block;flex:none;
	width:var(--_ico-misura,4rem);height:var(--_ico-misura,4rem);
	background:var(--_ico-colore,var(--meec-testo-accento));
	-webkit-mask:var(--_ico) center/contain no-repeat;mask:var(--_ico) center/contain no-repeat;
}
.meec-ico-euro{--_ico:url("icone/euro.svg?v=20260916")}
.meec-ico-premio{--_ico:url("icone/premio.svg?v=20260916")}
.meec-ico-blended{--_ico:url("icone/blended.svg?v=20260916")}
.meec-ico-auto-elettrica{--_ico:url("icone/auto-elettrica.svg?v=20260916")}
.meec-ico-riciclo{--_ico:url("icone/riciclo.svg")}
.meec-ico-laboratorio{--_ico:url("icone/laboratorio.svg")}
.meec-ico-rete{--_ico:url("icone/rete.svg?v=20260916")}
.meec-ico-crescita{--_ico:url("icone/crescita.svg?v=20260916")}
.meec-ico-calendario{--_ico:url("icone/calendario.svg?v=20260916")}
.meec-ico-laurea{--_ico:url("icone/laurea.svg?v=20260916")}
.meec-ico-energia{--_ico:url("icone/energia.svg?v=20260916")}
.meec-ico-norma{--_ico:url("icone/norma.svg")}
.meec-ico-business{--_ico:url("icone/business.svg")}
.meec-ico-logistica{--_ico:url("icone/logistica.svg?v=20260916")}
.meec-ico-persone{--_ico:url("icone/persone.svg")}
.meec-ico-batteria{--_ico:url("icone/batteria.svg")}
.meec-ico-dati{--_ico:url("icone/dati.svg")}
.meec-ico-lezione{--_ico:url("icone/lezione.svg")}
.meec-ico-progetto{--_ico:url("icone/progetto.svg?v=20260916")}
.meec-ico-tirocinio{--_ico:url("icone/tirocinio.svg?v=20260916")}
.meec-ico-domanda{--_ico:url("icone/domanda.svg")}
.meec-ico-copia{--_ico:url("icone/copia.svg")}
.meec-ico-email{--_ico:url("icone/email.svg?v=20260916")}
.meec-ico-luogo{--_ico:url("icone/luogo.svg?v=20260916")}
.meec-ico-telefono{--_ico:url("icone/telefono.svg?v=20260916")}
.meec-ico-orologio{--_ico:url("icone/orologio.svg?v=20260916")}
.meec-ico-x{--_ico:url("icone/x.svg")}
.meec-ico-cerca{--_ico:url("icone/cerca.svg")}
.meec-ico-facebook{--_ico:url("icone/facebook.svg")}
.meec-ico-linkedin{--_ico:url("icone/linkedin.svg")}
.meec-ico-freccia-sinistra{--_ico:url("icone/freccia-sinistra.svg")}
.meec-ico-freccia-destra{--_ico:url("icone/freccia-destra.svg")}
/* Icone del Figma (16/09/2026, nodi 985/1005/1011): tratto 2 nella cassa nativa 80 o 64,
   colore Text-accent su bianco, bianco su verde/scuro. Le maschere scalano la cassa intera,
   quindi il margine interno e' quello del Figma. */
.meec-ico-circolare{--_ico:url("icone/circolare.svg?v=20260916")}
.meec-ico-stretta-di-mano{--_ico:url("icone/stretta-di-mano.svg?v=20260916")}
.meec-ico-esperienze{--_ico:url("icone/esperienze.svg?v=20260916")}
.meec-ico-scambio{--_ico:url("icone/scambio.svg?v=20260916")}
.meec-ico-multidisciplinare{--_ico:url("icone/multidisciplinare.svg?v=20260916")}
.meec-ico-campus{--_ico:url("icone/campus.svg?v=20260916")}
.meec-ico-verifica{--_ico:url("icone/verifica.svg?v=20260916")}
/* 22/09: icone dal Figma per Programma («Dall'esperienza al progetto», 899:23004)
   e per i quattro passi ESSE3 di Ammissione (708:85719). Tutte 64, tratto 2. */
.meec-ico-lampadina{--_ico:url("icone/lampadina.svg")}
.meec-ico-accedi{--_ico:url("icone/accedi.svg")}
.meec-ico-documento-verificato{--_ico:url("icone/documento-verificato.svg")}
.meec-ico-carica{--_ico:url("icone/carica.svg")}
.meec-ico-fatto{--_ico:url("icone/fatto.svg")}
.meec-ico-segnalibro{--_ico:url("icone/segnalibro.svg?v=20260916")}
.meec-ico-confronto{--_ico:url("icone/confronto.svg?v=20260916")}
/* 29/09: fascia «Investi nel tuo futuro» riscritta dal prof. Cappuccino (Figma 558:2652,
   cassa 80, tratto 2). Le altre tre icone della fascia sono segnalibro, campus e rete. */
.meec-ico-ingranaggio{--_ico:url("icone/ingranaggio.svg")}
.meec-ico-riquadri{--_ico:url("icone/riquadri.svg")}
.meec-ico-nodi{--_ico:url("icone/nodi.svg")}
/* Home (Figma 558:2573, annotazione «Icone > W80 H80»): le card della fascia a 3 e di
   «Ambiti professionali» hanno la cassa da 80, non 64 come le card di Il Master e Contatti. */
.home .meec-card{--_ico-misura:5rem}
.meec-card--evidenza,
.meec-sezione--scura{--_ico-colore:var(--meec-testo-invertito)}
@media (forced-colors:active){[class*="meec-ico-"]::before{background:CanvasText}}

/* --- Hero (Figma: "Hero", 1440x802; mobile "Section" 64/16) --------------- */
/* Dal 22/09 l'hero arriva al bordo inferiore della finestra (richiesta
   Palermo «video full screen», precisata da Mariano): altezza = finestra meno
   barra admin, intestazione e barra del bando. Le ultime due le misura
   navigazione.js in --meec-hero-sopra; il ripiego senza JS e' l'intestazione
   estesa piu' una riga di avviso. dvh segue la barra degli indirizzi dei
   telefoni; 100vh e' il ripiego per i browser che non lo conoscono. Il
   contenuto non si taglia mai: e' un min-height, se il testo e' piu' alto la
   fascia cresce (telefoni bassi in orizzontale). Il video del blocco Copertina
   ha gia' object-fit:cover a tutta cassa dal core. La fascia metriche segue
   nel flusso senza spazi: si vede solo scorrendo. */
.meec-hero.wp-block-cover{
	min-height:calc(100vh - var(--meec-barra-admin) - var(--meec-hero-sopra,calc(var(--meec-testata-h-estesa) + 3.75rem)));
	min-height:calc(100dvh - var(--meec-barra-admin) - var(--meec-hero-sopra,calc(var(--meec-testata-h-estesa) + 3.75rem)));
	padding:var(--meec-sp-13) 0;
	align-items:center;
	color:var(--meec-testo-invertito);
}
/* Velo dell'hero (22/09, richiesta di Mariano): via la tinta verde al 60% del
   blocco Copertina (dimRatio 0 nel blocco, come nel Figma 558:2588 che non ha
   alcun velo). Il testo bianco pero' non regge sul video: misurato sul
   video del 22/09 (video_home_sito.mp4, 47 s, riprese diurne) la luminanza
   locale massima sotto la zona del testo arriva a 0,99 nei primi 10 secondi
   (bianco pieno: contrasto 1,05:1). Per stare sopra il 4,5:1 di WCAG 1.4.3
   serve un nero all'82% dietro il testo (0,99 x 0,18 = 0,18 -> 4,6:1); col
   video precedente bastava il 72%. Quindi: scrim NEUTRO, solo
   sulla colonna del testo (che finisce al 68% della finestra), che sfuma a
   zero verso destra dove sta la barca. Il core mette opacity:0 sulla classe
   has-background-dim-0 con (0,3,0): qui si riprende lo span come supporto
   dello scrim, con una specificita' in piu'. */
.meec-hero.wp-block-cover .wp-block-cover__background.has-background-dim{
	opacity:1;
	background:linear-gradient(90deg,rgb(0 0 0/.82) 0 62%,rgb(0 0 0/0) 92%);
}
@media (max-width:56rem){
	/* Su una colonna il testo occupa tutta la larghezza: scrim pieno. */
	.meec-hero.wp-block-cover .wp-block-cover__background.has-background-dim{background:rgb(0 0 0/.82)}
}
.meec-hero .wp-block-cover__inner-container{
	width:100%;
	max-width:calc(var(--meec-contenitore) + 2 * var(--meec-margine));
	padding-inline:var(--meec-margine);
	box-sizing:border-box;
	color:inherit;
}
.meec-hero__testo{                                        /* 966px, 24 fra badge, titolo e testo */
	max-width:60.375rem;
	display:flex;flex-direction:column;align-items:flex-start;gap:var(--meec-sp-4);
}
.meec-hero h1{color:inherit}
.meec-hero .meec-hero__sottotitolo{
	max-width:57.125rem;                                   /* 914px */
	font-size:var(--meec-testo-xl);line-height:1.5;
}
.meec-pagina .meec-hero__testo > .wp-block-buttons{margin-top:var(--meec-sp-2)}   /* 32px dal testo */
.meec-hero a:not(.wp-block-button__link):not(.meec-bottone){color:inherit}

/* Pulsantiere: taglia XL (48px) come nell'hero del Figma. */
.meec-bottoni--xl .wp-block-button__link{min-height:3rem;padding:calc(.75rem - 1px) calc(1.5rem - 1px)}
/* Il core disegna lo stile "contorno" con bordo da 2px: il Figma usa 1px. */
.wp-block-button.is-style-outline > .wp-block-button__link{border-width:1px;padding:calc(.625rem - 1px) calc(1rem - 1px)}
.meec-bottoni--xl .wp-block-button.is-style-outline > .wp-block-button__link{padding:calc(.75rem - 1px) calc(1.5rem - 1px)}
.wp-block-buttons.meec-bottoni{gap:var(--meec-sp-4)}
.meec-su-scuro .is-style-outline > .wp-block-button__link,
.meec-hero .is-style-outline > .wp-block-button__link{--_testo:var(--meec-testo-accento)}

/* --- Fascia metriche (Figma: "Metrics section", 72px, divisori bianchi) ---- */
.meec-metriche{
	/* Luci che si muovono: vedi "Fascia metriche: luce in movimento" in fondo al file. */
	--_verde-base:#0a5c2c;
	--_luce-gialla:90 125 40;    /* #5a7d28: luminanza 0,17, bianco 4,8:1 — TETTO, non alzare */
	--_luce-verde:43 130 64;     /* #2b8240: luminanza 0,17, bianco 4,8:1 — TETTO, non alzare */
	--_ombra:0 38 17;            /* #002611: l'escursione si allarga verso il buio, dove
	                                il contrasto col bianco non e' un vincolo */
	position:relative;isolation:isolate;overflow:hidden;
	background:var(--_verde-base) linear-gradient(135deg,#006b30 0%,#16692e 55%,#2c762b 100%);
	color:var(--meec-testo-invertito);
	padding-block:var(--meec-sp-10);
}
.meec-metriche__elenco{
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
	margin:0;padding:0;list-style:none;
}
.meec-metriche__voce{
	display:flex;flex-direction:column;align-items:center;gap:calc(var(--meec-sp-2) + var(--meec-sp-1));   /* 12px */
	text-align:center;
	padding-inline:var(--meec-sp-2);
	margin:0;
}
.meec-metriche__voce + .meec-metriche__voce{border-left:1px solid currentColor}
.meec-metriche__numero{
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-display);line-height:1.2;
	margin:0;
}
.meec-metriche__etichetta{
	font-size:var(--meec-testo-lg);font-weight:500;line-height:1.556;
	text-transform:uppercase;margin:0;
}

/* --- Caratteristiche su fondo scuro (Figma: 6 voci, icona 80px) ------------ */
.meec-caratteristiche{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));   /* 3 colonne a 1296 */
	gap:var(--meec-sp-9) var(--meec-sp-5);
	margin:0;padding:0;list-style:none;
}
/* Tre voci (Network «Il mondo reale»): tre colonne da 56rem, poi una, come .meec-griglia--3 (U3, 30/09/2026). */
@media (min-width:56rem) and (max-width:72rem){
	.meec-caratteristiche:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:55.99rem){
	.meec-caratteristiche:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}
}
.meec-caratteristica{
	display:flex;flex-direction:column;align-items:center;gap:var(--meec-sp-3);
	text-align:center;margin:0;
	--_ico-misura:5rem;
}
.meec-caratteristica h3{
	font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5;
	margin:0;
}
.meec-caratteristica p{margin:0}
.meec-pagina .meec-caratteristica > h3 + p{margin-top:calc(var(--meec-sp-2) - var(--meec-sp-3))}   /* 8px */

/* --- Due colonne testo + immagine (Figma: 600 + 96 + 600) ---------------- */
.meec-affiancati{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:var(--meec-sp-7) var(--meec-sp-13);
	align-items:center;
}
.meec-affiancati__testo > :last-child{margin-bottom:0}
.meec-affiancati__testo .meec-sottotitolo{font-size:var(--meec-testo-lg);line-height:1.556;margin-bottom:var(--meec-sp-4)}
.meec-affiancati .wp-block-buttons{margin-top:var(--meec-sp-9)}
.meec-affiancati__immagine,
.meec-affiancati .wp-block-image img{
	width:100%;aspect-ratio:600/512;
	border-radius:var(--meec-raggio-l);
	object-fit:cover;display:block;
}
.meec-affiancati .wp-block-image{margin:0}
/* Spazio per un'immagine non ancora caricata: grigio come nel Figma,
   dichiarato ai lettori di schermo come decorativo (vuoto). */
.meec-segnaposto-immagine{background:var(--wp--custom--colore--neutri--300)}

/* --- Elenco con spunte (Figma: "Check item": cerchio 28 magenta, spunta bianca) --
   Cerchio = colore del token (accento); la spunta bianca e' un'immagine di
   sfondo sopra. Righe a 24px, 12px fra cerchio e testo, testo 18/28 secondario. */
.meec-lista-spunte{
	list-style:none;margin:var(--meec-sp-4) 0 0;padding:0 0 0 var(--meec-sp-3);
	display:grid;gap:var(--meec-sp-4);
}
/* La voce NON e' un contenitore flex: con display:flex ogni <strong> dentro la
   voce diventa un elemento flex a se', e la frase si spezza in colonne
   ("Comprendere" | "veicoli, batterie e tecnologie" | "per la mobilita'..."),
   come si vedeva in Obiettivi formativi e nei Laboratori. Il segno resta a
   sinistra col posizionamento assoluto e il testo resta una riga continua.
   display non si tocca: la voce resta list-item, cosi' il contatore implicito
   list-item funziona (vedi la variante numerata). */
.meec-lista-spunte li{
	position:relative;
	padding-left:calc(1.75rem + var(--meec-sp-2) + var(--meec-sp-1));   /* segno 28 + 12 */
	font-size:var(--meec-testo-lg);line-height:1.556;color:var(--meec-testo-secondario);
}
.meec-lista-spunte li::before{
	content:"";position:absolute;left:0;top:0;
	width:1.75rem;height:1.75rem;border-radius:50%;
	background:var(--meec-testo-accento) url("icone/spunta-bianca.svg") center/100% no-repeat;
}
@media (forced-colors:active){.meec-lista-spunte li::before{forced-color-adjust:none}}
/* Variante a TRATTO (richiesta Palermo 22/09 per «Esperienze concrete», Programma):
   stesso segno della Premialita' — spunta magenta senza disco — ma con le misure
   correnti dell'elenco (cassa 28, testo 18). La classe e' sul blocco. */
.meec-lista-spunte--tratto li::before{
	border-radius:0;
	background:var(--meec-testo-accento);
	-webkit-mask:url("icone/spunta.svg") center/contain no-repeat;
	mask:url("icone/spunta.svg") center/contain no-repeat;
}
@media (forced-colors:active){.meec-lista-spunte--tratto li::before{background:CanvasText}}

/* --- Griglie di card ----------------------------------------------------- */
.meec-pagina .meec-griglia--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr))}   /* 2 colonne da 636 */
.meec-card{gap:calc(var(--meec-sp-3) + var(--meec-sp-1))}     /* 20px fra icona e testi */
.meec-card > *{margin:0}
.meec-card h3{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5}
.meec-card p{color:var(--meec-testo-secondario)}
/* L'occhiello della card resta magenta come ovunque (Figma 899:23004, «Project
   work» in Text-accent): .meec-card p qui sopra lo spegneva in grigio. */
.meec-card > .meec-occhiello{color:var(--meec-testo-accento)}
/* Stesso problema per il numero grande delle card «posti» di Ammissione: il
   Figma (708:85706) lo vuole in Text-primary, .meec-card p lo faceva grigio
   (richiesta Palermo 22/09). */
.meec-card > .meec-cifra__valore{color:var(--meec-testo-primario)}
.meec-card--verde > .meec-occhiello{color:var(--meec-testo-invertito)}
.meec-card--evidenza p{color:var(--meec-testo-invertito)}
.meec-card .meec-nota{font-size:var(--meec-testo-sm);line-height:1.43}
.meec-pagina .meec-card > h3 + p{margin-top:calc(var(--meec-sp-2) - var(--meec-sp-3) - var(--meec-sp-1))}  /* 8px tra titolo e testo */
.meec-pagina .meec-card > p + p{margin-top:calc(var(--meec-sp-2) - var(--meec-sp-3) - var(--meec-sp-1))}

/* --- Notizie (Figma: "Blog post card" 416, immagine 416x240) -------------- */
.meec-notizie .wp-block-post-template{
	display:grid;gap:var(--meec-sp-7) var(--meec-sp-4);
	grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
	margin:0;padding:0;list-style:none;
}
.meec-notizie .wp-block-post-template > li{margin:0}
.meec-notizia{position:relative;display:flex;flex-direction:column;gap:var(--meec-sp-5);height:100%}
.meec-notizia > *{margin:0}
.meec-notizia .wp-block-post-featured-image{margin:0}
.meec-notizia .wp-block-post-featured-image img{
	width:100%;aspect-ratio:416/240;object-fit:cover;display:block;border-radius:var(--meec-raggio-l);
}
.meec-notizia__corpo{display:flex;flex-direction:column;gap:var(--meec-sp-3)}
.meec-notizia__corpo > *{margin:0}
.meec-notizia .wp-block-post-date{color:var(--meec-testo-accento);font-size:var(--meec-corpo)}
.meec-notizia .wp-block-post-title{
	font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5;
	margin:0;
}
.meec-notizia .wp-block-post-title a{color:var(--meec-testo-primario);text-decoration:none}
.meec-notizia .wp-block-post-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--meec-sp-3)}
.meec-notizia .wp-block-post-title::after{
	content:"";flex:none;width:1.5rem;height:1.5rem;margin-top:.25rem;
	background:currentColor;color:var(--meec-testo-primario);
	-webkit-mask:url("icone/freccia-alto-destra.svg") center/contain no-repeat;mask:url("icone/freccia-alto-destra.svg") center/contain no-repeat;
}
@media (forced-colors:active){.meec-notizia .wp-block-post-title::after{background:CanvasText}}
.meec-notizia .wp-block-post-title a::after{content:"";position:absolute;inset:0}
.meec-notizia .wp-block-post-title a:hover{color:var(--meec-testo-accento);text-decoration:underline}
.meec-notizia:has(.wp-block-post-title a:focus-visible){outline:3px solid var(--meec-focus);outline-offset:4px;border-radius:var(--meec-raggio-sm)}
.meec-notizia .wp-block-post-title a:focus-visible{outline:none}
.meec-notizia .wp-block-post-excerpt{color:var(--meec-testo-secondario)}
.meec-notizia .wp-block-post-excerpt__excerpt{margin:0}
.meec-notizia .wp-block-post-excerpt__more-text{display:none}
.meec-notizia .wp-block-post-terms{display:flex;flex-wrap:wrap;gap:var(--meec-sp-2);margin-top:auto}
.meec-notizia .wp-block-post-terms a{
	position:relative;z-index:1;
	display:inline-flex;padding:var(--meec-sp-0) var(--meec-sp-2);
	/* Stesso badge del Design System: raggio 8 e bordo 1px (vedi .meec-badge
	   in componenti.css). Famiglia neutra Grey quando la categoria non ne ha una. */
	border:1px solid var(--_badge-bordo,var(--wp--custom--colore--badge--grigio-bordo));
	border-radius:var(--meec-raggio-sm);
	background:var(--_badge-sfondo,var(--wp--custom--colore--badge--grigio-sfondo));
	color:var(--_badge-testo,var(--wp--custom--colore--badge--grigio-testo));
	font-size:var(--meec-testo-sm);font-weight:500;line-height:1.43;text-decoration:none;
}
.meec-notizia .wp-block-post-terms__separator{display:none}
.meec-notizia .wp-block-post-terms a.meec-cat-eventi{--_badge-sfondo:var(--wp--custom--colore--badge--blu-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--blu-bordo);--_badge-testo:var(--wp--custom--colore--badge--blu-testo)}
.meec-notizia .wp-block-post-terms a.meec-cat-attivita{--_badge-sfondo:var(--wp--custom--colore--badge--attivita-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--attivita-bordo);--_badge-testo:var(--wp--custom--colore--badge--attivita-testo)}
.meec-notizia .wp-block-post-terms a.meec-cat-iniziative{--_badge-sfondo:var(--wp--custom--colore--badge--viola-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--viola-bordo);--_badge-testo:var(--wp--custom--colore--badge--viola-testo)}
.meec-notizia .wp-block-post-terms a.meec-cat-storie{--_badge-sfondo:var(--meec-sup-sezione-verde-scura);--_badge-bordo:var(--meec-sup-sezione-verde-scura);--_badge-testo:var(--meec-testo-invertito)}
.meec-centro{display:flex;justify-content:center}
/* Centra il TESTO, non la cassa: su un paragrafo con link o <strong> dentro,
   .meec-centro (che e' flex) spezzerebbe la frase in elementi separati. */
.meec-testo-centro{text-align:center}
.meec-sezione .wp-block-buttons.meec-centro{margin-top:var(--meec-sp-9)}

/* --- Domande frequenti (blocco Dettagli del core) ------------------------- */
.meec-domande{display:grid;gap:var(--meec-sp-3)}
.meec-domande .wp-block-details{
	margin:0;
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);
	padding:0;
}
.meec-domande summary{
	display:flex;align-items:center;justify-content:space-between;gap:var(--meec-sp-3);
	padding:var(--meec-sp-4);
	font-weight:600;font-size:var(--meec-testo-lg);line-height:1.556;
	cursor:pointer;list-style:none;
}
.meec-domande summary::-webkit-details-marker{display:none}
/* Il simbolo della riga e' il **chevron**, non un punto interrogativo: un
   comando che apre e chiude deve dire in che stato si trova, e il punto
   interrogativo resta uguale aperto e chiuso. E' lo stesso segno che il tema
   usa gia' sull'elenco della pagina FAQ e sulla fisarmonica del Programma:
   un solo modo di indicare "questo si apre" su tutto il sito.
   (Il Design System non ha un componente Accordion — il frame omonimo e'
   boilerplate di Untitled UI mai toccato — quindi il riferimento e' il segno
   di apertura gia' in uso nel sistema.) */
.meec-domande summary::after{
	content:"";flex:none;width:1.5rem;height:1.5rem;background:var(--meec-testo-accento);
	-webkit-mask:url("icone/chevron-giu.svg") center/contain no-repeat;mask:url("icone/chevron-giu.svg") center/contain no-repeat;
}
.meec-domande details[open] summary{color:var(--meec-testo-accento)}
.meec-domande details[open] summary::after{transform:rotate(180deg)}
.meec-domande .meec-dettagli__interno > *{margin:0;padding:0 var(--meec-sp-4) var(--meec-sp-4);color:var(--meec-testo-secondario)}
.meec-domande summary:focus-visible{outline-offset:-3px;border-radius:var(--meec-raggio-l)}

/* ==========================================================================
   Mobile (Figma 393: sezioni 64/16, card a colonna)
   ========================================================================== */
@media (max-width:56rem){
	.meec-affiancati{grid-template-columns:1fr}
	.meec-affiancati__immagine-colonna{order:2}
	.meec-affiancati .wp-block-buttons{margin-top:var(--meec-sp-5)}
}
@media (max-width:40rem){
	.meec-metriche__elenco{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--meec-sp-5)}
	.meec-metriche__voce + .meec-metriche__voce{border-left:0}
	.meec-metriche__voce:nth-child(2n){border-left:1px solid currentColor}
	.meec-pagina .meec-hero .wp-block-buttons{flex-direction:column;align-items:stretch;width:100%}
	.meec-pagina .meec-hero .wp-block-button,.meec-pagina .meec-hero .wp-block-button__link{width:100%}
}

/* ==========================================================================
   Pagine interne (Figma: "Il Master", "Docenti", "Opportunità e network"...)
   ========================================================================== */

/* --- Intestazione di pagina (H1 48, testo xl 856, bottone) ---------------- */
/* 22/09 (Palermo): occhiello -> H1 -> testo a 16 (era 24), e 32 fra questo
   blocco e i bottoni (16 di gap + 16 di margine). Confermato dal frame di
   Il Master aggiornato (568:9088: testo a 63 sotto un titolo alto 47). */
.meec-pagina .meec-intestazione{max-width:64rem;gap:var(--meec-sp-3)}
.meec-pagina .meec-intestazione > .wp-block-buttons{margin-top:var(--meec-sp-3)}
.meec-intestazione h1{margin:0}
/* Il testo xl dell'intestazione sta su 856 (53,5rem), non sui 1024 del blocco:
   e' la misura gia' annotata qui sopra e quella del riferimento di "Il Master"
   (due righe, la seconda piu' lunga della prima). Il cappello resta a 64rem
   perche' e' l'H1 a usarlo. Stessa logica dell'intro di articolo (53rem). */
.meec-pagina .meec-intestazione > .meec-sottotitolo{max-width:53.5rem}

/* --- Icona in un cerchio (Figma: cerchio 48 magenta, icona bianca 24) -----
   ::before disegna il cerchio, ::after l'icona sopra: una maschera sola non
   puo' avere due colori. --_off e' la distanza dal bordo dell'elemento. */
.meec-tonda{position:relative;--_off:0px}
.meec-tonda::before{
	-webkit-mask:none;mask:none;
	width:3rem;height:3rem;border-radius:50%;
	background:var(--_tonda-sfondo,var(--meec-sup-bottone-primario));
}
.meec-tonda::after{
	content:"";position:absolute;
	top:calc(var(--_off) + .75rem);left:calc(var(--_off) + .75rem);
	width:1.5rem;height:1.5rem;
	background:var(--_tonda-icona,var(--meec-testo-invertito));
	-webkit-mask:var(--_ico) center/contain no-repeat;mask:var(--_ico) center/contain no-repeat;
}
.meec-card.meec-tonda{--_off:calc(var(--meec-sp-5))}
/* Card verde: nel Figma il fondo NON e' una tinta piatta ma il gradiente del
   brand (#006b30 -> #39822a, cioe' esattamente colore.gradiente del theme.json),
   e la card non ha bordo. Verificato il 14/09 su due frame diversi: le due card
   di "Scegli il referente giusto" (Contatti) e le due di "Il Master in breve"
   (Il Master) portano lo stesso identico gradiente. Prima qui c'era --meec-verde
   piatto, che e' un verde piu' chiaro e slavato.
   L'icona piatta su fondo verde e' bianca (era dichiarato solo dentro lo scopo
   di "Il Master in breve": ora sta sulla card, che e' il posto giusto). */
.meec-card--verde{
	background:var(--meec-gradiente-verde);border-color:transparent;
	color:var(--meec-testo-invertito);
	--_tonda-sfondo:var(--meec-testo-invertito);--_tonda-icona:var(--meec-verde);
	--_ico-colore:var(--meec-testo-invertito);
	--meec-focus:var(--meec-testo-invertito);
}
.meec-card--verde p{color:var(--meec-testo-invertito)}
.meec-pagina .meec-griglia--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
/* Quattro card: 2+2 invece di 3+1 sotto i 1080px (U3, 30/09/2026); una colonna sotto 36rem. */
@media (max-width:67.5rem){
	.meec-pagina .meec-griglia--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:36rem){
	.meec-pagina .meec-griglia--4{grid-template-columns:minmax(0,1fr)}
}
.meec-pagina .meec-griglia + .meec-griglia{margin-top:var(--meec-sp-4)}

/* --- "Il Master in breve" (Il Master): icona lineare, senza cerchio --------
   Nel Figma di questa fascia l'icona e' solo il tratto, magenta sulle quattro
   card bianche e bianco sulle due verdi: nessun disco dietro. Misurato sul
   riferimento: icona di 64 (tratto ~52) a filo del padding di 32, poi 20 fino
   al titolo — cioe' le stesse misure che il tema usa per le icone piatte.
   Il resto della fascia era gia' giusto (card 306 e 636, gap 24, padding 32,
   contenuto a sinistra dentro le card: nel Figma sta a sinistra).

   Lo scopo e' la sezione che contiene la griglia a 4, unica nel sito; .meec-tonda
   resta com'e' nelle altre 24 occorrenze (Laboratori, Network, Programma,
   Contatti e le altre fasce di questa pagina), che non e' stato possibile
   confrontare col Figma.                                                    */
.meec-sezione:has(.meec-griglia--4) .meec-griglia > .meec-card.meec-tonda::before{
	width:var(--_ico-misura,4rem);height:var(--_ico-misura,4rem);
	border-radius:0;
	background:var(--_ico-colore,var(--meec-testo-accento));
	-webkit-mask:var(--_ico) center/contain no-repeat;mask:var(--_ico) center/contain no-repeat;
}
.meec-sezione:has(.meec-griglia--4) .meec-griglia > .meec-card.meec-tonda::after{content:none}

/* Testate centrate come nel Figma. La strada giusta e' la classe
   meec-sezione__testata--centro sul blocco, che il tema ha gia': dal browser
   interno non si e' potuta aggiungere (sessione WordPress non autenticata),
   quindi qui ci sono gli alias, agganciati a cio' che distingue ogni sezione:
     :has(.meec-griglia--4)                    "Il Master in breve"
     :has(.meec-affiancati__testo.meec-tonda)  "Una formazione che va oltre la
                                                teoria" (l'altra sezione a
                                                blocchi affiancati della pagina
                                                non ha icone)
     ("Il network MEEC" di Opportunita' e network aveva qui un alias su
      :has(.meec-nomi--colonne): dal 16/09 la classe vera sta sul blocco.)
     ("Dove la formazione incontra il mondo professionale", stessa pagina,
      aveva un alias su :has(.meec-card--su-scuro): rifatta il 16/09 con
      la classe vera e .meec-caratteristiche, come sulla Home.)
   Messa la classe dall'editor, queste righe si possono togliere.
   Non serve `align-items:center`: la testata e' una colonna flex con gli
   elementi stirati, quindi `text-align` basta.                              */
.meec-sezione:is(:has(.meec-griglia--4),:has(.meec-affiancati__testo.meec-tonda)) .meec-sezione__testata{
	margin-inline:auto;text-align:center;
}
.meec-pagina .meec-sezione:is(:has(.meec-griglia--4),:has(.meec-affiancati__testo.meec-tonda)) .meec-sezione__testata{
	align-items:center;
}

/* --- Obiettivi: introduzione a sinistra, voci su due colonne ------------- */
.meec-obiettivi{
	display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);
	gap:var(--meec-sp-7) var(--meec-sp-4);align-items:start;
}
.meec-pagina .meec-obiettivi > *{margin-block:0}
.meec-obiettivi .meec-lista-spunte{
	grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
	gap:var(--meec-sp-5) var(--meec-sp-4);margin:0;padding:0;
}

/* --- Elenco numerato 01, 02, 03... (Figma: "Obiettivi Formativi") ---------
   Al posto della spunta, il numero d'ordine in magenta. Non un cerchio, non un
   fondo pieno: solo la cifra, Montserrat 600 a 48 (--meec-titolo-l), come i
   numeri di .meec-numero. Misurato sul riferimento: cifra alta ~34 (quindi
   corpo 48), testo che parte 82px a destra dell'inizio del numero.

   Il contatore e' quello implicito `list-item`, che ogni voce di lista
   incrementa da sola: non serve counter-reset, e il giorno in cui il blocco
   diventa un elenco ordinato <ol> la numerazione diventa anche semantica
   senza toccare il CSS. Il numero viene letto dai lettori di schermo come
   parte della voce ("01 Comprendere veicoli..."), che e' quello che si vede.

   Due colonne riempite per colonna (01-04 a sinistra, 05-07 a destra) come nel
   Figma: e' multicolonna, non griglia, perche' la griglia condividerebbe le
   righe fra le due colonne e la seconda resterebbe piena di buchi. Lo spazio
   fra le voci e' margin-bottom e non row-gap: in multicolonna un margine in
   cima spingerebbe giu' la prima voce della seconda colonna, uno in fondo no.
   break-inside evita che una voce si spezzi a metà fra le due colonne.       */
.meec-lista-spunte--numerata{
	display:block;
	columns:2;column-gap:var(--meec-sp-5);
}
.meec-lista-spunte--numerata li{
	break-inside:avoid;
	margin-bottom:var(--meec-sp-5);
	padding-left:5rem;
}
.meec-lista-spunte--numerata li:last-child{margin-bottom:0}
.meec-lista-spunte--numerata li::before{
	content:counter(list-item,decimal-leading-zero);
	top:-.075em;
	width:auto;height:auto;border-radius:0;background:none;
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-titolo-l);line-height:1;
	color:var(--meec-testo-accento);
	font-variant-numeric:tabular-nums;
}
/* Una colonna sola quando non c'e' spazio: le voci restano in ordine 01-07. */
@media (max-width:47.99rem){
	.meec-lista-spunte--numerata{columns:1}
}

/* --- Voci su due colonne, senza segno (Figma Laboratori: "Dalla pratica alle
   competenze") -----------------------------------------------------------
   Qui la spunta non c'e': il termine in grassetto fa gia' da richiamo, e il
   testo parte dal bordo della colonna. Multicolonna e non griglia per lo
   stesso motivo della variante numerata: le colonne si riempiono una per
   volta (1-3 a sinistra, 4-6 a destra) invece di condividere le righe, cosi'
   una voce piu' alta non lascia un buco nella voce accanto. Lo spazio fra le
   voci e' margin-bottom e non row-gap: in multicolonna un margine in cima
   spingerebbe giu' la prima voce della seconda colonna.
   Il column-gap resta sp-4 come la griglia che sostituisce: dentro
   .meec-obiettivi le due colonne restano larghe 416 a 1440.                 */
.meec-lista-spunte--voci{display:block;columns:2;column-gap:var(--meec-sp-4)}
.meec-lista-spunte--voci > li{break-inside:avoid;margin-bottom:var(--meec-sp-5);padding-left:0}
.meec-lista-spunte--voci > li:last-child{margin-bottom:0}
.meec-lista-spunte--voci > li::before{content:none}
/* Titolo della voce (Figma 922:25530, «Dalla pratica alle competenze»): Text xl
   Semibold in Text-primary su una riga sua, 4 sotto la descrizione 18/28.
   Richiesta Palermo 22/09. Il <br> del blocco dopo lo <strong> non serve piu'. */
.meec-lista-spunte--voci > li > strong{
	display:block;margin-bottom:var(--meec-sp-1);
	font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5;color:var(--meec-testo-primario);
}
.meec-lista-spunte--voci > li > strong + br{display:none}
@media (max-width:47.99rem){
	.meec-lista-spunte--voci{columns:1}
}

/* La classe --numerata va sul blocco elenco dall'editor. Qui c'e' l'alias per
   la sezione "Obiettivi formativi" di Il Master, l'unica che nel Figma ha i
   numeri: e' il solo elenco a spunte che sta in una sezione grigia e ha
   termini in grassetto (quello dei Laboratori non e' in sezione grigia, quello
   di Programma non ha grassetti). Messa la classe, queste righe si togliono. */
.meec-sezione--grigia .meec-obiettivi .meec-lista-spunte:has(li strong){
	display:block;
	columns:2;column-gap:var(--meec-sp-5);
}
.meec-sezione--grigia .meec-obiettivi:has(.meec-lista-spunte li strong){
	column-gap:var(--meec-sp-5);
}
.meec-sezione--grigia .meec-obiettivi .meec-lista-spunte:has(li strong) > li{
	break-inside:avoid;
	margin-bottom:var(--meec-sp-5);
	padding-left:5rem;
}
.meec-sezione--grigia .meec-obiettivi .meec-lista-spunte:has(li strong) > li:last-child{margin-bottom:0}
.meec-sezione--grigia .meec-obiettivi .meec-lista-spunte:has(li strong) > li::before{
	content:counter(list-item,decimal-leading-zero);
	top:-.075em;
	width:auto;height:auto;border-radius:0;background:none;
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-titolo-l);line-height:1;
	color:var(--meec-testo-accento);
	font-variant-numeric:tabular-nums;
}
@media (max-width:47.99rem){
	.meec-sezione--grigia .meec-obiettivi .meec-lista-spunte:has(li strong){columns:1}
}

/* --- Voci numerate su fondo scuro (Figma: "01" Display/lg) --------------- */
.meec-caratteristiche--numerate .meec-caratteristica{align-items:flex-start;text-align:left}
.meec-numero{
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-titolo-l);line-height:1.25;
	color:var(--wp--custom--colore--brand-light--300);
	margin:0;
}
.meec-sezione:not(.meec-sezione--scura) .meec-numero{color:var(--meec-testo-accento)}
/* Su fondo scuro il Figma li fa bianchi, non verde chiaro: campionato
   (255,255,255) sul riferimento. Oggi l'unico caso e' "Cosa diventerai". */
.meec-sezione--scura .meec-numero{color:var(--meec-testo-invertito)}

/* --- "Cosa diventerai" (Il Master): testata su due blocchi ----------------
   Nel Figma l'introduzione non sta sotto il titolo: occhiello e titolo stanno
   nella prima colonna, l'introduzione occupa le altre due, in alto a destra.
   Le colonne sono le stesse delle voci (tre da ~410 con gap 32 a 1296), e il
   riferimento lo conferma: blocco sinistro fino a ~342, introduzione da ~523
   a ~1353, cioe' esattamente 2 colonne + il gap.
   L'ordine nel DOM resta occhiello, titolo, introduzione: si sposta solo la
   collocazione nella griglia, non la lettura.
   Scopo: la sezione che contiene .meec-caratteristiche--numerate, unica nel
   sito.                                                                     */
.meec-pagina .meec-sezione:has(.meec-caratteristiche--numerate) .meec-sezione__testata{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:var(--meec-sp-3) var(--meec-sp-5);
	align-items:start;
	max-width:none;                                  /* 856 taglierebbe la terza colonna */
}
.meec-sezione:has(.meec-caratteristiche--numerate) .meec-sezione__testata > .meec-occhiello{grid-row:1;grid-column:1}
.meec-sezione:has(.meec-caratteristiche--numerate) .meec-sezione__testata > .meec-sezione__titolo{grid-row:2;grid-column:1}
.meec-sezione:has(.meec-caratteristiche--numerate) .meec-sezione__testata > .meec-sottotitolo{grid-row:1 / 3;grid-column:2 / -1}
/* Sotto i 1248px le voci passano a due colonne o a una: da qui l'introduzione
   torna sotto il titolo, in colonna singola. */
@media (max-width:78rem){
	.meec-pagina .meec-sezione:has(.meec-caratteristiche--numerate) .meec-sezione__testata{
		grid-template-columns:minmax(0,1fr);
		max-width:53.5rem;
	}
	.meec-sezione:has(.meec-caratteristiche--numerate) .meec-sezione__testata > .meec-sottotitolo{
		grid-row:auto;grid-column:1;
	}
}

/* --- Citazione in coda alle voci numerate ("Cosa diventerai") -------------
   Nel riferimento la frase non e' un blocco a parte sotto la griglia: e' la
   NONA cella, terza colonna dell'ultima riga, allineata in basso con l'ultima
   voce (nel riferimento l'ultima riga della citazione e l'ultima riga della
   voce 08 cadono alla stessa altezza).
   Misure dal riferimento (scala 0,5: passo delle colonne 220 = 410+32):
   distanza fra le due basi 19 -> interlinea 38; altezza delle maiuscole 10,5
   -> 21 reali, che su Montserrat (cap 0,70em) da' 30. Cioe' Display/sm del
   Design System, Montserrat SemiBold 30/38, centrata.
   L'a capo dopo "360" non e' un <br>: text-wrap:balance divide le due righe
   esattamente li' (320 e 366 di testo su una colonna da 410), e continua a
   funzionare se il testo cambia o la colonna si stringe.
   Il paragrafo sta nel database come ultimo blocco del gruppo
   .meec-caratteristiche (aggiunto il 15/09/2026). Il testo viene dal Figma e
   non dal Doc del cliente: chiesto da Mariano.                              */
.meec-citazione{
	font-family:var(--meec-font-titoli);
	font-weight:600;
	font-size:var(--meec-display-s);
	line-height:1.267;                       /* 38/30 */
	text-align:center;
	text-wrap:balance;
}
.meec-caratteristiche > .meec-citazione{align-self:end}

/* --- Metriche su fondo chiaro (Figma: "Modalità didattica", 2x2) --------- */
.meec-dati{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
	gap:var(--meec-sp-9) var(--meec-sp-5);
}

/* --- "Una formazione flessibile" (Il Master): proporzioni dal Figma --------
   Il blocco di testo e' piu' stretto di mezza sezione e le due colonne dei
   dati stanno piu' a destra e molto piu' distanti fra loro. Misurato sul
   riferimento (scala 1,841): testo da 72 a ~477, bordi sinistri dei dati a
   ~622 e ~1062, contenitore che chiude a 1368. Tenendo il gap di 96 che la
   sezione ha gia', il rapporto 1 : 1,65 mette il testo a 453 e i dati a 621 e
   1058: entro 4px su ogni bordo misurato.
   Il titolo va a capo da solo ("Una formazione / flessibile"): a 36px e' largo
   ~465 e la colonna ne misura 453. Nessun <br> forzato.
   Le misure interne del dato erano gia' giuste: valore Montserrat 600 36/45,
   etichetta 18/28, 4px fra i due (dal riferimento: 50px fra i due inchiostri,
   che e' esattamente quello che producono 45 + 4).
   .meec-dati esiste solo in questa sezione: lo scopo e' esatto.             */
.meec-affiancati:has(> .meec-dati){
	grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);
}
.meec-affiancati > .meec-dati{column-gap:8rem}   /* misurato ~133, non e' un token */
/* Sotto i 1200px la colonna dei dati si stringe: il distacco torna a 64.
   Sotto i 896 la sezione si impila (regola piu' in alto nel file): il rapporto
   1 : 1,65 va annullato QUI e non la', perche' :has(> .meec-dati) pesa come
   quel selettore e a pari peso decide chi viene dopo. Senza questo, a 393 la
   colonna di testo restava larga 100px. */
@media (max-width:75rem){
	.meec-affiancati > .meec-dati{column-gap:var(--meec-sp-9)}
}
@media (max-width:56rem){
	.meec-affiancati:has(> .meec-dati){grid-template-columns:1fr}
	.meec-affiancati > .meec-dati{column-gap:var(--meec-sp-5)}
}
.meec-pagina .meec-dati > *{margin-block:0}
.meec-dato{display:flex;flex-direction:column;gap:var(--meec-sp-1)}
.meec-pagina .meec-dato > *{margin:0}
.meec-dato__valore{font-family:var(--meec-font-titoli);font-weight:600;font-size:var(--meec-titolo-m);line-height:1.25;color:var(--meec-testo-accento)}
.meec-dato__etichetta{font-size:var(--meec-testo-lg);line-height:1.556;color:var(--meec-testo-secondario)}

/* --- Date (Figma: "Giornate previste con presenza obbligatoria") ---------- */
.meec-date{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
	gap:var(--meec-sp-5) var(--meec-sp-4);
	border-bottom:1px solid var(--meec-bordo-terziario);padding-bottom:var(--meec-sp-5);
}
.meec-pagina .meec-date > *{margin:0}
.meec-data{display:flex;flex-direction:column;gap:var(--meec-sp-2)}
.meec-pagina .meec-data > *{margin:0}
.meec-data::before{content:"";width:2rem;height:2rem;border-radius:50%;background:var(--meec-sup-bottone-primario);margin-bottom:calc(var(--meec-sp-3) - var(--meec-sp-2))}
.meec-data h3{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5}
.meec-data p{color:var(--meec-testo-secondario)}
.meec-pagina .meec-date + p{margin-top:var(--meec-sp-4);font-size:var(--meec-testo-sm);color:var(--meec-testo-secondario)}

/* --- "Giornate previste" (Il Master): la timeline come nel Figma -----------
   Misurato sul riferimento (scala 1,844): sezione su fondo grigio chiaro
   (#f6f6f6 = il token --meec-sup-sezione-grigia, #f7f7f7), linea magenta
   continua da bordo a bordo del contenitore (70 -> 1368) all'altezza del
   centro dei pallini, 4 colonne da 306 con gap 24 (pallini a 72, 402, 734 e
   1064: passo 330) — la griglia era gia' cosi' e non si tocca. Nel Figma non
   c'e' nessun filo grigio sopra la nota, e la nota va a capo perche' e' larga
   ~700, non tutto il contenitore.

   La linea e' un ::before del contenitore e non un bordo dei singoli passi:
   cosi' resta continua anche negli spazi fra le colonne e non si spezza se una
   descrizione va a capo. top:1rem la mette al centro dei pallini, che sono
   alti 2rem e partono dal bordo alto della cella. Niente z-index: linea e
   pallini sono dello stesso magenta, si sovrappongono senza differenza.

   Lo scopo e' esatto: .meec-date senza --sei esiste solo in questa sezione
   (quella di "Le scadenze in breve" usa --sei, che ha 6 passi e nessun filo). */
.meec-sezione:has(.meec-date:not(.meec-date--sei)){
	background:var(--meec-sup-sezione-grigia);
}
/* La linea vale per ENTRAMBE le varianti: dal 15/09 anche "Le scadenze in
   breve" (sei colonne) la vuole, misurata sul riferimento da 70 a 1366, cioe'
   i due bordi del contenitore, all'altezza del centro dei pallini. */
.meec-date{position:relative}
.meec-date::before{
	content:"";position:absolute;
	left:0;right:0;top:1rem;height:2px;margin-top:-1px;
	background:var(--meec-sup-bottone-primario);
}
.meec-date:not(.meec-date--sei){
	grid-template-columns:repeat(4,minmax(0,1fr));
	border-bottom:0;padding-bottom:0;
}
.meec-pagina .meec-date:not(.meec-date--sei) + p{
	margin-top:var(--meec-sp-9);   /* 64: col padding a 0, il distacco misurato e' ~61 */
	max-width:44rem;               /* nel Figma la nota va a capo attorno ai 700 */
}

/* Sotto i 1024px quattro colonne stringerebbero troppo le date: la timeline
   diventa verticale. La linea non e' piu' una sola: ogni passo tranne
   l'ultimo disegna il tratto che lo unisce al successivo, dal centro del
   proprio pallino al centro di quello dopo (da qui il bottom negativo, pari
   allo spazio fra le righe piu' il mezzo pallino). Cosi' la linea finisce
   sull'ultimo pallino invece di proseguire fino in fondo. */
@media (max-width:64rem){
	.meec-date:not(.meec-date--sei){
		grid-template-columns:minmax(0,1fr);
		row-gap:var(--meec-sp-5);
	}
	.meec-date:not(.meec-date--sei)::before{content:none}
	.meec-date:not(.meec-date--sei) .meec-data{
		position:relative;
		display:grid;grid-template-columns:2rem minmax(0,1fr);
		column-gap:var(--meec-sp-3);row-gap:var(--meec-sp-2);
	}
	/* Il pallino copre solo le righe 1-2 della colonna 1: senza questa riga
	   il TERZO figlio (la descrizione) finisce in colonna 1, larga 32px. */
	.meec-date:not(.meec-date--sei) .meec-data > *{grid-column:2}
	.meec-date:not(.meec-date--sei) .meec-data::before{
		grid-row:1 / span 2;grid-column:1;
		align-self:start;margin-bottom:0;
	}
	.meec-date:not(.meec-date--sei) .meec-data:not(:last-child)::after{
		content:"";position:absolute;
		left:1rem;margin-left:-1px;width:2px;
		top:1rem;bottom:calc(-1 * (var(--meec-sp-5) + 1rem));
		background:var(--meec-sup-bottone-primario);
	}
}
@media (forced-colors:active){
	.meec-date::before,
	.meec-date .meec-data::after{background:CanvasText}
}

/* --- Persone (Figma: "_Team member" 296, foto quadrata r16) --------------- */
.meec-persone .wp-block-post-template{
	display:grid;gap:var(--meec-sp-9) var(--meec-sp-5);
	grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
	margin:0;padding:0;list-style:none;
}
.meec-persone .wp-block-post-template > li{margin:0}
@media (max-width:40rem){.meec-persone .wp-block-post-template{row-gap:var(--meec-sp-7)}}
.meec-persona{position:relative;display:flex;flex-direction:column;gap:var(--meec-sp-4)}
.meec-pagina .meec-persona > *,.meec-pagina .meec-persona__testo > *{margin:0}
.meec-persona .wp-block-post-featured-image img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--meec-raggio-l);display:block}
/* Senza ritratto: riquadro neutro con icona, stesso ingombro della foto. */
.meec-persona:not(:has(.wp-block-post-featured-image))::before{
	content:"";display:block;width:100%;aspect-ratio:1;border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-chip) url("icone/persone.svg") center/28% no-repeat;
	opacity:.9;
}
.meec-persona__testo{display:flex;flex-direction:column;gap:var(--meec-sp-1)}
.meec-persona .wp-block-post-title{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5}
.meec-persona .wp-block-post-title a{color:var(--meec-testo-primario);text-decoration:none}
.meec-persona .wp-block-post-title a::after{content:"";position:absolute;inset:0}
.meec-persona .wp-block-post-title a:hover{color:var(--meec-testo-accento);text-decoration:underline}
.meec-persona:has(.wp-block-post-title a:focus-visible){outline:3px solid var(--meec-focus);outline-offset:4px;border-radius:var(--meec-raggio-l)}
.meec-persona .wp-block-post-title a:focus-visible{outline:none}
.meec-persona .wp-block-post-excerpt{font-size:var(--meec-testo-lg);line-height:1.556;color:var(--meec-testo-accento)}
.meec-persona .wp-block-post-excerpt p{margin:0}
.meec-persona .wp-block-post-content{color:var(--meec-testo-secondario)}
.meec-persona .wp-block-post-content > *{margin:0}

/* --- "Direzione e Faculty" (Il Master) -----------------------------------
   Nel riferimento la fascia e' BIANCA, la testata e' centrata su 800px e la
   griglia e' 4x2 di _Team member 300 con gap 64/32 (i gap li ha gia' il
   componente qui sopra, misurati: coincidono). Il testo dentro le card resta
   allineato a sinistra: la centratura riguarda solo la testata.
   Le classi giuste stanno sul blocco: togliere meec-sezione--grigia, mettere
   meec-sezione__testata--centro sulla testata e meec-bottone-freccia sul
   blocco pulsanti. Dal browser interno non si sono potute aggiungere
   (sessione WordPress non autenticata), quindi qui sotto c'e' l'alias,
   agganciato a cio' che distingue questa fascia: e' la sola .meec-persone
   seguita da una CTA centrata (le tre fasce della pagina Docenti non hanno
   pulsante, verificato dal DOM). Messe le classi dall'editor, queste righe e
   i due alias della freccia piu' sotto si possono togliere.                */
.meec-sezione--grigia:has(.meec-persone):has(.meec-bottoni.meec-centro){
	background:var(--meec-sup-sezione-bianca);
}
.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .meec-sezione__testata{
	max-width:50rem;margin-inline:auto;text-align:center;
}
.meec-pagina .meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .meec-sezione__testata{
	align-items:center;
}
/* Colonne esplicite 4 / 2 / 1 come nei frame, al posto dell'auto-fill del
   componente (che a 1440 da' comunque 4, ma tra 1024 e 1200 scendeva a 3).
   Gli override stanno subito qui sotto: le media query non aggiungono
   specificita', quindi contano l'ordine e la lunghezza del selettore.      */
.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-post-template{
	grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:64rem){
	.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-post-template{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media (max-width:40rem){
	.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-post-template{
		grid-template-columns:minmax(0,1fr);
	}
}

/* Elenco semplice di nomi (Esperti dal mondo produttivo) */
.meec-nomi{list-style:none;margin:0;padding:0;display:grid;gap:var(--meec-sp-4) var(--meec-sp-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.meec-nomi li{margin:0;padding-left:var(--meec-sp-3);border-left:3px solid var(--meec-bordo-secondario)}

/* --- Passi del percorso (Figma: "Dal campus alle imprese", 6 x 189) ------- */
.meec-passi{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
	gap:var(--meec-sp-5);
}
.meec-pagina .meec-passi > *{margin:0}
.meec-passo{display:flex;flex-direction:column;gap:calc(var(--meec-sp-3) + var(--meec-sp-1))}
.meec-pagina .meec-passo > *{margin:0}
.meec-pagina .meec-passo > h3 + p{margin-top:calc(var(--meec-sp-2) - var(--meec-sp-3) - var(--meec-sp-1))}
.meec-passo h3{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5}
.meec-passo p{color:var(--meec-testo-secondario)}

/* --- "Dal campus alle imprese": percorso verticale a fasi -----------------
   Rifatto il 15/09/2026 su nuovo riferimento: non e' piu' una linea
   orizzontale con sei nodi, ma un elenco verticale di sei tappe raggruppate
   in tre fasi. Ogni tappa e' un numero grande a sinistra e una scheda bianca
   a destra; ogni fase si apre con un pallino, l'occhiello "Fase N" e il nome.
   Misure dal riferimento (scala 0,5, blocco = 1440):
     blocco       856 centrato (292 -> 1146), come il testo dell'intestazione
     colonna num. 60 + 32 di gap: la scheda parte a 90 dal bordo del blocco
     numero       Montserrat SemiBold 48 (= .meec-numero), ma NERO, non magenta
     scheda       padding 24, bordo 1px Neutri/200, titolo 20/30, testo 16/24
     stacchi      24 fra le tappe, 24 fra la testata di fase e la prima tappa,
                  80 fra la fine di una fase e la successiva
   Nomi: tutto sotto .meec-percorso__, perche' .meec-tappa e' gia' presa dalla
   timeline a zig-zag di Ammissione e borse (riga ~1196) e le sue regole
   arrivavano dopo, spegnendo le colonne di questa griglia.
   Il raggio misurato e' ~12, che non e' un token: si tiene il 16 delle altre
   card del sito (la regola del progetto: valore misurato solo se l'elemento
   e' unico, token se e' ripetuto -- qui le schede sono sei).              */
.meec-percorso{
	max-width:53.5rem;margin-inline:auto;
	display:flex;flex-direction:column;gap:var(--meec-sp-4);
}
.meec-pagina .meec-percorso > *{margin-block:0}

/* Testata di fase: "Fase N" + nome. Il pallino che stava davanti e' stato
   tolto il 22/09 (Figma: annotazione «bullet point eliminato», 1027:30393,
   richiesta Palermo). */
.meec-percorso__fase{
	display:grid;grid-template-columns:minmax(0,1fr);
	row-gap:0;
}
/* Dopo il reset dei margini qui sopra, che e' piu' specifico. */
/* 80 in tutto dalla fine della fase precedente: il gap del flex vale gia' 24. */
.meec-pagina .meec-percorso > .meec-percorso__fase{margin-top:calc(var(--meec-sp-11) - var(--meec-sp-4))}
.meec-pagina .meec-percorso > .meec-percorso__fase:first-child{margin-top:0}
.meec-pagina .meec-percorso__fase > *{margin-block:0}
.meec-percorso__fase > h3{
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-titolo-s);line-height:var(--meec-interlinea-titoli);
}

/* Tappa: numero + scheda */
.meec-percorso__tappa{
	/* 68 e' la larghezza del numero piu' largo ("04" misura 64,9 a 48px): sotto
	   questa soglia "02" andava a capo fra le due cifre. Con gap 24 la scheda
	   parte a 92 dal bordo del blocco, che e' la misura del riferimento. */
	display:grid;grid-template-columns:4.25rem minmax(0,1fr);
	column-gap:var(--meec-sp-4);align-items:start;
}
.meec-pagina .meec-percorso__tappa > *{margin-block:0}
.meec-pagina .meec-percorso__numero{
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-titolo-l);line-height:var(--meec-interlinea-titoli);
	/* Magenta come .meec-numero su fondo chiaro: e' la norma del sito, ed e'
	   quello che fa il riferimento di "Processo di selezione". */
	color:var(--meec-testo-accento);
	white-space:nowrap;
}
/* Eccezione: nel riferimento di "Dal campus alle imprese" i numeri sono neri.
   Campionati (27,27,29) su 01 e su 06. */
.meec-pagina .meec-percorso--neutro .meec-percorso__numero{color:var(--meec-testo-primario)}
.meec-percorso__scheda{
	display:flex;flex-direction:column;gap:var(--meec-sp-2);
	padding:var(--meec-sp-4);
	border:1px solid var(--meec-bordo-terziario);
	border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);
}
.meec-pagina .meec-percorso__scheda > *{margin-block:0}
.meec-percorso__scheda > :is(h3,h4){
	font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);
	font-weight:600;line-height:1.5;
}
.meec-percorso__scheda p{color:var(--meec-testo-secondario)}

/* Riga di chip in coda alla scheda. Nel riferimento ogni chip ha un pallino
   davanti all'etichetta. I testi veri non ci sono ancora: il markup delle
   chip si aggiunge quando arrivano, il vestito e' gia' qui. */
.meec-percorso__chip{
	display:flex;flex-wrap:wrap;gap:var(--meec-sp-2);
	margin-top:var(--meec-sp-3);
}
.meec-percorso__chip .meec-chip::before{
	content:"";flex:none;width:.375rem;height:.375rem;border-radius:50%;
	background:currentColor;
}

/* Ultima tappa evidenziata: bordo accento sulla scheda e chip nello stato
   attivo del Design System (fondo Accent/50, bordo e testo Accent/600). */
.meec-percorso__tappa--traguardo .meec-percorso__scheda{border-color:var(--meec-bordo-primario)}
.meec-percorso__tappa--traguardo .meec-chip{
	background:var(--meec-sup-chip-attivo);
	border-color:var(--meec-bordo-primario);
	color:var(--meec-testo-accento);
}

/* Sotto i 40rem il numero passa sopra la scheda: una colonna da 60 toglie
   troppo spazio al testo a 393px. */
@media (max-width:40rem){
	.meec-percorso__tappa{grid-template-columns:minmax(0,1fr);row-gap:var(--meec-sp-2)}
	.meec-percorso__numero{font-size:var(--meec-titolo-m)}
	.meec-pagina .meec-percorso > .meec-percorso__fase{margin-top:calc(var(--meec-sp-9) - var(--meec-sp-4))}
}

/* La testata centrata qui NON ha bisogno di alias: il blocco porta la classe
   vera .meec-sezione__testata--centro, e il max-width di 856 e' gia' quello
   predefinito della testata. */

/* --- Blocchi di testo affiancati con icona tonda (Perché scegliere) ------ */
/* --- "Una formazione che va oltre la teoria" (Il Master) ------------------
   Nel Figma l'icona di questi due blocchi e' solo tratto magenta, senza disco
   dietro, e piu' grande che nelle card: tratto 64 dentro una cassa di 80
   (--_ico-misura 5rem, la stessa che usa .meec-caratteristica). Misurato sul
   riferimento anche lo stacco icona->titolo, 24 invece dei 16 del blocco:
   arrivano dagli 8 di margine qui sotto, perche' il gap del flex e' uno solo e
   titolo->testo resta 16 (verificato, coincide col Figma).
   Lo scopo e' esatto: .meec-affiancati__testo.meec-tonda esiste solo qui, in
   questi due blocchi. Le altre 24 .meec-tonda del sito non si toccano.       */
.meec-affiancati__testo.meec-tonda{--_off:0px;--_ico-misura:5rem}
.meec-affiancati__testo.meec-tonda::before{
	width:var(--_ico-misura);height:var(--_ico-misura);
	border-radius:0;
	margin-bottom:var(--meec-sp-2);
	background:var(--_ico-colore,var(--meec-testo-accento));
	-webkit-mask:var(--_ico) center/contain no-repeat;mask:var(--_ico) center/contain no-repeat;
}
.meec-affiancati__testo.meec-tonda::after{content:none}
.meec-affiancati__testo h3{margin:0}

@media (max-width:56rem){
	.meec-obiettivi{grid-template-columns:minmax(0,1fr)}
	.meec-dati{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--meec-sp-5)}
}


/* ==========================================================================
   Notizie: elenco e articolo (Figma: "News" 583:26400, "Dettaglio New" 583:31856)
   ========================================================================== */

/* --- Elenco: filtri, griglia, paginazione -------------------------------- */
.meec-filtri ul{display:flex;flex-wrap:wrap;gap:var(--meec-sp-3);margin:var(--meec-sp-2) 0 0;padding:0;list-style:none}
.meec-filtri li{margin:0}

.meec-paginazione{
	display:flex;align-items:center;justify-content:space-between;gap:var(--meec-sp-3);
	margin-top:var(--meec-sp-9);padding-top:calc(var(--meec-sp-3) + var(--meec-sp-1));
	border-top:1px solid var(--meec-bordo-terziario);
	font-size:var(--meec-testo-sm);line-height:1.43;
}
.meec-paginazione__comando{
	display:inline-flex;align-items:center;gap:var(--meec-sp-2);min-height:2.5rem;
	color:var(--meec-testo-secondario);font-weight:600;text-decoration:none;
	--_ico-misura:1.25rem;--_ico-colore:currentColor;
}
a.meec-paginazione__comando:hover{color:var(--meec-testo-accento)}
.meec-paginazione__comando[aria-disabled]{opacity:.45}
.meec-paginazione__numeri{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.meec-paginazione__numeri li{margin:0}
.meec-paginazione .page-numbers{
	display:grid;place-items:center;min-width:2.5rem;height:2.5rem;padding:0 var(--meec-sp-2);
	border-radius:var(--meec-raggio-sm);color:var(--meec-testo-secondario);font-weight:500;text-decoration:none;
}
.meec-paginazione a.page-numbers:hover{background:var(--meec-sup-sezione-grigia);color:var(--meec-testo-primario)}
.meec-paginazione .page-numbers.current{background:var(--meec-sup-chip-attivo);color:var(--meec-testo-accento)}
.meec-paginazione__stato{display:none;margin:0;color:var(--meec-testo-secondario)}
@media (max-width:40rem){
	/* Figma mobile: frecce da 36 con "Pagina 1 di N" al centro. */
	.meec-paginazione__numeri,.meec-paginazione__etichetta{display:none}
	.meec-paginazione__stato{display:block}
	.meec-paginazione__comando{justify-content:center;min-width:2.5rem;border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-sm)}
}

/* --- Articolo: intestazione ---------------------------------------------- */
.meec-articolo__testata .meec-contenitore{display:flex;flex-direction:column;gap:var(--meec-sp-9)}
.meec-articolo__intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--meec-sp-3);max-width:58rem}
.meec-articolo__intro > *{margin:0}
.meec-articolo__intro h1{font-size:var(--meec-titolo-l);line-height:var(--meec-interlinea-titoli)}
.meec-articolo__intro .meec-sottotitolo{max-width:53rem;margin-top:var(--meec-sp-2);font-size:var(--meec-testo-xl);line-height:1.5;color:var(--meec-testo-secondario)}
/* Badge group (Figma: fondo rosa, badge bianco, testo 12/18 magenta). */
.meec-gruppo-badge{
	display:inline-flex;align-items:center;gap:var(--meec-sp-2);
	padding:var(--meec-sp-1) var(--meec-sp-2) var(--meec-sp-1) var(--meec-sp-1);
	border-radius:var(--meec-raggio-l);background:var(--meec-sup-sezione-rosa);
	color:var(--meec-testo-accento);font-size:.75rem;line-height:1.5;font-weight:500;
}
.meec-gruppo-badge__badge{
	padding:2px var(--meec-sp-2);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);color:inherit;text-decoration:none;
	box-shadow:0 0 0 1px var(--meec-bordo-secondario) inset;
}
.meec-gruppo-badge__badge:hover{text-decoration:underline}
.meec-articolo__immagine{margin:0}
.meec-articolo__immagine img{display:block;width:100%;aspect-ratio:1296/516;object-fit:cover}
.meec-articolo__immagine figcaption{margin-top:var(--meec-sp-3);font-size:var(--meec-testo-sm);color:var(--meec-testo-secondario)}
.meec-articolo__immagine + .meec-articolo__meta{margin-top:calc(var(--meec-sp-5) - var(--meec-sp-9))}
.meec-articolo__meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--meec-sp-5) var(--meec-sp-12)}
.meec-articolo__dati{display:flex;flex-wrap:wrap;gap:var(--meec-sp-9);margin:0}
.meec-articolo__dati > div{display:flex;flex-direction:column;gap:var(--meec-sp-2)}
.meec-articolo__dati dt{font-size:var(--meec-testo-sm);line-height:1.43;font-weight:600;color:var(--meec-testo-accento)}
.meec-articolo__dati dd{margin:0;font-size:var(--meec-testo-lg);line-height:1.556;font-weight:500;color:var(--meec-testo-primario)}
.meec-condividi{display:flex;flex-wrap:wrap;gap:var(--meec-sp-2) calc(var(--meec-sp-2) + var(--meec-sp-1))}
.meec-condividi__copia,.meec-condividi__rete{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--meec-sp-2);
	min-height:2.5rem;min-width:2.5rem;padding:0 calc(var(--meec-sp-3) - 1px);
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-sm);
	background:var(--meec-sup-sezione-bianca);color:var(--meec-testo-secondario);
	font:600 var(--meec-testo-sm)/1.43 var(--meec-font-testo);text-decoration:none;cursor:pointer;
	box-shadow:var(--meec-ombra-xs);
	--_ico-misura:1.25rem;--_ico-colore:currentColor;
	transition:background-color var(--meec-durata),color var(--meec-durata);
}
.meec-condividi__rete{padding:0}
.meec-condividi__copia:hover,.meec-condividi__rete:hover{background:var(--meec-sup-sezione-grigia);color:var(--meec-testo-primario)}
.meec-condividi__copia[data-copiato]{color:var(--meec-successo);border-color:currentColor}

/* --- Correzioni dal riferimento del 15/09 --------------------------------
   1. Il gruppo badge NON e' rosa: cassa e badge hanno bordo Neutri/200 su
      fondo bianco e testo scuro. (Il Figma vecchio lo dava rosa: quella nota
      qui sopra resta per storia, ma il riferimento nuovo vince.)
   2. "Copia link" e' in accento — bordo, testo e icona Accent/600 — mentre i
      bottoni delle reti restano neutri come sono gia'.                       */
.meec-gruppo-badge{
	background:var(--meec-sup-sezione-bianca);
	border:1px solid var(--meec-bordo-terziario);
	color:var(--meec-testo-primario);
}
.meec-gruppo-badge__badge{box-shadow:0 0 0 1px var(--meec-bordo-terziario) inset}
.meec-condividi__copia{color:var(--meec-testo-accento);border-color:var(--meec-bordo-primario)}
/* L'hover generico qui sopra riporterebbe il testo a Neutri: qui resta accento
   e il fondo passa ad Accent/50, come lo stato attivo del chip. */
.meec-condividi__copia:hover{background:var(--meec-sup-chip-attivo);color:var(--meec-testo-accento)}

/* --- Articolo: testo e sommario (Figma: sommario 306, testo 746) ---------- */
.meec-articolo__sezione-testo{padding-top:0}
.meec-articolo__griglia{
	display:grid;grid-template-columns:minmax(0,19.125rem) minmax(0,46.625rem);
	justify-content:space-between;column-gap:var(--meec-sp-9);
	padding-inline:calc(var(--meec-margine) + var(--meec-sp-5));   /* Figma: contenitore con 32 in piu' per lato */
}
.meec-articolo__griglia > .meec-testo-ricco{grid-column:2}
.meec-sommario{
	align-self:start;position:sticky;top:calc(var(--meec-sopra) + var(--meec-sp-5));
	display:flex;flex-direction:column;gap:var(--meec-sp-3);
	padding-block:var(--meec-sp-5);border-block:1px solid var(--meec-bordo-terziario);
}
.meec-sommario__titolo{margin:0;font-weight:600;color:var(--meec-testo-accento)}
.meec-sommario ul{display:flex;flex-direction:column;gap:var(--meec-sp-2);margin:0;padding:0;list-style:none}
.meec-sommario li{margin:0}
.meec-sommario a{color:var(--meec-testo-secondario);font-weight:600;text-decoration:none}
.meec-sommario a:hover{color:var(--meec-testo-accento);text-decoration:underline}

.meec-testo-ricco{font-size:var(--meec-testo-lg);line-height:1.556;color:var(--meec-testo-secondario)}
.meec-testo-ricco > *{margin-block:0}
.meec-testo-ricco > * + *{margin-top:1.125rem}
.meec-testo-ricco > p:first-child{font-size:var(--meec-testo-xl);line-height:1.5}
.meec-testo-ricco h2,.meec-testo-ricco h3{color:var(--meec-testo-primario);scroll-margin-top:var(--meec-sp-5)}
.meec-testo-ricco h2{font-size:var(--meec-titolo-s);line-height:1.333}
.meec-testo-ricco h3{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);line-height:1.5}
.meec-testo-ricco > :is(h2,h3){margin-top:var(--meec-sp-7)}
.meec-testo-ricco > :is(h2,h3) + *{margin-top:var(--meec-sp-4)}
.meec-testo-ricco > :is(figure,.wp-block-image,blockquote,.wp-block-quote,.wp-block-gallery){margin-block:var(--meec-sp-7)}
.meec-testo-ricco > :is(figure,.wp-block-image,blockquote,.wp-block-quote,.wp-block-gallery) + *{margin-top:var(--meec-sp-7)}
.meec-testo-ricco img{display:block;max-width:100%;height:auto}
.meec-testo-ricco figcaption{margin-top:var(--meec-sp-3);font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario);text-align:left}
.meec-testo-ricco :is(blockquote,.wp-block-quote){
	border-left:2px solid var(--meec-testo-accento);padding:var(--meec-sp-2) 0 var(--meec-sp-2) calc(var(--meec-sp-4) - var(--meec-sp-1));
	color:var(--meec-testo-primario);
}
.meec-testo-ricco :is(blockquote,.wp-block-quote) p{margin:0}
.meec-testo-ricco :is(blockquote,.wp-block-quote) cite{margin-top:var(--meec-sp-5);font-size:var(--meec-testo-sm);line-height:1.43}
.meec-testo-ricco :is(ul,ol){margin-inline:0;padding-left:1.5em}
.meec-testo-ricco li + li{margin-top:var(--meec-sp-2)}
.meec-articolo__piede{margin-top:var(--meec-sp-7);padding-top:var(--meec-sp-4);border-top:1px solid var(--meec-bordo-terziario)}
.meec-articolo__categorie{display:flex;flex-wrap:wrap;gap:var(--meec-sp-2)}
.meec-articolo__categorie a{
	display:inline-flex;padding:var(--meec-sp-0) var(--meec-sp-2);
	border:1px solid var(--_badge-bordo,var(--wp--custom--colore--badge--grigio-bordo));
	border-radius:var(--meec-raggio-sm);
	background:var(--_badge-sfondo,var(--wp--custom--colore--badge--grigio-sfondo));
	color:var(--_badge-testo,var(--wp--custom--colore--badge--grigio-testo));
	font-size:var(--meec-testo-sm);font-weight:500;line-height:1.43;text-decoration:none;
}
.meec-articolo__categorie a:hover{text-decoration:underline}
.meec-articolo__categorie a.meec-cat-eventi{--_badge-sfondo:var(--wp--custom--colore--badge--blu-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--blu-bordo);--_badge-testo:var(--wp--custom--colore--badge--blu-testo)}
.meec-articolo__categorie a.meec-cat-attivita{--_badge-sfondo:var(--wp--custom--colore--badge--attivita-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--attivita-bordo);--_badge-testo:var(--wp--custom--colore--badge--attivita-testo)}
.meec-articolo__categorie a.meec-cat-iniziative{--_badge-sfondo:var(--wp--custom--colore--badge--viola-sfondo);--_badge-bordo:var(--wp--custom--colore--badge--viola-bordo);--_badge-testo:var(--wp--custom--colore--badge--viola-testo)}
.meec-articolo__categorie a.meec-cat-storie{--_badge-sfondo:var(--meec-sup-sezione-verde-scura);--_badge-bordo:var(--meec-sup-sezione-verde-scura);--_badge-testo:var(--meec-testo-invertito)}

@media (max-width:56rem){
	.meec-articolo__griglia{grid-template-columns:minmax(0,1fr);padding-inline:var(--meec-margine);row-gap:var(--meec-sp-7)}
	.meec-articolo__griglia > .meec-testo-ricco{grid-column:auto}
	.meec-sommario{position:static}
}
@media (max-width:40rem){
	.meec-articolo__intro h1{font-size:var(--meec-titolo-m)}
	.meec-articolo__meta{flex-direction:column;align-items:flex-start}
}


/* --- Indice automatico e domande a elenco (Figma: FAQ 663:67328) ----------
   Il frame ha indice 306 + domande 746 = 1076 centrati; il 22/09 Palermo ha
   chiesto di portare il blocco alle 12 colonne: indice 306 (3 colonne) e
   domande su quel che resta dei 1296 (966, 9 colonne), stesso gap 24. */
.meec-indice{
	display:grid;grid-template-columns:minmax(0,19.125rem) minmax(0,1fr);
	align-items:start;gap:var(--meec-sp-4);
}
.meec-indice > :not(.meec-sommario){grid-column:2;min-width:0}
.meec-indice__contenuto{display:flex;flex-direction:column;gap:var(--meec-sp-9)}
.meec-pagina .meec-indice > *,.meec-pagina .meec-indice__contenuto > *,.meec-pagina .meec-indice__argomento > *{margin-block:0}
.meec-indice__argomento{display:flex;flex-direction:column;gap:var(--meec-sp-7)}
.meec-indice__argomento > h2{font-size:var(--meec-titolo-m);line-height:1.222;scroll-margin-top:var(--meec-sp-5)}
.meec-sommario--argomenti{grid-column:1;grid-row:1;padding:var(--meec-sp-5) 0 0;border-bottom:0}
.meec-sommario--argomenti ul{gap:var(--meec-sp-3)}
.meec-sommario a[aria-current="true"]{color:var(--meec-testo-accento)}

.meec-domande--elenco{gap:var(--meec-sp-4)}
.meec-domande--elenco .wp-block-details{border:0;border-bottom:1px solid var(--meec-bordo-terziario);border-radius:0;background:none}
.meec-domande--elenco summary{
	padding:0 0 var(--meec-sp-4);align-items:flex-start;gap:var(--meec-sp-4);
	font-size:var(--meec-testo-xl);line-height:1.5;color:var(--meec-testo-primario);
}
.meec-domande--elenco summary:hover{color:var(--meec-testo-accento)}
/* Sull'elenco cambia solo il colore del segno e l'allineamento: maschera e
   rotazione arrivano ora dalla regola di base. */
.meec-domande--elenco summary::after{margin-top:.1875rem;background:var(--meec-testo-primario)}
.meec-domande--elenco details[open] summary{padding-bottom:var(--meec-sp-3);color:var(--meec-testo-primario)}
.meec-domande--elenco .meec-dettagli__interno > *{padding:0;font-size:var(--meec-testo-lg);line-height:1.556}
.meec-domande--elenco .meec-dettagli__interno > * + *{margin-top:1em}
.meec-domande--elenco .meec-dettagli__interno > :last-child{padding-bottom:var(--meec-sp-4)}
.meec-domande--elenco summary:focus-visible{border-radius:var(--meec-raggio-sm);outline-offset:2px}
.meec-nota{font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}
@media (forced-colors:active){.meec-domande summary::after{background:CanvasText}}
@media (max-width:56rem){
	.meec-indice{grid-template-columns:minmax(0,1fr);gap:var(--meec-sp-7)}
	.meec-indice > :not(.meec-sommario){grid-column:1}
	.meec-sommario--argomenti{grid-row:auto;position:static}
}


/* --- Contatti (Figma: "Contatti" 571:9612) -------------------------------- */
.meec-tonda--accento{--_tonda-icona:var(--meec-testo-accento)}
.meec-pagina .meec-card > .meec-link-freccia{margin-top:auto}
.meec-link-freccia a{
	display:inline-flex;align-items:center;gap:var(--meec-sp-2);
	font-weight:600;text-underline-offset:.2em;overflow-wrap:anywhere;
}
.meec-link-freccia a::after{
	content:"";flex:none;width:1.25rem;height:1.25rem;background:currentColor;
	-webkit-mask:url("icone/freccia-destra.svg") center/contain no-repeat;mask:url("icone/freccia-destra.svg") center/contain no-repeat;
	transition:transform var(--meec-durata);
}
.meec-link-freccia a:hover::after{transform:translateX(.125rem)}
.meec-card--verde a{color:var(--meec-testo-invertito)}
.meec-card--verde a:hover{color:var(--meec-testo-invertito);text-decoration-thickness:2px}
@media (forced-colors:active){.meec-link-freccia a::after{background:LinkText}}


/* ==========================================================================
   Ammissione e borse (Figma 663:69803)
   ========================================================================== */

/* --- Cifre: occhiello, valore grande, titolo, testo ----------------------- */
.meec-cifre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:var(--meec-sp-7) 4.1875rem}
.meec-pagina .meec-cifre > *{margin-block:0}
.meec-cifra{display:flex;flex-direction:column;gap:calc(var(--meec-sp-3) + var(--meec-sp-1))}
.meec-pagina .meec-cifra > *{margin:0}
.meec-pagina .meec-cifra > h3 + p{margin-top:calc(var(--meec-sp-2) - var(--meec-sp-3) - var(--meec-sp-1))}
.meec-cifra__valore{font-family:var(--meec-font-titoli);font-weight:600;font-size:var(--meec-titolo-l);line-height:1.25;color:var(--meec-testo-primario)}
.meec-cifra h3{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5}
.meec-cifra > p:not(.meec-cifra__valore):not(.meec-occhiello){color:var(--meec-testo-secondario)}
/* Variante in riquadro bianco con divisorio (Figma: "Fino a 8.000 EUR"). */
.meec-cifre--riquadro{
	padding:var(--meec-sp-7);border-radius:var(--meec-raggio-l);background:var(--meec-sup-sezione-bianca);
	column-gap:calc(2 * var(--meec-sp-7) + 1px);
}
.meec-cifre--riquadro > .meec-cifra + .meec-cifra{position:relative}
.meec-cifre--riquadro > .meec-cifra + .meec-cifra::before{
	content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--meec-sp-7) - 1px);
	border-left:1px solid var(--meec-bordo-terziario);
}
.meec-pagina .meec-cifre + p,.meec-pagina .meec-cifre + p + p{margin-top:var(--meec-sp-5)}
.meec-pagina .meec-cifre + p + p{margin-top:var(--meec-sp-3)}

/* --- Premialita' (Ammissione): riquadro cifra + dettaglio ----------------
   Rifatto il 15/09/2026 su nuovo riferimento. Il riquadro non e' piu' due
   .meec-cifra affiancate: a sinistra una sola cifra centrata verticalmente,
   a destra il testo lungo e un elenco di spunte, separati da un filetto.
   Misure dal riferimento (scala 0,5, blocco 1440):
     riquadro   1296 (tutto il contenitore), padding 32, raggio misurato ~12
                -> si tiene il 16 delle altre card del sito
     colonne    meta' e meta', filetto 1px Neutri/200 alto quanto il contenuto
                (cioe' rientrato del padding: 220-390 su un riquadro 204-414)
     cifra      Montserrat SemiBold 48 + etichetta 16 secondaria
     dettaglio  testo 18/28, elenco spunte a 32 dal testo
   Sotto il riquadro, "Come viene erogata" e due tranche su due colonne. */
.meec-premialita{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
	padding:var(--meec-sp-5);
	border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);
}
.meec-pagina .meec-premialita > *{margin-block:0}
.meec-premialita__cifra{
	align-self:center;
	display:flex;flex-direction:column;gap:var(--meec-sp-2);
	padding-right:var(--meec-sp-5);
}
.meec-premialita__dettaglio{
	display:flex;flex-direction:column;gap:var(--meec-sp-2);
	border-left:1px solid var(--meec-bordo-terziario);
	padding-left:var(--meec-sp-5);
}
.meec-pagina :is(.meec-premialita__cifra,.meec-premialita__dettaglio) > *{margin:0}
.meec-premialita__valore{
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-titolo-l);line-height:1.25;
	color:var(--meec-testo-primario);
}
.meec-premialita__cifra > p:not(.meec-premialita__valore){color:var(--meec-testo-secondario)}
.meec-premialita__dettaglio > p{font-size:var(--meec-testo-lg);line-height:1.556}
/* 8 di gap + 24 = i 32 misurati fra la fine del testo e la prima spunta. */
.meec-pagina .meec-premialita__dettaglio > .meec-lista-spunte{
	margin-top:var(--meec-sp-4);gap:var(--meec-sp-3);
}

/* L'elenco dentro il riquadro ha la spunta a TRATTO, senza disco, e il testo a
   16: misurato sul riferimento (segno 18x14, 38 dal segno al testo). E' un
   segno diverso da quello delle altre quattro .meec-lista-spunte del sito
   (Home x2, Il Master, Programma), che nei loro frame hanno il disco pieno con
   la spunta bianca dentro: quelle NON si toccano. */
.meec-premialita__dettaglio .meec-lista-spunte li{
	padding-left:calc(1.5rem + var(--meec-sp-3));      /* segno 24 + 16 */
	font-size:var(--meec-corpo);line-height:1.5;
}
.meec-premialita__dettaglio .meec-lista-spunte li::before{
	width:1.5rem;height:1.5rem;border-radius:0;
	background:var(--meec-testo-accento);
	-webkit-mask:url("icone/spunta.svg") center/contain no-repeat;
	mask:url("icone/spunta.svg") center/contain no-repeat;
}
@media (forced-colors:active){
	.meec-premialita__dettaglio .meec-lista-spunte li::before{background:CanvasText}
}

/* "Come viene erogata": titoletto + due tranche affiancate. */
.meec-pagina .meec-premialita + .meec-erogazione__titolo{margin-top:var(--meec-sp-9)}
.meec-erogazione__titolo{
	font-family:var(--meec-font-titoli);font-weight:600;
	font-size:var(--meec-titolo-s);line-height:var(--meec-interlinea-titoli);
}
.meec-pagina .meec-erogazione__titolo + .meec-erogazione{margin-top:var(--meec-sp-4)}
.meec-erogazione{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--meec-sp-7)}
.meec-tranche{display:flex;flex-direction:column;gap:var(--meec-sp-2)}
.meec-pagina :is(.meec-erogazione,.meec-tranche) > *{margin-block:0}
.meec-tranche > h4{
	font-family:var(--meec-font-testo);font-size:var(--meec-testo-lg);
	font-weight:600;line-height:1.556;
}
.meec-tranche > p:not(.meec-occhiello){color:var(--meec-testo-secondario)}

/* Sotto i 56rem le due colonne si impilano: il filetto passa da sinistra
   a sopra, altrimenti resta appeso in mezzo al nulla. */
@media (max-width:56rem){
	.meec-premialita,.meec-erogazione{grid-template-columns:minmax(0,1fr)}
	.meec-premialita{gap:var(--meec-sp-5)}
	.meec-erogazione{gap:var(--meec-sp-5)}
	.meec-premialita__cifra{padding-right:0}
	.meec-premialita__dettaglio{
		border-left:0;border-top:1px solid var(--meec-bordo-terziario);
		padding-left:0;padding-top:var(--meec-sp-5);
	}
}

/* Card con cifra (Figma: "Posti e modalita' di accesso") */
.meec-card--cifra{gap:var(--meec-sp-3)}
.meec-pagina .meec-card--cifra > *{margin:0}
.meec-card--cifra > .meec-nota{margin-top:auto;padding-top:var(--meec-sp-3)}
/* Elenco puntato nella card (Figma 708:85685, «Posti riservati»: 2 + 2 sotto il 4):
   stesso grigio e stesso corpo del paragrafo, punto a 24 dal bordo. */
.meec-card--cifra > ul{padding-left:var(--meec-sp-4);color:var(--meec-testo-secondario);list-style:disc}
.meec-pagina .meec-card--cifra > ul > li{margin:0}

/* --- Classi di laurea: area a sinistra, etichette a destra --------------- */
.meec-classi{display:flex;flex-direction:column}
.meec-pagina .meec-classi > *{margin:0}
.meec-classe{
	display:grid;grid-template-columns:minmax(0,32.875rem) minmax(0,1fr);gap:var(--meec-sp-3) var(--meec-sp-4);
	align-items:start;padding-block:var(--meec-sp-5);border-bottom:1px solid var(--meec-bordo-terziario);
}
.meec-classe:first-child{padding-top:0}
.meec-pagina .meec-classe > *{margin:0}
.meec-classe__area{display:flex;align-items:center;gap:var(--meec-sp-4);grid-row:span 2}
.meec-pagina .meec-classe__area > *{margin:0}
.meec-classe__area .meec-numero{flex:none;min-width:5.375rem}
.meec-classe__area h4{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5;color:var(--meec-testo-primario)}   /* Text-primary nel Figma 694:82229 */
.meec-classe > .meec-nota{grid-column:2}
.meec-etichette{display:flex;flex-wrap:wrap;gap:var(--meec-sp-3);margin:0;padding:0;list-style:none}
/* Dal 22/09 sono Badge (famiglia Grey, taglia lg: pad 4/8, 16/24 Medium, raggio 8,
   bordo 1px) e non piu' chip: letto dal Figma 694:82567 (nodo 907:23165).
   Stessi token di .meec-badge in componenti.css. */
.meec-etichette li{
	margin:0;padding:var(--meec-sp-1) var(--meec-sp-2);border-radius:var(--meec-raggio-sm);
	border:1px solid var(--wp--custom--colore--badge--grigio-bordo);
	background:var(--wp--custom--colore--badge--grigio-sfondo);color:var(--wp--custom--colore--badge--grigio-testo);
	font-size:var(--meec-corpo);font-weight:500;line-height:1.5;
}
.meec-pagina .meec-classi + .meec-nota{margin-top:var(--meec-sp-5)}
.meec-pagina h3.meec-titoletto{font-size:var(--meec-titolo-s);line-height:1.333;margin:0 0 var(--meec-sp-9)}

/* --- Cronologia a zig-zag (Figma: "Processo di selezione") --------------- */
.meec-cronologia{
	position:relative;max-width:52.5rem;margin-inline:auto;
	display:flex;flex-direction:column;gap:var(--meec-sp-11);
	counter-reset:tappa;
}
.meec-pagina .meec-cronologia > *{margin:0}
.meec-cronologia::before{
	content:"";position:absolute;left:50%;top:1.5rem;bottom:1.5rem;
	border-left:1px solid var(--meec-testo-accento);
}
.meec-tappa{
	position:relative;counter-increment:tappa;
	display:grid;grid-template-columns:minmax(0,1fr) 3rem minmax(0,1fr);column-gap:var(--meec-sp-3);
	align-items:start;
}
.meec-pagina .meec-tappa > *{margin:0}
.meec-tappa::before{
	content:counter(tappa);grid-column:2;grid-row:1 / span 2;
	display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
	background:var(--meec-sup-bottone-primario);color:var(--meec-testo-invertito);
	font:500 1.5rem/1 var(--meec-font-titoli);position:relative;z-index:1;
}
.meec-tappa > h3{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5;padding-top:var(--meec-sp-2)}
.meec-tappa > p{color:var(--meec-testo-secondario);margin-top:var(--meec-sp-2)}
.meec-tappa:nth-child(odd) > *{grid-column:1;text-align:right}
.meec-tappa:nth-child(even) > *{grid-column:3}
.meec-tappa > h3{grid-row:1}
.meec-tappa > p{grid-row:2}
@media (max-width:40rem){
	.meec-cronologia{gap:var(--meec-sp-7)}
	.meec-cronologia::before{left:1.5rem}
	.meec-tappa{grid-template-columns:3rem minmax(0,1fr)}
	.meec-tappa::before{grid-column:1}
	.meec-tappa:nth-child(n) > *{grid-column:2;text-align:left}
}

/* --- Numeri scuri (Figma: "Come candidarsi" 01-04) ----------------------- */
.meec-sezione .meec-numero.meec-numero--scuro{color:var(--meec-testo-primario)}
.meec-passi--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--meec-sp-5)}
.meec-pagina .meec-passi + .wp-block-buttons{margin-top:var(--meec-sp-9)}
.meec-pagina .meec-passi + .wp-block-buttons + .meec-nota{margin-top:var(--meec-sp-3)}
/* La freccia a destra del Figma. Il meccanismo e' quello che il tema usa gia'
   su Home/Network/Programma/Ammissione: maschera di icone/freccia-destra.svg
   in currentColor, quindi segue il colore del pulsante anche in hover e in
   forced-colors. E' una ::after decorativa senza testo: non entra
   nell'albero di accessibilita', quindi non serve marcarla aria-hidden.
   Il secondo selettore e' l'alias di "Direzione e Faculty": si toglie quando
   il blocco pulsanti ha la classe meec-bottone-freccia.                     */
.meec-bottone-freccia .wp-block-button__link::after,
.meec-bottone.meec-bottone-freccia::after,
.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-button__link::after{
	content:"";display:inline-block;vertical-align:-.3em;width:1.5rem;height:1.5rem;margin-left:var(--meec-sp-2);
	background:currentColor;
	-webkit-mask:url("icone/freccia-destra.svg") center/1.25rem no-repeat;mask:url("icone/freccia-destra.svg") center/1.25rem no-repeat;
}
/* Micro-interazione sobria: la freccia scorre di 3px, 150ms con la curva del
   tema. Solo su questa fascia, per non toccare gli altri pulsanti-freccia del
   sito; per uniformarla basta aggiungere .meec-bottone-freccia ai selettori. */
.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-button__link::after{
	transition:transform var(--meec-durata) var(--meec-curva);
}
.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-button__link:hover::after,
.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-button__link:focus-visible::after{
	transform:translateX(3px);
}
@media (prefers-reduced-motion:reduce){
	.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-button__link::after{
		transition:none;
	}
	.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-button__link:hover::after,
	.meec-sezione:has(.meec-persone):has(.meec-bottoni.meec-centro) .wp-block-button__link:focus-visible::after{
		transform:none;
	}
}

/* --- Scadenze in sei colonne, senza linea di chiusura -------------------- */
/* Sei colonne ESPLICITE: con auto-fit la griglia andrebbe a capo e la linea
   orizzontale taglierebbe in due la seconda riga. Stesso motivo per cui la
   timeline di "Dal campus alle imprese" scriveva le colonne a mano. */
.meec-date--sei{grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:0;padding-bottom:0}

/* Stesso ripiego verticale per la variante a sei, ma piu' in alto: sei colonne
   a 1024px sarebbero larghe 127 e "Immatricolazione" non ci starebbe. Le
   regole sono le stesse del blocco qui sopra, ripetute perche' il punto di
   rottura e' diverso e in CSS una media query non si puo' parametrizzare. */
@media (max-width:80rem){
	.meec-date--sei{
		grid-template-columns:minmax(0,1fr);
		row-gap:var(--meec-sp-5);
	}
	.meec-date--sei::before{content:none}
	.meec-date--sei .meec-data{
		position:relative;
		display:grid;grid-template-columns:2rem minmax(0,1fr);
		column-gap:var(--meec-sp-3);row-gap:var(--meec-sp-2);
	}
	/* Il pallino copre solo le righe 1-2 della colonna 1: senza questa riga
	   il TERZO figlio (la descrizione) finisce in colonna 1, larga 32px. */
	.meec-date--sei .meec-data > *{grid-column:2}
	.meec-date--sei .meec-data::before{
		grid-row:1 / span 2;grid-column:1;
		align-self:start;margin-bottom:0;
	}
	.meec-date--sei .meec-data:not(:last-child)::after{
		content:"";position:absolute;
		left:1rem;margin-left:-1px;width:2px;
		top:1rem;bottom:calc(-1 * (var(--meec-sp-5) + 1rem));
		background:var(--meec-sup-bottone-primario);
	}
}
.meec-data > .meec-occhiello{margin-top:0;color:var(--meec-testo-accento)}
@media (max-width:56rem){
	.meec-classe{grid-template-columns:minmax(0,1fr)}
	.meec-classe__area{grid-row:auto}
	.meec-classe > .meec-nota{grid-column:1}
	.meec-cifre--riquadro > .meec-cifra + .meec-cifra::before{left:0;right:0;top:calc(-1 * var(--meec-sp-7) / 2 - .5px);bottom:auto;border-left:0;border-top:1px solid var(--meec-bordo-terziario)}
	.meec-cifre--riquadro{padding:var(--meec-sp-5)}
}


/* ==========================================================================
   Programma: elenco dei moduli ([meec_moduli]) e scheda modulo
   Figma: "Programma" 663:68456 (tabella con bordo e raggio 12)
   ========================================================================== */
.meec-moduli{display:flex;flex-direction:column;gap:var(--meec-sp-9)}
.meec-moduli__gruppo{scroll-margin-top:var(--meec-sp-5)}
.meec-moduli__categoria{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--meec-sp-2) var(--meec-sp-3);
	margin:0 0 var(--meec-sp-4);font-size:var(--meec-titolo-s);line-height:1.333;
}
.meec-moduli__quanti{
	display:inline-flex;padding:var(--meec-sp-0) var(--meec-sp-2);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-rosa);color:var(--meec-testo-accento);
	font:500 var(--meec-testo-sm)/1.43 var(--meec-font-testo);
}
.meec-moduli__elenco{
	margin:0;padding:0;list-style:none;
	border:1px solid var(--meec-bordo-terziario);border-radius:.75rem;
	background:var(--meec-sup-sezione-bianca);
}
/* Niente overflow:hidden qui: taglierebbe l'anello di focus del titolo.
   Gli angoli si arrotondano sulla prima e sull'ultima voce. */
.meec-moduli__voce{margin:0}
.meec-moduli__voce + .meec-moduli__voce{border-top:1px solid var(--meec-bordo-terziario)}
/* Solo un margine d'aria: l'intestazione sticky la scavalca gia'
   :root{scroll-padding-top:--meec-sopra} in base.css, e le due misure si
   sommano (scrollIntoView tiene conto di entrambe). */
.meec-moduli__scheda{scroll-margin-top:var(--meec-sp-3)}
/* Il fondo del titolo in hover non deve sbordare dagli angoli del riquadro.
   Corner per corner, non con la scorciatoia: prima e ultima voce coincidono
   quando il gruppo ha un modulo solo, e due scorciatoie si annullerebbero. */
.meec-moduli__voce:first-child .meec-moduli__riga{border-start-start-radius:.75rem;border-start-end-radius:.75rem}
.meec-moduli__voce:last-child .meec-moduli__scheda:not([open]) .meec-moduli__riga{border-end-start-radius:.75rem;border-end-end-radius:.75rem}

/* La riga chiusa: titolo e chevron. Il numero del modulo non si stampa piu'
   (prof. Cappuccino, 24/09/2026): la colonna da 3rem e' sparita e il pannello
   si allinea al titolo, cioe' al padding della riga. */
.meec-moduli__riga{
	display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;align-items:center;gap:var(--meec-sp-3) var(--meec-sp-4);
	padding:var(--meec-sp-3) var(--meec-sp-4);
	cursor:pointer;list-style:none;
	transition:background-color var(--meec-durata),color var(--_dett-apertura) var(--_dett-curva);
}
.meec-moduli__riga::-webkit-details-marker{display:none}
.meec-moduli__riga::after{
	content:"";width:1.5rem;height:1.5rem;background:var(--meec-testo-secondario);
	-webkit-mask:url("icone/chevron-giu.svg") center/contain no-repeat;mask:url("icone/chevron-giu.svg") center/contain no-repeat;
	transition:transform var(--_dett-apertura) var(--_dett-curva),background-color var(--meec-durata);
}
.meec-moduli__riga:hover{background:var(--meec-sup-sezione-grigia)}
.meec-moduli__riga:hover .meec-moduli__titolo{color:var(--meec-testo-accento)}
.meec-moduli__riga:hover::after{background:var(--meec-testo-accento)}
.meec-moduli__riga:focus-visible{outline:3px solid var(--meec-focus);outline-offset:-3px}
.meec-moduli__scheda[open] > .meec-moduli__riga::after{transform:rotate(180deg);background:var(--meec-testo-accento)}
.meec-moduli__scheda[open] .meec-moduli__titolo{color:var(--meec-testo-accento)}
.meec-moduli__scheda:not([open]) > .meec-moduli__riga,
.meec-moduli__scheda:not([open]) > .meec-moduli__riga::after{transition-duration:var(--_dett-chiusura)}

.meec-moduli__titolo{font-weight:600;font-size:var(--meec-testo-lg);line-height:1.556;color:var(--meec-testo-primario);transition:color var(--meec-durata)}

/* Il pannello: allineato al titolo. */
.meec-moduli__scheda .meec-dettagli__interno > *{
	margin:0;
	padding:0 var(--meec-sp-4);
	color:var(--meec-testo-secondario);
}
.meec-moduli__scheda .meec-dettagli__interno > * + *{margin-top:var(--meec-sp-3)}
.meec-moduli__scheda .meec-dettagli__interno > :last-child{padding-bottom:var(--meec-sp-4)}
.meec-moduli__competenze p{margin:0}
.meec-moduli__competenze p + p{margin-top:var(--meec-sp-2)}
.meec-moduli__docenti{font-size:var(--meec-testo-sm);line-height:1.43}
.meec-moduli__etichetta{display:block;font-weight:600;color:var(--meec-testo-primario)}
.meec-moduli__executive{font-size:var(--meec-testo-sm);line-height:1.43}
.meec-moduli__marchio{
	display:inline-flex;padding:var(--meec-sp-0) var(--meec-sp-2);margin-right:var(--meec-sp-1);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-rosa);color:var(--meec-testo-accento);
	font:500 var(--meec-testo-sm)/1.43 var(--meec-font-testo);
}
@media (forced-colors:active){.meec-moduli__riga::after{background:CanvasText}}

/* Sotto i 480: gap piu' stretto fra titolo e chevron. */
@media (max-width:30rem){
	.meec-moduli__riga{gap:var(--meec-sp-2) var(--meec-sp-3)}
}

/* In stampa la fisarmonica non ha senso: si apre tutto. */
@media print{
	.meec-moduli__riga::after{display:none}
	.meec-moduli__scheda .meec-dettagli__pannello{grid-template-rows:1fr}
	.meec-moduli__scheda .meec-dettagli__interno{opacity:1;translate:none;overflow:visible}
}

/* Scheda modulo */
.meec-modulo__corpo{padding-top:0}
.meec-modulo__griglia{
	display:grid;grid-template-columns:minmax(0,46.625rem) minmax(0,25rem);
	justify-content:space-between;align-items:start;gap:var(--meec-sp-9) var(--meec-sp-9);
}
.meec-pagina .meec-modulo__griglia > *{margin:0}
.meec-intestazione .meec-occhiello a{color:inherit}
.meec-modulo__dati{position:sticky;top:calc(var(--meec-sopra) + var(--meec-sp-5))}
.meec-modulo__dati dl{display:flex;flex-direction:column;gap:var(--meec-sp-4);margin:0}
.meec-modulo__dati dl > div{display:flex;flex-direction:column;gap:var(--meec-sp-1)}
.meec-modulo__dati dt{font:600 var(--meec-corpo)/1.5 var(--meec-font-titoli);color:var(--meec-testo-accento)}
.meec-modulo__dati dd{margin:0;color:var(--meec-testo-primario)}
.meec-modulo__executive{margin-top:var(--meec-sp-7)}
.meec-modulo__navigazione{
	grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:var(--meec-sp-4);
	padding-top:var(--meec-sp-5);border-top:1px solid var(--meec-bordo-terziario);
}
.meec-modulo__navigazione a{display:flex;flex-direction:column;gap:var(--meec-sp-1);font-weight:600;text-decoration:none;color:var(--meec-testo-primario)}
.meec-modulo__navigazione a:hover span:last-child{color:var(--meec-testo-accento);text-decoration:underline}
.meec-modulo__succ{grid-column:2;text-align:right}
@media (max-width:56rem){
	.meec-modulo__griglia{grid-template-columns:minmax(0,1fr)}
	.meec-modulo__dati{position:static}
	.meec-modulo__navigazione{grid-template-columns:1fr}
	.meec-modulo__succ{grid-column:1;text-align:left}
}
/* Realta' che hanno ospitato i tirocini, per edizione */
.meec-edizione{display:flex;flex-direction:column;gap:var(--meec-sp-4)}
.meec-pagina .meec-edizione > *{margin:0}
.meec-edizione h3{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5}
.meec-edizione .meec-nomi{grid-template-columns:minmax(0,1fr);gap:var(--meec-sp-3)}
.meec-edizioni{align-items:start}

/* ==========================================================================
   Opportunita' e network (Figma 636:54272)
   ========================================================================== */
/* Pannello grigio arrotondato con due colonne — MOTUS-E.
   Letto dal Figma con la Plugin API (nodo 636:55329): pannello 1296x432,
   raggio 16, fondo #f7f7f7 (= sfondo-tenue), padding 64, gap 96.

   Il punto che il tema aveva sbagliato: **l'immagine non sta dentro il
   padding**. Nel Figma e' un nodo in posizione ABSOLUTE, 600x432, raggi
   16/0/0/16, appoggiato all'angolo del pannello: occupa il bordo sinistro,
   tutto in altezza, e i suoi angoli destri sono vivi. Il rettangolo rosa
   536x296 che il tema riproduceva e' un nodo che nel Figma **sta sotto** ed
   e' completamente coperto: si vedeva nell'elenco dei livelli, non nel
   disegno. (Le due annotazioni a margine, «Colore >» e «IMG >», stanno una
   per nodo: sono promemoria del designer, non due elementi da impaginare.)

   Quindi il padding vale solo per la colonna di testo, e le colonne sono
   600 | 696, dove i 696 sono gap 96 + testo 536 + padding destro 64.
   600 + 96 + 536 + 64 = 1296 esatti.                                        */
.meec-pannello{
	display:grid;grid-template-columns:600fr 696fr;align-items:stretch;
	min-height:27rem;                        /* 432px: l'altezza del pannello nel Figma, quando il testo e' piu' corto */
	padding:0;border-radius:var(--meec-raggio-l);background:var(--meec-sup-sezione-grigia);
}
.meec-pagina .meec-pannello > *{margin:0}
/* La colonna immagine e' "tutto cio' che non e' il testo": oggi il segnaposto,
   domani un blocco Immagine, senza dover aggiungere classi dall'editor.
   Niente overflow:hidden sul pannello — taglierebbe l'anello di focus di un
   eventuale bottone: i due angoli si arrotondano qui, come nel Figma. */
.meec-pannello > :not(.meec-affiancati__testo){
	width:100%;min-width:0;                  /* larghezza definita: vedi la trappola qui sotto */
	border-radius:var(--meec-raggio-l) 0 0 var(--meec-raggio-l);
	object-fit:cover;
}
/* Quando ci sara' un blocco Immagine vero al posto del segnaposto. */
.meec-pannello > :not(.meec-affiancati__testo) img{
	display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;
}
/* TRAPPOLA (14/09): `aspect-ratio` su un elemento di griglia stirato non e'
   un'altezza minima, e' un vincolo in tutte e due le direzioni. L'elemento
   e' `align-self:stretch`, quindi la sua altezza e' definita (qui 458, perche'
   il testo del sito e' piu' lungo di quello del Figma); con la larghezza in
   `auto` il rapporto la ricalcola come 458 x 600/432 = **636px** e l'immagine
   sborda dalla propria colonna da 600, spingendosi sopra il testo. `min-width:0`
   sistema la traccia ma non l'elemento.
   La cura e' non usare il rapporto per l'altezza: `width:100%` rende definita
   anche la larghezza (e un rapporto con entrambe definite non si applica), e
   il pavimento dei 432 lo mette `min-height` sul pannello, che e' anche quello
   che il Figma dice davvero.                                                */
.meec-pannello .meec-affiancati__testo{
	justify-content:center;
	padding:var(--meec-sp-9) var(--meec-sp-9) var(--meec-sp-9) var(--meec-sp-13);
}
/* Le card su fondo scuro (.meec-card--su-scuro) di "Dove la formazione
   incontra il mondo del lavoro" sono state tolte il 16/09/2026: il Figma
   (636:55436) usa le stesse "caratteristiche" della Home su una fotografia.
   Ripristino: revisione WP 173 della pagina Opportunita' e network.        */
/* --- Invito (Figma 650:56709, «Entra nel network MEEC») -------------------
   Una riga: colonna di testo da 746 (occhiello, titolo, paragrafo 18) e le
   azioni spinte a destra, centrate in verticale, bottoni a 12 di distanza.
   Sotto 56rem le azioni scendono sotto il testo, allineate a sinistra.      */
.meec-invito{display:flex;align-items:center;justify-content:space-between;gap:var(--meec-sp-4) var(--meec-sp-9)}
.meec-invito__testo{max-width:46.625rem;display:flex;flex-direction:column;gap:var(--meec-sp-4)}
.meec-invito__testo > *{margin:0}
.meec-invito__testo > p:not(.meec-occhiello){font-size:var(--meec-testo-lg);line-height:1.4}
.meec-pagina .meec-invito__azioni{margin:0;flex:none;gap:0.75rem;justify-content:flex-end}
@media (max-width:56rem){
	.meec-invito{flex-direction:column;align-items:flex-start}
	.meec-pagina .meec-invito__azioni{justify-content:flex-start}
}
/* Muro di nomi al posto del muro di loghi (Figma 650:57684: celle centrate,
   gap 40, righe centrate). I loghi non ci sono: al loro posto le ragioni
   sociali, col segno a sinistra che il tema usa gia' per gli elenchi di nomi. */
.meec-pagina .meec-nomi--muro{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--meec-sp-4) var(--meec-sp-6)}
.meec-pagina .meec-nomi--muro li{flex:none;max-width:100%}
/* «Oltre 30 realta'» (Figma 977:30233): colonna di testo da 746, poi il
   bottone a 32. Fondo verde chiaro dalla classe di sezione. */
.meec-pagina .meec-sezione__testata--stretta{max-width:46.625rem;margin-bottom:var(--meec-sp-5)}
.meec-pagina .meec-nomi + p,.meec-pagina .meec-nomi + p + .wp-block-buttons{margin-top:var(--meec-sp-7)}
.meec-pagina .meec-nomi + p + .wp-block-buttons{margin-top:var(--meec-sp-4)}
/* Sotto i 900 il Figma non ha nulla (la pagina non esiste in DEF mobile):
   scelta nostra, l'immagine resta a filo ma in cima e piu' bassa. */
@media (max-width:56rem){
	/* min-height via: in colonna singola le due righe se lo dividerebbero. Qui
	   l'altezza dell'immagine la da' il rapporto, e va bene perche' la
	   larghezza e' definita dalla colonna unica. */
	.meec-pannello{grid-template-columns:minmax(0,1fr);min-height:0}
	.meec-pannello > :not(.meec-affiancati__testo){
		aspect-ratio:600/320;
		border-radius:var(--meec-raggio-l) var(--meec-raggio-l) 0 0;
	}
	.meec-pannello .meec-affiancati__testo{padding:var(--meec-sp-5)}
}
/* --- Storie della community (Figma 650:56739, [meec_testimonianze]) -------
   Scheda 416x304 minimo, padding 32, raggio 16, bordo 1px, fondo bianco;
   griglia di tre colonne da 416 con gap 24 (3x416 + 2x24 = 1296).
   Il Figma ne mostra nove di riempimento, sfalsate e con una velatura in
   basso: sono un muro finto per far vedere il componente. Il Doc ne prevede
   **quattro**, quindi lo sfalsamento e la velatura non sono stati recepiti —
   con quattro schede sarebbero rumore. Con quattro schede lo shortcode passa
   da solo a due colonne (vedi MEEC_Testimonianze::shortcode).                */
/* Tracce da 416 (26rem) come nel Figma, non frazioni: con quattro schede due
   colonne da 636 darebbero righe di ~90 caratteri, troppo lunghe da leggere.
   `auto-fit` ne mette tre a 1296 e scende a due quando lo spazio cala.
   Il minimo della traccia e' 20rem e non 0: con `minmax(0,26rem)` il conteggio
   si fa sul massimo, e a 960 (contenuto 816) veniva **una sola** scheda da 416
   in mezzo a 400px di vuoto. Con il minimo a 320 ne entrano due, che si
   allargano fino a 416. */
.meec-storie{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),26rem));
	justify-content:center;gap:var(--meec-sp-4);align-items:stretch;
}
.meec-pagina .meec-storie > *{margin:0}
/* `justify-content` centra le TRACCE, non l'ultima riga: a 1296 le tre tracce
   riempiono esattamente il contenitore, quindi non avanza spazio e la quarta
   scheda resterebbe spaiata a sinistra. La si sposta in colonna 2. Vale per
   4 schede (3n+1 con n=1), per 7, e anche per una sola: sempre al centro. */
.meec-storia:last-child:nth-child(3n+1){grid-column:2}
/* Testata centrata: nel Figma occhiello e titolo stanno in un blocco da 768
   centrato. `.meec-storie` e' uno scopo vero e unico, niente alias. */
.meec-pagina .meec-sezione:has(.meec-storie) .meec-sezione__testata{
	max-width:48rem;margin-inline:auto;text-align:center;
}

.meec-storia{
	display:flex;flex-direction:column;justify-content:space-between;gap:var(--meec-sp-4);
	min-height:19rem;                        /* 304: l'altezza della scheda nel Figma */
	padding:var(--meec-sp-5);
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);
}
.meec-storia__testo{
	margin:0;border:0;padding:0;
	font-style:normal;                       /* GeneratePress mette il corsivo su blockquote: nel Figma non c'e' */
	color:var(--meec-testo-secondario);
}
.meec-storia__testo p{margin:0;font-size:var(--meec-corpo);line-height:1.5}
.meec-storia__testo p + p{margin-top:var(--meec-sp-2)}
.meec-storia__firma{display:flex;align-items:center;gap:.75rem}   /* 12, fra le due misure del Figma */
.meec-storia__ritratto,
.meec-storia__iniziali{
	flex:none;width:3rem;height:3rem;border-radius:50%;   /* 48 */
	object-fit:cover;
}
.meec-storia__iniziali{
	display:grid;place-items:center;
	background:var(--meec-sup-sezione-rosa);color:var(--meec-testo-accento);
	font:600 var(--meec-testo-sm)/1 var(--meec-font-titoli);
	letter-spacing:.02em;
}
.meec-storia__chi{display:flex;flex-direction:column;gap:var(--meec-sp-1)}
.meec-storia__nome{font-weight:600;color:var(--meec-testo-primario)}
.meec-storia__ruolo{font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}

/* Testi lunghi (30/09/2026): le schede restano uniformi. navigazione.js
   avvolge testo e bottone in .meec-storia__corpo e riduce a 18rem (12 righe)
   solo i testi che sfondano quella misura, con una sfumatura in basso e
   «Leggi di più». L'apertura anima l'altezza (da 18rem all'altezza vera, poi
   auto) con le curve di tokens.css; con prefers-reduced-motion si apre di scatto.
   Senza JavaScript non c'e' riduzione: il testo si legge tutto. */
.meec-storia__corpo{display:flex;flex-direction:column;gap:var(--meec-sp-3)}
.meec-storia--ridotta .meec-storia__testo{
	position:relative;overflow:hidden;
	transition:height var(--meec-durata-apertura) var(--meec-curva);
}
.meec-storia--chiusa .meec-storia__testo{transition-duration:var(--meec-durata-chiusura);transition-timing-function:var(--meec-curva-uscita)}
.meec-storia--ridotta .meec-storia__testo::after{
	content:"";position:absolute;inset:auto 0 0;height:5rem;pointer-events:none;
	background:linear-gradient(to bottom,rgb(255 255 255 / 0),var(--meec-sup-sezione-bianca));
	opacity:1;transition:opacity var(--meec-durata-chiusura) var(--meec-curva-uscita);
}
.meec-storia--aperta .meec-storia__testo::after{opacity:0;transition-duration:var(--meec-durata-apertura)}
.meec-storia__espandi{
	align-self:flex-start;
	display:inline-flex;align-items:center;gap:var(--meec-sp-1);
	margin:0;padding:0;border:0;background:none;cursor:pointer;
	font:inherit;font-weight:600;line-height:1.5;color:var(--meec-testo-accento);
	text-underline-offset:.2em;
}
.meec-storia__espandi:hover{text-decoration:underline}
.meec-storia__espandi::after{
	content:"";flex:none;width:1.25rem;height:1.25rem;background:currentColor;
	-webkit-mask:url("icone/chevron-giu.svg") center/contain no-repeat;mask:url("icone/chevron-giu.svg") center/contain no-repeat;
	transition:transform var(--meec-durata-apertura) var(--meec-curva);
}
.meec-storia--aperta .meec-storia__espandi::after{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
	.meec-storia--ridotta .meec-storia__testo,
	.meec-storia--ridotta .meec-storia__testo::after,
	.meec-storia__espandi::after{transition:none}
}
@media (forced-colors:active){
	.meec-storia--ridotta .meec-storia__testo::after{display:none}
	.meec-storia__espandi{text-decoration:underline}
}

/* L'avviso di contenuto segnaposto: deve saltare all'occhio, non mimetizzarsi.
   Sparisce da solo quando viene pubblicata la prima testimonianza vera. */
.meec-storie__avviso{
	margin:var(--meec-sp-4) 0 0;padding:var(--meec-sp-3) var(--meec-sp-4);
	border:1px dashed var(--meec-bordo-primario);border-radius:var(--meec-raggio-sm);
	background:var(--meec-sup-sezione-rosa);color:var(--meec-testo-accento);
	font-size:var(--meec-testo-sm);line-height:1.43;
}

@media (max-width:56rem){
	.meec-storie{grid-template-columns:minmax(0,1fr)}
	/* In colonna singola `grid-column:2` creerebbe una seconda colonna implicita. */
	.meec-storia:last-child:nth-child(3n+1){grid-column:auto}
	.meec-storia{min-height:0}
}

.meec-passi--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--meec-sp-7) var(--meec-sp-5)}
@media (max-width:56rem){.meec-passi--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}}

/* ==========================================================================
   Laboratori e Living Lab (Figma 723:90292)
   ========================================================================== */
/* Testo a piena larghezza, sotto due voci brevi affiancate (Figma "Living Lab",
   ridisegnato il 15/09/2026: prima erano testo 853 a sinistra + voci 307 a
   destra con barretta magenta). Il wrapper serve solo a dare i 72px fra il
   testo e le voci: la testata non e' una .meec-sezione__testata perche' il
   paragrafo occupa tutta la larghezza del contenitore, non e' centrato.      */
.meec-testo-e-voci{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--meec-sp-10)}
.meec-pagina .meec-testo-e-voci > *{margin:0}
.meec-voci-brevi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--meec-sp-7) var(--meec-sp-13)}
.meec-pagina .meec-voci-brevi > *{margin:0}
.meec-voce-breve{display:flex;flex-direction:column;gap:var(--meec-sp-2)}
.meec-pagina .meec-voce-breve > *{margin:0}
/* Display/sm 30/38 in accento: stessa scala della .meec-citazione. La
   specificita' alzata serve a battere la regola generica sugli h3.          */
.meec-pagina .meec-voce-breve h3{font-family:var(--meec-font-titoli);font-size:var(--meec-display-s);font-weight:600;line-height:1.267;color:var(--meec-testo-accento)}
.meec-voce-breve p{color:var(--meec-testo-secondario)}
/* Voci con icona tonda su fondo scuro: cerchio bianco, icona verde */
.meec-sezione--scura .meec-tonda{--_tonda-sfondo:var(--meec-testo-invertito);--_tonda-icona:var(--meec-sup-sezione-verde-scura)}
.meec-sezione--scura .meec-passo p{color:var(--meec-testo-invertito)}
.meec-passo > .meec-occhiello + h3{margin-top:calc(var(--meec-sp-2) - var(--meec-sp-3) - var(--meec-sp-1))}
@media (max-width:56rem){.meec-voci-brevi{grid-template-columns:minmax(0,1fr);gap:var(--meec-sp-7)}}

/* ==========================================================================
   Documenti (Figma 723:89069, tavola completa dal 16/09/2026)
   Intestazione a bandiera con occhiello, chip dei tipi, barra grigia con la
   ricerca, tabella con bordo e raggio 12, paginazione come le notizie.
   Le funzioni stanno in inc/documenti.php.
   ========================================================================== */
/* Le chip stanno a 40 dalla testata (gap della sezione nel Figma); la
   testata ha gia' il suo margine di 64, che qui si accorcia.              */
.meec-archivio-documenti .meec-sezione--archivio .meec-sezione__testata{margin-bottom:var(--meec-sp-6)}
.meec-archivio-documenti .meec-sezione--archivio{padding-bottom:0}
.meec-archivio-documenti .meec-documenti{padding-top:var(--meec-sp-6)}

/* Barra strumenti: fondo tenue, raggio 12, padding 16; campo di ricerca
   320x44 bianco con la lente dentro (Figma "Search").                     */
.meec-documenti__strumenti{
	display:flex;align-items:center;justify-content:space-between;gap:var(--meec-sp-3);
	margin:0 0 var(--meec-sp-5);padding:var(--meec-sp-3);
	border-radius:.75rem;background:var(--meec-sup-sezione-grigia);
}
.meec-campo-cerca{
	position:relative;display:block;width:min(100%,20rem);
	--_ico-misura:1.25rem;--_ico-colore:var(--meec-testo-secondario);
}
.meec-campo-cerca .meec-ico-cerca{position:absolute;left:var(--meec-sp-3);top:50%;translate:0 -50%;pointer-events:none}
.meec-campo-cerca input{
	width:100%;min-height:2.75rem;margin:0;padding:0 var(--meec-sp-3) 0 calc(var(--meec-sp-3) * 2 + 1.25rem);
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-sm);
	background:var(--meec-sup-sezione-bianca);color:var(--meec-testo-primario);
	font:400 var(--meec-corpo)/1.5 var(--meec-font-testo);
}
.meec-campo-cerca input::placeholder{color:var(--meec-testo-secondario)}
.meec-campo-cerca input:focus-visible{outline:2px solid var(--meec-bordo-primario);outline-offset:2px}

/* Tabella: contenitore con bordo e raggio 12; testata grigia 40 di altezza,
   righe da 72, testo sm secondario, nome in 600 con l'icona tonda rosa 40. */
.meec-tabella{overflow-x:auto;border:1px solid var(--meec-bordo-terziario);border-radius:.75rem;background:var(--meec-sup-sezione-bianca)}
.meec-tabella:focus-visible{outline:2px solid var(--meec-bordo-primario);outline-offset:2px}
.meec-tabella-documenti{width:100%;margin:0;border:0;border-collapse:collapse;font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}
/* GeneratePress mette bordi destro e basso a td/th: si azzerano e resta solo il filetto sopra. */
.meec-tabella-documenti th,.meec-tabella-documenti td{padding:var(--meec-sp-2) var(--meec-sp-4);text-align:left;vertical-align:middle;border:0;border-top:1px solid var(--meec-bordo-terziario);font-weight:400}
.meec-tabella-documenti thead th{height:2.5rem;padding-block:0;border-top:0;background:var(--meec-sup-sezione-grigia);color:var(--meec-testo-secondario);font-weight:400;white-space:nowrap}
.meec-tabella-documenti tbody tr{height:4.5rem}
.meec-tabella-documenti__nome{width:44%}
.meec-tabella-documenti__file{
	display:inline-flex;align-items:center;gap:var(--meec-sp-3);
	color:var(--meec-testo-primario);font-size:var(--meec-corpo);font-weight:600;line-height:1.5;text-decoration:none;
}
.meec-tabella-documenti__file:hover{color:var(--meec-testo-accento);text-decoration:underline}
.meec-tabella-documenti__icona{
	flex:none;width:2.5rem;height:2.5rem;border-radius:50%;
	background:var(--meec-sup-sezione-rosa) url("icone/file.svg") no-repeat center/1.25rem;
}
.meec-tabella-documenti__azione{width:3.5rem;text-align:right}
.meec-tabella-documenti__scarica{
	display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--meec-raggio-sm);
	color:var(--meec-testo-primario);
}
.meec-tabella-documenti__scarica .meec-icona{width:1.5rem;height:1.5rem}
.meec-tabella-documenti__scarica:hover{background:var(--meec-sup-sezione-rosa);color:var(--meec-testo-accento)}
.meec-tabella-documenti time{white-space:nowrap}
/* Sotto i 64rem la tabella perde le colonne meno utili (restano nome,
   categoria, data e scarico); sotto i 40rem anche la data. Il nome del
   file sta comunque tutto nella scheda del documento.                   */
@media (max-width:64rem){
	.meec-tabella-documenti__tipo,.meec-tabella-documenti__peso{display:none}
	.meec-tabella-documenti__nome{width:auto}
}
@media (max-width:40rem){
	.meec-tabella-documenti__data{display:none}
	.meec-documenti__strumenti{flex-direction:column;align-items:stretch}
	.meec-campo-cerca{width:100%}
}
.meec-dl-vuoto{margin:0;color:var(--meec-testo-secondario)}

/* --- 404 (Figma 404_2: testo 636 + immagine 636x489) --------------------- */
.meec-404 .meec-sezione{padding-block:clamp(4rem,5vw + 2rem,9.125rem)}
.meec-404 .meec-affiancati{gap:var(--meec-sp-7) 1.625rem}
.meec-404 .meec-affiancati__testo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--meec-sp-3)}
.meec-404 .meec-affiancati__testo > *{margin:0}
.meec-404 h1{font-size:var(--meec-titolo-l)}
.meec-404__azioni{margin-top:var(--meec-sp-3) !important}
.meec-404__immagine{aspect-ratio:636/489}
.meec-bottone--freccia::after{
	content:"";width:1.5rem;height:1.5rem;background:currentColor;
	-webkit-mask:url("icone/freccia-destra.svg") center/1.25rem no-repeat;mask:url("icone/freccia-destra.svg") center/1.25rem no-repeat;
}

/* --- Video dell'hero: bottone Pausa/Riproduci -----------------------------
   In basso a destra, come il comando del carosello. L'hero e' alto quanto la
   finestra, quindi all'apertura della pagina il suo bordo inferiore coincide
   con quello della finestra: con bottom = sp-5 il bottone finiva SOTTO il
   lanciatore fisso «Assistente MEEC» (16px dal bordo, 48px di altezza, fino a
   64px). Si alza di 4.5rem (72px): il bottone sta fra 104 e 148px dal fondo
   dell'hero, il lanciatore sotto i 64 della finestra; i 40px d'aria coprono
   anche i casi in cui l'hero sborda un poco sotto la finestra (barra admin,
   testo lungo sui telefoni). Rilevato il 06/10/2026. */
.meec-hero__comando-video{
	position:absolute;z-index:2;right:var(--meec-margine);bottom:calc(var(--meec-sp-5) + 4.5rem);
	display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;
	border:1px solid rgba(255,255,255,.6);border-radius:50%;
	background:rgb(var(--meec-verde-scuro-canali) / .55);color:var(--meec-testo-invertito);cursor:pointer;
	transition:background-color var(--meec-durata);
}
.meec-hero__comando-video:hover{background:rgb(var(--meec-verde-scuro-canali) / .85)}
.meec-hero__comando-video:focus-visible{outline:3px solid var(--meec-testo-invertito);outline-offset:3px}
.meec-hero__comando-video::before{
	content:"";width:1.25rem;height:1.25rem;background:currentColor;
	-webkit-mask:url("icone/pausa.svg") center/contain no-repeat;mask:url("icone/pausa.svg") center/contain no-repeat;
}
.meec-hero__comando-video--pausa::before{-webkit-mask-image:url("icone/riproduci.svg");mask-image:url("icone/riproduci.svg")}
@media (forced-colors:active){.meec-hero__comando-video::before{background:ButtonText}}

/* --- Sezione scura con texture (Figma Home: "Investi nel tuo futuro") ------ */
.meec-sezione--texture{background:var(--meec-sup-sezione-verde-scura) url("img/texture-foglia.jpg") center/cover no-repeat}

/* --- Sezione scura con fotografia di sfondo (predisposizione) --------------
   Serve a "Cosa diventerai", dove il Figma mette una foto dall'alto di una
   strada nel bosco (assets/img/strada-bosco-aerea.jpg, 1920x1438).
   La classe meec-sezione--foto non si puo' ancora mettere sul blocco
   dall'editor: finche' non c'e', l'alias e' lo stesso scopo univoco usato
   dalla testata a due blocchi, cioe' la sezione che contiene
   .meec-caratteristiche--numerate, unica nel sito. Messa la classe
   dall'editor, dagli elenchi qui sotto si toglie la riga dell'alias.
   Perche' due strati e non un background solo: sopra una fotografia il testo
   bianco non e' garantito leggibile, e --texture (che e' un background
   shorthand) non lascia spazio a una velatura. Il ::before porta l'immagine,
   il ::after la velatura, il contenuto sta sopra senza bisogno di z-index
   perche' la sezione isola il proprio contesto di impilamento.
   Il fondo verde scuro resta sotto: se l'immagine non carica, o e' chiara, il
   contrasto del testo non crolla.
   La velatura si regola con --meec-sezione-velatura (0 = foto nuda).        */
.meec-sezione:has(.meec-caratteristiche--numerate),
.meec-sezione--foto{position:relative;isolation:isolate}
.meec-sezione:has(.meec-caratteristiche--numerate)::before,
.meec-sezione:has(.meec-caratteristiche--numerate)::after,
.meec-sezione--foto::before,
.meec-sezione--foto::after{content:"";position:absolute;inset:0;pointer-events:none}
.meec-sezione:has(.meec-caratteristiche--numerate)::before,
.meec-sezione--foto::before{
	z-index:-2;
	background:var(--meec-sezione-foto,none) center/cover no-repeat;
}
.meec-sezione:has(.meec-caratteristiche--numerate)::after,
.meec-sezione--foto::after{
	z-index:-1;
	background:rgb(var(--meec-verde-scuro-canali) / var(--meec-sezione-velatura,.72));
}
/* "Cosa diventerai": la fotografia del Figma. La variabile sta solo su questo
   scopo, non su .meec-sezione--foto: la classe e' generica e una seconda
   fascia fotografica dovra' dichiarare la propria immagine. */
.meec-sezione:has(.meec-caratteristiche--numerate){--meec-sezione-foto:url("img/strada-bosco-aerea.jpg")}
/* "Esperienze e ambiti di sperimentazione" (Laboratori): mano su un tronco
   coperto di muschio. Qui la classe .meec-sezione--foto si puo' mettere
   dall'editor, quindi niente alias: basta il modificatore che dichiara
   l'immagine. Sorgente: immagini/hand-touching-tree-moss-close-up.jpg
   (6720x4480), ridotta a 1920x1280 come le altre foto del tema.            */
.meec-sezione--foto-muschio{
	--meec-sezione-foto:url("img/mano-tronco-muschio.jpg");
	/* Velatura molto piu' densa della .72 di "Cosa diventerai": nel mock la
	   foto e' quasi solo texture. Valore ricavato confrontando la luminanza
	   del mock (mediana 32, p90 41 sulla fascia destra senza testo) con la
	   stessa regione della foto velata: .72 dava 53/79, .92 da' 36/43.     */
	--meec-sezione-velatura:.92;
}
/* "Dove la formazione incontra il mondo professionale" (Opportunita' e
   network, Figma 636:55436): dettaglio di una foglia verde.
   Sorgente: immagini/detail-green-leaf.jpg (4871x3247), ridotta a 1920x1280.
   Velatura: percentili 10/50/90/99 della luminanza del mock senza testo
   34/41/56/62; la foto ridotta da' 19/99/179/197 e il verde scuro vale 37.
   (1-v)*foto + v*37 con v=.85 da' 34/46/58/61, che e' il mock (con .72 la
   foglia sarebbe quasi il doppio piu' chiara, con .9 troppo piatta).      */
.meec-sezione--foto-foglia{
	--meec-sezione-foto:url("img/foglia-dettaglio.jpg");
	--meec-sezione-velatura:.85;
}
@media (forced-colors:active){
	.meec-sezione:has(.meec-caratteristiche--numerate)::before,
	.meec-sezione:has(.meec-caratteristiche--numerate)::after,
	.meec-sezione--foto::before,
	.meec-sezione--foto::after{display:none}
}

/* Notizia senza immagine: riquadro col gradiente del brand, stesso ingombro
   dell'immagine, cosi' la griglia resta allineata. */
.meec-notizia:not(:has(.wp-block-post-featured-image))::before{
	content:"";display:block;flex:none;aspect-ratio:416/240;border-radius:var(--meec-raggio-l);
	background:url("img/segnaposto-notizia.svg") center/3.5rem no-repeat,var(--meec-gradiente-verde);
}


/* ==========================================================================
   Contatti — Recapiti e mappa (Figma 571:25016)
   --------------------------------------------------------------------------
   La griglia del Figma non e' a tre colonne: e' a **quattro da 306 con gap 24**
   (4x306 + 3x24 = 1296 esatti), e due celle ne occupano due — la mappa e la
   scheda dell'indirizzo. Le righe sono 206 e 278, altezze che vengono dal
   contenuto: qui si fissa solo il minimo della mappa, che non ne ha.
   ========================================================================== */
.meec-recapiti{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--meec-sp-4);
	align-items:stretch;
}
.meec-pagina .meec-recapiti > *{margin:0}
.meec-recapiti > .meec-mappa,
.meec-recapiti > .meec-recapiti--ampia{grid-column:span 2}

@media (max-width:78rem){
	/* Sotto i 1248 quattro colonne da 306 non ci stanno: due, e le celle
	   larghe restano larghe il doppio, cioe' tutta la riga. */
	.meec-recapiti{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:44rem){
	/* Sotto i 704 due colonne da ~320 stringono troppo il testo: una sola, e le
	   celle larghe smettono di esserlo. Fino a 704 restano due, cosi' sul tablet
	   la fascia non diventa una colonna di sei schede alta 1700px. */
	.meec-recapiti{grid-template-columns:minmax(0,1fr)}
	.meec-recapiti > .meec-mappa,
	.meec-recapiti > .meec-recapiti--ampia{grid-column:auto}
}

/* --- La mappa ------------------------------------------------------------
   Finche' non e' stata caricata e' una scheda come le altre, con l'avviso e i
   due modi di procedere. Caricata, diventa la cornice dell'iframe: stesso
   raggio e stesso bordo, nessun salto di ingombro. */
.meec-mappa{
	position:relative;
	display:flex;flex-direction:column;justify-content:center;
	min-height:12.875rem;                   /* 206: l'altezza della cella nel Figma */
	padding:var(--meec-sp-5);
	border:1px solid var(--meec-bordo-terziario);
	border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-grigia);
	overflow:hidden;
}
.meec-mappa__invito{display:flex;flex-direction:column;gap:var(--meec-sp-3);align-items:flex-start}
.meec-mappa__nota{margin:0;font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}
.meec-mappa__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--meec-sp-3);margin:0}
.meec-mappa__indirizzo{margin:0;font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}
/* Caricata: l'iframe riempie la scheda e l'invito sparisce. */
.meec-mappa.is-caricata{padding:0;background:var(--meec-sup-sezione-bianca)}
.meec-mappa.is-caricata .meec-mappa__invito{display:none}
.meec-mappa iframe{display:block;width:100%;height:100%;min-height:12.875rem;border:0}
@media print{
	/* In stampa l'iframe non serve: resta l'indirizzo. */
	.meec-mappa iframe{display:none}
	.meec-mappa.is-caricata .meec-mappa__invito{display:block}
	.meec-mappa__azioni{display:none}
}

/* --- «Resta aggiornato»: la fila social grande (Contatti) -----------------
   Figma 571:9612, ultima fascia prima del piede: fondo #f7f7f7 (= sfondo-tenue),
   padding verticale 96, testata da 856 centrata, 64 fra la testata e la fila,
   fila centrata con casse da 80 e gap 32 (passo 112).

   **L'icona dentro la cassa da 80 e' 40, non 80.** Nel Figma le quattro icone
   sono i loghi segnaposto di Untitled UI (intercom, jira, dropbox, stripe):
   marchi pieni, che a 80 si leggono. Le nostre sono disegni a tratto 1,5 su
   viewBox 24: portate a 80 il tratto diventa un capello e la fila sembra
   sbiadita. A 40 il tratto sta sui 2,5px apparenti e regge, e la cassa da 80
   tiene il passo del disegno facendo anche da bersaglio comodo.
   Colore: l'accento, come tutte le altre icone piatte del tema — e sono nostri
   disegni, non i marchi ufficiali ricalcati. Contrasto 5,9:1 sul grigio.     */
.meec-social--grande{
	--_social-cassa:5rem;--_social-icona:2.5rem;
	justify-content:center;gap:var(--meec-sp-5);
}
.meec-social--grande .meec-social__link{color:var(--meec-testo-accento)}
/* La fila e' l'ultimo blocco della fascia: 64 dalla testata, come nel Figma. */
.meec-pagina .meec-sezione__testata + .meec-social--grande{margin-top:var(--meec-sp-9)}
@media (max-width:36rem){
	/* Sotto i 576 cinque casse da 80 con gap 32 non ci stanno. Si stringe la
	   cassa, non l'icona: 5x56 + 4x16 = 344, che sta dentro i 361 di contenuto
	   di uno schermo da 393. Cosi' i cinque canali restano su una riga sola —
	   a 64 andavano a 384 e il quinto finiva da solo a capo. L'icona resta 40,
	   quindi il bersaglio e' 56, molto sopra il minimo WCAG 2.5.8.           */
	.meec-social--grande{--_social-cassa:3.5rem;gap:var(--meec-sp-3)}
}

/* ==========================================================================
   Fascia metriche: luce in movimento (Home, sotto l'hero)
   --------------------------------------------------------------------------
   Due strati di luce (::before e ::after) piu' grandi della fascia, dipinti
   una volta sola con gradienti radiali e poi solo spostati con transform:
   niente ridisegno a ogni fotogramma, lavoro tutto sul compositore.
   Durate diverse e coprime (26s e 19s): i due moti si ricompongono uguali solo
   dopo 494s, poco piu' di otto minuti, quindi il ciclo non si riconosce.
   **Il tetto e' il contrasto, non il gusto.** Le etichette sono 18px peso 500,
   cioe' testo normale per WCAG 1.4.3: servono 4,5:1 col bianco, quindi nessun
   punto della fascia puo' superare luminanza 0,1833. Le due luci stanno a 0,17
   (4,8:1) e nessuna sovrapposizione le supera, perche' comporre due colori di
   pari luminanza da' la stessa luminanza e tutto il resto della fascia e' piu'
   scuro. Per rendere l'animazione piu' evidente si allarga quindi l'escursione
   **verso il buio** (--_ombra, dove non c'e' vincolo), si stringe la caduta dei
   gradienti e si aumentano ampiezza e velocita' del moto: alzare le luci no.
   ========================================================================== */
.meec-metriche::before,
.meec-metriche::after{
	content:"";position:absolute;z-index:-1;pointer-events:none;
	inset:-70% -45%;                       /* margine per spostarsi senza scoprire i bordi */
	will-change:transform;
	backface-visibility:hidden;
}
/* Strato 1: la luce giallo-verde principale e un'ombra profonda che la bilancia.
   Il nucleo e' pieno e la caduta e' piu' netta: cosi' la luce si legge come una
   forma che passa, non come una velatura. */
.meec-metriche::before{
	background:
		radial-gradient(ellipse 30% 44% at 30% 60%,
			rgb(var(--_luce-gialla) / 1) 0%,
			rgb(var(--_luce-gialla) / .74) 28%,
			rgb(var(--_luce-gialla) / .30) 54%,
			rgb(var(--_luce-gialla) / 0) 78%),
		radial-gradient(ellipse 36% 50% at 80% 32%,
			rgb(var(--_ombra) / .95) 0%,
			rgb(var(--_ombra) / .55) 40%,
			rgb(var(--_ombra) / 0) 76%);
	animation:meec-luce-a 26s cubic-bezier(.45,.05,.55,.95) -11s infinite;
}
/* Strato 2: due luci verdi piu' fresche e una seconda ombra bassa, che si
   muovono per conto loro. */
.meec-metriche::after{
	background:
		radial-gradient(ellipse 24% 34% at 66% 46%,
			rgb(var(--_luce-verde) / 1) 0%,
			rgb(var(--_luce-verde) / .48) 38%,
			rgb(var(--_luce-verde) / 0) 74%),
		radial-gradient(ellipse 20% 28% at 16% 26%,
			rgb(var(--_luce-verde) / .82) 0%,
			rgb(var(--_luce-verde) / 0) 72%),
		radial-gradient(ellipse 30% 34% at 48% 92%,
			rgb(var(--_ombra) / .7) 0%,
			rgb(var(--_ombra) / 0) 74%);
	animation:meec-luce-b 19s cubic-bezier(.4,0,.6,1) -5s infinite;
}
/* Tappe irregolari, spostamenti asimmetrici: nessuna traiettoria geometrica.
   Le percentuali di translate sono riferite allo strato (circa 1,9 volte la fascia). */
@keyframes meec-luce-a{
	0%   {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
	14%  {transform:translate3d(16%,-11%,0) rotate(7deg) scale(1.14)}
	31%  {transform:translate3d(-11%,9%,0) rotate(-5deg) scale(1.24)}
	48%  {transform:translate3d(19%,13%,0) rotate(10deg) scale(1.05)}
	66%  {transform:translate3d(-18%,-7%,0) rotate(-9deg) scale(1.19)}
	83%  {transform:translate3d(8%,-14%,0) rotate(4deg) scale(.94)}
	100% {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
@keyframes meec-luce-b{
	0%   {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
	19%  {transform:translate3d(-20%,9%,0) rotate(-6deg) scale(1.26)}
	37%  {transform:translate3d(12%,16%,0) rotate(3deg) scale(.9)}
	55%  {transform:translate3d(22%,-13%,0) rotate(8deg) scale(1.16)}
	74%  {transform:translate3d(-7%,-17%,0) rotate(-3deg) scale(1.04)}
	100% {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
/* Movimento ridotto: stesse luci, ferme nella posizione di partenza. */
@media (prefers-reduced-motion: reduce){
	.meec-metriche::before,
	.meec-metriche::after{animation:none;will-change:auto}
}
/* Contrasto elevato di sistema: niente luci, resta il colore di fondo forzato. */
@media (forced-colors: active){
	.meec-metriche::before,
	.meec-metriche::after{display:none}
}

/* ==========================================================================
   Card con contenuto centrato (Figma: "_Feature text", variante centrata)
   --------------------------------------------------------------------------
   Nel Figma il contenuto della card sta sull'asse: icona, titolo e testo
   centrati. La card e' gia' una colonna flex, bastano align-items e
   text-align. I figli restano larghi quanto la card (il ::before dell'icona
   non e' un figlio: lo centra align-items), cosi' il testo va a capo dove
   andava prima e non si prende una misura piu' stretta.

   Il modificatore --centrata vale per qualunque griglia: si mette sul blocco
   dall'editor. Le due fasce della Home sono invece agganciate dalle classi
   che hanno gia', perche' dal browser interno non si e' potuto aggiungere la
   classe al contenuto nel database (sessione WordPress non autenticata):
     .meec-griglia--luce              Iscrizione / Premialita' / Blended
     --grigia + --2                   "Dove puoi spendere le competenze MEEC"
   Le altre griglie a due colonne del sito (Programma, Contatti, Il Master)
   hanno card .meec-tonda e non stanno in una sezione grigia: restano fuori.
   Anche le card delle altre pagine restano allineate a sinistra: non e' stato
   possibile confrontarle col Figma in questa sessione.
   ========================================================================== */
:is(.meec-griglia--centrata,
    .meec-griglia--luce,
    .meec-sezione--grigia .meec-griglia--2) > .meec-card{align-items:center;text-align:center}
:is(.meec-griglia--centrata,
    .meec-griglia--luce,
    .meec-sezione--grigia .meec-griglia--2) > .meec-card > *{width:100%}

/* ==========================================================================
   Card che si "accendono" al passaggio (Home: Iscrizione / Premialita' / Blended)
   --------------------------------------------------------------------------
   Si attiva mettendo la classe meec-griglia--luce sul gruppo che contiene le
   card: nessuna classe da ricordare card per card. Tutte partono bianche.
   Il ::before della card e' gia' l'icona (maschera): il verde sta nel ::after,
   dietro al contenuto grazie a isolation. Si animano solo opacity e transform
   (compositore); colori di testo, icona e bordo con una transizione breve.
   ========================================================================== */
.meec-griglia--luce > .meec-card{
	--_luce-durata:420ms;
	--_luce-curva:cubic-bezier(.22,.61,.36,1);          /* esce veloce, si posa piano */
	isolation:isolate;
	transition:
		transform var(--_luce-durata) var(--_luce-curva),
		border-color var(--_luce-durata) var(--_luce-curva),
		color var(--_luce-durata) var(--_luce-curva);
}
/* Strato verde: gradiente del brand + ombra morbida, spento e appena ristretto */
.meec-griglia--luce > .meec-card::after{
	content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;
	border-radius:inherit;
	background:var(--meec-gradiente-verde);
	box-shadow:0 18px 32px -14px rgb(var(--meec-verde-scuro-canali) / .35);
	opacity:0;
	transform:scale(.97);
	transition:opacity var(--_luce-durata) var(--_luce-curva),transform var(--_luce-durata) var(--_luce-curva);
}
.meec-griglia--luce > .meec-card::before{transition:background-color var(--_luce-durata) var(--_luce-curva)}
.meec-griglia--luce > .meec-card :is(h3,p){transition:color var(--_luce-durata) var(--_luce-curva)}

/* Stato acceso: puntatore sopra (solo dove esiste davvero il passaggio del
   mouse, cosi' sul touch non resta "incollato") oppure focus su un link interno. */
@media (hover:hover){
	.meec-griglia--luce > .meec-card:hover{transform:translateY(-4px)}
	.meec-griglia--luce > .meec-card:hover,
	.meec-griglia--luce > .meec-card:hover :is(h3,p){color:var(--meec-testo-invertito)}
	.meec-griglia--luce > .meec-card:hover{border-color:transparent;--_ico-colore:var(--meec-testo-invertito)}
	.meec-griglia--luce > .meec-card:hover::after{opacity:1;transform:scale(1)}
}
.meec-griglia--luce > .meec-card:focus-within{
	border-color:transparent;color:var(--meec-testo-invertito);
	--_ico-colore:var(--meec-testo-invertito);--meec-focus:var(--meec-testo-invertito);
}
.meec-griglia--luce > .meec-card:focus-within :is(h3,p,a){color:var(--meec-testo-invertito)}
.meec-griglia--luce > .meec-card:focus-within::after{opacity:1;transform:scale(1)}
/* Anello di focus visibile anche sul verde: bianco con un filo scuro fuori */
.meec-griglia--luce > .meec-card:has(:focus-visible){
	outline:3px solid var(--meec-testo-invertito);outline-offset:-6px;
	box-shadow:0 0 0 2px var(--meec-sup-sezione-verde-scura);
}

/* Movimento ridotto: niente sollevamento ne' scala, colori quasi istantanei. */
@media (prefers-reduced-motion: reduce){
	.meec-griglia--luce > .meec-card,
	.meec-griglia--luce > .meec-card::after{--_luce-durata:80ms;transform:none !important}
	.meec-griglia--luce > .meec-card:hover{transform:none}
}
/* Contrasto elevato di sistema: niente strato colorato, testo e bordo di sistema. */
@media (forced-colors: active){
	.meec-griglia--luce > .meec-card::after{display:none}
	.meec-griglia--luce > .meec-card:hover,
	.meec-griglia--luce > .meec-card:focus-within{border-color:Highlight}
	.meec-griglia--luce > .meec-card :is(h3,p){color:CanvasText !important}
}


/* ==========================================================================
   Dettagli (FAQ): apertura e chiusura morbide
   --------------------------------------------------------------------------
   Il contenuto del blocco Dettagli e' avvolto lato server (render_block in
   functions.php) in .meec-dettagli__pannello > .meec-dettagli__interno.
   - altezza: griglia con una riga 0fr -> 1fr (si anima in tutti i browser,
     niente max-height a caso, niente misure in JS);
   - apertura: @starting-style da' il punto di partenza quando il contenuto
     compare;
   - chiusura: ::details-content tiene visibile il contenuto finche' la riga
     non e' tornata a 0 (content-visibility con allow-discrete). Dove non e'
     supportato la chiusura resta istantanea: nessun blocco, solo meno garbo.
   Semantica e tastiera restano quelle native di <details>/<summary>.
   ========================================================================== */
.wp-block-details,
.meec-dettagli{
	--_dett-apertura:380ms;
	--_dett-chiusura:300ms;
	--_dett-curva:cubic-bezier(.33,1,.68,1);             /* ease-out: parte deciso, si posa piano */
}
.wp-block-details::details-content,
.meec-dettagli::details-content{
	transition:content-visibility var(--_dett-chiusura) allow-discrete;
}
/* Il core mette margin-block-start al contenuto dei Dettagli: sul pannello
   produrrebbe un salto di 24px all'inizio dell'apertura e alla fine della chiusura. */
.wp-block-details > .meec-dettagli__pannello,
.meec-dettagli > .meec-dettagli__pannello{margin:0}
.meec-dettagli__pannello{
	display:grid;grid-template-rows:0fr;
	transition:grid-template-rows var(--_dett-chiusura) var(--_dett-curva);
}
.meec-dettagli__interno{
	min-height:0;overflow:hidden;
	opacity:0;translate:0 4px;
	transition:opacity 180ms ease,translate var(--_dett-chiusura) var(--_dett-curva);
}
.wp-block-details[open] > .meec-dettagli__pannello,
.meec-dettagli[open] > .meec-dettagli__pannello{
	grid-template-rows:1fr;
	transition-duration:var(--_dett-apertura);
}
.wp-block-details[open] > .meec-dettagli__pannello > .meec-dettagli__interno,
.meec-dettagli[open] > .meec-dettagli__pannello > .meec-dettagli__interno{
	opacity:1;translate:0 0;
	transition:opacity 260ms ease 90ms,translate var(--_dett-apertura) var(--_dett-curva);
}
@starting-style{
	.wp-block-details[open] > .meec-dettagli__pannello,
	.meec-dettagli[open] > .meec-dettagli__pannello{grid-template-rows:0fr}
	.wp-block-details[open] > .meec-dettagli__pannello > .meec-dettagli__interno,
	.meec-dettagli[open] > .meec-dettagli__pannello > .meec-dettagli__interno{opacity:0;translate:0 4px}
}
/* Icona, colore e spazio del titolo si muovono insieme al pannello */
.meec-domande summary{transition:color var(--_dett-apertura) var(--_dett-curva),padding var(--_dett-apertura) var(--_dett-curva)}
.meec-domande summary::after{transition:transform var(--_dett-apertura) var(--_dett-curva),background-color var(--_dett-apertura) var(--_dett-curva)}
.meec-domande details:not([open]) summary,
.meec-domande details:not([open]) summary::after{transition-duration:var(--_dett-chiusura)}
@media (prefers-reduced-motion: reduce){
	.wp-block-details,
	.meec-dettagli{--_dett-apertura:1ms;--_dett-chiusura:1ms}
	.meec-dettagli__interno,
	.wp-block-details[open] > .meec-dettagli__pannello > .meec-dettagli__interno,
	.meec-dettagli[open] > .meec-dettagli__pannello > .meec-dettagli__interno{translate:none;transition-delay:0s}
}

/* ==========================================================================
   Comparsa dei blocchi allo scorrimento, su tutte le pagine (vedi navigazione.js)
   La classe meec-rivela la mette solo lo script: senza JS nulla e' nascosto.
   Si animano solo opacity e translate (non transform: cosi' non si scontra
   con il sollevamento delle card al passaggio del mouse).
   ========================================================================== */
html.meec-js .meec-rivela{
	opacity:0;translate:0 20px;
	transition:opacity 700ms cubic-bezier(.22,1,.36,1),translate 700ms cubic-bezier(.22,1,.36,1);
}
html.meec-js .meec-rivela.meec-rivela--vista{opacity:1;translate:0 0}
/* Chi ci arriva con la tastiera lo vede subito, anche prima dello scorrimento. */
html.meec-js .meec-rivela:focus-within{opacity:1;translate:none}
@media (prefers-reduced-motion: reduce){
	html.meec-js .meec-rivela{opacity:1;translate:none;transition:none}
}
@media print{
	html.meec-js .meec-rivela{opacity:1;translate:none}
}

/* ==========================================================================
   Carosello di fotografie a tutta larghezza (Figma Laboratori)
   ==========================================================================
   Lo scorrimento e' scroll-snap del browser, non un cursore in JavaScript:
   senza script la fascia si sfoglia lo stesso col dito, con la rotellina e
   con la tastiera, e inerzia e aggancio li fa il browser. Il JS aggiunge solo
   i comandi (frecce e pallini) e tiene aggiornato il pallino attivo, percio'
   i comandi li disegna il JS stesso: se non c'e', non restano bottoni morti
   nella pagina. Le foto restano blocchi normali, modificabili dall'editor.

   Misure dal riferimento (scala 0,5 su una pagina da 1440): fascia a tutta
   larghezza alta 554, comandi e pallini rientrati di 16 dal bordo, cerchi da
   48 (la misura di .meec-tonda), pillola 86x34 con pallini da 10 distanti 26.
   I bottoni dei pallini sono 24x24 con il pallino disegnato dal ::before:
   il bersaglio resta quello minimo richiesto dalle WCAG senza ingrassare il
   segno.
   Lo scorrimento automatico obbliga a un comando di pausa (WCAG 2.2.2). Sta
   in basso a destra e non dentro la pillola, per due motivi: la pillola resta
   larga 86 e centrata come nel Figma, e il comando finisce dove il tema mette
   gia' lo stesso comando per il video dell'hero.                            */
.meec-carosello{position:relative;background:var(--meec-sup-sezione-grigia)}
.meec-pagina .meec-carosello,
.meec-pagina .meec-carosello > *{margin:0}
.meec-carosello__pista{
	display:flex;
	overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;
	scrollbar-width:none;
}
.meec-carosello__pista::-webkit-scrollbar{display:none}
.meec-pagina .meec-carosello__pista > *{margin:0}
.meec-carosello__pista:focus-visible{outline:3px solid var(--meec-testo-accento);outline-offset:-3px}
.meec-carosello__foto{
	flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
	aspect-ratio:1440/554;
	display:grid;place-items:center;
}
/* Foto vera (blocco Immagine) al posto del segnaposto: l'immagine esce dal
   flusso e riempie il riquadro, altrimenti la sua altezza naturale vince
   sull'aspect-ratio e il carosello si allunga. overflow:hidden toglie il
   minimo automatico dell'aspect-ratio; la doppia classe batte il
   .wp-block-image img{height:auto} del core.                               */
.meec-carosello__foto{overflow:hidden;position:relative}
.meec-carosello .meec-carosello__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Su schermo stretto 2,6:1 lascerebbe una striscia alta 150px: si passa a 4:3. */
@media (max-width:56rem){
	.meec-carosello__foto{aspect-ratio:4/3}
}

/* Etichetta del segnaposto: dice che la foto non c'e' ancora, e sparisce da
   sola quando al posto del riquadro grigio si mette l'immagine vera.        */
.meec-pagina .meec-segnaposto-etichetta{
	margin:0;padding:var(--meec-sp-2) var(--meec-sp-3);
	border-radius:var(--meec-raggio-sm);
	background:var(--meec-sup-sezione-bianca);color:var(--meec-testo-secondario);
	font-size:var(--meec-testo-sm);line-height:1.43;
}

/* --- Comandi: frecce ai lati e pallini in basso --------------------------- */
.meec-carosello__comando{
	position:absolute;top:50%;translate:0 -50%;
	width:3rem;height:3rem;padding:0;border:0;border-radius:50%;
	background:var(--wp--custom--colore--brand-dark--600);
	color:var(--meec-testo-invertito);
	display:grid;place-items:center;cursor:pointer;
}
.meec-carosello__comando::before{
	content:"";width:1.5rem;height:1.5rem;background:currentColor;
	-webkit-mask:var(--_ico) center/contain no-repeat;mask:var(--_ico) center/contain no-repeat;
}
.meec-carosello__comando--prima{left:var(--meec-sp-3);--_ico:url("icone/chevron-sinistra.svg")}
.meec-carosello__comando--dopo{right:var(--meec-sp-3);--_ico:url("icone/chevron-destra.svg")}
.meec-carosello__comando:hover{background:var(--wp--custom--colore--brand-dark--700)}
/* Il contorno bianco da solo sparirebbe su una foto chiara: l'anello scuro
   dietro lo rende visibile su qualunque immagine.                           */
.meec-carosello__comando:focus-visible,
.meec-carosello__pallini:has(:focus-visible){outline:none}
.meec-carosello__comando:focus-visible{
	outline:3px solid var(--meec-testo-invertito);outline-offset:2px;
	box-shadow:0 0 0 6px rgb(var(--meec-verde-scuro-canali) / .9);
}
.meec-carosello__pallini{
	position:absolute;left:50%;translate:-50% 0;bottom:var(--meec-sp-3);
	display:flex;gap:2px;
	padding:5px;border-radius:999px;
	background:var(--wp--custom--colore--brand-dark--600);
}
.meec-carosello__pallino{
	width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:50%;
	background:none;cursor:pointer;
	display:grid;place-items:center;
}
.meec-carosello__pallino::before{
	content:"";width:.625rem;height:.625rem;border-radius:50%;
	background:var(--wp--custom--colore--brand-dark--400);
}
.meec-carosello__pallino[aria-current="true"]::before{background:var(--meec-testo-invertito)}
.meec-carosello__pallino:focus-visible{
	outline:3px solid var(--meec-testo-invertito);outline-offset:-2px;
}
/* Pausa/riproduci dello scorrimento automatico: misura e posizione del
   comando gemello sul video dell'hero, colore degli altri comandi del
   carosello. Lo disegna il JS, quindi senza script non compare -- e senza
   script non c'e' nemmeno lo scorrimento automatico da fermare.            */
.meec-carosello__moto{
	position:absolute;right:var(--meec-sp-3);bottom:var(--meec-sp-3);
	display:grid;place-items:center;
	width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;
	background:var(--wp--custom--colore--brand-dark--600);
	color:var(--meec-testo-invertito);cursor:pointer;
}
.meec-carosello__moto::before{
	content:"";width:1.25rem;height:1.25rem;background:currentColor;
	-webkit-mask:url("icone/pausa.svg") center/contain no-repeat;mask:url("icone/pausa.svg") center/contain no-repeat;
}
.meec-carosello__moto--fermo::before{-webkit-mask-image:url("icone/riproduci.svg");mask-image:url("icone/riproduci.svg")}
.meec-carosello__moto:hover{background:var(--wp--custom--colore--brand-dark--700)}
.meec-carosello__moto:focus-visible{
	outline:3px solid var(--meec-testo-invertito);outline-offset:2px;
	box-shadow:0 0 0 6px rgb(var(--meec-verde-scuro-canali) / .9);
}

@media (forced-colors:active){
	.meec-carosello__comando::before{background:ButtonText}
	.meec-carosello__pallino::before{border:1px solid ButtonText}
	.meec-carosello__pallino[aria-current="true"]::before{background:Highlight}
}
@media (forced-colors:active){
	.meec-carosello__moto::before{background:ButtonText}
}

/* ==========================================================================
   Pagine di testo lungo (Privacy policy, Cookie policy, Dichiarazione di
   accessibilita')
   ==========================================================================
   Testata centrata come le altre pagine, sotto una colonna unica da 856
   centrata: e' la stessa misura del sottotitolo dell'intestazione, cosi'
   testata e corpo stanno sullo stesso asse ottico.

   Misure dal riferimento (immagine 1:1 su 1440): corpo 18/28 (--meec-testo-lg
   con l'interlinea 1,556 gia' usata dai sottotitoli), H2 36 (titolo-m), H3 24
   (titolo-s), 48 sopra ogni titolo e 16 sotto, 96 fra testata e corpo.
   I paragrafi dentro la stessa sezione NON hanno stacco: nel riferimento si
   susseguono riga dopo riga, ed e' quello che separa visivamente il discorso
   continuo dai titoli.                                                     */
.meec-testo-documento{max-width:53.5rem;margin-inline:auto}
.meec-pagina .meec-sezione__testata + .meec-testo-documento{margin-top:var(--meec-sp-13)}
.meec-pagina .meec-testo-documento > *{margin-block:0}
.meec-pagina .meec-testo-documento > :is(h2,h3){
	margin-top:var(--meec-sp-7);margin-bottom:var(--meec-sp-3);
}
.meec-pagina .meec-testo-documento > :first-child{margin-top:0}
.meec-testo-documento h2{font-size:var(--meec-titolo-m)}
.meec-testo-documento h3{font-size:var(--meec-titolo-s)}
/* Corpo in Text/Secondary (#5e5e5e) come nei tre frame Figma (650:60484,
   650:61181, 650:62601 e i mobile 1027:*): i titoli restano primari. 6,4:1 sul bianco. */
.meec-testo-documento :is(p,li){font-size:var(--meec-testo-lg);line-height:1.556;color:var(--meec-testo-secondario)}
.meec-pagina .meec-testo-documento :is(ul,ol){margin:0;padding-left:var(--meec-sp-4)}

/* La freccia prima del testo invece che dopo: nel riferimento l'allegato e'
   "-> English version (PDF)". Stesso componente, solo l'ordine cambia.     */
.meec-link-freccia--prima a{flex-direction:row-reverse;justify-content:flex-end}
.meec-link-freccia--prima a:hover::after{transform:translateX(-.125rem)}
/* Allegati (22/09, richiesta Palermo): al posto della freccia l'icona standard
   di download, 24 come nel link button del Figma (1015:11084), che non si
   sposta in hover. Si aggiunge a .meec-link-freccia (che porta il resto). */
.meec-link-scarica a::after{
	width:1.5rem;height:1.5rem;
	-webkit-mask:url("icone/scarica.svg") center/contain no-repeat;mask:url("icone/scarica.svg") center/contain no-repeat;
}
.meec-link-scarica a:hover::after{transform:none}

/* Avviso di contenuto ancora da scrivere, stessa resa di .meec-storie__avviso:
   deve saltare all'occhio, non mimetizzarsi. Si toglie dall'editor quando il
   testo definitivo prende il posto del segnaposto.                          */
.meec-pagina .meec-avviso-bozza{
	margin:0 0 var(--meec-sp-7);padding:var(--meec-sp-3) var(--meec-sp-4);
	border:1px dashed var(--meec-bordo-primario);border-radius:var(--meec-raggio-sm);
	background:var(--meec-sup-sezione-rosa);color:var(--meec-testo-accento);
	font-size:var(--meec-testo-sm);line-height:1.43;
}

/* ==========================================================================
   MOBILE — allineamento al Figma «DEF mobile» (650:57812), completato da
   Zona-p il 18/09/2026. Misure lette con la Plugin API il 19/09, non stimate.
   Regole scritte una volta per componente, non pagina per pagina: il Figma
   mobile e' coerente su queste costanti in tutte le 14 schermate.

     sezione              64/16 (gia' cosi')      intestazione di pagina  80/16
     occhiello            Eyebrow/sm 14/20        occhiello -> titolo      8
     sottotitolo          18/28                   titolo -> testo          8 (16 nell'intestazione)
     testata -> contenuto 56                      bottoni                  a tutta larghezza, impilati a 16
     card                 padding 24, raggio 8, icona 64, icona -> titolo 8, titolo 18/28, titolo -> testo 4
     immagini affiancate  361x234 (proporzione 361/234), raggio 8
     numeri               30/38                   corpo dei testi lunghi   16/24 (attacco 18/28)

   Eccezioni del Figma rispettate: le card verdi restano 32/16 (Contatti,
   Il Master in breve), il bottone dell'intestazione e dell'hero e' xl 48.
   Tutto sotto i 768px: il tablet non e' disegnato e resta com'era.
   ========================================================================== */
@media (max-width:47.99rem){
	/* --- Testate --------------------------------------------------------- */
	.meec-occhiello{font-size:var(--meec-testo-sm);line-height:1.43;margin-bottom:var(--meec-sp-2)}
	.meec-sottotitolo,
	.meec-pagina .meec-affiancati__testo .meec-sottotitolo{font-size:var(--meec-testo-lg);line-height:1.556}
	.meec-sezione__testata{margin-bottom:var(--meec-sp-8)}                          /* 56 */
	.meec-sezione__titolo,
	.meec-sezione__testata > h2{margin-bottom:var(--meec-sp-2)}                      /* 8 */

	/* --- Intestazione di pagina: 80 sopra e sotto, 8 / 16 / 32 ------------ */
	.meec-sezione:has(> .meec-contenitore > .meec-intestazione),
	.meec-articolo__testata,
	.meec-404 .meec-sezione{padding-block:var(--meec-sp-11)}
	.meec-pagina .meec-intestazione{gap:var(--meec-sp-3)}
	.meec-pagina .meec-intestazione > .meec-occhiello{margin-bottom:calc(var(--meec-sp-2) - var(--meec-sp-3))}
	.meec-pagina .meec-intestazione > .wp-block-buttons{margin-top:var(--meec-sp-3)}
	.meec-intestazione .wp-block-button__link{min-height:3rem;padding:calc(.75rem - 1px) calc(1.5rem - 1px)}
	/* La fascia che continua l'intestazione senza titolo proprio (Costi in
	   Ammissione, elenco delle News) nel Figma parte a filo: 0 sopra. */
	.meec-sezione:has(> .meec-contenitore > .meec-intestazione) + :is(.meec-sezione--senza-testata,.meec-sezione--elenco){padding-top:0}
	.meec-articolo__intro h1{font-size:var(--meec-titolo-m)}

	/* --- Bottoni: a tutta larghezza, impilati a 16 ------------------------ */
	.meec-pagina .wp-block-buttons{flex-direction:column;align-items:stretch;align-self:stretch;width:100%;gap:var(--meec-sp-3)}
	.meec-pagina .wp-block-buttons > .wp-block-button{width:100%}
	.meec-pagina .wp-block-buttons .wp-block-button__link{width:100%}
	.meec-404__azioni{align-self:stretch}
	.meec-404__azioni .meec-bottone{width:100%;min-height:3rem}

	/* --- Hero della Home: 64 sopra e sotto, 16 / 16 / 32 ------------------ */
	.meec-hero.wp-block-cover{padding-block:var(--meec-sp-9)}
	.meec-hero__testo{gap:var(--meec-sp-3)}
	.meec-pagina .meec-hero__testo > .wp-block-buttons{margin-top:var(--meec-sp-3)}
	.meec-hero .meec-hero__sottotitolo{font-size:var(--meec-testo-xl);line-height:1.5}   /* qui il Figma tiene 20/30 */
	/* Badge dell'hero: taglia md del Design System (30: padding 2/8, Medium 16/24). */
	.meec-badge--verde{padding:var(--meec-sp-0) var(--meec-sp-2);font:500 var(--meec-corpo)/1.5 var(--meec-font-testo)}

	/* --- Metriche: una colonna, numero 48/60, 32 fra le voci -------------- */
	.meec-metriche{padding-block:var(--meec-sp-9)}
	.meec-metriche__elenco{grid-template-columns:minmax(0,1fr);row-gap:var(--meec-sp-5)}
	.meec-metriche__voce,
	.meec-metriche__voce:nth-child(2n){border-left:0;gap:var(--meec-sp-2)}
	.meec-metriche__numero{font-size:var(--meec-titolo-l);line-height:1.25}

	/* --- Card ------------------------------------------------------------ */
	.meec-card{
		padding:calc(var(--meec-sp-4) - 1px);
		border-radius:var(--meec-raggio-sm);
		gap:var(--meec-sp-2);
		--_ico-misura:4rem;
	}
	.home .meec-card{--_ico-misura:4rem}
	.meec-card.meec-tonda{--_off:var(--meec-sp-4)}
	.meec-card h3,
	.meec-card__titolo{font-size:var(--meec-testo-lg);line-height:1.556}
	.meec-pagina .meec-card > h3 + p,
	.meec-pagina .meec-card > p + p{margin-top:calc(var(--meec-sp-1) - var(--meec-sp-2))}   /* 4 */
	/* Card verdi: nel Figma mobile restano 32 / raggio 16. */
	.meec-card--verde{padding:calc(var(--meec-sp-5) - 1px);border-radius:var(--meec-raggio-l)}
	.meec-card--verde.meec-tonda{--_off:var(--meec-sp-5)}

	/* --- Voci su fondo scuro («Investi nel tuo futuro», «Cosa diventerai») - */
	.meec-caratteristiche{row-gap:var(--meec-sp-7)}                                  /* 48 */
	.meec-caratteristica{gap:var(--meec-sp-2);--_ico-misura:4rem}
	.meec-caratteristica h3{font-size:var(--meec-testo-lg);line-height:1.556}
	.meec-pagina .meec-caratteristica > h3 + p{margin-top:calc(var(--meec-sp-1) - var(--meec-sp-2))}
	.meec-numero{font-size:var(--meec-display-s);line-height:1.267}                  /* 30/38 */

	/* --- Testo + immagine ------------------------------------------------ */
	.meec-affiancati{row-gap:var(--meec-sp-5)}                                       /* testo -> immagine 32 */
	.meec-affiancati__immagine,
	.meec-affiancati .wp-block-image img{aspect-ratio:361/234;border-radius:var(--meec-raggio-sm)}

	/* --- Elenco con spunte: segno 24, 8 di distanza, testo 16/24, voci a 16 */
	.meec-lista-spunte:not(.meec-lista-spunte--numerata):not(.meec-lista-spunte--voci){padding-left:var(--meec-sp-2);gap:var(--meec-sp-3)}
	.meec-lista-spunte:not(.meec-lista-spunte--numerata):not(.meec-lista-spunte--voci) li{
		padding-left:calc(1.5rem + var(--meec-sp-2));
		font-size:var(--meec-corpo);line-height:1.5;
	}
	.meec-lista-spunte:not(.meec-lista-spunte--numerata):not(.meec-lista-spunte--voci) li::before{width:1.5rem;height:1.5rem}

	/* --- «Una formazione flessibile»: i dati in una colonna, 32 fra loro -- */
	.meec-affiancati > .meec-dati{grid-template-columns:minmax(0,1fr);row-gap:var(--meec-sp-5)}

	/* --- Persone: ritratto 361x296, raggio 16 ------------------------------ */
	.meec-persona .wp-block-post-featured-image img,
	.meec-persona:not(:has(.wp-block-post-featured-image))::before{aspect-ratio:361/296}

	/* --- Date in verticale: 48 fra le voci, 24 fra pallino e testo -------- */
	.meec-date:not(.meec-date--sei),
	.meec-date--sei{row-gap:var(--meec-sp-7)}
	.meec-date:not(.meec-date--sei) .meec-data,
	.meec-date--sei .meec-data{column-gap:var(--meec-sp-4)}
	.meec-date:not(.meec-date--sei) .meec-data:not(:last-child)::after,
	.meec-date--sei .meec-data:not(:last-child)::after{bottom:calc(-1 * (var(--meec-sp-7) + 1rem))}

	/* --- Percorso (Il Master, Ammissione): scheda 24 / raggio 8, titolo 18 - */
	.meec-percorso__scheda{border-radius:var(--meec-raggio-sm)}
	.meec-percorso__scheda > :is(h3,h4){font-size:var(--meec-testo-lg);line-height:1.556}

	/* --- Card notizia: 8 fra data, titolo ed estratto, badge a 24 ---------- */
	.meec-notizia__corpo{gap:var(--meec-sp-2)}
	.meec-notizia .wp-block-post-terms{margin-top:var(--meec-sp-3)}
	.meec-notizia .wp-block-post-excerpt__excerpt{
		display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
	}

	/* --- Chip dei filtri (News, Documenti): una riga che scorre ------------
	   Nel Figma la fila e' piu' larga dello schermo e non va a capo. Esce a
	   filo dei bordi e rientra col padding, cosi' la prima chip resta allineata
	   al testo; il focus da tastiera fa scorrere la fila da solo. */
	.meec-filtri ul{
		flex-wrap:nowrap;overflow-x:auto;
		margin-inline:calc(-1 * var(--meec-margine));
		padding:var(--meec-sp-1) var(--meec-margine);
		scrollbar-width:none;
	}
	.meec-filtri ul::-webkit-scrollbar{display:none}
	.meec-filtri li{flex:none}

	/* --- FAQ: domanda 16/24, 16 fra le voci, 24 fra titolo e domande, 40 fra argomenti */
	.meec-indice__contenuto{gap:var(--meec-sp-6)}
	.meec-indice__argomento{gap:var(--meec-sp-4)}
	.meec-domande--elenco summary{font-size:var(--meec-corpo);line-height:1.5}
	.meec-domande--elenco summary::after{margin-top:0}
	.meec-domande--elenco .meec-dettagli__interno > *{font-size:var(--meec-corpo);line-height:1.5}

	/* --- Testi lunghi (articolo, pagine legali): 16/24, attacco 18/28 ----- */
	.meec-testo-ricco{font-size:var(--meec-corpo);line-height:1.5}
	.meec-testo-ricco > p:first-child{font-size:var(--meec-testo-lg);line-height:1.556}
	.meec-pagina .meec-testo-documento p,
	.meec-pagina .meec-testo-documento li{font-size:var(--meec-corpo);line-height:1.5}
	.meec-pagina .meec-sezione__testata + .meec-testo-documento{margin-top:var(--meec-sp-11)}   /* 80 */

	/* --- 404: immagine 361x234 raggio 8, 32 dal bottone -------------------- */
	.meec-404 .meec-affiancati{row-gap:var(--meec-sp-5)}
	.meec-404__immagine{aspect-ratio:361/234;border-radius:var(--meec-raggio-sm)}

	/* Pagine legali: intestazione e testo stanno nella stessa sezione, che
	   nel Figma chiude a 64 come le altre (80 e' solo sopra). */
	.meec-sezione:has(> .meec-contenitore > .meec-intestazione):has(.meec-testo-documento){padding-bottom:var(--meec-sp-9)}
}

/* ==========================================================================
   Executive Program (plugin meec-executive) — 24/09/2026, rifatto il 26/09
   sui frame Figma «Executive Program» (1186:11219) e «Dettaglio corso»
   (1224:6758). Elenco e scheda riusano News (.meec-notizia), Articolo
   (.meec-articolo__*, .meec-sommario, .meec-testo-ricco), card, griglie e
   persone: qui solo ciò che è proprio dei programmi. Le regole dei filtri e
   del riepilogo restano per i ripieghi del plugin.
   ========================================================================== */

/* Icone dei programmi (assets/icone/, esportate dal Figma il 26/09): le
   quattro caratteristiche a 64, le tre dei dati a 24 e le due mancanti a 64,
   tratto 2 sui 64 e 1,5 sui 24 come il resto del set. */
.meec-ico-exec-immersion{--_ico:url("icone/exec-immersion.svg")}
.meec-ico-exec-verticalita{--_ico:url("icone/exec-verticalita.svg")}
.meec-ico-exec-professionalizzanti{--_ico:url("icone/exec-professionalizzanti.svg")}
.meec-ico-exec-executive{--_ico:url("icone/exec-executive.svg")}
.meec-ico-calendario-24{--_ico:url("icone/calendario-24.svg")}
.meec-ico-luogo-24{--_ico:url("icone/luogo-24.svg")}
.meec-ico-orologio-24{--_ico:url("icone/orologio-24.svg")}
.meec-ico-persone-24{--_ico:url("icone/persone-24.svg")}
.meec-ico-calendario-64{--_ico:url("icone/calendario-64.svg")}
.meec-ico-luogo-64{--_ico:url("icone/luogo.svg?v=20260916")}
.meec-ico-orologio-64{--_ico:url("icone/orologio.svg?v=20260916")}
.meec-ico-persone-64{--_ico:url("icone/persone-64.svg")}
.meec-ico-scarica{--_ico:url("icone/scarica.svg")}

/* Filtri: modulo GET su una riga, campi a colonna sotto 48rem. */
.meec-exec-filtri{margin-top:var(--meec-sp-7)}
.meec-exec-filtri__titolo{margin:0 0 var(--meec-sp-3);font-size:var(--meec-testo-lg);line-height:1.5}
.meec-exec-filtri__campi{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--meec-sp-4)}
.meec-exec-filtri__campo{display:flex;flex-direction:column;gap:var(--meec-sp-1);margin:0;min-width:12rem}
.meec-exec-filtri__campo label{font-size:var(--meec-testo-sm);line-height:1.43;font-weight:600;color:var(--meec-testo-secondario)}
.meec-exec-filtri__campo select{
	min-height:2.75rem;padding:var(--meec-sp-2) var(--meec-sp-3);
	border:1px solid var(--meec-bordo-secondario);border-radius:var(--meec-raggio-sm);
	background:var(--meec-sup-sezione-bianca);color:var(--meec-testo-primario);font:inherit;
}
.meec-exec-filtri__azioni{display:flex;align-items:center;gap:var(--meec-sp-4);margin:0}
.meec-exec-filtri .meec-exec-bottone{
	display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--meec-sp-5);
	border:1px solid var(--meec-sup-bottone-primario);border-radius:var(--meec-raggio-pillola);
	background:var(--meec-sup-bottone-primario);color:var(--meec-testo-invertito);font:inherit;font-weight:600;cursor:pointer;
}
.meec-exec-filtri .meec-exec-bottone:hover{background:var(--meec-sup-bottone-primario-hover);border-color:var(--meec-sup-bottone-primario-hover)}
.meec-exec-filtri__azzera{font-size:var(--meec-testo-sm);color:var(--meec-testo-secondario)}

/* --- Card (Figma «Blog post card» 416: foto 240 col badge sopra, occhiello,
   titolo, sottotitolo, dati con icona 24, «Scopri il programma») ----------- */
.meec-exec-vuoto{color:var(--meec-testo-secondario)}
.meec-exec-card__figura{position:relative}
.meec-exec-card__segnaposto{display:block;width:100%;aspect-ratio:416/240;border-radius:var(--meec-raggio-l)}
/* Il badge sta sulla foto, in alto a destra a 14px dai bordi; punto pieno
   davanti al testo come nel Figma (icona «dot» 16 del badge). */
.meec-exec-card__figura .meec-badge{position:absolute;top:.875rem;right:.875rem;z-index:1}
/* Taglia md del Design System (16/24, alto 30), sulla card e nella testata. */
.meec-exec-badge{font-size:var(--meec-corpo);line-height:1.5}
.meec-exec-badge::before{content:"";width:.375rem;height:.375rem;margin:0 .125rem;border-radius:50%;background:currentColor}
/* Niente freccia sul titolo (e' della card notizia): qui la chiamata sta in fondo. */
.meec-exec-card .wp-block-post-title{display:block}
.meec-exec-card .wp-block-post-title::after{content:none}
.meec-exec-card .wp-block-post-excerpt__excerpt{margin:0;color:var(--meec-testo-secondario)}
.meec-exec-card__dati{display:grid;gap:var(--meec-sp-2);margin:var(--meec-sp-2) 0 0;padding:0;list-style:none}
.meec-exec-dato{position:relative;margin:0;padding-left:calc(1.5rem + var(--meec-sp-2));color:var(--meec-testo-primario)}
.meec-exec-dato::before{position:absolute;left:0;top:0;--_ico-misura:1.5rem;--_ico-colore:var(--meec-testo-primario)}
.meec-exec-card__scopri{
	display:inline-flex;align-items:center;gap:var(--meec-sp-2);margin-top:var(--meec-sp-2);
	color:var(--meec-testo-accento);font-weight:600;
}
.meec-exec-card__scopri::after{
	content:"";flex:none;width:1.5rem;height:1.5rem;background:currentColor;
	-webkit-mask:url("icone/freccia-destra.svg") center/1.25rem no-repeat;mask:url("icone/freccia-destra.svg") center/1.25rem no-repeat;
	transition:transform var(--meec-durata) var(--meec-curva);
}
.meec-exec-card:hover .meec-exec-card__scopri{color:var(--meec-testo-hover)}
.meec-exec-card:hover .meec-exec-card__scopri::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.meec-exec-card__scopri::after{transition:none}.meec-exec-card:hover .meec-exec-card__scopri::after{transform:none}}
@media (forced-colors:active){.meec-exec-card__scopri::after,.meec-exec-badge::before{background:CanvasText}}
/* Nel blocco «Executive Program» la card si allinea in basso come nell'elenco. */
.meec-exec-blocco .meec-exec-griglia > li{display:flex}

/* Paginazione delle edizioni concluse: quella di paginate_links, vestita come le News. */
.meec-exec-paginazione{justify-content:center}
.meec-exec-paginazione ul{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none}
.meec-exec-paginazione li{margin:0}

/* --- Scheda (Figma «Dettaglio corso») --------------------------------------
   Testata come l'articolo; poi la fascia grigia dei dati, poi sommario 306 +
   testo 746 con 24 di gap, centrati (1076): l'articolo li tiene ai bordi. */
.meec-exec-scheda__stato{margin:0}
.meec-exec-scheda .meec-articolo__intro > .meec-sottotitolo{margin-top:var(--meec-sp-2)}
.meec-exec-dati{padding-block:var(--meec-sp-7)}
.meec-exec-metriche{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--meec-sp-3);margin:0}
.meec-exec-metrica{
	display:flex;flex-direction:column;align-items:center;gap:calc(var(--meec-sp-2) + var(--meec-sp-1));
	margin:0;padding-inline:var(--meec-sp-3);text-align:center;
}
.meec-exec-metrica + .meec-exec-metrica{border-left:1px solid var(--wp--custom--colore--neutri--300)}
.meec-exec-metrica dd{margin:0;font-size:var(--meec-testo-lg);font-weight:600;line-height:1.556;color:var(--meec-testo-primario)}
@media (max-width:56rem){
	.meec-exec-metriche{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--meec-sp-5) var(--meec-sp-3)}
	.meec-exec-metrica + .meec-exec-metrica{border-left:0}
	.meec-exec-metrica:nth-child(2n){border-left:1px solid var(--wp--custom--colore--neutri--300)}
}
@media (max-width:30rem){
	.meec-exec-metriche{grid-template-columns:minmax(0,1fr)}
	.meec-exec-metrica:nth-child(2n){border-left:0}
	.meec-exec-metrica{--_ico-misura:3rem}
}
.meec-exec-scheda .meec-articolo__griglia{justify-content:center;column-gap:var(--meec-sp-4)}
.meec-exec-scheda .meec-sommario{padding-block:var(--meec-sp-5) 0;border-bottom:0}
/* Le sezioni della colonna: titoli H2 36 (Heading/H2), 16 fra titolo e
   contenuto, 56 fra una sezione e l'altra. Dentro valgono le stesse distanze
   del testo ricco (i figli non sono piu' figli diretti di .meec-testo-ricco). */
.meec-exec-testo{display:flex;flex-direction:column;gap:var(--meec-sp-8)}
.meec-exec-testo > *{margin:0}
.meec-exec-sezione > *{margin-block:0}
.meec-exec-sezione > * + *{margin-top:1.125rem}
.meec-exec-sezione > h2{font-size:var(--meec-titolo-m);line-height:1.222;scroll-margin-top:var(--meec-sp-5)}
.meec-exec-sezione > h2 + *{margin-top:var(--meec-sp-3)}
.meec-exec-sezione > :is(h3,.wp-block-heading:is(h3)){margin-top:var(--meec-sp-7)}
.meec-exec-sezione > :is(h3) + *{margin-top:var(--meec-sp-4)}
.meec-exec-sezione > :is(figure,.wp-block-image,blockquote,.wp-block-quote){margin-block:var(--meec-sp-4)}
.meec-exec-sezione > h2 + :is(blockquote,.wp-block-quote){margin-top:var(--meec-sp-3)}
.meec-exec-sezione :is(blockquote,.wp-block-quote) p{font-size:var(--meec-testo-xl);line-height:1.5}
.meec-exec-sezione > p:first-of-type{font-size:inherit;line-height:inherit}
/* Struttura del corso: giornate in colonna, punto magenta 16 e filo grigio
   fra un punto e l'altro; data Inter Medium 18/28 accento in maiuscolo,
   fascia come badge sm, titolo 20/30, testo 16/24. */
.meec-exec-giornate{display:grid;gap:var(--meec-sp-5);margin:0;padding:0 0 0 var(--meec-sp-5);list-style:none}
.meec-exec-giornata{position:relative;display:grid;gap:var(--meec-sp-2);margin:0}
.meec-exec-giornata > *{margin:0}
.meec-exec-giornata::before{
	content:"";position:absolute;left:calc(-1 * var(--meec-sp-5));top:.375rem;
	width:1rem;height:1rem;border-radius:50%;background:var(--meec-testo-accento);
}
.meec-exec-giornata:not(:last-child)::after{
	content:"";position:absolute;left:calc(-1 * var(--meec-sp-5) + .5rem - .5px);top:1.375rem;
	bottom:calc(-1 * var(--meec-sp-5) - .375rem);width:1px;background:var(--meec-bordo-terziario);
}
.meec-exec-giornata__quando{display:flex;flex-wrap:wrap;align-items:center;gap:var(--meec-sp-3);font-size:var(--meec-testo-lg);line-height:1.556;font-weight:500;color:var(--meec-testo-accento)}
.meec-exec-giornata__quando time{text-transform:uppercase}
.meec-exec-giornata__titolo{font-family:var(--meec-font-testo);font-size:var(--meec-testo-xl);font-weight:600;line-height:1.5;color:var(--meec-testo-primario)}
.meec-exec-giornata__testo{font-size:var(--meec-corpo);line-height:1.5}
@media (forced-colors:active){.meec-exec-giornata::before,.meec-exec-giornata::after{background:CanvasText}}
/* Destinatari e note: elenco puntato del testo ricco, riquadro grigio 20 con
   raggio 4 e testo 14/20 (Figma «Notice box»). */
.meec-exec-destinatari{margin:0;padding-left:1.5em}
.meec-exec-nota{padding:calc(var(--meec-sp-3) + var(--meec-sp-1));border-radius:var(--meec-raggio-xs);background:var(--meec-sup-sezione-grigia);font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-primario)}
/* Docenza: la scheda persona in riga, foto 296 a sinistra e testo a destra. */
.meec-exec-persone{display:grid;gap:var(--meec-sp-7)}
.meec-persona--riga{display:grid;grid-template-columns:18.5rem minmax(0,1fr);gap:var(--meec-sp-4);align-items:start}
.meec-persona--riga:not(:has(.wp-block-post-featured-image))::before{width:auto}
.meec-persona--riga .meec-persona__testo{gap:var(--meec-sp-1)}
.meec-persona--riga .wp-block-post-excerpt{margin:0}
.meec-persona__bio{margin-top:var(--meec-sp-3);font-size:var(--meec-corpo);line-height:1.5;color:var(--meec-testo-secondario)}
.meec-persona--riga .wp-block-post-title:not(:has(a)){color:var(--meec-testo-primario)}
@media (max-width:40rem){
	.meec-persona--riga{grid-template-columns:minmax(0,1fr)}
	.meec-persona--riga .wp-block-post-featured-image,.meec-persona--riga::before{max-width:18.5rem}
}
/* Iscrizione (Figma «Pricing tier card»): riquadro bianco, bordo terziario,
   raggio 16, ombra md; quota 48 Montserrat, elenco con spunta, nota, pulsante
   a tutta larghezza. */
.meec-exec-quota{
	display:flex;flex-direction:column;
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);box-shadow:var(--meec-ombra-md);
}
.meec-exec-quota > *{margin:0}
.meec-exec-quota__testata{display:grid;gap:var(--meec-sp-2);padding:calc(var(--meec-sp-6) - 1px) calc(var(--meec-sp-5) - 1px) 0}
.meec-exec-quota__testata > *{margin:0}
.meec-exec-quota__valore{font-family:var(--meec-font-titoli);font-size:var(--meec-titolo-l);font-weight:600;line-height:1.25;color:var(--meec-testo-primario)}
.meec-exec-quota__valore--testo{font-size:var(--meec-titolo-s);line-height:1.333}
.meec-exec-quota__etichetta{font-size:var(--meec-testo-xl);line-height:1.5;color:var(--meec-testo-primario)}
.meec-exec-quota__corpo{display:grid;gap:var(--meec-sp-4);padding:calc(var(--meec-sp-5) - 1px)}
.meec-exec-quota__corpo > *{margin:0}
.meec-exec-quota__intro{font-size:var(--meec-corpo);line-height:1.5}
.meec-exec-quota__intro + .meec-exec-quota__voci{margin-top:calc(var(--meec-sp-2) - var(--meec-sp-4))}
.meec-exec-quota__voci{display:grid;gap:var(--meec-sp-2);margin:0;padding:0;list-style:none}
.meec-exec-quota__voci li{position:relative;margin:0;padding-left:calc(1.5rem + var(--meec-sp-3));font-size:var(--meec-corpo);line-height:1.5}
.meec-exec-quota__voci li::before{
	content:"";position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;background:var(--meec-testo-accento);
	-webkit-mask:url("icone/spunta.svg") center/contain no-repeat;mask:url("icone/spunta.svg") center/contain no-repeat;
}
@media (forced-colors:active){.meec-exec-quota__voci li::before{background:CanvasText}}
.meec-exec-quota__piede{display:grid;gap:var(--meec-sp-3);padding:0 calc(var(--meec-sp-5) - 1px) calc(var(--meec-sp-5) - 1px)}
.meec-exec-quota__testata + .meec-exec-quota__piede{padding-top:var(--meec-sp-5)}
.meec-exec-quota__piede > *{margin:0}
.meec-exec-quota__bottone{width:100%}
.meec-exec-quota__nota,.meec-exec-quota__stato{font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}
.meec-exec-modulo{color:var(--meec-testo-secondario)}
/* Coda della scheda (prenotazione, brochure, calendario, ritorno): nella
   colonna di destra della stessa griglia del testo, a tutta larghezza (746). */
.meec-exec-scheda .meec-articolo__griglia > .meec-exec-scheda__coda{grid-column:2;min-width:0}
.meec-exec-scheda__coda > *{margin:0}
.meec-exec-scheda__coda .meec-exec-prenota,.meec-exec-scheda__coda .meec-exec-allegati,.meec-exec-scheda__coda .meec-exec-ritorno{max-width:none}
.meec-exec-scheda__coda .meec-exec-allegati,.meec-exec-scheda__coda .meec-exec-ritorno{margin-top:var(--meec-sp-5)}
@media (max-width:56rem){.meec-exec-scheda .meec-articolo__griglia > .meec-exec-scheda__coda{grid-column:auto}}
/* Brochure e calendario accanto al blocco di prenotazione. */
.meec-exec-allegati{display:flex;flex-wrap:wrap;gap:var(--meec-sp-2) var(--meec-sp-5);max-width:53.5rem;margin:var(--meec-sp-5) 0 0;padding:0;list-style:none}
.meec-exec-allegati li{position:relative;margin:0;padding-left:calc(1.5rem + var(--meec-sp-2))}
.meec-exec-allegati li::before{position:absolute;left:0;top:.125rem;--_ico-misura:1.5rem}
.meec-exec-allegati a{display:inline-block;padding-block:.125rem}

/* Riepilogo: stessa cassa della card del design system. */
.meec-exec-riepilogo{
	display:grid;gap:var(--meec-sp-4);margin:0;
	padding:calc(var(--meec-sp-5) - 1px);
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-grigia);
}
.meec-exec-riepilogo__voce dt{font-size:var(--meec-testo-sm);line-height:1.43;font-weight:600;color:var(--meec-testo-accento)}
.meec-exec-riepilogo__voce dd{margin:var(--meec-sp-1) 0 0}
.meec-exec-riepilogo__voce dd p{margin:0 0 var(--meec-sp-1)}
.meec-exec-riepilogo__voce dd p:last-child{margin-bottom:0}

/* Blocco di prenotazione: riquadro bianco nella fascia grigia. */
.meec-exec-prenota{
	max-width:53.5rem;margin:0;
	padding:calc(var(--meec-sp-7) - 1px);
	border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio-l);
	background:var(--meec-sup-sezione-bianca);
}
.meec-exec-prenota > *{margin:0 0 var(--meec-sp-3)}
.meec-exec-prenota > :last-child{margin-bottom:0}
.meec-exec-prenota__titolo{font-size:var(--meec-titolo-s)}
.meec-exec-prenota__contatti{color:var(--meec-testo-secondario)}
.meec-exec-prenota .meec-exec-bottone{
	display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--meec-sp-5);
	border:1px solid var(--meec-sup-bottone-primario);border-radius:var(--meec-raggio-pillola);
	background:var(--meec-sup-bottone-primario);color:var(--meec-testo-invertito);font-weight:600;text-decoration:none;
}
.meec-exec-prenota .meec-exec-bottone:hover{background:var(--meec-sup-bottone-primario-hover);border-color:var(--meec-sup-bottone-primario-hover)}
.meec-exec-ritorno{max-width:53.5rem;margin:var(--meec-sp-5) 0 0}

/* Blocco «Executive Program» in Home e nelle pagine: griglia come le News. */
.meec-exec-blocco .meec-exec-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:var(--meec-sp-5)}
.meec-exec-blocco .meec-exec-griglia > li{margin:0}
.meec-exec-blocco__testata{margin-bottom:var(--meec-sp-7)}
.meec-exec-blocco__link{margin:var(--meec-sp-7) 0 0}

/* Executive — esiti e modulo di prenotazione (stesse classi del plugin, vestite col design system). */
.meec-exec-esito{
	margin:0 0 var(--meec-sp-5);padding:var(--meec-sp-3) var(--meec-sp-4);
	border-left:4px solid var(--meec-colore-ok);border-radius:var(--meec-raggio-sm);
	background:var(--meec-successo-sfondo,var(--meec-sup-sezione-grigia));color:var(--meec-testo-primario);
}
.meec-exec-esito--ko{border-left-color:var(--meec-colore-errore);background:var(--meec-errore-sfondo,var(--meec-sup-sezione-grigia))}
.meec-exec-esito > *{margin:0 0 var(--meec-sp-1)}
.meec-exec-esito > :last-child{margin-bottom:0}
.meec-exec-esito__elenco{margin:var(--meec-sp-2) 0 0;padding-left:var(--meec-sp-5)}
.meec-exec-form{display:flex;flex-direction:column;gap:var(--meec-sp-5)}
.meec-exec-form > *{margin:0}
.meec-exec-form__trappola{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.meec-exec-form__gruppo{border:1px solid var(--meec-bordo-terziario);border-radius:var(--meec-raggio);padding:var(--meec-sp-2) var(--meec-sp-5) var(--meec-sp-5);margin:0}
.meec-exec-form__gruppo legend{padding:0 var(--meec-sp-2);font-weight:600}
.meec-exec-form__campo,.meec-exec-form__consenso{margin:var(--meec-sp-4) 0 0}
.meec-exec-form__campo label{display:block;margin-bottom:var(--meec-sp-1);font-weight:600}
.meec-exec-form__campo input,.meec-exec-form__campo textarea{
	width:100%;max-width:34rem;min-height:2.75rem;padding:var(--meec-sp-2) var(--meec-sp-3);
	border:1px solid var(--meec-bordo-secondario);border-radius:var(--meec-raggio-sm);
	background:var(--meec-sup-sezione-bianca);color:var(--meec-testo-primario);font:inherit;
}
.meec-exec-form__campo--errore input,.meec-exec-form__campo--errore textarea{border:2px solid var(--meec-colore-errore)}
.meec-exec-form__aiuto{display:block;margin-top:var(--meec-sp-1);font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}
.meec-exec-form__errore{display:block;margin-top:var(--meec-sp-1);font-size:var(--meec-testo-sm);line-height:1.43;font-weight:600;color:var(--meec-colore-errore)}
/* Consensi: l'etichetta contiene testo, un link e l'asterisco, quindi niente
   grid/flex (ogni pezzo diventerebbe una cella: Trappola 4). La casella sta
   a sinistra in absolute e il testo scorre come una riga sola. */
.meec-exec-form__consenso label{position:relative;display:block;padding-left:calc(1.5rem + var(--meec-sp-2));line-height:1.5}
.meec-exec-form__consenso input{position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;margin:0;accent-color:var(--meec-colore-primario)}
.meec-exec-form__consenso .meec-exec-form__obbl{margin-left:.125rem}
.meec-exec-form__obbl{color:var(--meec-colore-errore)}
.meec-exec-form__nota{font-size:var(--meec-testo-sm);line-height:1.43;color:var(--meec-testo-secondario)}
.meec-exec-form .meec-exec-bottone{
	display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--meec-sp-5);
	border:1px solid var(--meec-sup-bottone-primario);border-radius:var(--meec-raggio-pillola);
	background:var(--meec-sup-bottone-primario);color:var(--meec-testo-invertito);font:inherit;font-weight:600;cursor:pointer;
}
.meec-exec-form .meec-exec-bottone:hover{background:var(--meec-sup-bottone-primario-hover);border-color:var(--meec-sup-bottone-primario-hover)}
/* Link «in riga» del riepilogo e del ritorno: bersaglio di almeno 24px (WCAG 2.5.8). */
.meec-exec-riepilogo a,.meec-exec-ritorno a,.meec-exec-prenota__contatti a{display:inline-block;padding-block:.125rem}

/* --- Elenco: le fasce fisse del Figma «Executive Program» ------------------ */
/* Testata a due blocchi: occhiello e titolo a sinistra (375), introduzione a
   destra (856), 64 in mezzo — «Competenze immediatamente applicabili» e «Chi
   insegna». Sotto 64rem torna in colonna. */
.meec-pagina .meec-sezione__testata--affiancata{
	display:grid;grid-template-columns:minmax(0,23.4375rem) minmax(0,53.5rem);
	justify-content:space-between;gap:var(--meec-sp-2) var(--meec-sp-9);
	max-width:none;
}
.meec-sezione__testata--affiancata > .meec-occhiello{grid-column:1;grid-row:1}
.meec-sezione__testata--affiancata > .meec-sezione__titolo{grid-column:1;grid-row:2;margin:0}
.meec-sezione__testata--affiancata > .meec-sottotitolo{grid-column:2;grid-row:1 / 3;margin:0;font-size:var(--meec-testo-lg);line-height:1.556}
.meec-pagina .meec-sezione__testata--affiancata > .meec-sottotitolo > *{margin:0}
.meec-sezione__testata--affiancata > .meec-sottotitolo > * + *{margin-top:0}
.meec-sezione__testata--affiancata > .meec-sottotitolo strong{color:var(--meec-testo-primario);font-weight:600}
.meec-pagina .meec-sezione__testata--sola{margin-bottom:0}
@media (max-width:64rem){
	.meec-pagina .meec-sezione__testata--affiancata{grid-template-columns:minmax(0,1fr);gap:var(--meec-sp-3);max-width:53.5rem}
	.meec-sezione__testata--affiancata > .meec-sottotitolo{grid-column:1;grid-row:auto}
}
/* Quattro card con icona 64: colonne da 306 con gap 24 (4·306 + 3·24 = 1296).
   Non e' .meec-griglia--4: quella classe e' lo scopo dell'alias che centra la
   testata di «Il Master in breve», e qui la testata e' a due blocchi. */
.meec-pagina .meec-exec-caratteristiche{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin:0;padding:0;list-style:none}
/* 2+2 invece di 3+1 sotto i 1080px (U3, 30/09/2026); una colonna sotto 36rem. */
@media (max-width:67.5rem){
	.meec-pagina .meec-exec-caratteristiche{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:36rem){
	.meec-pagina .meec-exec-caratteristiche{grid-template-columns:minmax(0,1fr)}
}
.meec-exec-caratteristiche > .meec-card{margin:0}
/* Attestazione (fascia scura): testo a sinistra, voce centrata a destra (499)
   con l'icona 80 bianca. */
.meec-exec-attestazione__griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,31.1875rem);gap:var(--meec-sp-9);align-items:center}
.meec-pagina .meec-exec-attestazione__testo > *{margin:0}
.meec-exec-attestazione__testo > .meec-occhiello + .meec-sezione__titolo{margin-top:var(--meec-sp-3)}
.meec-exec-attestazione__testo > .meec-sezione__titolo + .meec-sottotitolo{margin-top:var(--meec-sp-3)}
.meec-exec-attestazione__testo > .meec-sottotitolo{font-size:var(--meec-testo-lg);line-height:1.556}
.meec-exec-attestazione__voce{padding:var(--meec-sp-5);color:var(--meec-testo-invertito)}
@media (max-width:56rem){.meec-exec-attestazione__griglia{grid-template-columns:minmax(0,1fr)}}
/* Per aziende ed enti: immagine 600x512 (segnaposto finche' non arriva la
   foto) + testo con occhiello, titolo, paragrafi e pulsante secondario. */
.meec-pagina .meec-exec-su-misura .meec-affiancati__testo > *{margin:0}
.meec-exec-su-misura .meec-affiancati__testo > .meec-occhiello + .meec-sezione__titolo{margin-top:var(--meec-sp-3)}
.meec-exec-su-misura .meec-affiancati__testo > .meec-sezione__titolo + .meec-sottotitolo{margin-top:var(--meec-sp-3)}
.meec-pagina .meec-exec-su-misura .meec-sottotitolo{margin-bottom:0}
.meec-pagina .meec-exec-su-misura .meec-sottotitolo > *{margin:0}
.meec-exec-su-misura .meec-sottotitolo strong{color:var(--meec-testo-primario);font-weight:600}
.meec-pagina .meec-exec-su-misura .meec-bottoni{margin-top:var(--meec-sp-5)}