/* =============================================================================
   X-PAN 2026 — sistema visivo del mock-up 1.0
   Creato in Fase 0 il 16 agosto 2026.

   COME FUNZIONA
   Tutto è dentro .xpan. Questo foglio si carica solo dai template di
   anteprima, che avvolgono la pagina in <div class="xpan"> — così non può
   toccare nemmeno per sbaglio una pagina pubblica, e allo stesso tempo
   vince sulle regole di style.css senza bisogno di !important.

   I colori arrivano dal blocco :root in cima a style.css.

   COSA C'È QUI
   Solo i pezzi che servono a più di una pagina: cornice, tipografia e i
   nove componenti riutilizzabili. Gli stili specifici di una pagina sola
   (scheda professionista, pagina episodio…) vanno aggiunti a valle,
   ognuno nella sua fase, sempre in questo file e mai inline nel PHP.
   ============================================================================= */


/* ---------------------------------------------------------------- 1. Base -- */

.xpan * { box-sizing: border-box; }

.xpan {
	background: #fff;
	color: var(--text);
	font-family: var(--font);
	font-weight: var(--fw-base);
	line-height: 1.5;
}

.xpan a { color: inherit; text-decoration: none; }

/* Le etichette per i lettori di schermo. Il tema le nascondeva con una
   classe sua che dentro .xpan non arriva più: senza questa regola
   ricompaiono in pagina, come è successo due volte in fase di prova. */
.xpan .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.xpan button { font: inherit; }
.xpan img { max-width: 100%; }

.xpan h1,
.xpan h2,
.xpan h3 { font-weight: var(--fw-bold); }

/* La parola accentata dei titoli va in <em>: niente corsivo, solo colore. */
.xpan h1 em,
.xpan h2 em { color: var(--purple); font-style: normal; }

.xpan h1 {
	margin: 0 0 24px;
	font-size: clamp(58px, 6.25vw, 96px);
	line-height: .88;
	letter-spacing: -.068em;
}

/* Occhiello: trattino verde + testo maiuscolo spaziato. */
.xpan .eyebrow {
	display: flex; align-items: center; gap: 11px;
	font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .14em;
}
.xpan .eyebrow span { width: 30px; height: 4px; background: var(--green); }

.xpan .section { padding: var(--section-y) var(--section-x); }

/* Testata di sezione: titolone a sinistra, paragrafo stretto a destra,
   allineati in basso. È la stessa griglia in tutte le sezioni. */
.xpan .section-heading {
	display: grid; grid-template-columns: 1.35fr .65fr; gap: 10%;
	align-items: end; margin-bottom: 60px;
}
.xpan .section-heading h2 {
	margin: 0;
	font-size: clamp(48px, 5.4vw, 82px);
	line-height: .9; letter-spacing: -.055em;
}
.xpan .section-heading > p {
	max-width: 430px; margin: 0;
	font-size: 17px; font-weight: 600; line-height: 1.6;
}
.xpan .section-kicker {
	margin: 0 0 18px;
	font-size: 10px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .17em;
	color: var(--purple);
}
.xpan .section-kicker.light { color: var(--yellow); }

.xpan .section-footer-link { padding-top: 30px; text-align: right; }
.xpan .section-footer-link a {
	font-size: 13px; font-weight: var(--fw-bold);
	border-bottom: 1px solid var(--black); padding-bottom: 5px;
}

/* Bottoni: rettangolari, niente raggio, la freccia gialla è uno <span>. */
.xpan .button {
	display: inline-flex; align-items: center; gap: 34px;
	padding: 17px 20px; font-size: 13px; font-weight: var(--fw-bold);
}
.xpan .button.primary   { background: var(--purple); color: #fff; }
.xpan .button.primary span { color: var(--yellow); }
.xpan .button.secondary { border: 1px solid var(--black); }
.xpan .button.yellow    { background: var(--yellow); color: var(--black); }


/* ------------------------------------------------- 2. Header + ticker (F1) -- */

.xpan .site-header {
	height: 86px; display: flex; align-items: center; gap: 60px;
	padding: 0 var(--section-x);
	background: #fff; border-bottom: var(--rule);
	position: relative; z-index: 5;
}
.xpan .logo-brand { flex: 0 0 auto; display: block; width: 52px; height: 52px; }
.xpan .logo-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }

.xpan .site-header nav { display: flex; gap: 34px; margin-left: auto; }
.xpan .site-header nav a { font-size: 14px; font-weight: 800; }
.xpan .site-header nav a:hover { color: var(--purple); }

/* Quando il menu arriva da WordPress invece che dai link di ripiego,
   wp_nav_menu incarta tutto in <ul><li>: qui si toglie di mezzo. */
.xpan .xpan-menu { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; }
.xpan .xpan-menu li { margin: 0; }
.xpan .mobile-menu .xpan-menu { display: block; gap: 0; }

.xpan .profile-button {
	background: var(--black); color: #fff;
	padding: 14px 18px; font-size: 12px; font-weight: 800;
}
.xpan .profile-button span { color: var(--yellow); padding-left: 12px; }

/* Menu mobile: <details>, nessun JavaScript. */
.xpan .mobile-menu { display: none; margin-left: auto; position: relative; }
.xpan .mobile-menu summary {
	list-style: none; cursor: pointer;
	border: var(--rule); padding: 10px 13px;
	font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase;
}
.xpan .mobile-menu summary::-webkit-details-marker { display: none; }
.xpan .mobile-menu > div {
	position: absolute; right: 0; top: 48px; width: min(82vw, 320px);
	background: #fff; border: var(--rule); box-shadow: 10px 10px 0 var(--yellow);
}
.xpan .mobile-menu a {
	display: block; padding: 15px 18px;
	border-bottom: var(--rule); font-size: 14px; font-weight: var(--fw-bold);
}
.xpan .mobile-menu a:last-child { border-bottom: 0; background: var(--black); color: #fff; }

/* Ticker prezzi. I dati arrivano da inc/mercuriale-data.php: mai duplicarli.
   overflow-x anche sul contenitore, o sotto i 400px la pagina scorre di lato. */
.xpan .ticker {
	height: 49px; display: flex; align-items: stretch;
	background: var(--black); color: #fff;
	font-size: 11px; overflow: hidden; max-width: 100%;
}
.xpan .ticker-label {
	display: flex; align-items: center; padding: 0 24px;
	background: var(--yellow); color: var(--black);
	text-transform: uppercase; font-weight: var(--fw-bold);
	letter-spacing: .08em; white-space: nowrap;
}
.xpan .live-dot {
	width: 7px; height: 7px; margin-right: 9px; border-radius: 50%;
	background: var(--purple); box-shadow: 0 0 0 4px rgba(129, 54, 113, .16);
}
.xpan .ticker-window { flex: 1; overflow: hidden; }
/* La durata arriva da header-2026.php e cresce col numero di voci: con la
   durata fissa, un nastro tre volte più lungo scorreva tre volte più veloce.
   Il 35s resta come ripiego se l'attributo non c'è. */
.xpan .ticker-track {
	display: flex; width: max-content; height: 100%; align-items: center;
	animation: xpan-ticker var(--ticker-dur, 35s) linear infinite;
}
.xpan .ticker-track:hover { animation-play-state: paused; }
.xpan .ticker-item {
	display: flex; align-items: center; gap: 10px;
	padding: 0 23px; border-right: 1px solid #333; white-space: nowrap;
}
.xpan .ticker-name { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.xpan .trend.up   { color: #7ed67b; }
.xpan .trend.down { color: #ff8d8d; }
.xpan .ticker-link {
	display: flex; align-items: center; padding: 0 24px;
	border-left: 1px solid #333; color: var(--yellow);
	font-weight: 800; white-space: nowrap;
}
@keyframes xpan-ticker { to { transform: translateX(-50%); } }


/* --------------------------------------------------------- 3. Hero (F2) -- */

.xpan .hero-video {
	position: relative; isolation: isolate;
	min-height: calc(100svh - 135px);
	display: grid; place-items: center;
	padding: 75px 20px; text-align: center;
	background: #171717; color: #fff;
}
.xpan .hero-video .hero-copy { max-width: 1050px; z-index: 2; }
.xpan .hero-video h1 { margin-inline: auto; font-size: clamp(60px, 7.2vw, 108px); line-height: .87; }
.xpan .hero-video h1 em { color: var(--yellow); }
.xpan .hero-intro { max-width: 690px; margin: 30px auto 0; font-size: 18px; color: rgba(255, 255, 255, .9); }
.xpan .hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
.xpan .hero-video .button.secondary {
	border-color: #fff; color: #fff;
	background: rgba(0, 0, 0, .15); backdrop-filter: blur(8px);
}

.xpan .hero-video-layer { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #161616; }
/* Il video è visibile da subito.
   Nel mock-up partiva a opacità zero e una riga di React gli metteva la
   classe «is-ready» quando il primo fotogramma era pronto, facendolo
   comparire in dissolvenza. Quel React qui non c'è: ho portato la regola
   CSS e non lo script, quindi la classe non arrivava mai e il filmato
   restava trasparente. Girava, ma non lo vedeva nessuno.
   La dissolvenza non serve: il fermo immagine sta già sotto, messo due
   volte — nell'attributo «poster» e come sfondo del contenitore — quindi
   fra il caricamento e la prima immagine non c'è nessun buco da coprire. */
.xpan .hero-video-layer video {
	width: 100%; height: 100%; object-fit: cover;
}
/* Il velo scuro sopra al video. Nel mock-up era leggero perché il filmato
   di prova era scuro; quello vero è una serra in pieno sole e il titolo
   bianco ci spariva sopra. Qui è più deciso: l'immagine si vede ancora,
   il testo si legge sempre. */
.xpan .hero-video-overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.72) 100%);
}
/* Il poster copre il buco fra il primo fotogramma e l'avvio del video:
   senza, si vede un rettangolo nero per un istante a ogni caricamento.
   Vale a tutte le larghezze: il fondo sta sul contenitore, il video ci va
   sopra quando è pronto. */
.xpan .hero-video-layer {
	background-image: var(--hero-poster);
	background-size: cover; background-position: center;
}

/* Fallback se un giorno il video sparisce dai media. */
.xpan .hero-video-fallback {
	position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
	background: linear-gradient(125deg, #171717 0 27%, #242424 27% 43%, #151515 43% 64%, #292929 64% 77%, #121212 77%);
}

/* Il titolo dell'hero: la riga accentata in giallo, non in viola —
   sul nero il viola sparisce. */
.xpan .hero-video h1 em { color: var(--yellow); }

/* Le card della home sono link: qui si evita che il tema di base
   ci metta sottolineature o colori suoi. */
.xpan .media-copy h3 a,
.xpan .media-art { display: block; color: inherit; }
.xpan .media-art { position: relative; }


/* --------------------------------------------- 4. Striscia a 4 caselle (F2) -- */

.xpan .quick-strip {
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-top: var(--rule); border-bottom: var(--rule);
}
.xpan .quick-strip > a {
	min-height: 230px; padding: 30px;
	display: flex; flex-direction: column; justify-content: flex-end;
	border-right: var(--rule);
	transition: filter .2s, transform .2s;
}
.xpan .quick-strip > a:last-child { border-right: 0; }
.xpan .quick-strip > a:hover { filter: brightness(1.04); transform: translateY(-3px); }
/* Senza l'occhiello sopra, il titolo si prende tutta la casella: è l'unica
   cosa scritta lì dentro e deve leggersi da lontano.
   Il testo va a capo per parola invece di riempire la riga: «Leggi le / notizie»
   su due righe grosse si legge meglio di una riga sola più piccola, ed è il
   ritmo che «Ascolta il podcast» aveva già per conto suo. Il ritorno a capo
   è nel markup (<br>), non affidato alla larghezza della casella: così la
   spezzatura è la stessa a tutte le larghezze. */
.xpan .quick-strip span {
	max-width: none; font-size: clamp(30px, 3vw, 46px);
	line-height: 1; letter-spacing: -.035em; font-weight: var(--fw-bold);
	text-wrap: balance;
}

.xpan .quick-news    { background: var(--yellow); }
.xpan .quick-podcast { background: var(--purple); color: #fff; }
.xpan .quick-talks   { background: var(--green);  color: #fff; }
.xpan .quick-people  { background: var(--black);  color: #fff; }


/* -------------------------------------------------- 5. Card editoriali (F2/F3) -- */

/* La sezione Media della home: tre colonne, una per la puntata, una per la
   Voce dai Mercati, una per le notizie.

   Prima il podcast prendeva metà sezione e gli altri due si dividevano
   l'altra metà uno sopra l'altro, in una colonna diventata una pila di cose
   diverse: due articoli, un bottone nero, un'etichetta e una faccia. Qui i
   tre hanno la stessa larghezza e ognuno la sua etichetta colorata — si
   capisce a colpo d'occhio che sono tre modi di raccontare la stessa filiera.

   Le copertine restano quadrate e senza ritaglio: quelle del podcast portano
   il nome della sezione stampato nella metà bassa e un riquadro non 1:1 lo
   taglierebbe via. La foto del grossista invece è un ritratto e usa `cover`:
   lì si taglia lo sfondo, non il soggetto. */
/* `stretch` è quello che tiene le tre colonne alla stessa altezza: senza,
   la più corta finiva a metà e sotto restava un rettangolo bianco. Il corpo
   di ciascuna cresce per riempire, e i bottoni si appoggiano in fondo. */
.xpan .media-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.xpan .media-col { display: flex; flex-direction: column; background: #fff; border: var(--rule); }

/* L'etichetta è l'unico posto dove i tre si distinguono per colore. */
.xpan .media-col-titolo {
	margin: 0; padding: 14px 20px; border-bottom: var(--rule);
	font-size: 10px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .14em;
}
.xpan .tinta-viola  { background: var(--purple); color: #fff; }
.xpan .tinta-verde  { background: var(--green);  color: #fff; }
.xpan .tinta-giallo { background: var(--yellow); color: var(--black); }

.xpan .col-cover {
	display: block; aspect-ratio: 1 / 1; overflow: hidden;
	background: var(--cream); border-bottom: var(--rule);
}
.xpan .col-cover img {
	display: block; width: 100%; height: 100%;
	object-fit: contain; transition: transform .45s ease;
}
.xpan .col-cover-foto img { object-fit: cover; object-position: center 20%; }

/* Il video della Voce dai Mercati nella colonna della home. Il riquadro ha
   le proporzioni di un reel: l'incorporamento di Instagram arriva verticale
   e senza un'altezza imposta si prende ottocento pixel di colonna. */
.xpan .col-video {
	position: relative; display: block; aspect-ratio: 9 / 16;
	max-height: 520px; background: #000; border-bottom: var(--rule); overflow: hidden;
}
.xpan .col-video iframe,
.xpan .col-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.xpan .col-video-ph {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	color: var(--yellow); font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
}
.xpan .col-video-ph span { font-size: 38px; line-height: 1; }
.xpan .media-col:hover .col-cover img { transform: scale(1.03); }

.xpan .col-corpo { display: flex; flex-direction: column; flex: 1; padding: 22px 20px 24px; }
.xpan .col-corpo h3 {
	margin: 0 0 8px; font-size: clamp(20px, 1.6vw, 25px);
	line-height: 1.06; letter-spacing: -.03em;
}
.xpan .col-data,
.xpan .col-ruolo {
	margin: 0 0 12px; color: var(--text-mut);
	font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
}
.xpan .col-ruolo { color: var(--green); font-weight: var(--fw-bold); }
/* La categoria dell'articolo prende il viola invece del verde: il verde è il
   colore della Voce dai Mercati e in due colonne accostate si confondevano. */
.xpan .col-categoria { color: var(--purple); }
.xpan .col-azienda {
	margin: 0 0 10px; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; color: #6b6b6b;
}
.xpan .col-estratto { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: #3a3a3a; }
/* Il sommario si allunga fin dove serve e spinge i bottoni in fondo: è quello
   che riempie la colonna invece di lasciarla a metà. */
.xpan .col-corpo .col-estratto { flex: 1 0 auto; }
.xpan .col-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.xpan .col-azioni .button { font-size: 11px; padding: 12px 16px; }

/* La colonna delle notizie non ha una copertina sola: ha due voci con la
   loro miniatura, e in fondo l'uscita verso l'archivio. */
.xpan .col-notizie { flex: 1; }
.xpan .col-notizia {
	display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center;
	padding: 16px 20px; border-bottom: var(--rule); transition: background .2s;
}
.xpan .col-notizia:hover { background: var(--cream); }
.xpan .col-notizia-foto {
	display: block; width: 84px; aspect-ratio: 1 / 1;
	background: var(--cream); border: var(--rule); overflow: hidden;
}
.xpan .col-notizia-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.xpan .col-notizia-testo { display: block; min-width: 0; }
.xpan .col-notizia-testo small {
	display: block; margin-bottom: 5px; color: var(--text-mut);
	font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
}
.xpan .col-notizia-testo b { display: block; font-size: 16px; line-height: 1.18; letter-spacing: -.02em; font-weight: var(--fw-bold); }
.xpan .col-tutte {
	display: block; margin-top: auto; padding: 18px 20px;
	background: var(--black); color: var(--yellow);
	font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .06em;
}
.xpan .col-tutte:hover { background: var(--purple); }

.xpan .story-grid { display: grid; grid-template-columns: repeat(3, minmax(300px, 1fr)); gap: 18px; }

.xpan .media-card {
	background: #fff; border: var(--rule);
	scroll-snap-align: start;
	transition: transform .2s ease, box-shadow .2s ease;
}
.xpan .media-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, .09); }
.xpan .media-art { position: relative; height: 280px; overflow: hidden; background: #111; }
.xpan .media-art > img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	transition: transform .45s ease;
}
.xpan .media-card:hover .media-art > img { transform: scale(1.035); }
.xpan .media-art iframe { display: block; width: 100%; height: 100%; border: 0; }
.xpan .media-type {
	position: absolute; left: 18px; top: 18px;
	background: var(--cream); padding: 8px 10px;
	font-size: 9px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
}
.xpan .media-copy { padding: 25px; min-height: 195px; display: flex; flex-direction: column; }
.xpan .media-copy p {
	margin: 0; color: var(--text-mut);
	font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
}
.xpan .media-copy h3 {
	margin: 14px 0 25px; font-size: 23px; line-height: 1.08; letter-spacing: -.025em;
}
/* Solo il link in fondo alla card è maiuscolo e piccolo. Il figlio
   diretto, non «ogni <a> dentro .media-copy»: quella regola prendeva
   anche il link dentro l'<h3> e trasformava il titolo in una scritta
   minuscola tutta in maiuscolo. */
.xpan .media-copy > a {
	margin-top: auto; font-size: 11px;
	text-transform: uppercase; font-weight: var(--fw-bold);
}
.xpan .media-copy h3 a { font: inherit; color: inherit; text-transform: none; }

/* Variante compatta per gli archivi. */
.xpan .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.xpan .article-card { display: block; border: var(--rule); background: #fff; padding-bottom: 22px; }
.xpan .article-card > div { position: relative; }
.xpan .article-card img { display: block; width: 100%; height: 230px; object-fit: cover; }
.xpan .article-card > div > span {
	position: absolute; left: 16px; top: 16px;
	background: var(--cream); padding: 7px 9px;
	font-size: 9px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
}
.xpan .article-card p {
	margin: 18px 20px 8px; color: var(--text-mut);
	font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
}
.xpan .article-card h3 { margin: 0 20px 16px; font-size: 22px; line-height: 1.1; letter-spacing: -.025em; }
.xpan .article-card small {
	margin: 0 20px; font-size: 11px;
	text-transform: uppercase; font-weight: var(--fw-bold);
}


/* ------------------------------------------------- 6. Community prodotti (F5) -- */

.xpan .product-community { background: var(--yellow); border-top: var(--rule); border-bottom: var(--rule); }
.xpan .community-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10%; align-items: end; margin-bottom: 50px; }
/* Il marchio prende il posto del paragrafo: stessa colonna, allineato in
   basso col titolo. Verde WhatsApp su bianco, dentro il filo nero. */
.xpan .community-marchio {
	display: inline-flex; align-items: center; justify-self: end;
	padding: 22px 26px; border: var(--rule); background: #fff;
	transition: background .2s, transform .2s;
}
/* Nessun `fill` qui dentro: il marchio porta i colori suoi (bolla verde,
   cornetta bianca) e vanno lasciati stare. Prima il disegno era una sagoma
   a un colore che prendeva il colore del testo: sui fondi colorati della
   Community diventava una macchia marrone o viola e non lo riconosceva
   nessuno. Un marchio o è quello o non serve. */
.xpan .community-marchio { gap: 22px; }
.xpan .community-marchio svg { width: 96px; height: 96px; display: block; flex: 0 0 auto; }
.xpan .community-marchio span {
	font-size: clamp(24px, 2.1vw, 34px); line-height: 1.05; font-weight: var(--fw-bold);
	letter-spacing: -.035em; color: var(--black);
}
.xpan .community-marchio:hover { transform: translateY(-3px); }
.xpan .community-heading h2 { margin: 0; font-size: clamp(48px, 5.4vw, 82px); line-height: .9; letter-spacing: -.055em; }

/* Le sei caselle sono le stesse card della pagina Community, in piccolo:
   ognuna vestita del **colore del suo prodotto** — i fichi sul rosa, le
   arance sull'arancio, il lime sul verde — e non sei rettangoli bianchi
   tutti uguali con una pallina beige dentro. I colori arrivano da
   inc/community-colors.php: sono ricavati dall'icona stessa, e sono gli
   stessi che usa il Mercuriale per le sue tessere. Fondo chiaro e testo
   scuro della stessa tinta: il contrasto è garantito da come sono nati.
   La card porta dritta al gruppo WhatsApp, come sulla pagina Community. */
.xpan .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--rule); }
.xpan .product-card {
	position: relative; min-height: 240px; padding: 26px;
	display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 24px;
	border-right: var(--rule); border-bottom: var(--rule);
	transition: transform .2s, filter .2s;
}
.xpan .product-card:nth-child(3n)   { border-right: 0; }
.xpan .product-card:nth-child(n+4)  { border-bottom: 0; }
.xpan .product-card:hover { transform: translateY(-3px); filter: brightness(1.03); }

.xpan .product-icona { width: 118px; height: 118px; object-fit: contain; display: block; }

/* Il nome del prodotto è la cosa che si cerca: grande.
   La riga «Produttori, grossisti e buyer» non c'è più — era la stessa
   identica frase su tutte e sei le caselle. */
.xpan .product-nome {
	display: block; font-size: clamp(26px, 2.3vw, 36px);
	line-height: 1; letter-spacing: -.035em; font-weight: var(--fw-bold);
}

/* Il marchio in basso a destra dice dove si finisce cliccando. Sempre
   visibile, non solo al passaggio del mouse: sul telefono il mouse non
   c'è e la card non direbbe mai che porta su WhatsApp. */
.xpan .product-wa {
	position: absolute; right: 20px; bottom: 18px;
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .05em;
	opacity: .85;
}
.xpan .product-wa svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Centrato e grande: è l'unica uscita da questa sezione, non un piè di
   pagina. Prima era una riga di undici pixel spinta in un angolo. */
.xpan .all-groups {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	margin-top: 18px; padding: 34px 24px;
	background: var(--black); color: #fff;
	font-size: clamp(22px, 2.4vw, 36px);
	font-weight: var(--fw-bold); letter-spacing: -.03em;
	transition: background .2s;
}
.xpan .all-groups:hover { background: var(--purple); }
.xpan .all-groups span { color: var(--yellow); }


/* ------------------------------------------------ 7. Professionisti (F2/F6) -- */

.xpan .professional-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xpan .professional-card {
	min-height: 385px; background: #fff; border: var(--rule);
	display: flex; flex-direction: column; position: relative; overflow: hidden;
	transition: transform .2s, box-shadow .2s;
}
.xpan .professional-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .1); }
/* Il link copre tutta la card tranne la riga dei recapiti, che è fatta di
   link a sua volta: un <a> dentro un <a> non è valido e i browser lo
   spezzano dove capita. */
.xpan .professional-link { display: flex; flex-direction: column; flex: 1; }
.xpan .professional-link .person-main { display: block; }
.xpan .professional-card .avatar {
	width: 100%; height: 285px; object-fit: cover; object-position: center 20%;
	background: var(--green); filter: saturate(.88);
}
/* L'ordine di lettura è ruolo, nome, azienda.
   Chi arriva su questa griglia cerca una categoria — «mi serve un grossista» —
   non una persona di cui sa già il nome. La parola che risponde a quella
   domanda va per prima e va grande: prima era una scritta grigia da undici
   pixel sotto tutto il resto, l'ultima cosa che si leggeva. Il nome e la
   ditta servono dopo, quando la categoria ha già fatto la selezione. */
.xpan .person-main { padding: 18px 20px 16px; }
.xpan .person-main .person-ruolo {
	display: block; margin: 0 0 8px;
	font-size: clamp(26px, 2.1vw, 34px); line-height: .95;
	letter-spacing: -.04em; font-weight: var(--fw-bold);
	text-transform: uppercase; color: var(--black);
}
.xpan .person-main h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.02em; font-weight: var(--fw-bold); }
/* La ditta sotto il nome, in piccolo: identifica, non intesta. */
.xpan .person-main p  { margin: 0; font-size: 12px; font-weight: 700; color: #6b6b6b; text-transform: uppercase; letter-spacing: .04em; }
/* Sulle card la città non si mostra: è una scelta, non una dimenticanza. */

/* La riga dei recapiti sta più in basso in questo foglio, al §11. */

/* Ricerca + filtri per ruolo. La tassonomia ruolo_filiera va creata in Fase 6. */
.xpan .directory-tools { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 28px; }
.xpan .directory-search {
	height: 60px; display: flex; align-items: center; gap: 15px; padding: 0 20px;
	background: var(--cream); border: 1px solid var(--black);
}
.xpan .directory-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; }
.xpan .results-count { align-self: center; padding-left: 10px; color: #6d6d6d; font-size: 12px; }
.xpan .directory-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; }
.xpan .directory-categories button,
.xpan .directory-categories a {
	border: var(--rule); background: #fff; padding: 9px 14px;
	font-size: 10px; font-weight: var(--fw-bold); cursor: pointer;
}
.xpan .directory-categories .active { background: var(--yellow); }

.xpan .join-banner {
	margin-top: 14px; padding: 32px 30px;
	background: var(--yellow); border: var(--rule);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	font-size: clamp(19px, 1.8vw, 27px);
	font-weight: var(--fw-bold); letter-spacing: -.025em;
}
.xpan .join-banner strong {
	flex: 0 0 auto; font-size: 12px;
	text-transform: uppercase; letter-spacing: .06em;
	border-bottom: 3px solid var(--black); padding-bottom: 4px;
}


/* ---------------------------------------------------- 8. Blocco Mercuriale (F2) -- */

.xpan .market-section {
	background: var(--black); color: #fff;
	padding: 0 var(--section-x) var(--section-y);
	display: block;
}
/* La testata è quella della pagina /mercuriale/: una riga sola, PAN in
   giallo, interlinea sopra l'uno. Prima erano due righe con interlinea .7
   e le due parole si accavallavano — e soprattutto non somigliava alla
   pagina che sta annunciando. */
.xpan .market-testata {
	padding: 80px 0 40px; margin-bottom: 40px;
	border-bottom: 4px solid #fff;
}
.xpan .market-testata .mini-label { color: var(--yellow); margin-bottom: 18px; }
.xpan .market-testata h2 {
	margin: 0; font-size: clamp(44px, 6.4vw, 96px);
	line-height: 1.02; letter-spacing: -.05em;
}
.xpan .market-testata h2 em { color: var(--yellow); font-style: normal; }
.xpan .market-quando {
	max-width: 620px; margin: 22px 0 0;
	font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .82);
}
.xpan .market-quando b { color: #fff; }

/* Due colonne: le tessere colorate a sinistra, il listino a destra.
   Le tessere sono quelle della pagina /mercuriale/ — stesso colore per
   prodotto, stessa icona — perché chi arriva dalla home alla pagina deve
   ritrovare la stessa cosa. Il listino tiene i numeri. */
/* Una scheda per prodotto, con le sue quotazioni dentro.

   La versione di prima affiancava sei tessere colorate e un listino di sei
   righe: sei prodotti diversi, sei numeri scollegati, e le tessere che non
   dicevano un prezzo. Un mercuriale non si legge così — nessuno chiede
   «quanto fa il pomodoro», si chiede quanto fa *quel* pomodoro. Qui i
   pomodori stanno tutti insieme, ciascuno con la sua varietà e la sua
   provenienza, e si vede la forbice fra il più caro e il più economico dello
   stesso banco: quella è l'informazione che serve a chi compra. */
.xpan .market-prodotti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.xpan .market-scheda {
	display: flex; flex-direction: column;
	background: #fff; color: var(--black); border: 3px solid #fff;
}

/* La testa porta il colore del prodotto: è la stessa tinta della tessera
   sulla pagina /mercuriale/ e della casella nella Community. */
.xpan .market-scheda-testa {
	display: flex; align-items: center; gap: 16px; padding: 18px 20px;
	transition: filter .2s;
}
.xpan .market-scheda-testa:hover { filter: brightness(1.04); }
.xpan .market-scheda-testa img { width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain; }
.xpan .market-scheda-testa b {
	display: block; font-size: clamp(24px, 2vw, 32px);
	line-height: 1; letter-spacing: -.04em;
}
.xpan .market-scheda-testa small {
	display: block; margin-top: 6px; font-size: 11px;
	font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em;
	opacity: .78;
}

.xpan .market-quotazioni { flex: 1; }
.xpan .market-quotazione {
	display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
	padding: 13px 20px; border-top: 1px solid #e6e2d8;
}
.xpan .market-quotazione:first-child { border-top: 0; }
.xpan .mq-nome { min-width: 0; }
.xpan .mq-nome b {
	display: block; font-size: 14px; line-height: 1.2;
	letter-spacing: -.01em; font-weight: var(--fw-bold);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xpan .mq-nome small {
	display: block; margin-top: 3px; font-size: 9px;
	text-transform: uppercase; letter-spacing: .1em; color: #8a8a8a;
}
.xpan .mq-prezzo { font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -.03em; white-space: nowrap; }
.xpan .mq-var {
	padding: 4px 7px; font-size: 10px; font-weight: var(--fw-bold);
	white-space: nowrap; min-width: 58px; text-align: center;
}
.xpan .mq-var.su  { background: var(--green);  color: #fff; }
.xpan .mq-var.giu { background: var(--purple); color: #fff; }

.xpan .market-altre {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 20px; background: var(--cream); color: var(--black);
	border-top: 1px solid #e6e2d8;
	font-size: 10px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .08em;
}
.xpan .market-altre:hover { background: var(--yellow); }

.xpan .market-cta {
	display: flex; justify-content: space-between; align-items: center; gap: 25px;
	margin-top: 18px; padding: 24px 22px; background: var(--yellow); color: var(--black);
}
.xpan .market-cta span { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; }
.xpan .market-cta strong { font-size: 15px; }


/* ------------------------------------------------- 9. Hero pagine interne (F3+) -- */

.xpan .interior-hero {
	min-height: 560px; padding: 105px var(--section-x) 80px;
	display: grid; grid-template-columns: 1.35fr .65fr; column-gap: 8%;
	align-content: center; border-bottom: var(--rule);
}
.xpan .interior-hero > p {
	grid-column: 1 / -1; margin: 0 0 28px;
	font-size: 10px; font-weight: var(--fw-bold);
	letter-spacing: .16em; text-transform: uppercase;
}
.xpan .interior-hero h1 { margin: 0; font-size: clamp(66px, 8vw, 120px); }
.xpan .interior-intro { align-self: end; max-width: 430px; font-size: 18px; line-height: 1.6; }

/* Testata dal titolo lungo. A 120px una frase di sette parole prende tre
   righe alte quanto lo schermo: qui il titolo scende a un corpo che si legge
   ancora da lontano ma sta in due righe. */
/* Misurato, non tirato a occhio: la colonna del titolo è larga il 65% circa
   della fascia, cioè 860 px a 1440 e 645 a 1080. La riga più lunga fra quelle
   che ci passano — «i mercati ortofrutticoli.» — a 4,9vw sta in 804 px a 1440
   e in 603 a 1080. Con il valore di prima (5,2vw) rimanevano cinque pixel di
   margine: il primo titolo un po' più lungo sarebbe andato a capo da solo. */
.xpan .hero-lungo h1 { font-size: clamp(44px, 4.9vw, 78px); line-height: .95; }

/* Testata del podcast: titolo e frase a sinistra, copertina a destra.
   La copertina è quadrata e non viene ritagliata — è la stessa che si trova
   su Spotify e vale come firma della serie. */
.xpan .hero-podcast { align-items: center; }
.xpan .hero-podcast-testo { min-width: 0; }
.xpan .hero-podcast-testo h1 { margin: 0 0 26px; font-size: clamp(72px, 9vw, 140px); }
.xpan .hero-podcast .interior-intro { align-self: auto; margin: 0; }

/* Il sottotitolo non è una didascalia: è la frase che dice di cosa parla il
   podcast, e su questa pagina viene subito dopo il nome. A 18px, com'era
   l'intro delle altre testate, sotto un titolo da 140 spariva. */
.xpan .podcast-payoff {
	margin: 0 0 26px; max-width: 680px;
	font-size: clamp(20px, 1.9vw, 29px); line-height: 1.35;
	letter-spacing: -.02em; color: rgba(255, 255, 255, .92);
}
/* Un imperativo di una parola: è quello che si chiede al lettore di fare. */
.xpan .podcast-ascoltaci {
	margin: 0; font-size: clamp(34px, 3.4vw, 54px); line-height: 1;
	letter-spacing: -.045em; font-weight: var(--fw-bold); color: var(--yellow);
}
/* Niente cornice: il bordo bianco faceva sembrare la copertina una figurina
   incollata sopra la pagina invece che parte della testata. */
.xpan .hero-podcast-cover {
	display: block; justify-self: end; align-self: center;
	width: 100%; max-width: 380px; height: auto;
}

.xpan .tone-cream  { background: var(--cream); }
.xpan .tone-yellow { background: var(--yellow); }
.xpan .tone-purple { background: var(--purple); color: #fff; }
.xpan .tone-green  { background: var(--green);  color: #fff; }
.xpan .tone-black  { background: var(--black);  color: #fff; }
.xpan .tone-purple h1 em,
.xpan .tone-green h1 em,
.xpan .tone-black h1 em { color: var(--yellow); }


/* ------------------------------------- 7-ter. L'ultima notizia (Notizie) -- */

/* La più recente in grande, sopra la griglia. Copertina a sinistra, testo a
   destra: è l'unico blocco della pagina che si legge invece di scorrere. */
.xpan .ultima-notizia {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 0;
	margin-bottom: 26px; background: #fff; border: var(--rule);
	transition: transform .2s, box-shadow .2s;
}
.xpan .ultima-notizia:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .1); }
.xpan .ultima-foto { display: block; overflow: hidden; background: var(--cream); border-right: var(--rule); }
.xpan .ultima-foto img {
	display: block; width: 100%; height: 100%; min-height: 340px;
	object-fit: cover; transition: transform .45s ease;
}
.xpan .ultima-notizia:hover .ultima-foto img { transform: scale(1.03); }
.xpan .ultima-testo { display: flex; flex-direction: column; padding: 38px 40px; min-width: 0; }
.xpan .ultima-occhiello {
	display: inline-block; align-self: flex-start; margin-bottom: 20px;
	background: var(--yellow); padding: 8px 11px;
	font-size: 9px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
}
.xpan .ultima-titolo {
	display: block; font-size: clamp(28px, 2.7vw, 42px);
	line-height: 1.02; letter-spacing: -.04em; font-weight: var(--fw-bold);
}
.xpan .ultima-data {
	display: block; margin: 14px 0 18px; color: var(--text-mut);
	font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
}
.xpan .ultima-lead { display: block; font-size: 16px; line-height: 1.6; color: #3a3a3a; }
.xpan .ultima-cta {
	display: block; margin-top: auto; padding-top: 26px;
	font-size: 12px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .06em;
}
.xpan .ultima-cta span { color: var(--purple); }


/* --------------------------------------- 8-bis. Voce dai Mercati (NCS) -- */

/* Il video della Voce dai Mercati dentro la testata dei Professionisti.
   L'incorporamento di Instagram arriva verticale e con un'altezza sua: si
   incastra in un riquadro con le proporzioni giuste invece di lasciargliela
   decidere, o la testata cresce di ottocento pixel. */
.xpan .hero-ncs { align-items: center; }
.xpan .hero-ncs-testo { min-width: 0; }
.xpan .hero-ncs-video {
	position: relative; justify-self: end; align-self: center;
	width: 100%; max-width: 330px; aspect-ratio: 9 / 16; max-height: 500px;
	background: #000; border: 4px solid #fff; overflow: hidden;
}
.xpan .hero-ncs-video iframe,
.xpan .hero-ncs-video video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover;
}
.xpan .hero-ncs-ph {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	color: var(--yellow); font-size: 12px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
}
.xpan .hero-ncs-ph span { font-size: 42px; line-height: 1; }

/* Le targhette dei protagonisti, fra la testata e la griglia: sono il ponte
   fra il video e le schede. */
.xpan .ncs-protagonisti {
	padding: 26px var(--section-x); background: var(--cream);
	border-bottom: var(--rule);
}


/* --------------------------------------- 8-quater. Blocco NCS (hub) -- */

/* Il blocco che apre la pagina Professionisti: il video a sinistra, la
   presentazione e le targhette dei protagonisti a destra. È il formato
   dell'hub NCS riportato nel linguaggio 2026 — filo nero, angoli vivi,
   niente ombre — perché le diciannove schede qui sotto nascono da lì. */
.xpan .ncs-blocco { background: var(--cream); border-bottom: var(--rule); }
.xpan .ncs-card {
	display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 34px; align-items: center;
	background: #fff; border: var(--rule); padding: 26px;
}
/* Il riquadro del video è verticale: i reel sono girati col telefono e
   l'incorporamento di Instagram arriva in 9:16. */
.xpan .ncs-video {
	position: relative; aspect-ratio: 9 / 16; max-height: 560px;
	background: var(--black); border: var(--rule); overflow: hidden;
}
.xpan .ncs-video iframe,
.xpan .ncs-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.xpan .ncs-video-ph {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	color: var(--yellow); font-size: 13px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
}
.xpan .ncs-video-ph span { font-size: 42px; line-height: 1; }

.xpan .ncs-testo { min-width: 0; }
.xpan .ncs-testo .mini-label { color: var(--purple); margin-bottom: 16px; }
.xpan .ncs-testo h2 {
	margin: 0 0 18px; font-size: clamp(30px, 3.2vw, 50px);
	line-height: .98; letter-spacing: -.04em;
}
.xpan .ncs-desc { margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: #3a3a3a; max-width: 520px; }
.xpan .ncs-etichetta {
	margin: 0 0 12px; font-size: 9px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .14em; color: var(--text-mut);
}
.xpan .ncs-targhette { display: flex; flex-wrap: wrap; gap: 10px; }
.xpan .ncs-targhetta {
	display: inline-flex; align-items: center; gap: 11px;
	padding: 9px 14px 9px 9px; border: var(--rule); background: var(--cream);
	transition: background .2s, transform .2s;
}
.xpan .ncs-targhetta:hover { background: var(--yellow); transform: translateY(-2px); }
.xpan .ncs-iniziali {
	width: 34px; height: 34px; flex: 0 0 auto;
	display: grid; place-items: center;
	background: var(--black); color: #fff;
	font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .02em;
}
.xpan .ncs-targhetta b { display: block; font-size: 14px; line-height: 1.15; letter-spacing: -.02em; }
.xpan .ncs-targhetta small { display: block; margin-top: 2px; font-size: 10px; color: #6b6b6b; }


/* ------------------------------------------ 8-quinquies. Scheda persona -- */

/* Tutte le informazioni in una colonna sola, nell'ordine in cui servono:
   chi è, dove lavora, come si raggiunge. Prima erano sparse su tre fasce
   diverse e per sapere dove lavorava uno si scorreva mezza pagina. */
.xpan .profile-ruolo {
	margin: 0 0 10px; font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .16em; color: var(--purple);
}
.xpan .profile-copy h1 { margin: 0 0 10px; font-size: clamp(40px, 4.4vw, 68px); line-height: .94; letter-spacing: -.045em; }
.xpan .profile-company {
	margin: 0 0 32px; font-size: clamp(17px, 1.5vw, 22px);
	font-weight: var(--fw-bold); letter-spacing: -.02em; color: #4a4a4a;
}

/* I dati: due colonne di coppie etichetta/valore, senza cornici. Le caselle
   bordate di prima facevano sembrare una scheda anagrafica quello che è il
   racconto di una persona. */
.xpan .profile-dati {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px 28px; margin: 0 0 36px;
	padding: 26px 0; border-top: var(--rule); border-bottom: var(--rule);
}
.xpan .profile-dati dt {
	margin: 0 0 6px; font-size: 9px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .14em; color: var(--text-mut);
}
.xpan .profile-dati dd { margin: 0; font-size: 17px; line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: -.02em; }

.xpan .profile-etichetta {
	margin: 0 0 14px; font-size: 9px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .14em; color: var(--text-mut);
}

/* I recapiti sono bottoni grandi, e ognuno ha il colore di quello che fa:
   verde WhatsApp, viola l'email, nero il telefono. Tre righe grigie identiche
   non dicevano quale toccare. */
.xpan .profile-recapiti { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.xpan .profile-recapito {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 20px; border: var(--rule);
	transition: transform .2s, filter .2s;
}
.xpan .profile-recapito:hover { transform: translateY(-3px); filter: brightness(1.06); }
.xpan .profile-recapito svg { width: 28px; height: 28px; flex: 0 0 auto; }
.xpan .profile-recapito small {
	display: block; margin-bottom: 4px; font-size: 9px;
	text-transform: uppercase; letter-spacing: .12em; opacity: .75;
}
.xpan .profile-recapito b {
	display: block; font-size: 18px; line-height: 1.15;
	letter-spacing: -.03em; word-break: break-word;
}
/* Il telefono è giallo, non nero: la fascia della scheda **è** nera, e un
   bottone nero su fondo nero si vedeva solo dal filo del bordo. Era il
   recapito più importante ed era quello invisibile. */
.xpan .rec-phone    { background: var(--yellow); color: var(--black); }
.xpan .rec-phone svg { fill: var(--black); }
.xpan .rec-whatsapp { background: #e9f9ee; color: var(--black); }
.xpan .rec-whatsapp svg { fill: none; }
.xpan .rec-email    { background: var(--purple); color: #fff; }
.xpan .rec-email svg { fill: var(--yellow); }
.xpan .rec-vuoto    { background: var(--yellow); color: var(--black); justify-content: center; }

.xpan .profile-social { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 0; }
.xpan .profile-social a {
	font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .12em;
	border-bottom: 2px solid var(--black); padding-bottom: 3px;
}
.xpan .profile-social a:hover { color: var(--purple); border-bottom-color: var(--purple); }


/* ------------------------------------------------ 8-sexies. Area personale -- */

/* L'etichetta del ruolo accanto all'email: il colore è quello della casella
   scelta in registrazione, così chi si è iscritto come produttore ritrova il
   verde che aveva toccato. */
.xpan .utente-ruolo {
	display: inline-block; margin-left: 12px; padding: 6px 11px;
	font-size: 10px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
	border: 1px solid var(--black); vertical-align: middle;
}

.xpan .utente-griglia { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.xpan .utente-blocco { border: var(--rule); background: #fff; }
.xpan .utente-titolo {
	margin: 0; padding: 16px 20px; border-bottom: var(--rule); background: var(--cream);
	font-size: 10px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .14em;
}

/* I prodotti scelti: le stesse caselle colorate della Community, perché sono
   la stessa cosa — il gruppo del prodotto. */
.xpan .utente-prodotti { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--black); border-bottom: var(--rule); }
.xpan .utente-prodotto {
	display: flex; flex-direction: column; gap: 8px;
	min-height: 168px; padding: 20px;
	transition: filter .2s, transform .2s;
}
a.utente-prodotto:hover { filter: brightness(1.04); transform: translateY(-2px); }
.xpan .utente-prodotto img { width: 62px; height: 62px; object-fit: contain; margin-bottom: auto; }
.xpan .utente-prodotto > span { font-size: clamp(20px, 1.8vw, 27px); line-height: 1.02; letter-spacing: -.035em; font-weight: var(--fw-bold); }
.xpan .utente-prodotto small { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; opacity: .8; }

.xpan .utente-vuoto { padding: 40px 20px 44px; text-align: center; }
.xpan .utente-vuoto p { margin: 0 0 22px; font-size: 17px; color: var(--text-mut); }

.xpan .utente-azioni > a {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px; border-bottom: 1px solid #e6e2d8;
	transition: background .2s;
}
.xpan .utente-azioni > a:last-child { border-bottom: 0; }
.xpan .utente-azioni > a:hover { background: var(--cream); }
.xpan .utente-azioni b { font-size: 17px; letter-spacing: -.02em; }
.xpan .utente-azioni .pericolo { color: #b3261e; }
.xpan .utente-azioni .pericolo:hover { background: #fdeceb; }


/* ------------------------------------------------------ 9-bis. Chi siamo -- */

/* La squadra. Le tre foto sono ritagli su fondo trasparente: `contain` e non
   `cover`, o le teste finirebbero fuori dal riquadro. */
.xpan .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.xpan .team-card { border: var(--rule); background: #fff; }
/* Riquadro quadrato e ritratto appoggiato in basso, a tutta larghezza.
   Le tre immagini sono già state riquadrate uguali in `assets/team/`: qui
   non si corregge più niente, si appoggia soltanto. `contain` e non `cover`
   perché sono ritagli su fondo trasparente — `cover` taglierebbe le spalle. */
.xpan .team-foto {
	aspect-ratio: 1 / 1; background-size: cover; background-position: center;
	overflow: hidden; border-bottom: var(--rule);
}
.xpan .team-foto img {
	display: block; width: 100%; height: 100%;
	object-fit: contain; object-position: center bottom;
}
.xpan .team-testo { padding: 22px 24px 26px; }
.xpan .team-testo h3 { margin: 0 0 8px; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; letter-spacing: -.04em; }
.xpan .team-testo p {
	margin: 0; font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .08em; color: var(--text-mut);
}

/* Le FAQ sono <details>: si aprono da sole. La versione di prima aveva
   trentacinque righe di script per fare la stessa cosa, e se lo script non
   partiva le risposte restavano chiuse per sempre. */
.xpan .faq-section { background: var(--cream); border-top: var(--rule); border-bottom: var(--rule); }
.xpan .faq-lista { border-top: var(--rule); }
.xpan .faq-voce { border-bottom: var(--rule); }
.xpan .faq-voce summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 28px 60px 28px 0;
	font-size: clamp(19px, 1.7vw, 26px); line-height: 1.2;
	letter-spacing: -.03em; font-weight: var(--fw-bold);
}
.xpan .faq-voce summary::-webkit-details-marker { display: none; }
/* Il più che diventa meno. Due tratti in pseudo-elementi invece di
   un'immagine: ruotano, non si scaricano. */
.xpan .faq-voce summary::after {
	content: ''; position: absolute; right: 8px; top: 50%;
	width: 20px; height: 3px; background: var(--black);
	transform: translateY(-50%);
}
.xpan .faq-voce summary::before {
	content: ''; position: absolute; right: 16.5px; top: 50%;
	width: 3px; height: 20px; background: var(--black);
	transform: translateY(-50%); transition: transform .2s ease, opacity .2s ease;
}
.xpan .faq-voce[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.xpan .faq-voce > div { padding: 0 90px 30px 0; max-width: 780px; }
.xpan .faq-voce p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.xpan .faq-voce p:last-child { margin-bottom: 0; }
.xpan .faq-voce a { text-decoration: underline; text-underline-offset: 3px; }

/* Contatti: testo a sinistra, modulo a destra, il filo nero in mezzo. */
.xpan .contatti-section {
	display: grid; grid-template-columns: 1fr 1fr;
	border-bottom: var(--rule);
}
.xpan .contatti-testo {
	padding: var(--section-y) var(--section-x);
	background: var(--purple); color: #fff;
}
.xpan .contatti-testo .mini-label { color: var(--yellow); margin-bottom: 20px; }
.xpan .contatti-testo h2 { margin: 0 0 22px; font-size: clamp(46px, 5vw, 76px); line-height: .92; letter-spacing: -.05em; }
.xpan .contatti-testo p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; max-width: 420px; }
.xpan .contatti-mail a {
	font-size: clamp(20px, 2vw, 28px); font-weight: var(--fw-bold);
	color: var(--yellow); letter-spacing: -.02em;
	border-bottom: 2px solid var(--yellow); padding-bottom: 3px;
}
.xpan .contatti-modulo { padding: var(--section-y) var(--section-x); background: #fff; }
/* Il modulo arriva da Contact Form 7 e ha un markup suo: qui si veste
   soltanto, senza toccare i campi che il plugin si aspetta di trovare. */
.xpan .contatti-modulo label { display: block; margin-bottom: 16px; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .1em; }
.xpan .contatti-modulo input[type="text"],
.xpan .contatti-modulo input[type="email"],
.xpan .contatti-modulo input[type="tel"],
.xpan .contatti-modulo textarea {
	width: 100%; margin-top: 8px; padding: 14px 16px;
	border: var(--rule); background: var(--cream);
	font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0;
}
.xpan .contatti-modulo textarea { min-height: 150px; resize: vertical; }
.xpan .contatti-modulo input[type="submit"] {
	margin-top: 6px; padding: 16px 34px; border: 0; cursor: pointer;
	background: var(--black); color: #fff;
	font: inherit; font-size: 12px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .08em;
}
.xpan .contatti-modulo input[type="submit"]:hover { background: var(--purple); }


/* ------------------------------------------------------------ 10. Footer (F1) -- */

.xpan .site-footer {
	padding: 75px var(--section-x) 30px; background: var(--cream);
	display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px;
}
.xpan .site-footer strong {
	display: block; margin-bottom: 16px;
	font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
}
.xpan .site-footer a { display: block; margin-bottom: 10px; font-size: 14px; }
.xpan .footer-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.45; }
.xpan .footer-social { display: flex; gap: 18px; margin-top: 20px; }
.xpan .footer-social a {
	margin: 0; font-size: 10px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .12em;
	border-bottom: 2px solid var(--black); padding-bottom: 3px;
}
.xpan .footer-social a:hover { color: var(--purple); border-bottom-color: var(--purple); }
/* Questa colonna non ha più l'intestazione «PAN»: il marchio sta già
   grande a sinistra e ripeterlo qui faceva sembrare «Chi siamo» e
   «Registrati» due voci di una sezione invece di due link diretti.
   Senza il titolo servono i 16px che il titolo occupava, o la colonna
   partirebbe più in alto delle altre due. */
.xpan .footer-contact { padding-top: 22px; }
.xpan .footer-contact a {
	margin-bottom: 14px; font-size: 22px; line-height: 1.15;
	letter-spacing: -.03em; font-weight: var(--fw-bold); color: var(--purple);
}
.xpan .footer-contact a:hover { color: var(--black); }

/* Al posto della riga del copyright — «© 2026 PAN», che era anche l'anno
   sbagliato — restano i tre link che devono stare in ogni pagina. */
.xpan .footer-legale {
	grid-column: 1 / -1; margin: 40px 0 0; padding-top: 20px;
	border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; gap: 22px;
}
.xpan .footer-legale a {
	display: inline; margin: 0; font-size: 11px; color: var(--text-mut);
}
.xpan .footer-legale a:hover { color: var(--black); }


/* ------------------------------------------ 12. Notizie e articolo (F3) -- */

.xpan .news-page { background: #fff; }

/* Griglia degli articoli. La card è più alta di quella della home perché
   qui il titolo è il protagonista, non l'immagine. */
.xpan .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; row-gap: 32px; }
.xpan .article-card {
	display: flex; flex-direction: column; min-height: 470px;
	border: var(--rule); background: #fff; padding-bottom: 0;
	transition: transform .2s, box-shadow .2s;
}
.xpan .article-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, .09); }
.xpan .article-card > div { position: relative; height: 270px; overflow: hidden; background: #111; }
.xpan .article-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.xpan .article-card:hover img { transform: scale(1.03); }
.xpan .article-card > div span {
	position: absolute; top: 17px; left: 17px;
	background: var(--yellow); padding: 8px 10px;
	font-size: 9px; font-weight: var(--fw-bold); text-transform: uppercase;
}
.xpan .article-card > p {
	margin: 24px 24px 0; color: #737373;
	font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.xpan .article-card h3 {
	margin: 14px 24px 26px; font-size: 26px; line-height: 1.04; letter-spacing: -.025em;
}
.xpan .article-card small {
	margin: auto 24px 25px; font-size: 10px;
	font-weight: var(--fw-bold); text-transform: uppercase;
}

/* Paginazione: le stesse pillole squadrate dei filtri. */
.xpan .xpan-pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 55px; justify-content: center; }
.xpan .xpan-pager a,
.xpan .xpan-pager span {
	border: var(--rule); padding: 11px 16px;
	font-size: 11px; font-weight: var(--fw-bold);
}
.xpan .xpan-pager .current { background: var(--black); color: #fff; }
.xpan .xpan-pager a:hover { background: var(--yellow); }


/* --- l'articolo ---------------------------------------------------------- */

.xpan .article-page { background: #fff; }

.xpan .article-header { max-width: 1120px; margin: auto; padding: 90px var(--section-x) 65px; }
.xpan .article-header > a {
	display: inline-block; margin-bottom: 35px;
	font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase;
	border-bottom: 1px solid currentColor; padding-bottom: 5px;
}
/* L'occhiello ha una classe sua. Con «ogni <p> dentro la testata» prendeva
   anche il sommario, che finiva minuscolo, maiuscolo e viola. */
.xpan .article-kicker {
	margin: 0 0 22px; color: var(--purple);
	font-size: 10px; font-weight: var(--fw-bold);
	letter-spacing: .11em; text-transform: uppercase;
}
.xpan .article-header h1 {
	max-width: 1000px; margin: 0;
	font-size: clamp(44px, 6.4vw, 96px); line-height: .92; letter-spacing: -.05em;
}
/* Il sommario è la seconda voce della pagina: grande abbastanza da leggersi
   da solo, piccolo abbastanza da non contendere il titolo. */
.xpan .article-lead {
	max-width: 790px; margin: 38px 0 0;
	font-size: clamp(20px, 2.1vw, 29px); line-height: 1.38; color: var(--text-soft);
}

.xpan .article-cover { margin: 0; height: min(68vw, 700px); overflow: hidden; background: #111; }
.xpan .article-cover img { width: 100%; height: 100%; object-fit: cover; }

.xpan .article-layout {
	max-width: 1120px; margin: auto;
	padding: 85px var(--section-x) 105px;
	display: grid; grid-template-columns: 180px 1fr; gap: 8%;
}
.xpan .article-layout aside { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.xpan .article-layout aside span {
	margin-top: 18px; color: #777;
	font-size: 9px; font-weight: var(--fw-bold);
	letter-spacing: .1em; text-transform: uppercase;
}
.xpan .article-layout aside span:first-child { margin-top: 0; }
.xpan .article-layout aside b { font-weight: var(--fw-bold); }

/* Il corpo del testo. La misura è in «ch», cioè in caratteri: è l'unità
   che tiene la riga alla stessa lunghezza anche se un domani il carattere
   cambia. Sessantotto battute è la misura di una colonna di giornale. */
/* Il font-size dichiarato qui non è decorativo: «ch» si misura sul corpo
   del testo dell'elemento su cui sta scritto. Senza questa riga la colonna
   veniva calcolata sui 16px di base e le righe uscivano di undici battute
   più corte del voluto. */
.xpan .article-body { max-width: 68ch; font-size: 19px; }
.xpan .article-body > * { margin: 0 0 28px; }
.xpan .article-body p { font-size: 19px; line-height: 1.75; color: #292929; }
.xpan .article-body h2 {
	margin: 55px 0 20px; font-size: clamp(28px, 3vw, 44px);
	line-height: 1.05; letter-spacing: -.035em;
}
.xpan .article-body h3 { margin: 42px 0 14px; font-size: 23px; line-height: 1.2; }
.xpan .article-body ul,
.xpan .article-body ol { padding-left: 24px; font-size: 19px; line-height: 1.75; }
.xpan .article-body li { margin-bottom: 10px; }
.xpan .article-body a { border-bottom: 2px solid var(--yellow); }
.xpan .article-body a:hover { background: var(--yellow); }
.xpan .article-body img { height: auto; }
.xpan .article-body figure { margin: 42px 0; }
.xpan .article-body figcaption {
	margin-top: 10px; color: var(--text-mut); font-size: 12px; line-height: 1.5;
}
.xpan .article-body blockquote {
	margin: 44px 0; padding: 4px 0 4px 28px;
	border-left: 4px solid var(--purple);
	font-size: 23px; line-height: 1.45;
}
.xpan .article-body blockquote p { font-size: inherit; }

.xpan .article-signature {
	margin-top: 48px; padding-top: 28px;
	border-top: 1px solid var(--black); font-weight: var(--fw-bold);
}

.xpan .related-section { padding: 95px var(--section-x); background: var(--cream); }
.xpan .related-section .section-heading { margin-bottom: 46px; }
.xpan .related-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.xpan .related-grid .article-card { background: #fff; }

.xpan .empty-state { grid-column: 1 / -1; padding: 50px; text-align: center; }


/* ---------------------------------------------- 13. Podcast (F4) -- */

/* I toni delle sezioni. Al posto delle onde SVG, che sparivano, il
   passaggio da una sezione all'altra lo fa il fondo pieno. */
/* I toni delle sezioni del podcast sono i colori delle copertine.
   Quattro stanno già nella palette; l'oro di PAN Talks e il rosa antico di
   Compravendita sono presi dall'artwork, che quei due colori non li ha nel
   sistema. Meglio due tinte in più che una fascia che litiga con l'immagine
   che le sta dentro. */
.xpan .tono-cream  { background: var(--cream); }
.xpan .tono-yellow { background: var(--yellow); }
.xpan .tono-green  { background: var(--green);  color: #fff; }
.xpan .tono-purple { background: var(--purple); color: #fff; }
.xpan .tono-gold   { background: #7a6816;       color: #fff; }
.xpan .tono-rose   { background: #b29b9a; }
.xpan .tono-black  { background: var(--black);  color: #fff; }
.xpan .tono-green .section-heading h2 em,
.xpan .tono-gold .section-heading h2 em,
.xpan .tono-black .section-heading h2 em,
.xpan .tono-purple .section-heading h2 em { color: var(--yellow); }
.xpan .tono-green .section-heading h2 a,
.xpan .tono-gold .section-heading h2 a,
.xpan .tono-black .section-heading h2 a,
.xpan .tono-purple .section-heading h2 a { color: inherit; }
.xpan .tono-green .section-footer-link a,
.xpan .tono-gold .section-footer-link a,
.xpan .tono-black .section-footer-link a,
.xpan .tono-purple .section-footer-link a { border-bottom-color: currentColor; }

/* --- hub: una puntata grande e due compatte a fianco ---------------------- */

.xpan .podcast-tris { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }

/* La card grande diventa orizzontale: copertina a sinistra, testo a destra.
   Con la copertina quadrata a tutta larghezza la card sarebbe stata alta
   settecento pixel prima ancora del titolo. Affiancate, la copertina si vede
   intera e la card resta della stessa altezza di prima. */
.xpan .podcast-grande {
	border: var(--rule); background: #fff; color: var(--black);
	display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
	align-items: stretch;
}
/* Quadrata, non 16:9.
   Le copertine di Sotto la Buccia sono quadrate e il nome della sezione è
   stampato **nella metà bassa**: dentro un riquadro largo il doppio
   dell'altezza spariva. Su «5' Minuti» si perdeva la riga «I 5 minuti della
   settimana», su «Extra» la parola Extra. Restava un'immagine identica per
   tutte e sei le sezioni.
   `contain` e non `cover` per la stessa ragione di sempre: una copertina che
   un giorno non fosse quadrata si vedrebbe intera lo stesso. */
.xpan .podcast-copertina {
	display: block; aspect-ratio: 1 / 1; overflow: hidden;
	background: var(--cream); border-right: var(--rule);
}
.xpan .podcast-copertina img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s; }
.xpan .podcast-grande:hover .podcast-copertina img { transform: scale(1.03); }
.xpan .podcast-testo { padding: 26px 26px 28px; }
.xpan .podcast-data {
	margin: 0; color: var(--text-mut);
	font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.xpan .podcast-testo h3 {
	margin: 12px 0 14px; font-size: 27px; line-height: 1.06; letter-spacing: -.03em;
}
.xpan .podcast-estratto { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #555; }
.xpan .podcast-azioni { display: flex; flex-wrap: wrap; gap: 10px; }

.xpan .podcast-compatte { display: flex; flex-direction: column; gap: 14px; }
.xpan .podcast-riga {
	display: grid; grid-template-columns: 124px 1fr; gap: 16px; align-items: center;
	padding: 14px; border: var(--rule); background: #fff; color: var(--black);
	transition: background .2s, transform .2s;
}
.xpan .podcast-riga:hover { background: var(--yellow); transform: translateY(-2px); }
/* Le miniature passano da 84 a 124 px e smettono di ritagliare: a 84 la
   copertina era un francobollo in cui non si leggeva nemmeno la sezione. */
.xpan .episode-list .podcast-mini { width: 180px; }
.xpan .podcast-mini {
	display: block; width: 124px; aspect-ratio: 1; overflow: hidden;
	background: var(--cream); border: var(--rule); flex: 0 0 auto;
}
.xpan .podcast-mini img { width: 100%; height: 100%; object-fit: contain; }
.xpan .podcast-riga-testo { display: flex; flex-direction: column; gap: 6px; }
.xpan .podcast-riga-testo small {
	color: var(--text-mut); font-size: 9px;
	letter-spacing: .1em; text-transform: uppercase;
}
.xpan .podcast-riga-testo b { font-size: 16px; line-height: 1.25; font-weight: var(--fw-bold); }

/* --- categoria: l'elenco lungo ------------------------------------------- */

.xpan .episode-section { background: #fff; }
.xpan .podcast-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 38px; }
.xpan .podcast-categories a {
	border: var(--rule); padding: 10px 14px;
	font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase;
}
.xpan .podcast-categories a:hover { background: var(--yellow); }
.xpan .podcast-categories a.active { background: var(--black); color: #fff; }

.xpan .episode-list { border-top: var(--rule); }
/* Nell'elenco lungo la copertina passa da 84 a 180 px. Su queste pagine è
   l'unica immagine presente e regge la riga da sola: a 84 era un francobollo
   in cui non si distingueva nemmeno di che sezione fosse la puntata. */
.xpan .episode-list > a {
	min-height: 212px; padding: 18px 0;
	display: grid; grid-template-columns: 180px 1fr 130px; gap: 24px; align-items: center;
	border-bottom: 1px solid var(--black); transition: background .2s;
}
.xpan .episode-list > a:hover { background: var(--yellow); }
/* Il titolo della puntata è la cosa per cui si scorre questa pagina: da 21 a
   30 px. A 21, accanto a una copertina da 180, era la scritta più piccola
   della riga dopo la descrizione. */
.xpan .episode-list h3 {
	display: flex; flex-direction: column; gap: 9px; margin: 0;
	font-size: clamp(22px, 2vw, 30px); line-height: 1.08; letter-spacing: -.03em;
}
.xpan .episode-list h3 small {
	color: #6b6b6b; font-size: 13px; font-weight: var(--fw-base);
	line-height: 1.55; letter-spacing: 0;
}
.xpan .episode-quando {
	display: flex; flex-direction: column; gap: 6px; text-align: right;
	font-size: 11px;
}
.xpan .episode-quando b { font-weight: var(--fw-bold); }
.xpan .episode-quando small {
	color: var(--purple); font-size: 9px;
	font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
}
.xpan .episode-list > a:hover .episode-quando small { color: var(--black); }

/* --- la puntata ---------------------------------------------------------- */

.xpan .episode-page { background: #fff; }

.xpan .episode-detail {
	min-height: 620px; display: grid; grid-template-columns: 1fr 1fr;
	background: var(--purple); color: #fff;
}
.xpan .episode-copy { padding: 80px var(--section-x); align-self: center; }
.xpan .episode-back {
	display: inline-block; margin-bottom: 30px;
	font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase;
	border-bottom: 1px solid currentColor; padding-bottom: 5px;
}
.xpan .mini-label {
	margin: 0 0 16px; color: var(--yellow);
	font-size: 10px; font-weight: var(--fw-bold);
	letter-spacing: .14em; text-transform: uppercase;
}
.xpan .episode-copy h1 {
	margin: 0; font-size: clamp(38px, 4.6vw, 72px);
	line-height: .98; letter-spacing: -.04em;
}
.xpan .episode-lead {
	max-width: 560px; margin: 26px 0 0;
	font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .88);
}
.xpan .episode-meta {
	display: flex; flex-wrap: wrap; gap: 26px; margin-top: 32px;
	color: var(--yellow); font-size: 10px;
	font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase;
}
.xpan .episode-copy .podcast-azioni { margin-top: 34px; }

.xpan .episode-player { display: grid; place-items: center; padding: 70px 5vw; background: var(--black); }
.xpan .episode-player iframe { width: 100%; max-width: 560px; height: 352px; border: 0; }
.xpan .episode-player .episode-cover { width: 100%; max-width: 420px; display: block; }

.xpan .episode-note .article-body { max-width: 68ch; font-size: 19px; }


/* -------------------------------------------- 14. Community (F5) -- */

.xpan .community-page { background: #fff; }

/* La barra di ricerca: filtra le card già in pagina mentre si digita. */
.xpan .community-search {
	display: flex; align-items: center; gap: 22px;
	margin-bottom: 30px; padding: 16px 22px;
	border: 3px solid var(--black); background: #fff;
}
.xpan .community-search label {
	font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .1em;
}
.xpan .community-search input {
	flex: 1; min-width: 0; border: 0; outline: 0;
	background: transparent; font: inherit; font-size: 17px;
}
/* Quando la barra di ricerca è un vero form — ricerca e 404 — il bottone
   sta in fondo invece del conteggio. */
.xpan .community-search .button { flex: 0 0 auto; }

.xpan .community-conta {
	flex: 0 0 auto; color: var(--text-mut);
	font-size: 11px; font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: .06em;
}

/* La card prende i due colori del prodotto: il chiaro sul fondo, lo scuro
   sul testo. Sono gli stessi che il Mercuriale mette sulle sue tessere —
   arrivano tutti e due da inc/community-colors.php, e il PHP li scrive
   nell'attributo style perché sono novantuno coppie diverse: metterle nel
   foglio vorrebbe dire novantuno regole scritte a mano.

   Le card sono più larghe di prima perché il nome deve leggersi da lontano:
   auto-fill le dispone da sole, senza un numero di colonne fissato. */
.xpan .community-grid {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.xpan .community-card {
	position: relative; display: flex; flex-direction: column;
	min-height: 190px; padding: 20px;
	border: var(--rule);
	transition: transform .18s, box-shadow .18s;
}
.xpan .community-card:hover {
	transform: translateY(-4px);
	box-shadow: 8px 8px 0 var(--black);
}
.xpan .community-icona {
	width: 56px; height: 56px; object-fit: contain;
	margin-bottom: auto;
}
.xpan .community-nome {
	margin: 18px 0 14px;
	font-size: 25px; line-height: 1.05;
	font-weight: var(--fw-bold); letter-spacing: -.035em;
}
/* La riga WhatsApp: marchio più etichetta. Il colore è quello del prodotto
   al 70%, così resta leggibile su qualunque fondo della palette senza
   dover scegliere un verde che su alcuni sfondi sparirebbe. */
.xpan .community-wa {
	display: flex; align-items: center; gap: 8px;
	font-size: 10px; font-weight: var(--fw-bold);
	letter-spacing: .08em; text-transform: uppercase;
	opacity: .72;
}
/* Niente `fill`: il marchio porta i colori suoi. Con currentColor diventava
   una macchia del colore del prodotto — marrone sulle patate, viola sulle
   melanzane — e non era più il marchio di niente. */
.xpan .community-wa-logo { width: 19px; height: 19px; flex: 0 0 auto; }
.xpan .community-card:hover .community-wa { opacity: 1; }

.xpan .community-vuoto { margin: 40px 0 0; text-align: center; color: var(--text-mut); }

.xpan .community-manifesto {
	padding: 90px 14vw; background: var(--purple); color: #fff; text-align: center;
}
.xpan .community-manifesto p {
	margin: 0; color: var(--yellow); font-size: 11px;
	font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase;
}
.xpan .community-manifesto h2 {
	max-width: 950px; margin: 22px auto 36px;
	font-size: clamp(30px, 4vw, 60px); line-height: 1.05; letter-spacing: -.04em;
}


/* ---------------------------------------- 15. Professionisti (F6) -- */

.xpan .directory-page { background: #fff; }

/* I bottoni dei ruoli: il numero fra parentesi dice quante schede ci sono,
   così si capisce prima di cliccare se vale la pena. */
.xpan .directory-categories button span {
	margin-left: 6px; opacity: .5; font-weight: var(--fw-base);
}
.xpan .directory-categories button.active span { opacity: .7; }

/* --- la scheda -------------------------------------------------------- */

.xpan .scheda-page { background: #fff; }

.xpan .profile-hero {
	display: grid; grid-template-columns: 1fr 1fr;
	min-height: 620px; background: var(--black); color: #fff;
}
.xpan .profile-photo {
	position: relative; display: grid; place-items: center;
	overflow: hidden; background: var(--green);
	border-right: 4px solid #fff;
}
.xpan .profile-photo img,
.xpan .profile-photo video,
.xpan .profile-photo iframe {
	width: 100%; height: 100%; min-height: 480px;
	object-fit: cover; border: 0; display: block;
}
.xpan .profile-iniziali {
	font-size: 90px; font-weight: var(--fw-bold);
	letter-spacing: -.05em; color: rgba(255, 255, 255, .5);
}

.xpan .profile-copy { padding: 70px var(--section-x); align-self: center; }
.xpan .profile-copy h1 {
	margin: 0; font-size: clamp(40px, 5.2vw, 84px);
	line-height: .95; letter-spacing: -.05em;
}
.xpan .profile-company {
	margin: 16px 0 0; color: var(--yellow);
	font-size: 20px; font-weight: var(--fw-bold);
}
.xpan .profile-copy .podcast-azioni { margin-top: 32px; }

/* La striscia dei dati: una casella per voce, filo nero fra una e l'altra.
   Le voci vuote non arrivano fin qui, le filtra il PHP. */

/* La riga dei recapiti sulla card: tre icone, niente testo. Servono a
   chiamare al volo dal telefono, non a leggere il numero — quello sta
   sulla scheda. */
.xpan .person-contatti {
	display: flex; margin-top: auto; border-top: var(--rule);
}
.xpan .person-contatti a {
	flex: 1; min-height: 52px;
	display: grid; place-items: center;
	border-right: 1px solid var(--line);
	transition: background .15s;
}
.xpan .person-contatti a:last-child { border-right: 0; }
.xpan .person-contatti a:hover { background: var(--yellow); }
.xpan .person-contatti svg { width: 19px; height: 19px; fill: currentColor; }
/* WhatsApp fa eccezione: da quando il simbolo è il marchio vero, i colori
   se li porta dentro (bolla verde, cornetta bianca). `fill: currentColor`
   li schiaccerebbe tutti e due sul colore del testo e tornerebbe la
   sagoma monocroma di prima. */
.xpan .person-contatti .contatto-wa svg { width: 21px; height: 21px; fill: none; }

/* I recapiti sulla scheda, per esteso e leggibili. */



/* ------------------------------------------------------ 11. Responsive (3 soli) -- */

/* 1080 — il desktop stretto: le griglie a 3 restano, si stringono i margini. */
@media (max-width: 1080px) {
	.xpan { --section-y: 90px; --section-x: 3vw; }
	.xpan .site-header { gap: 30px; }
	.xpan .site-header nav { gap: 22px; }
	.xpan .story-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}

/* 860 — il tablet: si passa a due colonne e compare il menu mobile. */
@media (max-width: 860px) {
	.xpan .site-header nav,
	.xpan .site-header .profile-button { display: none; }
	.xpan .mobile-menu { display: block; }

	.xpan .section-heading,
	.xpan .community-heading { grid-template-columns: 1fr; align-items: start; gap: 24px; }
	.xpan .quick-strip { grid-template-columns: 1fr 1fr; }
	.xpan .quick-strip > a:nth-child(2n) { border-right: 0; }
	.xpan .quick-strip > a:nth-child(-n+2) { border-bottom: var(--rule); }
	.xpan .story-grid,
	.xpan .article-grid { grid-template-columns: 1fr 1fr; }
	.xpan .product-grid { grid-template-columns: 1fr 1fr; }
	.xpan .product-card:nth-child(n)    { border-right: var(--rule); border-bottom: var(--rule); }
	.xpan .product-card:nth-child(2n)   { border-right: 0; }
	.xpan .product-card:nth-child(n+5)  { border-bottom: 0; }
	.xpan .professional-grid { grid-template-columns: 1fr 1fr; }
	.xpan .market-section { grid-template-columns: 1fr; }

	/* Media: le tre colonne diventano una sola. A due colonne la terza
	   resterebbe orfana sotto, larga il doppio delle altre. */
	.xpan .media-tre { grid-template-columns: 1fr; gap: 16px; }
	.xpan .col-cover { aspect-ratio: 16 / 9; }
	.xpan .col-cover img { object-fit: contain; }
	.xpan .market-prodotti { grid-template-columns: 1fr; }
	/* Il marchio WhatsApp torna a sinistra: a destra, su una colonna sola,
	   resterebbe appeso al bordo lontano dal titolo che lo spiega. */
	.xpan .community-marchio { justify-self: start; }

	.xpan .team-grid { grid-template-columns: 1fr 1fr; }
	.xpan .contatti-section { grid-template-columns: 1fr; }
	.xpan .utente-griglia { grid-template-columns: 1fr; }

	/* NCS: video sopra, testo sotto. Il riquadro verticale a fianco del testo
	   sotto gli 860 px diventa una striscia alta e stretta. */
	.xpan .ncs-card { grid-template-columns: 1fr; gap: 24px; }
	.xpan .ncs-video { aspect-ratio: 4 / 5; max-height: 460px; max-width: 340px; }
	.xpan .hero-ncs-video { justify-self: start; margin-top: 34px; max-width: 280px; }
	.xpan .ultima-notizia { grid-template-columns: 1fr; }
	.xpan .ultima-foto { border-right: 0; border-bottom: var(--rule); }
	.xpan .ultima-foto img { min-height: 0; aspect-ratio: 16 / 9; }
	.xpan .faq-voce > div { padding-right: 40px; }

	/* Il video parte anche qui, su telefono e tablet. Il poster resta come
	   fondo sotto: si vede nel mezzo secondo prima che il video attacchi, e
	   resta l'unica cosa visibile se iOS in risparmio energetico blocca
	   l'autoplay. */
	.xpan .hero-video-layer {
		background-image: var(--hero-poster);
		background-size: cover; background-position: center;
	}
	.xpan .interior-hero { grid-template-columns: 1fr; }
	.xpan .interior-intro { margin-top: 35px; }
	/* Podcast: la copertina passa sotto al testo e si rimpicciolisce, invece
	   di prendersi tutta la larghezza della fascia. */
	.xpan .hero-podcast-cover { justify-self: start; max-width: 260px; margin-top: 34px; }
	.xpan .hero-podcast .interior-intro { margin-top: 26px; }
	/* La card grande del podcast va in colonna: copertina sopra, testo sotto. */
	.xpan .podcast-grande { grid-template-columns: 1fr; }
	.xpan .podcast-copertina { border-right: 0; border-bottom: var(--rule); max-height: 420px; }
	.xpan .site-footer { grid-template-columns: 1fr 1fr; }

	.xpan .article-grid,
	.xpan .related-grid { grid-template-columns: 1fr 1fr; }
	/* La colonna con data e autore passa sopra al testo invece che a fianco:
	   su schermo stretto ruberebbe la prima schermata all'articolo. */
	.xpan .article-layout { grid-template-columns: 1fr; gap: 34px; padding-top: 55px; }
	.xpan .article-layout aside { flex-direction: row; flex-wrap: wrap; gap: 6px 26px; align-items: baseline; }
	.xpan .article-layout aside span { margin-top: 0; }

	/* Podcast: la puntata grande e le compatte vanno in colonna. */
	.xpan .podcast-tris { grid-template-columns: 1fr; }
	.xpan .podcast-compatte { flex-direction: row; flex-wrap: wrap; }
	.xpan .podcast-compatte > a { flex: 1 1 300px; }
	.xpan .episode-detail { grid-template-columns: 1fr; min-height: 0; }
	.xpan .episode-copy { padding: 65px var(--section-x) 55px; }
	.xpan .episode-player { padding: 45px 20px 60px; }

	/* La scheda: foto sopra, testo sotto. */
	.xpan .profile-hero { grid-template-columns: 1fr; min-height: 0; }
	.xpan .profile-photo { border-right: 0; border-bottom: 4px solid #fff; }
	.xpan .profile-photo img,
	.xpan .profile-photo video,
	.xpan .profile-photo iframe { min-height: 380px; max-height: 520px; }
	.xpan .profile-copy { padding: 55px var(--section-x); }
}

/* 560 — il telefono: tutto in colonna. */
@media (max-width: 560px) {
	.xpan { --section-y: 75px; --section-x: 20px; }
	.xpan .hero-video h1 { font-size: clamp(42px, 12vw, 60px); }
	.xpan .hero-actions { flex-direction: column; }
	.xpan .hero-actions .button { justify-content: space-between; }
	.xpan .quick-strip { grid-template-columns: 1fr; }
	/* Le quattro caselle restano grandi anche qui: sul telefono sono la
	   prima cosa che si incontra dopo il video e devono leggersi senza
	   avvicinare gli occhi. Alte 150 e non 120. */
	.xpan .quick-strip > a { border-right: 0; border-bottom: var(--rule); min-height: 150px; padding: 24px 22px; }
	.xpan .quick-strip > a:last-child { border-bottom: 0; }
	.xpan .quick-strip span { font-size: clamp(30px, 9vw, 40px); }
	.xpan .story-grid,
	.xpan .article-grid,
	.xpan .professional-grid,
	.xpan .product-grid { grid-template-columns: 1fr; }
	.xpan .product-card:nth-child(n)    { border-right: 0; border-bottom: var(--rule); }
	.xpan .product-card:last-child      { border-bottom: 0; }

	.xpan .col-azioni .button { width: 100%; justify-content: space-between; }
	.xpan .col-notizia { grid-template-columns: 70px 1fr; gap: 12px; padding: 14px 16px; }
	.xpan .col-notizia-foto { width: 70px; }
	.xpan .community-marchio { gap: 16px; padding: 16px 18px; }
	.xpan .community-marchio svg { width: 64px; height: 64px; }
	.xpan .market-scheda-testa { padding: 16px; }
	.xpan .market-quotazione { padding: 12px 16px; grid-template-columns: 1fr auto auto; gap: 8px; }
	.xpan .mq-var { min-width: 50px; }

	.xpan .team-grid { grid-template-columns: 1fr; }
	.xpan .faq-voce summary { padding: 22px 44px 22px 0; }

	/* Mercuriale: due tessere per riga invece di tre. A 390 px, tre tessere
	   con dentro un nome come «Uva da tavola» lo spezzano lettera per lettera. */
	.xpan .ncs-card { padding: 16px; }
	.xpan .ncs-video { max-width: none; }
	.xpan .hero-ncs-video { max-width: none; margin-top: 28px; }
	.xpan .ultima-testo { padding: 26px 22px; }
	.xpan .ncs-protagonisti { padding: 22px 20px; }
	.xpan .faq-voce > div { padding: 0 0 26px; }
	.xpan .market-testata { padding: 50px 0 26px; margin-bottom: 28px; }
	.xpan .market-table-head,
	.xpan .market-row { grid-template-columns: 1fr 110px 66px; padding-inline: 14px; }
	.xpan .market-price { font-size: 18px; }
	.xpan .interior-hero { min-height: 470px; padding: 75px 20px 55px; }
	/* Sul telefono i titoli scendono da 17vw a 12vw. Non è un gusto: a 17vw,
	   su uno schermo da 390 px, il corpo veniva 66 px e una parola come
	   «community.» misurava 367 px in una colonna larga 350. La parola non va
	   a capo — è una parola sola — quindi allargava la pagina e faceva
	   scorrere il sito di lato. Succedeva già sulla Community online.
	   A 12vw la stessa parola sta in 260 px, e «professionista» in 322. */
	.xpan .interior-hero h1 { font-size: clamp(40px, 12vw, 62px); }
	.xpan .hero-lungo h1 { font-size: clamp(30px, 9vw, 42px); }

	/* La copertina del podcast sotto al titolo, non a tutta larghezza. */
	.xpan .hero-podcast-cover { justify-self: start; max-width: 220px; margin-top: 30px; }
	.xpan .site-footer { grid-template-columns: 1fr; padding: 60px 20px 25px; }
	.xpan .join-banner { flex-direction: column; }
	.xpan .article-grid,
	.xpan .related-grid { grid-template-columns: 1fr; }
	.xpan .article-header { padding-top: 60px; padding-bottom: 45px; }
	.xpan .article-cover { height: min(72vw, 380px); }
	.xpan .article-body p,
	.xpan .article-body ul,
	.xpan .article-body ol { font-size: 17px; }
	.xpan .article-body blockquote { font-size: 19px; padding-left: 20px; }
	.xpan .related-section { padding: 65px 20px; }
	.xpan .podcast-compatte { flex-direction: column; }
	/* Sul telefono la data va sotto al titolo: tre colonne su 350px
	   lasciavano al titolo una striscia di centoventi pixel. */
	.xpan .episode-list > a { grid-template-columns: 96px 1fr; gap: 14px; min-height: 0; }
	.xpan .episode-list .podcast-mini { width: 96px; }
	.xpan .episode-list h3 { grid-column: 2; font-size: 17px; }
	.xpan .episode-quando { grid-column: 1 / -1; flex-direction: row; gap: 12px; text-align: left; }
	.xpan .podcast-azioni { flex-direction: column; align-items: stretch; }
	.xpan .podcast-azioni .button { justify-content: space-between; }
	.xpan .episode-player iframe { height: 232px; }
	/* Sul telefono la barra di ricerca va in colonna: etichetta, campo,
	   conteggio uno sotto l'altro invece di stringersi tutti e tre. */
	.xpan .community-search { flex-direction: column; align-items: stretch; gap: 12px; }
	.xpan .community-search input { border-top: 2px solid var(--black); padding-top: 12px; }
	/* Due colonne anche sul telefono: il nome resta grande, la card si
	   accorcia. Una colonna sola farebbe una pagina di novantuno schermate. */
	.xpan .community-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.xpan .community-card { min-height: 150px; padding: 14px; }
	.xpan .community-icona { width: 42px; height: 42px; }
	.xpan .community-nome { margin: 12px 0 10px; font-size: 18px; }
	.xpan .community-wa span { display: none; }
	.xpan .community-wa-logo { width: 20px; height: 20px; }
	.xpan .community-manifesto { padding: 65px 20px; }
	.xpan .profile-dati { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
	.xpan .profile-recapiti { grid-template-columns: 1fr; }
	.xpan .utente-ruolo { display: block; margin: 14px 0 0; }
	.xpan .directory-tools { grid-template-columns: 1fr; }

	/* Sul telefono l'etichetta gialla si mangiava metà ticker: qui si stringe
	   e il nastro dei prezzi si riprende lo spazio. */
	/* Misurato a 390 px: l'etichetta gialla ne prendeva 175 e «Tutti i prezzi»
	   altri 85, lasciando ai prezzi una finestra di 130 px — dentro non ci
	   stava neanche una voce intera, e il nastro sembrava rotto.
	   Adesso l'etichetta dice solo la settimana, «Tutti i prezzi» sparisce
	   (l'intero nastro è cliccabile e porta lì) e ai prezzi restano 260 px. */
	.xpan .ticker { height: 42px; font-size: 10px; }
	.xpan .ticker-label { padding: 0 10px; letter-spacing: .02em; font-size: 9px; }
	.xpan .ticker-label .live-dot { display: none; }
	.xpan .ticker-item { padding: 0 12px; gap: 6px; }
	.xpan .ticker-link { display: none; }

	/* Aree di tocco. I link del footer erano alti 19 px e le uscite di
	   sezione 20: sul telefono si toccano col polpastrello, non col mouse,
	   e sotto i 40 px si sbaglia bersaglio. Non cambia il corpo del testo,
	   cambia lo spazio attorno. */
	.xpan .site-footer a { padding: 11px 0; margin-bottom: 2px; }
	.xpan .footer-social { gap: 6px 20px; flex-wrap: wrap; }
	.xpan .footer-social a { padding: 11px 0 6px; }
	.xpan .section-footer-link a { display: inline-block; padding: 11px 0; }
	.xpan .footer-legale { gap: 6px 22px; }
	.xpan .footer-legale a { padding: 9px 0; }

	/* Le scritte più piccole salgono da 9 a 11 px: sotto i 10 px, su uno
	   schermo tenuto a quaranta centimetri, non si leggono. */
	.xpan .ncs-targhetta small,
	.xpan .col-notizia-testo small,
	.xpan .market-altre,
	.xpan .mq-nome small,
	.xpan .ultima-occhiello,
	.xpan .media-col-titolo { font-size: 11px; }

	/* La copertina torna quadrata: a tutta larghezza il riquadro 16:9
	   lasciava due bande di crema ai lati dell'immagine quadrata. */
	.xpan .col-cover { aspect-ratio: 1 / 1; }
}

/* Chi ha chiesto meno animazioni non deve subire il ticker che scorre. */
@media (prefers-reduced-motion: reduce) {
	.xpan .ticker-track { animation: none; }
	.xpan .media-card,
	.xpan .professional-card,
	.xpan .quick-strip > a { transition: none; }
}