@charset "UTF-8";

/*!
Theme Name: Interporto Pordenone
Author: Interporto di Pordenone (IPCI)
Description: Tema del sito istituzionale di Interporto Centro Ingrosso di Pordenone S.p.A.: profilo aziendale, polo logistico, terminal intermodale, servizi, aziende insediate, appalti, news e contatti. Trilingue italiano/inglese/tedesco.
Version: 1.0.0
Tested up to: 7.0
Requires PHP: 8.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: interporto-pordenone
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Interporto Pordenone is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
	- Variables (design token)
	- Fonts (Poppins self-hosted)
	- Normalize
	- Typography
	- Elements
	- Links
	- Forms
# Layout
	- Grid (contenitore e griglie)
	- Navigation
	- Header
	- Nav overlay (menu a pannello)
	- Footer
# Components
	- Icons
	- Buttons (pill)
	- Badges (stato)
	- Ancore (indice dei Servizi)
	- Tabs (filtri a pill)
	- Cards
	- Insediato (logo azienda + griglia)
	- Section header
	- Accessibility toolbar (pannello a comparsa)
	- Posts and pages
	- Comments
	- Widgets
	- Media (Captions, Galleries)
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Tema (chiaro/scuro)
	- Alignments
	- Motion (prefers-reduced-motion)
	- Rivela (comparsa allo scorrimento)
--------------------------------------------------------------*/
@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/poppins/poppins-v24-latin-400.woff2) format("woff2");
}

@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/poppins/poppins-v24-latin-700.woff2) format("woff2");
}

@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(fonts/poppins/poppins-v24-latin-900.woff2) format("woff2");
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--c-black, #1c1a18);
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

/* `overflow-wrap: break-word` non e' zelo preventivo: il sito e' anche in
   tedesco, dove una parola sola puo' essere piu' larga di uno schermo.
   "Datenschutzerklarung" come titolo di pagina sfondava di 49px a 375px e
   faceva scorrere di lato tutta la pagina — misurato il 2026-08-26. La
   regola interviene solo quando la parola non ci sta davvero. */
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.75rem;
	overflow-wrap: break-word;
	text-transform: uppercase;
}

h1 {
	font-size: clamp(1.875rem, 2.6vw, 2.8125rem);
}

h2 {
	font-size: clamp(1.625rem, 2.08vw, 2.25rem);
}

h3 {
	font-size: clamp(1.375rem, 1.85vw, 2rem);
}

h4 {
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
}

h5,
h6 {
	font-size: clamp(0.9375rem, 1.16vw, 1.25rem);
	letter-spacing: 0.04em;
}

/* Hero: l'unico posto del mockup dove compare il peso 900. */
.display {
	font-size: clamp(2.5rem, 5.2vw, 5.625rem);
	font-weight: 900;
	line-height: 1.1;
	margin: 0;
	text-transform: uppercase;
}

/* Occhiello sopra un titolo o etichetta di sezione. */
.eyebrow {
	display: block;
	font-size: clamp(0.9375rem, 1.16vw, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.text-lead {
	font-size: clamp(1.625rem, 2.08vw, 2.25rem);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Varianti colore dei titoli di sezione: nel mockup ogni sezione ha
   il suo accento (rosso Intermodale, grigio Polo Logistico, arancione
   Insediati). Il colore non porta mai da solo un'informazione. */
.text-accent {
	color: #d10a11;
}

.text-muted {
	color: var(--c-grey-500, #7b7b7b);
}

.text-highlight {
	color: #f8b100;
}

.text-small {
	font-size: 0.875rem;
}

.text-caption {
	font-size: 0.75rem;
}

p {
	margin: 0 0 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
	font-style: normal;
}

pre {
	background: var(--c-grey-100, #f4f2ef);
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--c-grey-500, #7b7b7b);
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */

/* Fase 10: era `#fff` letterale — dal `_s` di partenza, mai toccato.
   base/_typography.scss ha sempre calibrato `color: $c-text` (che segue
   il tema), ma senza `$c-bg` qui lo sfondo restava bianco fisso: con il
   tema scuro attivo il testo diventava quasi bianco su una tela ancora
   bianca. Trovato scansionando il sito con axe-core a tema scuro attivo,
   non leggendo il codice. */
body {
	background: var(--c-white, #faf9f7);
}

/* Scorrimento dolce verso le ancore (le pastiglie dei Servizi, il rimando
   allo scroll della home): utilities/_motion.scss riporta gia' questa
   proprieta' ad `auto` sotto `prefers-reduced-motion` o "Ridotte"/
   "Disattivate" dal pannello — quella regola esisteva da prima apposta per
   quando questa proprieta' fosse comparsa da qualche parte. */
html {
	scroll-behavior: smooth;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--c-black, #1c1a18);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:active {
	color: #d10a11;
}

/* Il focus visibile e' un requisito WCAG 2.1 AA (2.4.7) e non deve
   dipendere dal solo :hover. Outline rosso spesso, con offset, cosi'
   resta visibile anche su fondo scuro o sopra un'immagine. */
:focus-visible {
	outline: 3px solid #d10a11;
	outline-offset: 2px;
}

/* Rimuove l'outline solo dove il browser lo mostrerebbe anche al
   clic del mouse, mai per la navigazione da tastiera. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layout — contenitore e griglie
--------------------------------------------------------------*/

/* Contenitore: 1596px con 66px di margine per lato, misurati sul
   frame Figma da 1728px. Sotto il desktop i margini si stringono. */
.container {
	margin-inline: auto;
	max-width: 99.75rem;
	padding-inline: 1.25rem;
	width: 100%;
}

@media (min-width: 48rem) {

	.container {
		padding-inline: 2.5rem;
	}
}

@media (min-width: 90rem) {

	.container {
		padding-inline: 4.125rem;
	}
}

/* Griglia card: 3 colonne su desktop, 2 su tablet, 1 su mobile.

   I 20px misurati sul mockup restano fra una card e l'altra **sulla stessa
   riga**; fra una riga e la successiva ce ne vogliono di piu' (richiesta del
   2026-09-08, alzato ancora il 2026-09-09: 20 -> 40 -> 64px), perche' li' lo
   spazio non separa due card ma due blocchi di lettura, e con lo stesso
   valore le righe si incollavano. Il gap e' quindi asimmetrico: prima le
   righe, poi le colonne — che restano al valore del mockup. */
.grid-cards {
	display: grid;
	gap: 2rem 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {

	.grid-cards {
		gap: 4rem 1.25rem;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {

	.grid-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Blocco a due colonne testo/immagine, ricorrente in home e nelle
   pagine di contenuto. */
.split {
	display: grid;
	gap: 4rem;
	grid-template-columns: 1fr;
}

@media (min-width: 64rem) {

	.split {
		align-items: center;
		gap: 6rem;
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 64rem) {

	.split--media-first .split__media {
		order: -1;
	}
}

.split__media img {
	display: block;
	height: auto;
	width: 100%;
}

/* Ritmo verticale fra le sezioni. Alzato il 2026-09-08 da 64/96 a 80/120px,
   e ancora il 2026-09-09 a 96/160px: con le fasce alternate bianco/velato lo
   stacco fra due sezioni si vede anche dal colore, ma dove due sezioni
   bianche si susseguono servivano piu' di 96px (e poi di 120) per non farle
   leggere come una sola. */
.section {

	/* `clip` e non `hidden`, e la differenza conta: `overflow: hidden` su un
     asse forza `auto` sull'altro e trasforma la fascia in un contenitore di
     scorrimento, il che spegnerebbe lo `scroll-margin` con cui le ancore dei
     Servizi si fermano sotto la testata. `clip` ritaglia e basta.
     Serve alle due colonne che entrano di lato (utilities/_rivela.scss): 32px
     fuori dal bordo destro, senza ritaglio, sono 32px di scorrimento
     orizzontale su tutto il documento. */
	overflow-x: clip;
	padding-block: 5rem;
}

@media (min-width: 48rem) {

	.section {
		padding-block: 6rem;
	}
}

@media (min-width: 64rem) {

	.section {
		padding-block: 7rem;
	}
}

/* La testata di pagina (template-parts/pagine/testata.php) non ha un suo
   margin-top: eredita lo spazio sopra da qui, perche' e' sempre il primo
   figlio del contenitore che la ospita. Dimezzato una prima volta il
   2026-09-11 (96/160 mobile/desktop -> 48/80), ancora il 2026-09-11 (giro
   successivo, stesso giorno, entrambe le larghezze: 48/80 -> 24/40) e
   ancora una terza volta lo stesso giorno, ma **solo da mobile** (12px,
   il desktop resta 40px): con l'header sticky sempre visibile sopra,
   restava "tanto spazio" anche cosi' — ma solo dove c'e' davvero una
   testata: `.container.section` lo usano anche i blocchi della home, che
   non devono muoversi. */
.container.section:has(> .section-header--pagina) {
	padding-block-start: 0.75rem;
}

@media (min-width: 64rem) {

	.container.section:has(> .section-header--pagina) {
		padding-block-start: 2.5rem;
	}
}

/* Fascia velata del colore della pagina. La velatura la calcola il PHP
   (`interporto_pordenone_velo()`), non `color-mix()`: dentro un `color-mix`
   il ripiego di `var()` verrebbe a sua volta mescolato col bianco e non
   riprodurrebbe piu' il grigio di prima — cioe' svuotare il campo colore non
   riporterebbe le cose com'erano, che e' una proprieta' dichiarata del
   progetto. Il ripiego qui e' un colore letterale, quindi la regola resta
   reversibile.

   Sopra una fascia velata **il testo piccolo e' nero**: `$c-text-muted` sta a
   4.54:1 sul bianco, appena sopra soglia, e sulla velatura scende a 3.93-4.18.
   Il nero invece regge fra 18.2:1 e 19.3:1.

   Fase 10: sfondo e testo tema-aware, coppia coordinata —
   sass/utilities/_tema.scss ridefinisce `--colore-velo` col tema scuro
   (scurendo verso il nero invece che verso il bianco), e $c-bg-alt/
   $c-text seguono già il tema da soli. Vale per ogni discendente senza
   un proprio colore (es. i paragrafi delle fasce a due colonne): dove
   serve un colore diverso lo dichiara il componente stesso, con
   specificità maggiore. */
.section--tint {
	background-color: var(--colore-velo, var(--c-grey-100, #f4f2ef));
	color: var(--c-black, #1c1a18);
}

/* `.section--band` (un fondo `#d9d9d9` a tutta larghezza) e' stata tolta il
   2026-09-08: era definita qui dalla Fase 1 e **nessun template l'ha mai
   stampata**. Quello che serviva davvero — una fascia che stacca — lo fanno
   gia' `.section--tint` qui sopra e la `.section--colore` di
   `layout/_pagine.scss`, che e' la fascia a colore pieno. */

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/*--------------------------------------------------------------
# Layout — header
--------------------------------------------------------------*/

/* Logo a sinistra, selettore lingua e hamburger a destra, con un
   filetto sottile che separa la fascia dal contenuto. Alta
   $header-h su desktop: 112px dal 2026-08-31, contro i 136px del
   mockup. L'altezza sta nel token e non qui perche' se la leggono
   anche l'overlay del menu e l'hero della home. */

/* L'intestazione resta **bianca**, e il suo filetto resta grigio.
   Erano state colorate il 2026-09-08 insieme al footer, e **rimosse lo stesso
   giorno**: il cliente ha chiesto di riprendere la decisione con calma.
   Il 2026-09-09 il colore e' stato tolto anche al footer, quindi le due fasce
   tornano a somigliarsi — grigie tutte e due, ed e' una scelta sospesa, non
   una dimenticanza. Per rimetterla bastano due righe:
   `background-color: var(--colore-velo-forte, ...)` qui e lo
   pseudo-elemento con `var(--colore-superficie, transparent)` — la
   superficie e non la tinta, per la stessa ragione scritta nel footer.

   L'ombra allo scorrimento invece resta: non e' una colorazione. */
.site-header {
	background-color: var(--c-white, #faf9f7);
	border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));

	/* Ombra permanente in fondo alla testata (richiesta del 2026-09-09),
     leggera apposta: quella piu' marcata resta la variante `--staccata`
     qui sotto, che si aggiunge — non sostituisce — appena la pagina
     scorre. Anche questa non cambia l'altezza: e' solo `box-shadow`, non
     tocca `height`/`min-height`, quindi i `calc()` che contano
     $header-h/$header-h-mobile altrove restano validi. */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	inset-block-start: 0;
	position: sticky;
	transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 300;
}

/* Appena la pagina scorre, l'intestazione si stacca dal contenuto con
   un'ombra piu' marcata di quella permanente qui sopra, e si restringe
   (richiesta del 2026-09-11 — sostituisce la scelta del 2026-09-09 di non
   cambiare mai altezza). Non e' il salto secco che quella nota temeva: e'
   un `min-height`/`width` **animati** (stessa transizione gia' usata per
   l'ombra), quindi il contenuto sotto scivola su morbido insieme
   all'header invece di saltare. La classe la mette js/navigation.js. */
.site-header--staccata {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	min-height: 5.175rem;
	transition: min-height 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 64rem) {

	.site-header__inner {
		min-height: 7rem;
	}
}

.site-header--staccata .site-header__inner {
	min-height: 3.6225rem;
}

@media (min-width: 64rem) {

	.site-header--staccata .site-header__inner {
		min-height: 4.9rem;
	}
}

/* Menu aperto: l'intestazione si restringe come quando la pagina scorre,
   cosi' al pannello resta piu' altezza (richiesta del 2026-10-05, prima solo
   da mobile, estesa a desktop lo stesso giorno). La classe la mette
   js/navigation.js all'apertura. */
.site-header--menu-aperto .site-header__inner {
	min-height: 3.6225rem;
}

@media (min-width: 64rem) {

	.site-header--menu-aperto .site-header__inner {
		min-height: 4.9rem;
	}
}

.site-header--menu-aperto .site-logo {
	width: 8.855rem;
}

@media (min-width: 64rem) {

	.site-header--menu-aperto .site-logo {
		width: 10.15rem;
	}
}

.site-branding {
	align-items: center;
	display: flex;
	margin: 0;
}

.site-branding a {
	display: inline-flex;
}

/* Scala insieme a .site-header__inner sopra: un header che si restringe
   ma con un logo della stessa dimensione di prima sembra traboccare dal
   suo spazio. Riposo mobile alzato del 15% in coppia col $header-h-mobile-
   riposo di sopra (12.65rem = 11rem * 1.15, il valore "di sempre" da
   desktop non cambia a riposo). */
.site-logo {
	display: block;
	height: auto;
	transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 12.65rem;
}

@media (min-width: 64rem) {

	.site-logo {
		width: 14.5rem;
	}
}

.site-header--staccata .site-logo {
	width: 8.855rem;
}

@media (min-width: 64rem) {

	.site-header--staccata .site-logo {
		width: 10.15rem;
	}
}

.site-header__actions {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

/* Selettore lingua Polylang. */
.lang-switcher {
	position: relative;
}

.lang-switcher__toggle {
	align-items: center;
	background: none;
	border: 0;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	display: inline-flex;
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
	font-weight: 700;
	gap: 0.25rem;
	min-height: 2.75rem;
	padding-inline: 0.5rem;
	text-transform: uppercase;
}

.lang-switcher__list {
	background-color: var(--c-white, #faf9f7);
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.5rem;
	inset-block-start: 100%;
	inset-inline-end: 0;
	list-style: none;
	margin: 0;
	min-width: 6rem;
	padding: 0.5rem;
	position: absolute;
}

.lang-switcher__list[hidden] {
	display: none;
}

.lang-switcher__list a {
	color: var(--c-black, #1c1a18);
	display: block;
	font-weight: 700;
	padding: 0.5rem;
	text-decoration: none;
	text-transform: uppercase;
}

.lang-switcher__list a:hover,
.lang-switcher__list a:focus {
	background-color: var(--colore-velo, var(--c-grey-200, #dcd8d2));
}

.lang-switcher__list .current-lang a {
	text-decoration: underline;
}

/* Fino al 2026-09-27 l'hamburger prendeva il colore del titolo della pagina
   anche a riposo. Richiesta del cliente del 2026-09-28, opposta: a riposo
   deve restare neutro a ogni risoluzione, e colorarsi solo in hover/focus
   (regola sotto) o a menu aperto (`.menu-toggle[aria-expanded="true"]`,
   piu' in basso). Niente regola qui: a riposo l'icona eredita il nero di
   base di `.btn-icon` (sass/components/_buttons.scss). */

/* Corretto il 2026-09-28 (segnalato dal cliente, in due passaggi): in
   hover/focus l'hamburger ricadeva sulla regola generica
   `.btn-icon:hover/:focus` (components/_buttons.scss), che usa
   `--colore-testo-piccolo` sia per l'icona che per l'anello — un tono
   scurito apposta per il 4.5:1 del testo piccolo, non per la coerenza col
   titolo. Sulla maggior parte delle pagine i due toni sono vicini e la
   differenza non si vedeva; su Aziende insediate (titolo forzato a
   `#e8a702`, `--colore-testo-piccolo` calcolato a `#9a6e00`) sono due
   gialli nettamente diversi, e il cliente li vuole uguali — icona **e**
   anello, non solo l'icona come nel primo giro di correzione.
   Nota sul contrasto: l'anello e' l'indicatore che le WCAG (1.4.11) vogliono
   al 3:1 minimo contro lo sfondo; con `--colore-testo-piccolo` (4.5:1) lo
   passava con margine, con `--colore-titolo` su Aziende insediate scende a
   ~2.1:1, sotto soglia. Non e' un problema nuovo: e' lo stesso valore gia'
   accettato come eccezione dichiarata per il titolo e i titoli di sezione
   di questa stessa pagina (vedi INTERPORTO_PORDENONE_TITOLO_FORZATO in
   inc/colori.php), qui esteso per coerenza visiva su richiesta esplicita.
   Serve la doppia classe e non solo `:hover`/`:focus`, per la stessa
   ragione di specificita' della regola sopra: qui la coppia (0,3,0) batte
   la (0,2,0) di `.btn-icon:hover`/`:focus`, dichiarata dopo in
   sass/style.scss. */
.menu-toggle.btn-icon:hover,
.menu-toggle.btn-icon:focus {
	border-color: var(--colore-titolo, var(--c-black, #1c1a18));
	color: var(--colore-titolo, var(--c-black, #1c1a18));
}

/* A menu aperto l'icona resta colorata come in hover/focus, non solo
   mentre il mouse o il focus restano sopra (richiesta del cliente,
   2026-09-28). Stesso selettore gia' usato sotto per lo scambio
   dell'icona open/close. */
.menu-toggle.btn-icon[aria-expanded="true"] {
	border-color: var(--colore-titolo, var(--c-black, #1c1a18));
	color: var(--colore-titolo, var(--c-black, #1c1a18));
}

/* Hamburger: l'icona cambia in "close" quando l'overlay e' aperto. */
.menu-toggle__close {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: inline-block;
}

/*--------------------------------------------------------------
# Layout — overlay del menu
--------------------------------------------------------------*/

/* L'hamburger apre un pannello bianco a tutta altezza sul lato
   destro (nel mockup occupa circa il 40% della larghezza, sotto la
   fascia header). Ogni voce e' preceduta dalla freccia diagonale, che
   dal 2026-09-08 porta **il colore della pagina a cui la voce
   rimanda** — non piu' una sola freccia colorata (quella corrente) e
   tutte le altre grigie. */

/* Da dove partono pannello e vela: `--nav-overlay-top`, che **si misura**.

   Il conto a mano c'era gia' — $header-h piu' il pixel del `border-bottom`
   dell'header, 113px su desktop e 73 sotto — ed era giusto sulla carta e
   sbagliato sullo schermo. Il 2026-09-09 uno screenshot del cliente ha
   mostrato la vela cominciare 31px piu' in alto del filetto, cioe' dentro
   l'intestazione. Il token dice quanto l'header dovrebbe essere alto; quanto
   e' alto davvero dipende anche dallo zoom del browser, dal `font-size` di
   radice di chi legge e da un ripiego di font che mandi a capo, e nessuna di
   queste tre cose e' scritta qui.

   Quindi il numero lo scrive `js/navigation.js` all'apertura e a ogni
   ridimensionamento, leggendo `getBoundingClientRect().bottom` dell'header —
   che il filetto lo comprende gia', ed e' il motivo per cui il `+1px` qui non
   c'e' piu'. Il `calc()` resta come ripiego, ma non e' mai quello che si
   vede: pannello e vela esistono solo dopo che il JavaScript li ha aperti.

   L'hero della home continua invece a contare a mano (sass/layout/_home.scss):
   la sua altezza si calcola prima che il JavaScript giri, e farla dipendere da
   una property scritta dopo farebbe saltare la prima schermata al
   caricamento. */
.nav-overlay {
	background-color: var(--c-white, #faf9f7);
	inset-block: var(--nav-overlay-top, calc(4.5rem + 1px)) 0;
	inset-inline-end: 0;
	overflow-y: auto;
	padding: 2rem 1.25rem;
	padding-block-start: calc(2rem * 0.95);
	position: fixed;
	width: 100%;
	z-index: 200;
}

@media (min-width: 48rem) {

	.nav-overlay {
		border-inline-start: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
		padding-block-start: 2rem;
		padding-inline: 2.5rem;
		width: min(100%, 42.5rem);
	}
}

@media (min-width: 64rem) {

	.nav-overlay {
		inset-block-start: var(--nav-overlay-top, calc(7rem + 1px));
		padding-inline: 3.5rem;
	}
}

/* Il pannello entra scivolando dal bordo destro, dov'e' l'hamburger che lo
   apre: il movimento dice da dove viene.

   `hidden` resta la fonte di verita' — c'e'/non c'e' per gli occhi e per le
   tecnologie assistive insieme — ed e' il motivo per cui non si usa
   `@starting-style` con `transition-behavior: allow-discrete`: quella strada
   trasforma `display` in un valore transizionabile, e per tutta la durata
   dell'uscita l'attributo direbbe una cosa e il rendering un'altra. Il
   contratto di `hidden` lo usano anche `.carousel-nav`, il selettore lingua e
   il pulsante di pausa dell'hero: non e' un dettaglio di questo componente.

   A togliere `hidden` a fine transizione e' `js/navigation.js`, che nel
   frattempo mette `inert`. */
.nav-overlay {
	transform: translateX(100%);
	transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-overlay--aperto {
	transform: none;
}

.nav-overlay[hidden] {
	display: none;
}

/* Vela scura sul resto della pagina: chiude al clic ed evita che il
   contenuto sotto resti percepito come interattivo.

   Parte sotto l'intestazione, con gli stessi inset del pannello: nel
   mockup (pagina 2 del PDF) l'header resta bianco e pulito mentre il
   menu e' aperto, mentre prima la vela ci passava sopra e lo faceva
   diventare grigio. Effetto collaterale voluto: il pulsante di
   chiusura e il selettore lingua tornano cliccabili direttamente,
   invece di essere coperti dalla vela. */
.nav-overlay__scrim {
	background-color: rgba(0, 0, 0, 0.35);
	border: 0;
	inset: var(--nav-overlay-top, calc(4.5rem + 1px)) 0 0;
	position: fixed;
	z-index: 199;
}

@media (min-width: 64rem) {

	.nav-overlay__scrim {
		inset-block-start: var(--nav-overlay-top, calc(7rem + 1px));
	}
}

/* Solo l'opacita'. Animare il `background-color` da trasparente farebbe
   passare la vela per una serie di grigi sporchi, perche' il trasparente e'
   nero con alfa zero e l'interpolazione ci passa in mezzo.

   La classe la mette il JavaScript anche qui, e non un combinatore di
   fratelli: nel markup la vela e' stampata **prima** del pannello
   (template-parts/navigation-overlay.php), quindi da `.nav-overlay--aperto`
   non e' raggiungibile. */
.nav-overlay__scrim {
	opacity: 0;
	transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-overlay__scrim--aperto {
	opacity: 1;
}

.nav-overlay__scrim[hidden] {
	display: none;
}

/* 24px fra una voce e l'altra, erano 12 (richiesta del 2026-09-09). Con le
   voci in maiuscolo e alte 48px, 12 le tenevano insieme come un blocco
   unico; a 24 si leggono come un elenco di destinazioni.

   Da mobile pero' si torna a un passo piu' stretto (richiesta del
   2026-09-11): con $fs-menu ridotto sugli schermi piccoli (vedi sotto) le
   voci sono piu' basse, e 24px fra loro tornavano a essere troppi. Da
   tablet in su, dove le voci sono piu' alte, resta il valore attuale.

   Ristretto ancora il 2026-09-11 (giro successivo, -5% su 12px): nessun
   token $sp- cade esattamente su 11.4px, quindi resta un valore letterale. */
.nav-overlay__list {
	display: flex;
	flex-direction: column;
	gap: 0.676875rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {

	.nav-overlay__list {
		gap: 1.2rem;
	}
}

/* Le voci entrano **una dopo l'altra** mentre il pannello scivola dentro
   (2026-09-09). Vengono da destra come il pannello, cosi' i due movimenti
   dicono la stessa cosa invece di combattersi.

   Tre dettagli che non sono ovvi:

   - **lo sfalsamento sta solo nella regola dello stato aperto.** In uscita
     il ritardo torna a zero e le voci se ne vanno tutte insieme col
     pannello: una cascata al contrario si legge come un pannello che fa
     fatica a chiudersi;
   - `opacity` e non `visibility`: `js/navigation.js` cerca il primo
     elemento focalizzabile con `offsetWidth > 0 || offsetHeight > 0` per
     spostarci il focus all'apertura, e un elemento invisibile ma con
     ingombro lo resta. Con `visibility: hidden` la trappola del focus non
     troverebbe piu' niente;
   - il ritardo e' `transition-delay`, che **non e' una durata**: la regola
     globale di `utilities/_motion.scss` per chi ha chiesto meno movimento
     azzera le durate ma dei ritardi non sa niente, e senza la riga apposta
     una voce resterebbe invisibile per mezzo secondo proprio a chi il
     movimento non lo vuole. La riga c'e', ed e' li' apposta per questa. */
.nav-overlay__list li {
	opacity: 0;
	transform: translateX(1.5rem);
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-overlay--aperto .nav-overlay__list li {
	opacity: 1;
	transform: none;
}

/* Dalla seconda in poi: la prima non ha nulla da aspettare. Oltre
   $menu-voci-max le voci entrano insieme all'ultima sfalsata — un menu di
   quella lunghezza sarebbe un problema di menu, non di animazione. */
.nav-overlay--aperto .nav-overlay__list li:nth-child(2) {
	transition-delay: 65ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(3) {
	transition-delay: 130ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(4) {
	transition-delay: 195ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(5) {
	transition-delay: 260ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(6) {
	transition-delay: 325ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(7) {
	transition-delay: 390ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(8) {
	transition-delay: 455ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(9) {
	transition-delay: 520ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(10) {
	transition-delay: 585ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(11) {
	transition-delay: 650ms;
}

.nav-overlay--aperto .nav-overlay__list li:nth-child(12) {
	transition-delay: 715ms;
}

/* Voce e freccia allineate **in basso** e non al centro: la freccia e' un
   quadrato pieno e centrarla su una riga di testo alta 48px la lasciava a
   mezz'aria. Richiesta del 2026-09-01. */
.nav-overlay__list a {
	align-items: flex-end;
	color: var(--c-black, #1c1a18);
	display: flex;
	font-size: clamp(1.5125rem, 2.78vw, 3rem);
	font-weight: 400;
	gap: 1rem;
	line-height: 1.1;
	min-height: 2.75rem;
	padding-block: 0.25rem;
	text-decoration: none;
	text-transform: uppercase;

	/* Da desktop -5% (richiesta del 2026-10-05): cosi' tutte le voci stanno
     nel pannello senza scorrimento. La freccia e' in `em`, quindi scende
     insieme alla scritta. */
}

@media (min-width: 64rem) {

	.nav-overlay__list a {
		font-size: calc(clamp(1.5125rem, 2.78vw, 3rem) * 0.95);
	}
}

.nav-overlay__list a:hover,
.nav-overlay__list a:focus {
	text-decoration: underline;
}

/* La freccia cresce **con la scritta**, non a misura fissa: `em` e non
   `rem`. La voce di menu usa $fs-menu, che va da 28px sugli schermi
   stretti a 48px sul desktop; con un 1.5rem fisso la freccia era grande
   quanto mezza lettera in alto e quasi quanto tutta la parola in basso.

   Il rapporto era 0.8, lo stesso della freccia dei titoli di pagina.
   Dal 2026-09-09 e' **0.7**, su richiesta: da quando la freccia e' disegnata
   a tratto spesso pesa piu' di prima a parita' di lato, e accanto a una voce
   di menu chiedeva un po' meno spazio. Le due frecce non si somigliano piu'
   in misura — quella del titolo e' cresciuta lo stesso giorno — ma si
   somigliano in **peso relativo**, che e' quello che si vede: il tratto e'
   il 13.3% del lato in tutte e due.

   Il colore lo scrive `interporto_pordenone_colore_voce()` sull'`<a>`, una
   voce per volta, e l'icona lo eredita: e' un SVG con `fill="currentColor"`,
   quindi prende e basta il `color` del padre. Il ripiego e' il grigio di
   prima, ed e' quello che si vede sulle voci che a una pagina colorata non
   portano: la Home — che di colori ne ha cinque, uno per fascia — piu'
   Appalti, News e Contatti. */
.nav-overlay__list .icon {
	color: var(--colore-voce, var(--c-grey-500, #7b7b7b));
	flex: none;
	height: 0.7em;
	transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
	width: 0.7em;
}

/* **La voce che conta prende il colore della sua pagina e il neretto**, e
   vale in tre casi: al passaggio del mouse, col focus da tastiera, e sulla
   voce corrente. Richiesta del 2026-09-09, che chiude il giro cominciato il
   2026-09-08 (le frecce colorate) e sostituisce l'ingrandimento della
   freccia della voce corrente, tolto lo stesso giorno.

   E' il quarto segnale provato per dire "sei qui", ed e' utile sapere perche'
   gli altri tre sono caduti: la **freccia colorata** non distingue piu' da
   quando lo sono tutte; il **filetto verticale** e' stato tolto su richiesta
   il 2026-09-08; la **freccia ingrandita** (`scale(1.35)`) su richiesta il
   giorno dopo. Il neretto era stato scartato il 2026-09-01 perche' nel
   mockup la voce corrente ha lo stesso peso delle altre — ma quel mockup
   aveva una sola freccia colorata, cioe' un segnale che qui non c'e' piu':
   e' il cliente stesso a riaprire la decisione.

   Il colore lo porta `--colore-voce`, la stessa custom property della
   freccia, quindi testo e freccia della voce corrente sono in tinta sulle
   pagine colorate. Il **ripiego e' il grigio $c-grey-500, lo stesso della
   freccia** (deciso il 2026-09-14, di nuovo su richiesta — prima era nero
   apposta perche' un testo che schiarisce si legge come "disattivato": qui
   pero' e' la freccia a restare ferma al grigio anche lei, quindi le due
   restano appaiate invece di scollegarsi). Le voci di menu sono testo
   grande (da 28 a 48px), quindi la soglia e' 3:1: i cinque colori di pagina
   stanno fra 3.28 e 5.58:1, il grigio di ripiego sta a 4.23:1.

   **Il neretto non sposta niente**, e non e' una fortuna: la voce e' un
   flex a riga piena con la freccia a sinistra e il testo a seguire, quindi
   una parola piu' larga cresce verso destra nel vuoto. La freccia resta dov'e'
   e le altre voci non si muovono.

   **`:focus-visible` e non `:focus`**, ed e' l'unico punto del tema dove i
   due si distinguono: chi apre il menu con un clic e poi passa il mouse
   sulle voci non deve trovarne una gia' in neretto senza aver fatto niente
   per meritarselo. Fino al 2026-09-14 il rischio c'era anche da tastiera —
   `js/navigation.js` mandava il focus dritto sulla prima voce all'apertura,
   e quella si accendeva come se fosse la pagina corrente pur non essendolo
   quasi mai. Ora il focus all'apertura va sul pannello (`tabindex="-1"` in
   navigation-overlay.php), non su una voce, quindi questa regola scatta solo
   quando una voce riceve davvero il focus da tastiera — Tab dopo Tab — che
   e' il momento giusto per accenderla. La sottolineatura invece resta su
   `:focus` semplice: e' li' da prima e non fa danno.

   Per le tecnologie assistive resta `aria-current="page"`, che il menu emette
   gia'. */
.nav-overlay__list a:hover,
.nav-overlay__list a:focus-visible,
.nav-overlay__list [aria-current="page"] {
	color: var(--colore-voce, var(--c-grey-500, #7b7b7b));
	font-weight: 700;
}

/* La freccia non ha bisogno di una regola qui: sulle quattro voci senza
   colore di pagina (Home, Appalti, News, Contatti) e' gia' ferma al grigio
   $c-grey-500 di riposo (regola `.nav-overlay__list .icon` piu' in alto), lo
   stesso ripiego usato sopra per il testo, quindi le due sono gia' in tinta
   fra loro senza altro codice. Sulle pagine colorate quella stessa regola
   base applica `--colore-voce` sempre, non solo in questi stati: anche li'
   la freccia e' gia' in tinta col testo. */

/* Al passaggio la freccia si sposta in diagonale, nel verso in cui punta.
   Dal 2026-09-09 e' l'unica trasformazione rimasta su queste icone: la voce
   corrente non ha piu' la sua scala, quindi non serve piu' nemmeno la regola
   che gliela rimetteva durante il passaggio. */
.nav-overlay__list a:hover .icon,
.nav-overlay__list a:focus .icon {
	transform: translate(0.22em, -0.22em);
}

/* Blocca lo scroll della pagina sotto mentre l'overlay e' aperto. */
.has-nav-open {
	overflow: hidden;
}

/*--------------------------------------------------------------
# Layout — footer
--------------------------------------------------------------*/

/* Fascia grigio chiaro con cinque colonne, misurate sul mockup:
   dati societari (508px), contatti (492px) e tre colonne di
   navigazione (200/184/212px) — da cui il rapporto 2.5/2.5/1/1/1.
   Privacy e cookie stanno piu' in basso, allineate a destra. */

/* **Il footer ha un fondo suo**, scuro: richiesta del 2026-09-09, un giro
   dopo quello che l'aveva riportato al grigio chiaro. Il testo passa al
   bianco di conseguenza — nero su $c-grey-800 sarebbe sotto qualunque
   soglia WCAG — e con lui tutte le regole di link qui sotto, che erano
   scritte per un fondo chiaro.

   $c-grey-800 e non nero pieno: resta leggibile come **grigio**, e il
   contrasto con il bianco (10.4:1) sta comunque ben sopra il 4.5:1 del testo
   normale, quindi c'e' margine anche per i toni piu' chiari usati altrove
   nella fascia.

   Del colore di pagina resta la sola **sottolineatura** dei link, qui sotto,
   ma ora prende `--colore-titolo` (il tono dei titoli) e non piu'
   `--colore-testo-piccolo`: quel tono era stato scurito apposta per leggersi
   **su bianco**, e su un fondo scuro il verso giusto e' l'opposto — lo stesso
   principio, di nuovo: **un colore calibrato su un fondo non e' calibrato su
   un altro**, gia' scritto due volte in `layout/_pagine.scss`. Va
   riverificato a vista pagina per pagina: se un colore dovesse leggersi
   ancora male sul nuovo fondo scuro, la soluzione e' un tono dedicato
   calcolato in PHP (come `colore_titolo()`/`colore_superficie()`), non un
   numero scelto a occhio in CSS.

   **`--colore-titolo` e non `--colore-pagina`** (corretto il 2026-09-28,
   segnalato dal cliente): sono lo stesso valore per quattro pagine su
   cinque, ma non per Aziende insediate, dove il titolo e' forzato a
   `#e8a702` (INTERPORTO_PORDENONE_TITOLO_FORZATO, inc/colori.php) mentre
   `--colore-pagina` resta la tinta grezza del logo, `#f8b100`. Con
   `--colore-pagina` qui, il footer sottolineava i link in un giallo diverso
   da quello del titolo della pagina — l'unico punto del sito rimasto
   scollegato dall'eccezione, perche' testata, titoli di sezione e voce di
   menu leggono gia' tutti `--colore-titolo`.

   Fase 10 (pannello di accessibilità, tema chiaro/scuro): questa fascia
   **non partecipa** al tema del pannello, ed e' voluto — sfondo e testo
   sono scritti letterali (`$c-grey-800`, `#fff`), non con `$c-white`/
   `$c-black`: quei due token sono diventati custom property theme-aware
   in base/_variables.scss, e userli qui vorrebbe dire far scurire il
   testo bianco proprio nel tema scuro — il difetto trovato scansionando
   la home a tema scuro durante la riconciliazione. E' gia' scura in
   entrambi i temi, come la sidebar di un pannello di controllo: passare
   al tema scuro del sito non deve renderla "ancora piu' scura" ne' farla
   tornare chiara. */

/* Bordo superiore come `.site-header` (`border-bottom: 1px solid
   $c-border`, layout/_header.scss): stesso token, stesso spessore,
   solo sul lato opposto — separa il footer dal corpo pagina anche
   dove i due fondi sono quasi lo stesso scuro (tema scuro, sotto una
   sezione senza colore proprio). `$c-border` è già theme-aware da
   solo (base/_variables.scss), quindi basta qui: nessuna ridefinizione
   dedicata in utilities/_tema.scss. */
.site-footer {
	background-color: #404040;
	border-top: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	color: #fff;
	padding-block: 3rem;
}

.site-footer__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {

	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {

	.site-footer__grid {
		gap: 1.5rem;
		grid-template-columns: 2.5fr 2.5fr 1fr 1fr 1fr;
	}
}

/* Senza `min-width: 0` una colonna di griglia non scende sotto il
   min-content del suo testo. A riposo non si vede: le voci sono corte.
   Col pannello di accessibilità su "Interlinea/Spaziatura: Alta" e
   testo al 200% insieme, il min-content della colonna dei link cresce
   abbastanza da spingere il resto della griglia fuori dallo schermo —
   la stessa famiglia di trappola gia' nota nel progetto gemello
   Fornitori (CLAUDE.md, "Reflow"), qui trovata scansionando con axe-core
   a tema scuro, testo 200% e spaziatura massima insieme. */
.site-footer__col {
	min-width: 0;
}

.site-footer__col > * + * {
	margin-block-start: 1rem;
}

.site-footer__company {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

.site-footer__company strong {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
}

.site-footer__note {
	margin: 0;
}

.site-footer__contacts {
	font-style: normal;
	line-height: 1.5;
	margin: 0;
}

.site-footer__contacts a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--colore-titolo, currentcolor);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
	transition: text-decoration-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__nav li + li {
	margin-block-start: 0.5rem;
}

.site-footer__nav a {
	color: #fff;
	display: inline-block;
	padding-block: 0.25rem;
	text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus {
	text-decoration: underline;
	text-decoration-color: var(--colore-titolo, currentcolor);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: flex-start;
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
}

@media (min-width: 64rem) {

	.site-footer__legal {
		justify-content: flex-end;
	}
}

.site-footer__legal a {
	color: #fff;
	display: inline-block;
	padding-block: 0.25rem;
	text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus {
	text-decoration: underline;
	text-decoration-color: var(--colore-pagina, currentcolor);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

.site-info {
	margin-block-start: 1.5rem;
}

/*--------------------------------------------------------------
# Home page
--------------------------------------------------------------*/

/* Le proporzioni delle colonne non sono stimate: vengono dai rettangoli
   misurati sulla pagina 1 del PDF (container 1596px).
   - intro:  immagine 798 / vuoto 102 / testo 703
   - stat:   testo 624 / vuoto 179 / immagine 788
   - InRail: immagine 768 / vuoto 127 / testo 707 */
.site-main--home > .section:first-child {
	margin-block-start: 0;
}

/* -10% rispetto al padding di `.section` (layout/_grid.scss) a ogni soglia,
   richiesta del cliente (2026-09-15), **solo in home**. `.section` e' scesa
   a 80px sotto $bp-tablet (richiesta del cliente, 2026-09-28): questa fascia
   segue, 80px*0.9 = 72px. Da $bp-tablet a $bp-desktop resta il calcolo di
   sempre sui 96px (86.4px), invariato. `.home-carousel--servizi` resta
   escluso: ha gia' un padding suo dimezzato (vedi piu' sotto, "Caroselli"),
   ridotto li' direttamente e non sommato a questa regola. */
.site-main--home > .section:not(.home-carousel--servizi) {
	padding-block: 4.5rem;
}

@media (min-width: 48rem) {

	.site-main--home > .section:not(.home-carousel--servizi) {
		padding-block: 5.4rem;
	}
}

@media (min-width: 64rem) {

	.site-main--home > .section:not(.home-carousel--servizi) {
		padding-block: 7rem;
	}
}

/*--------------------------------------------------------------
## Hero
--------------------------------------------------------------*/

/* Nel mockup l'header e' una fascia bianca piena sopra l'hero, non
   sovrapposta: l'hero comincia dove finisce l'header. */

/* Avvolge .hero e .hero-titolo solo per dare a quest'ultimo un'ancora di
   posizionamento da tablet in su, dove torna sovrapposto al video come
   prima del 2026-09-11 (vedi .hero-titolo piu' sotto). */
.hero-gruppo {
	position: relative;
}

.hero {
	align-items: flex-end;
	display: flex;
	isolation: isolate;
	min-height: 20rem;
	overflow: hidden;
	position: relative;
	width: 100%;
}

@media (min-width: 48rem) {

	.hero {

		/* 972 x 1728 nel mockup. */
		aspect-ratio: 16/9;
		min-height: 30rem;
	}
}

.hero__media {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	z-index: -2;
}

/* Il titolo e' bianco sopra una fotografia. Senza questa sfumatura non
   avrebbe nessun contrasto garantito: cambiando immagine il testo
   resterebbe leggibile solo per fortuna. Non e' decorazione. */
.hero__scrim {
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 28%, rgba(0, 0, 0, 0) 60%);
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* Da mobile il titolo non sta piu' sopra al video (richiesta del
   2026-09-11): esce in un blocco proprio, subito sotto, senza uno sfondo
   suo — poggia sul normale sfondo bianco della pagina (seconda stesura,
   stesso giorno: la prima forzava un fondo nero di ripiego, tolto su
   richiesta — "teniamola sullo sfondo della pagina"). Il colore del testo
   segue: vedi .hero__title piu' sotto.

   Da tablet in su torna sovrapposto come prima (posizionato in assoluto
   sopra il video, stesso padding di quando stava dentro .hero__inner):
   sotto il desktop la fascia col video e' alta quanto il video, cioe' poco
   piu' di 200px su un telefono, e il padding desktop la riempirebbe da
   bordo a bordo — motivo per cui i due padding restano diversi. */
.hero-titolo {
	padding-block: 2.4rem 1.5rem;
	transition: opacity 0.8s ease;
}

@media (min-width: 48rem) {

	.hero-titolo {
		inset-block-end: 0;
		inset-inline: 0;
		padding-block: 2.5rem 2rem;

		/* Sovrapposto al video, a tutta larghezza e dopo .hero nel documento:
       senza questo si prende i clic dei pulsanti del video, che stanno
       nello stesso angolo ma dentro lo stacking context di .hero
       (isolation: isolate) e quindi sotto di lui — anche a titolo
       sfumato via (opacity: 0 non toglie i clic). Il blocco non ha
       niente di interattivo. */
		pointer-events: none;
		position: absolute;
	}
}

@media (min-width: 64rem) {

	.hero-titolo {
		padding-block: 4rem 3rem;
	}
}

/* Si restringe al testo (fit-content) invece di riempire .container: cosi'
   il gruppo di linee sotto (mobile, vedi .hero__linee) puo' essere largo
   "quanto la scritta" senza misurarla in JavaScript. Funziona perche' l'a-
   capo di .hero__title e' un <br> vero (vedi hero.php): il piu' largo fra
   "OLTRE" e "LA LOGISTICA" e' esattamente la dimensione max-content che il
   browser usa per lo shrink-to-fit. */
.hero-testo {
	max-width: 100%;
	width: fit-content;
}

/* Il titolo dell'hero entra salendo. **Si anima il `transform` e non
   l'`opacity`**, che e' gia' impegnata: la stessa proprieta' la usa la
   dissolvenza con cui il blocco del titolo sparisce dopo cinque secondi
   (`.hero-titolo--via`, messa da js/hero.js, sul contenitore e non piu' sul
   solo testo dal 2026-09-11), e un'animazione con `both` vincerebbe su
   quella transizione lasciando il titolo li' per sempre.

   Sotto `prefers-reduced-motion` la durata scende a 0.01ms per la regola
   globale di `utilities/_motion.scss`, quindi il titolo e' subito al suo
   posto. */
@keyframes hero-entra {

	from {
		transform: translateY(2.5rem);
	}

	to {
		transform: none;
	}
}

.hero__title {
	animation: hero-entra 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
	color: var(--c-black, #1c1a18);
	font-size: clamp(2.5rem, 5.2vw, 5.625rem);
	font-weight: 900;
	line-height: 1.1;
	margin: 0;
	text-transform: uppercase;
}

@media (min-width: 48rem) {

	.hero__title {
		color: #fff;
	}
}

/* Sotto il titolo: cinque segmenti, uno per colore, compaiono a cascata
   una volta sola al caricamento e restano — su tutti i formati dal
   2026-09-15 (prima era solo mobile, con una barra a parte che ciclava
   colore da tablet in su via js/hero.js: tolta su richiesta del cliente,
   non serviva piu'). E' un @keyframes puro (vedi .hero__linea-colore
   sotto), senza classi JS: parte da solo al caricamento e non dipende da
   js/hero.js, che infatti non la tocca. */
.hero__linee {
	display: flex;
	gap: 5px;
	margin-block-start: 1rem;
}

.hero__linea-colore {
	animation: linea-comparsa 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
	background-color: #d10a11;
	block-size: 0.25rem;
	flex: 1 1 0;
	transform-origin: left;
}

.hero__linea-colore:nth-child(2) {
	animation-delay: 90ms;
	background-color: #f8b100;
}

.hero__linea-colore:nth-child(3) {
	animation-delay: 180ms;
	background-color: #93c01f;
}

.hero__linea-colore:nth-child(4) {
	animation-delay: 270ms;
	background-color: #009ee2;
}

.hero__linea-colore:nth-child(5) {
	animation-delay: 360ms;
	background-color: #e5007e;
}

/* Sotto `prefers-reduced-motion` la regola globale di
   utilities/_motion.scss azzera durata e ritardo: le linee compaiono
   tutte insieme, ferme. */
@keyframes linea-comparsa {

	from {
		opacity: 0;
		transform: scaleX(0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Da desktop in su, con il video l'hero prende tutta la schermata.
   "Tutta" contando anche l'header, che nel mockup sta sopra e non
   sovrapposto: header + hero devono fare esattamente una schermata,
   quindi si toglie l'altezza della fascia. Va sostituito anche
   l'aspect-ratio 16/9 che regge la versione con la fotografia,
   altrimenti resterebbe lui a decidere.

   dvh e non vh: su mobile vh conta anche la barra del browser che
   sparisce scrollando, e l'hero verrebbe piu' alto dello schermo. Il vh
   resta come ripiego per i browser che non conoscono dvh.

   Il -1px non e' scaramanzia: .site-header ha un border-bottom da 1px,
   quindi la fascia renderizzata e' alta $header-h piu' il filetto. Senza
   contarlo, header e hero fanno una schermata piu' un pixel e compare una
   barra di scorrimento verticale per niente: misurato 1081 contro 1080.

   **Sotto il desktop no** (richiesta del 2026-09-01): una schermata intera
   di video su un telefono e' tutta la pagina, e per vedere il primo
   contenuto bisogna scorrere alla cieca. L'altezza la detta la larghezza,
   attraverso le proporzioni del video: e' `min-block-size` e non
   `aspect-ratio` di proposito, cosi' se il titolo dovesse essere piu' alto
   del riquadro — una lingua lunga, un carattere ingrandito dall'utente —
   la fascia cresce invece di tagliarlo, che con `overflow: hidden` e'
   esattamente cio' che succederebbe.

   Le proporzioni le scrive js/hero.js quando il browser ha letto i
   metadati del file. Il ripiego e' 16/9 (1.7778), che e' il formato del
   video attuale e di quasi tutti: senza JavaScript la fascia resta
   ragionevole invece di sparire. */
.hero--video {
	aspect-ratio: auto;
	block-size: auto;
	min-block-size: calc(100vw / var(--hero-video-ratio, 1.7778));
}

@media (min-width: 64rem) {

	.hero--video {
		block-size: calc(100vh - 7rem - 1px);
		block-size: calc(100dvh - 7rem - 1px);
		min-block-size: 20rem;
	}
}

/* Da tablet in su il blocco del titolo resta cinque secondi e poi se ne
   va (richiesta del 2026-08-27; sul contenitore intero e non piu' sul solo
   testo dal 2026-09-11, perche' da mobile portava con se' anche lo
   sfondo). Da mobile NON PIU' (richiesta del cliente, 2026-09-15): la
   classe la mette comunque js/hero.js su tutti i breakpoint — non sa
   distinguerli, come da convenzione del tema — ma sotto $bp-tablet questa
   regola non esiste piu' e l'opacita' resta 1. Sparisce con l'opacita' e
   non con display:none, cosi' resta nell'albero di accessibilita': per un
   lettore di schermo la pagina continua ad avere il suo h1. */
@media (min-width: 48rem) {

	.hero-titolo--via {
		opacity: 0;
	}
}

/* Rimando allo scroll: solo da tablet in su, nascosto finche' il titolo
   dello slogan e' a schermo e rivelato appena sparisce — stessa classe di
   sopra, letta pero' sul fratello successivo (`~`), cosi' non serve
   toccare js/hero.js. Da mobile lo slogan non sparisce mai (regola sopra),
   quindi qui sotto non c'e' niente da rivelare: l'elemento resta escluso
   dal layout, non solo invisibile. */
.hero-scroll {
	display: none;
}

@media (min-width: 48rem) {

	.hero-scroll {
		color: #fff;
		display: block;
		inset-block-end: 2.5rem;
		inset-inline: 0;
		margin-inline: auto;
		opacity: 0;
		padding: 0.5rem;
		position: absolute;
		text-decoration: none;
		width: fit-content;

		/*
     * `visibility` accanto a `opacity`, non da sola: un link a opacita'
     * zero resta comunque nell'area cliccabile e raggiungibile da
     * tastiera finche' lo slogan dell'hero e' a schermo (i primi 5s,
     * js/hero.js), quindi si puo' attivare senza vederlo. Il ritardo
     * asimmetrico sulla transizione di `visibility` lascia intatta la
     * dissolvenza: diventa cliccabile solo a dissolvenza finita, ma
     * torna invisibile e non cliccabile subito quando sparisce.
     */
		transition: opacity 0.8s ease, visibility 0s linear 0.8s;
		visibility: hidden;
	}

	.hero-titolo--via ~ .hero-scroll {
		opacity: 1;
		transition: opacity 0.8s ease, visibility 0s linear 0s;
		visibility: visible;
	}
}

/* Il rimbalzo verticale e' sull'icona, non sul contenitore: cosi' la
   transizione di opacita' qui sopra (sul contenitore) e l'animazione a
   ciclo continuo qui sotto (sull'icona) non si contendono lo stesso
   `transform`. */
@keyframes hero-scroll-rimbalza {

	0%,
 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(0.375rem);
	}
}

.hero-scroll .icon {
	animation: hero-scroll-rimbalza 1.6s ease-in-out infinite;
}

/* Al passaggio del mouse (e a fuoco da tastiera) la freccia cicla nei
   cinque colori della stella del logo, stesso ordine e stessa tavolozza
   di .hero__linea-colore sopra. E' un secondo `animation` in coda al primo
   nella lista separata da virgole, non un rimpiazzo: il rimbalzo verticale
   continua, il colore si aggiunge sopra senza toccare `transform`. */
@keyframes hero-scroll-colori {

	0%,
 100% {
		color: #d10a11;
	}

	20% {
		color: #f8b100;
	}

	40% {
		color: #93c01f;
	}

	60% {
		color: #009ee2;
	}

	80% {
		color: #e5007e;
	}
}

.hero-scroll:hover .icon,
.hero-scroll:focus-visible .icon {
	animation: hero-scroll-rimbalza 1.6s ease-in-out infinite, hero-scroll-colori 2.4s linear infinite;
}

/* Bersaglio del link qui sopra. Stessa formula di `.servizio` in
   layout/_pagine.scss: la testata e' `position: sticky`, senza questo
   margine il blocco introduttivo arriverebbe nascosto sotto di lei
   invece che appena sotto. */
#home-intro {
	scroll-margin-block-start: calc(5.175rem + 1rem);
}

@media (min-width: 64rem) {

	#home-intro {
		scroll-margin-block-start: calc(7rem + 1rem);
	}
}

/* Comando di pausa del video (WCAG 2.1, criterio 2.2.2). Il disco scuro
   non e' decorazione: sopra un video che cambia di continuo un'icona
   bianca da sola non garantirebbe nessun contrasto, mentre bianco su
   questo nero al 55% sta sopra 4.5:1 qualunque cosa scorra sotto. */

/* Due classi e non una: in sass/style.scss `layout/home` sta PRIMA di
   `components/buttons`, quindi a parita' di specificita' vincerebbe
   .btn-icon e l'icona resterebbe nera su fondo scuro — invisibile. Con
   .btn-icon.hero__playback la specificita' e' piu' alta e l'ordine non
   conta piu'. */

/* Resta ancorato al riquadro del video (`position: absolute` dentro
   `.hero`, non `fixed` rispetto alla finestra): e' un comando che controlla
   il video, e deve sparire scorrendo oltre — da fisso resterebbe a
   galleggiare sul resto della pagina anche quando il video non e' piu' in
   vista (richiesta del cliente, 2026-09-27).

   Affiancato al bottone di accessibilita' — stesso angolo, stesso stacco
   dal bordo, non piu' impilato sopra — invece che allineato pixel per
   pixel: quel bottone e' fisso rispetto alla finestra, questo si sposta
   con `.hero`, quindi le due altezze coincidono solo quando l'hero occupa
   tutto lo schermo (da `$bp-desktop`, vedi `.hero--video` sopra). Sotto
   quella soglia l'hero e' corto (alto quanto il video, non quanto lo
   schermo) e il bottone resta comunque nel suo angolo in basso a destra,
   piu' in alto sulla pagina di quanto non sia il bottone di
   accessibilita' — e' la fascia video che decide la sua posizione, non
   l'icona.

   `inset-inline-end` e' lo stesso ingombro (44px) del bottone di
   accessibilita' piu' un margine, cosi' i due non si sovrappongono quando
   condividono la riga da desktop. */
.btn-icon.hero__playback,
.btn-icon.hero__audio {
	background-color: rgba(0, 0, 0, 0.55);
	border-color: transparent;
	color: #fff;
	inset-block-end: 0.25rem;
	inset-inline-end: calc(2.75rem + 0.5rem);
	position: absolute;
	z-index: 1;
}

@media (min-width: 48rem) {

	.btn-icon.hero__playback,
	.btn-icon.hero__audio {
		inset-block-end: 1rem;
	}
}

/* L'audio sta a sinistra della pausa (richiesta del 2026-10-01): un
   pulsante piu' un margine piu' in la'. */
.btn-icon.hero__audio {
	inset-inline-end: calc(2.75rem * 2 + 0.5rem * 2);
}

/* Da telefono in verticale va tutto a destra, incollato al bordo della
   finestra come il bottone di accessibilita' (richiesta del cliente,
   2026-09-27): a queste larghezze non c'e' piu' nessun bottone di
   accessibilita' a quest'altezza con cui rischiare di sovrapporsi (quello
   e' fisso rispetto alla finestra, molto piu' in basso sulla pagina, vedi
   sopra), quindi lo scarto per non toccarlo non serve piu'. Solo
   verticale: in orizzontale il video e' piu' basso e piu' largo, e li'
   resta lo scarto di prima. */
@media (max-width: 47.9375rem) and (orientation: portrait) {

	.btn-icon.hero__playback {
		inset-inline-end: 0;
	}

	.btn-icon.hero__audio {
		inset-inline-end: calc(2.75rem + 0.5rem);
	}
}

.btn-icon.hero__playback:hover,
.btn-icon.hero__playback:focus,
.btn-icon.hero__audio:hover,
.btn-icon.hero__audio:focus {
	background-color: rgba(0, 0, 0, 0.8);
	border-color: #fff;
	color: #fff;
}

.hero__playback-icona,
.hero__audio-icona {
	align-items: center;
	display: inline-flex;
}

.hero__playback-icona[hidden],
.hero__audio-icona[hidden] {
	display: none;
}

/* Chi ha chiesto meno animazioni non si vede sfumare il blocco del titolo:
   sparisce e basta. Il video lo ferma js/hero.js, che guarda la stessa
   media query. */
@media (prefers-reduced-motion: reduce) {

	.hero-titolo {
		transition: none;
	}
}

/* Le etichette dei due caroselli (SERVIZI, INSEDIATI) prendono anche loro
   il colore della fascia. Il ripiego e' il grigio di prima: a 36px basta il
   3:1 del testo grande, e $c-grey-500 sta a 4.23:1. */
.section-header--carousel .section-header__title {
	color: var(--colore-titolo, var(--c-grey-500, #7b7b7b));
}

/*--------------------------------------------------------------
## Blocchi a due colonne (intro, statistica, InRail)
--------------------------------------------------------------*/
.home-split__inner {
	display: grid;
	gap: 1rem;
}

@media (min-width: 48rem) {

	.home-split__inner {
		gap: 2.5rem;
	}
}

@media (min-width: 64rem) {

	/* align-items: dal 2026-08-31 al 2026-09-29 era `center` ovunque — il
     testo al centro della fascia invece che in cima, perche' con
     l'immagine verticale la colonna accanto e' molto piu' corta, e
     appesa in alto lasciava sotto un vuoto grande quanto mezza fascia.
     Da questa data il cliente lo vuole `start` **fuori da home**: qui
     sotto resta il ripiego che vale ovunque (`.home-split` e' condivisa
     tra home e pagine di contenuto — societa'/futuro.php, servizi/
     elenco.php, pagine/sezioni.php, intermodale/inrail.php), il
     `center` di home torna con `.site-main--home .home-split__inner`
     qui sotto, esattamente come funziona gia' per il padding di
     `.site-main--home > .section` piu' in alto in questo file. */
	.home-split__inner {
		align-items: start;
		column-gap: 6.4%;
		grid-template-columns: 50% 44%;
	}

	.site-main--home .home-split__inner {
		align-items: center;
	}

	/* Stesso ripristino del `center`, ma solo sulle sette fasce della
     pagina Servizi (richiesta del cliente, subito dopo la precedente:
     li' il cambio a `start` non andava bene). `.servizio` e' la classe
     che template-parts/servizi/elenco.php aggiunge a ognuna di quelle
     fasce apposta per differenziarle (vedi anche `.servizio
     .media-slider__image` in components/_media-slider.scss) — non serve
     quindi la classe sul body come per `.pagina-intro__inner` in
     layout/_pagine.scss, che invece non ha un aggancio suo. */
	.servizio .home-split__inner {
		align-items: center;
	}

	.home-split--reverse .home-split__inner {
		column-gap: 11.2%;
		grid-template-columns: 39% 49%;
	}

	/* Fasce a colonne invertite: testo a sinistra, immagine a destra.
     L'inversione la fa `order` e non l'ordine nel documento, perche' nel
     DOM l'immagine viene **sempre** prima del testo: e' cosi' che su
     mobile, dove le colonne diventano una, tutte le fasce del sito
     impilano allo stesso modo — prima l'immagine, poi il testo. Farlo
     al contrario (documento invertito, `order` su mobile) rovescerebbe
     l'ordine di lettura e quello di tabulazione rispetto a cio' che si
     vede: il blocco immagine contiene le frecce dello slider, che sono
     elementi attivi, e si finirebbe per raggiungerle prima del testo che
     sullo schermo le precede. */
	.home-split--reverse .home-split__media {
		order: 2;
	}

	/* La colonna immagine e' passata a destra per `order` qui sopra: le
     frecce del suo slider, allineate a sinistra di default
     (.media-slider__nav in components/_media-slider.scss), vanno
     spostate a destra per restare "al punto esterno" — la fine della
     colonna, non l'inizio. */
	.home-split--reverse .home-split__media .media-slider__nav {
		justify-content: flex-end;
	}

	.home-split--reverse .home-split__media .media-slider__nav .carousel-nav {
		transform: translateX(var(--carousel-nav-scarto));
	}

	.home-split--inrail .home-split__inner {
		column-gap: 8%;
		grid-template-columns: 48% 44%;
	}
}

.home-split__media {
	margin: 0;
	position: relative;
}

/* Il logo del partner sovrapposto in alto a destra sulla fotografia. */
.home-split__badge {
	display: block;
	inset-block-start: 1.5rem;
	inset-inline-end: 1.5rem;
	position: absolute;
	width: clamp(5rem, 15%, 8.625rem);
}

.home-split__badge-image {
	block-size: auto;
	display: block;
	inline-size: 100%;
}

/* Il titolo prende il colore della pagina a cui la fascia porta. Prima
   erano tre classi diverse messe a mano — `.text-muted` sull'intro,
   niente sulla statistica, `.text-accent` su InRail — che e' il modo di
   farle divergere alla prima modifica: adesso e' una proprieta' sola, e il
   valore lo decide la pagina di destinazione. */
.home-split__title {
	color: var(--colore-titolo, var(--c-black, #1c1a18));
	font-size: clamp(1.625rem, 2.08vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	margin-block: 0 0.75rem;
	text-transform: uppercase;
}

/* Fase 10: `--colore-pagina` (inc/colori.php) e' verificato per il testo
   grande **su bianco** (vedi la tabella colori in base/_variables.scss:
   dal 4.62:1 dell'ambra al 6.52:1 del magenta), non sul canvas scuro. Il
   magenta di Intermodale, che questo titolo eredita da InRail, scende a
   2.82:1 su #141414 — sotto il 3:1 del testo grande. A differenza delle
   fasce velate (dove a diventare letterale e' lo sfondo, vedi
   layout/_grid.scss), qui il colore intero e' il contenuto — un titolo
   che porta l'identita' della pagina di destinazione — quindi nel tema
   scuro si ripiega sul token neutro invece di restare accesso. Stesso
   principio per l'etichetta dei caroselli qui sotto. */
html[data-a11y-tema="dark"] .home-split__title,
html[data-a11y-tema="dark"] .section-header--carousel .section-header__title {
	color: var(--c-text);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .home-split__title,
	html:not([data-a11y-tema="light"]) .section-header--carousel .section-header__title {
		color: var(--c-text);
	}
}

/* Il numero e il testo che lo segue sono un titolo solo: separarli in
   due elementi romperebbe la gerarchia dei titoli per chi la usa per
   navigare. Restano dentro lo stesso h2, con un semplice a capo. */
.home-split__value {
	display: block;
}

.home-split__body > p {
	margin-block: 0 1.5rem;
}

.home-split__action {
	margin-block-start: 2rem;
}

/*--------------------------------------------------------------
## Caroselli (Servizi, Insediati)
--------------------------------------------------------------*/

/* Solo il padding cambia per i Servizi (richiesta del 2026-09-11, corretta
   lo stesso giorno: il carosello resta un carosello, stesso numero di
   schede visibili di `--insediati` qui sotto, sia da mobile sia da
   desktop — non e' diventato una colonna singola). Il formato delle card
   e' cambiato a parte, vedi `.home-carousel .card-media__img` piu' in
   basso. */
.home-carousel--servizi {
	padding-block: 4rem;
}

/* Non e' uno slider: e' un contenitore che scorre con scroll-snap. Senza
   JavaScript funziona lo stesso, con la rotella, il dito e la tastiera. */
.home-carousel__track {
	display: grid;
	gap: 1.25rem;
	grid-auto-columns: 78%;
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding: 0;
	scroll-snap-type: inline mandatory;

	/* Il contorno del focus va visto: senza spazio verrebbe tagliato
     dall'overflow del contenitore. */
	padding-block: 0.25rem;

	/* Barra di scorrimento nascosta (richiesta del 2026-08-27): sotto i
     loghi degli insediati si vedeva una barra grigia che nel mockup non
     c'e'. Si nasconde solo la barra, non lo scorrimento: rotella, dito,
     frecce della tastiera e i due pulsanti del carosello continuano a
     funzionare, quindi non resta contenuto irraggiungibile. */
	scrollbar-width: none;
}

.home-carousel__track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 48rem) {

	.home-carousel__track {
		grid-auto-columns: 42%;
	}
}

@media (min-width: 64rem) {

	.home-carousel__track {
		grid-auto-columns: calc((100% - 1.25rem * 2) / 3);
	}
}

.home-carousel__track--insediati {
	grid-auto-columns: 45%;
}

@media (min-width: 48rem) {

	.home-carousel__track--insediati {
		grid-auto-columns: 25%;
	}
}

@media (min-width: 64rem) {

	.home-carousel__track--insediati {
		grid-auto-columns: calc((100% - 1.25rem * 4) / 5);
	}
}

/* Quante schede si vedono intere, soglia per soglia (richiesta del
   cliente, 2026-09-28 — un primo giro con quattro soglie e una a
   $bp-desktop e' durato una sola richiesta, il cliente ha chiesto di
   tornare a tre): una sotto $bp-tablet, due da li', tre da $bp-desktop.
   A differenza sia della base qui sopra (78%/42%/3-su-3, che lascia
   intravedere un pezzo della scheda successiva — un suggerimento di
   scorrimento) sia di --insediati (45%/25%/5-su-5), qui ogni soglia
   mostra esattamente N schede intere: stessa formula gia' usata per il
   desktop della base e per --insediati, calc() con il gap tolto e
   diviso per N. Il segnale che si puo' scorrere restano le frecce
   (js/carousel.js), che gia' si spengono da sole quando non c'e' altro
   da vedere. */
.home-carousel__track--servizi {
	grid-auto-columns: 100%;
}

@media (min-width: 48rem) {

	.home-carousel__track--servizi {
		grid-auto-columns: calc((100% - 1.25rem) / 2);
	}
}

@media (min-width: 64rem) {

	.home-carousel__track--servizi {
		grid-auto-columns: calc((100% - 1.25rem * 2) / 3);
	}
}

/* `position: relative` non e' decorativo: dentro le voci ci sono span
   .screen-reader-text, che sono in posizione assoluta. Senza un antenato
   posizionato il loro blocco contenitore diventa la pagina, quindi si
   piazzano dove sarebbero state — cioe' dentro la parte di carosello che
   sta fuori schermo — e **sfuggono al ritaglio della zona che scorre**.
   Il risultato e' che l'intera pagina scorre di lato: misurato il
   2026-08-26, 106px di troppo a 375px di larghezza, invisibili da
   desktop. */
.home-carousel__item {
	position: relative;
	scroll-snap-align: start;
}

/* Le frecce compaiono solo se il JavaScript le ha attivate: altrimenti
   resterebbero due bottoni che non fanno niente. */
.carousel-nav[hidden] {
	display: none;
}

.carousel-nav {
	display: flex;
	gap: 0.5rem;
}

/*--------------------------------------------------------------
## Scheda con immagine di sfondo (carosello Servizi)
--------------------------------------------------------------*/

/* La scheda e' `.card-media` (components/_cards.scss). Qui si cambia solo
   cio' che nella home e' diverso: la proporzione dell'immagine. Era 519x515
   (quasi quadra, dal mockup); dal 2026-09-11 al 2026-09-28 e' stata 2:3
   verticale (lo stesso formato di `.media-slider__image`, componenti/
   _media-slider.scss). Il carosello resta un carosello, stesso numero di
   schede per volta di prima: cambia solo il formato di ciascuna.

   **Da mobile a quadrata, da tablet in su a 3:2 orizzontale (richiesta del
   cliente, avanti e indietro un paio di volte fra il 2026-09-28 e il
   2026-09-29 prima di stabilizzarsi qui).** Sotto $bp-tablet la colonna e'
   stretta (una sola scheda per volta, vedi .home-carousel__track--servizi
   piu' sopra) e il cliente la vuole 1:1; da $bp-tablet in su, dove si
   vedono piu' schede affiancate, 3:2 orizzontale — lo stesso rapporto di
   `.servizio .media-slider__image` piu' sotto in questo file, cioe' delle
   foto della pagina Servizi da cui vengono tagliate. Nessuna soglia
   intermedia a $bp-desktop: stesso 3:2 per tablet e desktop. */
.home-carousel .card-media__img {
	aspect-ratio: 1/1;
}

@media (min-width: 48rem) {

	.home-carousel .card-media__img {
		aspect-ratio: 3/2;
	}
}

/* Il link copre tutta la scheda, cosi' e' cliccabile ovunque, ma il
   contorno del focus resta sulla pill: se seguisse l'area cliccabile
   invisibile, chi naviga da tastiera non capirebbe dove si trova. */
.card-media__link::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* Schermata di fine video (richiesta del 2026-10-01): il video non va in
   loop, a fine corsa un pannello copre l'hero con le card verso le pagine
   principali. Chiaro: dal bianco al grigio; scuro: dal nero al grigio —
   sui token neutri di utilities/_tema.scss, che seguono da soli il tema e
   la scelta del pannello di accessibilita'.
   Il pannello copre tutto .hero-gruppo (video e titolo, anche da mobile:
   cosi' l'altezza della pagina non cambia a fine video) e scorre da se'
   se le card non ci stanno. */
@keyframes hero-fine-entra {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.hero-fine {
	align-items: center;
	display: flex;
	inset: 0;
	overflow-y: auto;
	padding-block: 0.75rem;
	position: absolute;
	z-index: 3;
}

@media (min-width: 64rem) {

	.hero-fine {
		padding-block: 2rem;
	}
}

/* Lo sfondo e' un pseudo-elemento perche' sfumi da solo: sull'intero
   pannello la dissolvenza si porterebbe dietro anche le card, che
   invece entrano una per una (vedi sotto). */
.hero-fine::before {
	animation: hero-fine-entra 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
	background-image: linear-gradient(to bottom, var(--c-white, #faf9f7) 0%, var(--c-grey-200, #dcd8d2) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

.hero-fine[hidden] {
	display: none;
}

.hero-fine__inner {
	display: flex;
	inline-size: 100%;
	flex-direction: column;
	gap: 1.5rem;
	margin-block: auto;
}

.hero-fine__titolo:focus {
	outline: none;
}

.hero-fine__elenco {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {

	.hero-fine__elenco {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	}
}

.hero-fine__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* La card e' testuale e ha lo stile di quelle di Appalti e News (`.card`,
   components/_cards.scss): fondo $c-bg-alt, bordo neutro sottile, ombra
   leggera, sollevamento e bordo nel colore della pagina in hover/focus. Il
   colore sta nel titolo e nella freccia (richiesta del 2026-10-01: via il
   bordo colorato e il riempimento). Titolo +30% da tablet; la freccia e'
   grande come quella delle voci del menu (0.7 x $fs-menu, vedi
   layout/_nav-overlay.scss), con un minimo di 24px. Il link e' steso su
   tutta la card con ::after, come in .card. */
.card-pagina {
	background-color: var(--c-grey-100, #f4f2ef);
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: space-between;
	min-block-size: 3.25rem;
	padding: 0.5rem 0.75rem;
	position: relative;
	transition: border-color 380ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 48rem) {

	.card-pagina {
		min-block-size: 8.45rem;
		padding: 1.25rem 1.5rem;
	}
}

/* Da mobile titolo e freccia stanno sulla stessa riga: meta' altezza. */
@media (max-width: 47.9375rem) {

	.card-pagina {
		align-items: center;
		flex-direction: row;
	}

	.card-pagina .card-pagina__freccia {
		align-self: center;
		flex: none;
	}

	.hero-fine__inner {
		gap: 0.75rem;
	}

	.hero-fine__elenco {
		gap: 0.5rem;
	}

	.hero-fine__rivedi {
		min-block-size: 2.25rem;
	}
}

.card-pagina__titolo {
	color: var(--colore-voce, var(--c-black, #1c1a18));
	font-size: calc(clamp(1.0625rem, 1.27vw, 1.375rem) * 0.85);
	margin: 0;
	overflow-wrap: break-word;
}

@media (min-width: 48rem) {

	.card-pagina__titolo {
		font-size: calc(clamp(1.0625rem, 1.27vw, 1.375rem) * 1.3);
	}
}

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

.card-pagina__titolo a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.card-pagina__testo {
	color: var(--c-grey-700, #6e6e6e);
	font-size: 0.875rem;
	margin: 0;
}

.card-pagina__freccia {
	align-self: flex-end;
	color: var(--colore-voce, var(--c-grey-500, #7b7b7b));
	display: inline-flex;
	line-height: 0;
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);

	/* Da mobile esattamente come la freccia del menu (0.7 x $fs-menu). */
}

.card-pagina__freccia .icon {
	block-size: calc(clamp(1.5125rem, 2.78vw, 3rem) * 0.7);
	display: block;
	inline-size: calc(clamp(1.5125rem, 2.78vw, 3rem) * 0.7);
}

@media (min-width: 48rem) {

	.card-pagina__freccia .icon {
		block-size: max(1.5rem, clamp(1.5125rem, 2.78vw, 3rem) * 0.7);
		inline-size: max(1.5rem, clamp(1.5125rem, 2.78vw, 3rem) * 0.7);
	}
}

.card-pagina:hover,
.card-pagina:focus-within {
	border-color: var(--colore-voce, var(--c-black, #1c1a18));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-6px);
}

.card-pagina:hover .card-pagina__freccia,
.card-pagina:focus-within .card-pagina__freccia {
	transform: translateX(6px);
}

.card-pagina a:focus-visible {
	outline: none;
}

.card-pagina:has(a:focus-visible) {
	outline: 3px solid var(--c-black, #1c1a18);
	outline-offset: 2px;
}

/* Al buio il tono del titolo e' quello calcolato per il fondo scuro
   (3:1, inc/navigation.php): lo stesso schema chiaro/media query/attributo
   di utilities/_tema.scss. */
@media (prefers-color-scheme: dark) {

	:root:not([data-a11y-tema="light"]) .card-pagina .card-pagina__titolo,
	:root:not([data-a11y-tema="light"]) .card-pagina .card-pagina__freccia {
		color: var(--colore-voce-aaa-scuro, var(--colore-voce, var(--c-black, #1c1a18)));
	}
}

:root[data-a11y-tema="dark"] .card-pagina .card-pagina__titolo,
:root[data-a11y-tema="dark"] .card-pagina .card-pagina__freccia {
	color: var(--colore-voce-aaa-scuro, var(--colore-voce, var(--c-black, #1c1a18)));
}

.hero-fine__rivedi {
	align-items: center;
	align-self: flex-start;
	background: none;
	border: 1px solid var(--c-black, #1c1a18);
	border-radius: 999px;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding-inline: 1rem;
}

.hero-fine__rivedi:hover,
 .hero-fine__rivedi:focus-visible {
	background-color: var(--c-black, #1c1a18);
	color: var(--c-white, #faf9f7);
}

/* Il titolo sovrapposto e il rimando allo scroll fanno posto al pannello. */
.hero-gruppo--finito {

	/* Da mobile il titolo sta sotto il video, in flusso, e resta com'e':
     sfumarlo lascerebbe un buco. */
}

@media (min-width: 48rem) {

	.hero-gruppo--finito .hero-titolo {
		opacity: 0;
	}
}

.hero-gruppo--finito .hero-scroll {
	visibility: hidden;
}

/* Comparsa delle card: stessi gesti di .rivela (risalita, scala,
   dissolvenza, stessi $dur-blocco/$ease-uscita e passo), ma con
   un'animazione e non una transizione, perche' parte da sola quando il
   pannello smette di essere `hidden` — anche a ogni "Rivedi il video".
   Dentro `.rivela-attiva` come il resto: con meno movimento, o senza
   JavaScript, le card ci sono e basta. Prima lo sfondo (0 ms), poi le card
   a cascata, in fondo il bottone. */
@keyframes hero-fine-card {

	from {
		opacity: 0;
		transform: translateY(2.25rem) scale(0.9);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.rivela-attiva .hero-fine {

	/* `backwards` e non `both`: a fine corsa l'animazione lascia la mano, o
     terrebbe ferma la transform e l'hover non solleverebbe piu' la card. */
}

.rivela-attiva .hero-fine .card-pagina,
.rivela-attiva .hero-fine .hero-fine__rivedi {
	animation: hero-fine-card 1050ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	animation-delay: calc(250ms + var(--i, 0) * 145ms);
}

.rivela-attiva .hero-fine .card-pagina:nth-child(1) {
	--i: 0;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(2) {
	--i: 1;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(3) {
	--i: 2;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(4) {
	--i: 3;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(5) {
	--i: 4;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(6) {
	--i: 5;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(7) {
	--i: 6;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(8) {
	--i: 7;
}

.rivela-attiva .hero-fine .card-pagina:nth-child(9) {
	--i: 8;
}

.rivela-attiva .hero-fine .hero-fine__rivedi {
	--i: 9;
}

@media (prefers-reduced-motion: reduce) {

	.hero-fine::before {
		animation: none;
	}

	.card-pagina,
	.card-pagina__freccia {
		transition: none;
	}
}

/*--------------------------------------------------------------
# Pagine di contenuto (Società, Polo Logistico, Intermodale, Servizi)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Intestazione condivisa
--------------------------------------------------------------*/

/* Il padding-block-start ereditato da `.section` (6rem/10rem) lascia
   troppo spazio sopra la testata sulle pagine di contenuto: qui si riduce
   solo l'inizio della fascia, non la fine (quella resta quella di
   `.section`, invariata). Non serve escludere la home: non usa questa
   classe. */
.pagina-intro {
	padding-block-start: 3rem;
}

@media (min-width: 64rem) {

	.pagina-intro {
		padding-block-start: 5rem;
	}
}

/* Aziende insediate, seconda richiesta del 2026-09-14: la fine di
   `.pagina-intro` resta quella di `.section` (10rem) su ogni altra pagina
   che passa `lato` — Società, Polo Logistico — dove sotto c'e' una fascia
   con la sua fotografia e quello spazio si legge. Qui sotto c'e' subito la
   griglia di loghi, gia' fitta di suo (vedi .griglia-loghi): ridotta solo
   su questa pagina, non sulla regola condivisa, perche' le altre non
   avevano chiesto di stringere (Servizi lo ha chiesto poi, vedi sotto). */
body.page-template-page-templatesaziende-insediate-php .pagina-intro {
	padding-block-end: 2rem;
}

@media (min-width: 64rem) {

	body.page-template-page-templatesaziende-insediate-php .pagina-intro {
		padding-block-end: 2.5rem;
	}
}

/* Servizi, richiesta del 2026-09-27: la prima riga della pagina e'
   l'introduzione (il paragrafo di presentazione), non la prima `.servizio`
   sotto — e' lei a dover perdere lo spazio finale, non le sette sezioni.
   Senza, la fine di `.pagina-intro` (10rem da desktop, regola base di
   `.section`) si sommava all'inizio della prima `.servizio` (idem), per
   320px di vuoto invece dei 160 della sola prima sezione. */
body.page-template-page-templatesservizi-php .pagina-intro {
	padding-block-end: 0;
}

/*--------------------------------------------------------------
## Pagine single e pagine standard
--------------------------------------------------------------*/

/* Stesso principio di `.pagina-intro` sopra ma per le pagine senza una
   propria intestazione dedicata: l'articolo singolo di Appalti/News/
   Aziende insediate e il ripiego generico del blog (single-*.php,
   single.php — WordPress mette `single` su `<body>` per qualunque
   contenuto singolare, indipendentemente dal post type) e la "Pagina
   legale" (page-templates/legale.php: Informativa privacy, Cookie policy,
   Accessibilità — un template scelto apposta per non avere un layout
   dedicato, solo titolo e testo lungo).
   `page-template-page-templateslegale-php` è la classe che WordPress
   mette su `<body>` per quel Template Name, stessa convenzione già usata
   in sass/utilities/_tema.scss per Aziende insediate. Le pagine coi
   template dedicati (Società, Polo Logistico...)
   restano fuori: hanno ciascuna il proprio `body.page-template-...` e
   usano comunque `.pagina-intro` sopra, non questo.

   Solo l'inizio della fascia (richiesta del 2026-09-11): 10rem da
   desktop e 6rem da mobile lasciavano troppo spazio sopra il titolo,
   come per `.pagina-intro` — stessi due valori. La fine della fascia
   resta quella di `.section`, invariata. */
body.single .section,
body.page-template-page-templateslegale-php .section {
	padding-block-start: 3rem;
}

@media (min-width: 64rem) {

	body.single .section,
	body.page-template-page-templateslegale-php .section {
		padding-block-start: 5rem;
	}
}

.pagina-intro__inner {
	display: grid;
	gap: 1rem;
}

@media (min-width: 48rem) {

	.pagina-intro__inner {
		gap: 2.5rem;
	}
}

@media (min-width: 64rem) {

	.pagina-intro__inner {
		align-items: start;
		column-gap: 6.4%;
		grid-template-columns: 44% 50%;
	}
}

/* Su Servizi il `center` torna (richiesta del cliente, subito dopo la
   precedente): a differenza delle altre pagine, qui la colonna di destra
   dell'introduzione non porta una foto ma le ancore
   (template-parts/servizi/ancore.php, parametro `lato` di pagine/intro.php)
   — un contenuto piu' corto del testo, per cui vale lo stesso motivo del
   2026-08-31 che aveva messo `center` dappertutto (vedi il commento in
   sass/layout/_home.scss): appeso in alto lascerebbe sotto un vuoto. Niente
   classe propria su questa sezione: si aggancia al body class che WordPress
   scrive per il template (stessa convenzione di body.single in cima a
   questo file).

   Aziende insediate si aggiunge qui il 2026-09-30 (richiesta del cliente:
   le sue ancore ai settori riusano lo stesso componente `.ancore` di
   Servizi — vedi template-parts/aziende-insediate/elenco-operatori.php —
   e devono allinearsi allo stesso modo, non solo nel centraggio verticale
   ma anche nella larghezza qui sotto, righe 2007+). Polo Logistico resta
   fuori: la sua colonna `lato` porta le superfici di espansione, non le
   ancore, e per quelle il `start` del 2026-09-27 (`.pagina-intro__inner--lato`
   piu' sotto) resta quello giusto. */
@media (min-width: 64rem) {

	body.page-template-page-templatesservizi-php .pagina-intro__inner,
	body.page-template-page-templatesaziende-insediate-php .pagina-intro__inner {
		align-items: center;
	}
}

/* La colonna immagine e' sempre a destra qui (nessuna variante reverse): le
   frecce del suo slider, allineate a sinistra di default
   (.media-slider__nav in components/_media-slider.scss), vanno spostate a
   destra per restare "al punto esterno" — la fine della colonna, non
   l'inizio. Solo da desktop, dove la colonna esiste davvero: sotto,
   `.pagina-intro__inner` e' impilato in una colonna sola. */
@media (min-width: 64rem) {

	.pagina-intro__media .media-slider__nav {
		justify-content: flex-end;
	}

	.pagina-intro__media .media-slider__nav .carousel-nav {
		transform: translateX(var(--carousel-nav-scarto));
	}
}

.pagina-intro__image {
	block-size: auto;
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
}

/* Blocco a tutta larghezza sotto le due colonne, dentro la stessa
   `.pagina-intro`: lo usa la Vision di Società (richiesta cliente
   2026-09-28, vedi il commento in template-parts/societa/vision.php). Solo
   uno stacco dal blocco sopra — non il ritmo verticale doppio di due
   `.section` separate, che e' esattamente quello che si voleva togliere. */
.pagina-intro__coda {
	margin-block-start: 2.5rem;
}

@media (min-width: 64rem) {

	.pagina-intro__coda {
		margin-block-start: 4rem;
	}
}

/*--------------------------------------------------------------
## Elementi ricorrenti
--------------------------------------------------------------*/

/* I titoli di sezione prendono il colore della pagina (2026-09-08). E' il
   punto in cui il colore si vede di piu', perche' sono l'elemento che
   scandisce ogni pagina dall'alto in basso.

   Vale la soglia del **testo grande**, 3:1, perche' sono 32px in grassetto:
   i cinque colori stanno fra 3.34:1 e 6.52:1 su bianco, e fra 3.07:1 e
   5.64:1 sopra la velatura leggera delle fasce. Il ripiego e' il nero, cioe'
   com'erano prima. */
.titolo-sezione {
	color: var(--colore-titolo, var(--c-black, #1c1a18));
	font-size: clamp(1.375rem, 1.85vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	margin-block: 0 1.25rem;
	text-transform: uppercase;
}

/* Contatti non ha un colore di pagina proprio, quindi qui `.titolo-sezione`
   ("Referenti") ricadrebbe sul nero di ripiego come su ogni altra pagina
   senza colore. Dal 2026-09-28 il cliente vuole invece lo stesso grigio del
   titolo principale della pagina (il grigio del menu, $c-grey-500 — vedi la
   regola gemella in sass/components/_section-header.scss). Scoped al solo
   template Contatti: `.titolo-sezione` e' condivisa da meta' del sito
   (Servizi, Societa', Intermodale, Polo Logistico), che hanno gia' un
   colore proprio e non vanno toccati. */
body.page-template-page-templatescontatti-php .titolo-sezione {
	color: var(--colore-titolo, var(--c-grey-500, #7b7b7b));
}

/* Un titolo che apre la sezione non ha bisogno di spazio sopra: ce l'ha gia'
   il padding della fascia. Uno che arriva **dopo** del contenuto invece si',
   o si incolla al paragrafo precedente e i due si leggono come un blocco
   solo — succede sulla pagina Aziende insediate, dove "Elenco operatori"
   segue l'introduzione. */
.titolo-sezione:not(:first-child) {
	margin-block-start: 5rem;
}

/* Fascia con sfondo velato: nel mockup la usa la sezione governance.
   Il padding è interno alla fascia, non al container, così il colore arriva
   davvero da bordo a bordo.

   Velata del colore della pagina dal 2026-09-08, col grigio di prima come
   ripiego. E' la fascia della governance di Societa': con il blu appartiene
   alla pagina invece di essere un grigio uguale a quello di ogni altro sito.
   Il testo sopra resta nero — 18.8:1 sulla velatura piu' scura dei cinque
   colori — perche' il grigio del testo secondario, calibrato sul bianco, qui
   scenderebbe sotto soglia.

   Fase 10: sfondo e testo tema-aware, coppia coordinata —
   sass/utilities/_tema.scss ridefinisce `--colore-velo` col tema scuro. */
.section--grigia {
	background-color: var(--colore-velo, var(--c-grey-100, #f4f2ef));
	color: var(--c-black, #1c1a18);
	padding-block: 6rem;
}

/* Fascia nel colore della pagina, con il testo che ci sta sopra scelto
   automaticamente fra bianco e nero. Nel mockup la usa "la nostra storia"
   di Società, che è grigia piena con il testo bianco — non la stessa cosa
   della governance, che resta chiara. Erano finite tutte e due sotto
   `.section--grigia` e per questo si assomigliavano più del dovuto.

   I due ripieghi tengono la fascia leggibile anche senza colore: grigio
   chiaro con testo nero, cioè esattamente com'era prima. */
.section--colore {
	background-color: var(--colore-superficie, var(--c-grey-100, #f4f2ef));
	color: var(--colore-testo, var(--c-black, #1c1a18));
	padding-block: 6rem;
}

/* Dentro la fascia piena il titolo **non** prende il colore della pagina: il
   colore e' gia' il fondo, e un titolo colorato sopra il proprio colore e'
   un titolo invisibile. Prende lo stesso testo dei paragrafi accanto, che e'
   scelto sul fondo. Trovato con axe il 2026-09-09, 1.36:1 su Societa'. */
.section--colore .titolo-sezione {
	color: var(--colore-testo, var(--c-black, #1c1a18));
}

.testo-colonna {
	max-width: 70ch;
}

/* Due colonne di testo: nel mockup la narrativa storica è spezzata in due,
   ma qui il testo resta uno solo e a dividerlo è il CSS. Spezzarlo a mano
   vorrebbe dire scegliere il punto di rottura per l'italiano e ritrovarselo
   sbagliato nelle altre due lingue. */
@media (min-width: 64rem) {

	.testo-due-colonne {
		column-gap: 4rem;
		columns: 2;
	}
}

.testo-due-colonne > p {
	break-inside: avoid;
	margin-block: 0 1.5rem;
}

.elenco-pilastri {
	margin-block: 0 1.5rem;
	padding-inline-start: 1.5rem;
}

.elenco-pilastri > li {
	margin-block-end: 0.5rem;
}

/*--------------------------------------------------------------
## Società — confronto delle viste satellitari
--------------------------------------------------------------*/
@media (min-width: 64rem) {

	.home-split--futuro .home-split__inner {
		column-gap: 5%;
		grid-template-columns: 46% 49%;
	}
}

/* Sfondo bianco invece della velatura di pagina (richiesta cliente,
   2026-09-28). `.section--tint` (layout/_grid.scss) e' condivisa con altre
   quattro fasce (Servizi, pagine generiche, Terminal, Polo Logistico): non
   si tocca li'. Qui la sovrascriviamo solo per questa sezione componendo le
   sue due classi sullo stesso elemento (gia' cosi' nel markup di
   societa/futuro.php), che ha la stessa specificita' di `.section--tint`
   piu' una classe: vince senza `!important`. Il colore del testo resta
   quello di `.section--tint` (nero): sopra il bianco il contrasto e' piu'
   alto che sopra la velatura, quindi non tocchiamo `color`. */
.home-split--futuro.section--tint {
	background-color: var(--c-white, #faf9f7);
}

.confronto__track {
	grid-auto-columns: 80%;
}

@media (min-width: 48rem) {

	.confronto__track {
		grid-auto-columns: calc((100% - 1.25rem) / 2);
	}
}

.confronto {
	margin: 0;
	position: relative;
}

/* Verticale come nel mockup: le foto storiche non condividono tutte le
   stesse proporzioni (dalle ortofoto piu' vecchie a quelle recenti), ma
   arrivano gia' ritagliate e centrate sull'area dell'Interporto dallo script
   di importazione (docs/acpt/importa-foto-aeree.php) — l'aspect-ratio qui
   e' solo cio' che tiene tutte le card del carosello alla stessa altezza,
   stesso object-fit: cover di .media-slider__image. */
.confronto__image {
	aspect-ratio: 2/3;
	block-size: auto;
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

/* Il pill dell'anno usa il grigio accessibile: bianco su $c-grey-500
   sarebbe 4.23:1, sotto la soglia per testo normale. */
.confronto__anno {
	background-color: var(--colore-superficie, var(--c-grey-700, #6e6e6e));
	border-radius: 62.4375rem;
	bottom: 1rem;
	color: var(--colore-testo, var(--c-white, #faf9f7));
	font-size: clamp(1.375rem, 1.85vw, 2rem);
	font-weight: 700;
	inset-inline-end: 1rem;
	padding: 0.25rem 0.75rem;
	position: absolute;
}

/*--------------------------------------------------------------
## Società — governance
--------------------------------------------------------------*/
.governance {
	display: grid;
	gap: 3rem;
}

@media (min-width: 64rem) {

	.governance {
		grid-template-columns: 32% 1fr;
	}
}

.donut {
	display: block;
	height: auto;
	max-width: 26rem;
	width: 100%;
}

/* Il colore del testo **non** sta qui: lo decide `inc/charts.php` pillola per
   pillola, bianco o nero secondo la luminanza del fondo. Una `fill` in CSS
   vincerebbe sull'attributo dell'SVG e rimetterebbe tutte le percentuali
   dello stesso colore, che e' il difetto da cui si e' partiti. */
.donut__valore {
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 26px;
	font-weight: 700;
}

.legenda {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.legenda__voce {
	align-items: center;
	display: flex;
	font-size: 0.875rem;
	gap: 0.75rem;
	margin-block-end: 0.5rem;
}

/* Un contorno appena accennato. La scala delle gradazioni e' larga di
   proposito (vedi `interporto_pordenone_declinazioni()`), quindi la piu'
   chiara stacca poco sul bianco: senza il contorno il pallino di quella
   fetta sarebbe quasi invisibile, e la legenda perderebbe una voce. */
.legenda__pallino {
	block-size: 0.875rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	flex: none;
	inline-size: 0.875rem;
}

.governance__organi {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 48rem) {

	.governance__organi {
		grid-template-columns: repeat(2, 1fr);
	}
}

.organo__titolo {
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
	font-weight: 700;
	margin-block: 0 0.75rem;
	text-transform: uppercase;
}

.organo__elenco {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}

@media (min-width: 48rem) {

	.organo__elenco {
		grid-template-columns: repeat(2, 1fr);
	}
}

.organo__voce > dt {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.organo__voce > dd {
	margin: 0;
	text-transform: uppercase;
}

.capitale {
	align-items: end;
	display: grid;
	gap: 2rem;
	margin-block-start: 4rem;
}

@media (min-width: 64rem) {

	.capitale {
		grid-template-columns: 1fr auto;
	}
}

.capitale__dati {
	display: grid;
	gap: 2rem;
	margin: 0;
}

@media (min-width: 48rem) {

	.capitale__dati {
		grid-template-columns: repeat(3, auto);
		justify-content: start;
	}
}

.capitale__voce > dt {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.capitale__voce > dd {
	margin: 0;
	text-transform: uppercase;
}

.capitale__azione {
	margin: 0;
}

/*--------------------------------------------------------------
## Polo Logistico — superfici, cartine, collegamenti
--------------------------------------------------------------*/

/* Titolo di sezione accentato: prende il colore della pagina invece di un
   rosso cablato. Lo usa "InRail" su Intermodale, che era `.text-accent` —
   cioe' rosso fisso: sarebbe rimasto rosso anche dopo che Intermodale e'
   passata al magenta, che e' esattamente la divergenza che questo lavoro
   toglie. Il ripiego resta il rosso, per non cambiare niente dove il colore
   non c'e'. */
.titolo-sezione--accento {
	color: var(--colore-titolo, #d10a11);
}

.titolo-sezione--minore {
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
}

/* Il titolo "Aree di espansione" piu' vicino al paragrafo che segue
   (richiesta del 2026-09-09): lo spazio della regola base ($sp-10, 40px) e'
   pensato per un titolo che apre una fascia, non per uno che sta a meta' di
   una colonna di testo continua. Scoping su `.espansione` e non sulla
   regola base, che serve anche a Terminal/InRail/Governance e li' non deve
   cambiare. */
.espansione .titolo-sezione--minore {
	margin-block-end: 1rem;
}

.section--stretta {
	padding-block-start: 0;
}

.superfici {
	display: grid;
	gap: 0.75rem 1.25rem;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {

	.superfici {
		gap: 2rem 1.25rem;
	}
}

@media (min-width: 64rem) {

	.superfici {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Nel mockup i riquadri delle superfici sono pieni del colore della pagina
   con il valore in bianco, non grigio chiarissimo su nero: misurati a
   `[857,288,1241,435]` con fill `#7B7B7B` e il testo bianco sopra. Sono
   l'equivalente, per il Polo Logistico, delle dotazioni del Terminal. */
.superficie {
	background-color: var(--colore-superficie, var(--c-grey-100, #f4f2ef));
	color: var(--colore-testo, var(--c-black, #1c1a18));
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: center;
	min-height: 9rem;
	padding-inline: 0.75rem;
	padding-block: 0.675rem;
}

@media (min-width: 48rem) {

	.superficie {
		padding: 1.5rem;
	}
}

.superficie__valore {
	font-size: clamp(1.375rem, 1.85vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
}

.superficie__etichetta {
	font-size: 0.875rem;
}

.superficie--totale {
	align-items: center;
	margin-block: 1.25rem 0;
	min-height: 0;
	text-align: center;
}

.superficie--totale .superficie__valore {
	text-transform: uppercase;
}

/* Le cartine non esistono ancora: il segnaposto dice che manca un
   contenuto invece di far finta che ci sia. */
.cartina {
	margin: 0 0 3rem;
}

.cartina__image {
	block-size: auto;
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
}

.cartina__segnaposto {
	align-items: center;
	aspect-ratio: 16/7;
	background-color: var(--c-grey-200, #dcd8d2);
	border-radius: 0.8125rem;
	color: var(--c-black, #1c1a18);
	display: flex;
	justify-content: center;
}

/* Nero, non $c-text-muted: quel grigio e' calibrato sul bianco e qui il
   fondo e' $c-bg-section, dove scenderebbe a 3.21:1. */
.cartina__attesa {
	color: var(--c-black, #1c1a18);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cartina__didascalia {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-block-start: 1rem;
	text-transform: uppercase;
}

/* Cartine inline (inc/cartine.php)
   ------------------------------------------------------------------

   Il disegno non ha piu' un fondo pieno (lo sfondo "mare" e' stato tolto dal
   file, non nascosto qui): sotto si vede la tinta della fascia, come per lo
   schema dei binari. Il filetto lo mette il CSS, cosi' segue il tema: nel file
   c'era una cornice grigia fissa, ed e' stata tolta per non averne due. */
.cartina__mappa {
	block-size: auto;
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
}

.cartina__mappa text {
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
}

/* Le tre cartine del Polo Logistico in un riquadro a tab (2026-09-23)
   ------------------------------------------------------------------

   Sotto i 1024px e' una colonna: tab, cartina, legenda (a scomparsa), fonte.
   Da 1024px in su tab e legenda vanno in una colonna a sinistra e la cartina
   prende il resto: a 1440px e' circa 975x690 e sta in uno schermo, mentre
   prima una cartina sola era alta 921px. L'ordine nel markup e' lo stesso
   nei due casi, cioe' e' anche l'ordine di lettura.

   La disposizione a colonna e' un mixin perche' serve due volte: a desktop,
   e nella vista a schermo intero di un telefono girato in orizzontale.

   La legenda scende anche nella riga della fonte: fra 1024 e 1280px quella
   dell'Europa (15 voci) e' piu' alta della cartina, e se finisse con la
   cartina spingerebbe la fonte in basso lasciando un buco sotto al disegno.
   La riga di mezzo e' `1fr` apposta: cartina e legenda la attraversano,
   quindi non gonfiano la riga dei tab. */
.cartina--tab {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: 0;
}

@media (min-width: 48rem) {

	.cartina--tab {
		margin-block-end: 3rem;
	}
}

@media (min-width: 64rem) {

	.cartina--tab {
		align-items: start;
		column-gap: 2rem;
		grid-template-areas: "tabs mappa" "legende mappa" "legende piede";
		grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		row-gap: 1.5rem;
	}

	.cartina--tab .tabs.cartina__tabs {
		flex-wrap: wrap;
		grid-area: tabs;
	}

	.cartina--tab .tabs.cartina__tabs .tabs__item {
		flex: none;
	}

	.cartina--tab .cartina__quadro {
		grid-area: mappa;
	}

	.cartina--tab .cartina__legende {
		grid-area: legende;
	}

	.cartina--tab .cartina__piede {
		grid-area: piede;
	}

	.cartina--tab .legenda--cartina {
		columns: auto;
	}
}

/* Come le frecce dei caroselli (`.carousel-nav[hidden]`, layout/_home.scss):
   il markup li consegna nascosti e li mostra js/tabs.js. Serve una regola
   apposta perche' `.tabs` dichiara `display: flex`, che vincerebbe sul
   `display: none` che il browser da' a `[hidden]`. */
.cartina__tabs[hidden] {
	display: none;
}

/* Da mobile le tre pillole stanno su una riga e si dividono lo spazio:
   "NORD-EST" e' la piu' lunga e a 360px ci sta ancora.

   Doppia classe perche' `.tabs` (components/_tabs.scss) arriva dopo questo
   file e con la stessa specificita' rimetterebbe `align-items: center`. */
.tabs.cartina__tabs {
	flex-wrap: nowrap;
	gap: 0.5rem;
}

.tabs.cartina__tabs .tabs__item {
	flex: 1 1 0;
	font-size: 0.875rem;
	justify-content: center;
	padding-block: 0.1875rem;
	padding-inline: 0.5rem;
}

/* A desktop le pillole sono piccole (richieste del 2026-09-23): prima la
   meta' di quelle di sempre, testo da 24 a 12px e altezza da 44 a 24px, poi
   il testo +20%, a 14,4px. Solo qui, dove si usano il mouse e il trackpad:
   24px e' il bersaglio minimo che le WCAG 2.2 chiedono (2.5.8). Da mobile
   restano a 44px, il minimo per un dito. */
@media (min-width: 64rem) {

	.tabs.cartina__tabs {
		gap: 0.5rem;
	}

	.tabs.cartina__tabs .tabs__item {
		font-size: 0.9rem;
		min-height: 1.5rem;
		padding-inline: 0.75rem;
	}

	/* Tab e chip del nome sulla stessa riga (richiesta del 2026-09-23): i tab
     scendono di quanto la chip sta dentro al riquadro — il suo margine
     ($sp-3) piu' il bordo di 1px — e la chip prende l'altezza dei tab.
     Cosi' combaciano sia i bordi sia il centro. Doppia classe sulla chip
     perche' la sua regola di base sta piu' in basso nel file e a parita'
     rimetterebbe padding e interlinea. */
	.tabs.cartina__tabs {
		margin-block-start: calc(0.75rem + 1px);
	}

	.cartina__pannello .cartina__nome {
		align-items: center;
		display: inline-flex;
		line-height: 1;
		min-block-size: 1.5rem;
		padding-block: 0;
	}
}

/* Il riquadro tiene le cartine e i comandi dello zoom. Bordo e raggio
   stanno qui e non sulla cartina: quando si ingrandisce e' il disegno che
   si muove dentro, il bordo deve restare fermo. */
.cartina__quadro {
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.8125rem;
	overflow: hidden;
	position: relative;
	touch-action: pan-y;
}

.cartina__quadro .cartina__mappa {
	border: 0;
	border-radius: 0;
}

.cartina__quadro .cartina__image {
	border-radius: 0;
}

.cartina__quadro--ingrandita {
	cursor: grab;
	user-select: none;
}

.cartina__quadro--trascina {
	cursor: grabbing;
}

/* Il focus del riquadro ingrandito sta dentro al bordo: fuori lo taglierebbe
   l'`overflow` del padre. */
.cartina__quadro:focus-visible {
	outline-offset: -3px;
}

/* Il nome della cartina: una chip in alto a sinistra sul disegno, testo
   normale (richieste del 2026-09-23: prima a destra, dove sulla Nord-Est
   copriva Tarvisio, poi a sinistra). Da mobile la cartina e' alta ~250px e
   una chip larga 300 ne coprirebbe tutta la fascia alta: li' sta sopra al
   disegno, dentro al riquadro. */
.cartina__pannello {
	display: flex;
	flex-direction: column;
}

/* Il `display` qui sopra vincerebbe sul `display: none` che il browser da'
   a `[hidden]`: senza questa regola si vedrebbero tutte e tre le cartine. */
.cartina__pannello[hidden] {
	display: none;
}

.cartina__nome {
	align-self: flex-start;
	background-color: var(--c-white, #faf9f7);
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 62.4375rem;
	color: var(--c-black, #1c1a18);
	font-size: 0.75rem;
	line-height: 1.3;
	margin: 0.5rem 0.5rem 0;
	order: -1;
	padding: 0.25rem 0.75rem;
	pointer-events: none;
}

@media (min-width: 48rem) {

	.cartina__nome {
		font-size: 0.875rem;
		inset-block-start: 0.75rem;
		inset-inline-start: 0.75rem;
		margin: 0;
		position: absolute;
	}
}

/* In basso a destra, l'angolo con meno segni in tutte e tre le cartine (il
   mare), e **in riga**: in colonna, sulla Nord-Est i bottoni coprivano
   l'etichetta di Trieste, che sta proprio sul bordo destro.

   Sotto i 768px non stanno sul disegno ma in una striscia sotto di lui,
   dentro la cornice (come la chip del nome sta sopra): quattro bottoni da
   44px sono larghi 200px, e su una cartina larga 350 coprivano Venezia,
   Mestre e il nome del mare. */
.cartina__zoom {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	padding: 0.5rem;
}

@media (min-width: 48rem) {

	.cartina__zoom {
		inset-block-end: 0.75rem;
		inset-inline-end: 0.75rem;
		padding: 0;
		position: absolute;
	}
}

@media (min-width: 64rem) {

	.cartina__zoom {
		inset-block-end: 1rem;
		inset-inline-end: 1rem;
	}
}

.cartina__zoom[hidden] {
	display: none;
}

/* Sulla cartina il bottone ha bisogno di un fondo: trasparente, come
   altrove, sparirebbe sui tracciati. Il fondo resta anche al passaggio, dove
   `.btn-icon` lo toglie; l'anello che si ispessisce resta quello di sempre. */
.cartina__zoom .btn-icon,
.cartina__zoom .btn-icon:hover,
.cartina__zoom .btn-icon:focus {
	background-color: var(--c-white, #faf9f7);
}

.cartina__zoom .btn-icon[disabled] {
	opacity: 1;
}

.cartina__zoom .btn-icon[disabled] .icon {
	opacity: 0.35;
}

/* Un pulsante spento non reagisce al passaggio: l'anello che si ispessisce
   prometterebbe un'azione che non c'e'. */
.cartina__zoom .btn-icon[disabled]:hover {
	border-color: var(--c-border, rgba(0, 0, 0, 0.12));
	border-width: 1px;
}

/* Il bottone della legenda serve solo sotto i 1024px: sopra la legenda sta
   nella colonna, sempre aperta. */
.cartina__legende-apri {
	align-items: center;
	background: none;
	border: 0;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	display: inline-flex;
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	gap: 0.5rem;
	letter-spacing: 0.04em;
	padding: 0;
	text-transform: uppercase;
}

@media (min-width: 64rem) {

	.cartina__legende-apri {
		display: none;
	}
}

.cartina__legende-apri[hidden] {
	display: none;
}

.cartina__legende-apri .icon {
	transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cartina__legende-apri[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.cartina__legende-corpo {
	padding-block-start: 0.5rem;
}

.cartina__legende--chiusa .cartina__legende-corpo {
	display: none;
}

@media (min-width: 64rem) {

	.cartina__legende--chiusa .cartina__legende-corpo {
		display: block;
	}
}

.cartina__piede .cartina__fonte {
	margin-block: 0 1rem;
}

/* Il riquadro non deve saltare fra il click sulla tab e l'arrivo della cartina
   scaricata: l'avviso tiene le stesse proporzioni del disegno che sostituisce
   (le tre cartine hanno quasi la stessa), cosi' i comandi restano fermi. */
.cartina__caricamento {
	align-items: center;
	aspect-ratio: 1600/1130;
	display: flex;
	justify-content: center;
	margin: 0;
}

.cartina__note {
	margin-block-start: 1.5rem;
}

/* Nero, non $c-text-muted, per la stessa ragione gia' scritta sopra
   `.cartina__attesa`: quel grigio e' calibrato sul bianco e qui il fondo e' la
   velatura della fascia, dove scende a 4.42:1 — misurato con axe. */
.cartina__fonte {
	color: var(--c-black, #1c1a18);
	font-size: 0.875rem;
	margin-block-start: 1rem;
}

/* I neutri del disegno: inchiostro, carta e filetti. Non seguono il colore
   della pagina — sono gli stessi token gia' tema-aware del resto del sito, e
   si ribaltano da soli nel tema scuro. Selettori sul valore letterale come
   per i binari, perche' qui la categoria non conta: conta che sia nero. */
.cartina__mappa [fill="#010303" i] {
	fill: var(--c-black, #1c1a18);
}

.cartina__mappa [stroke="#010303" i] {
	stroke: var(--c-black, #1c1a18);
}

.cartina__mappa [fill="white" i] {
	fill: var(--c-white, #faf9f7);
}

.cartina__mappa [stroke="#9d9d9b" i] {
	stroke: var(--c-border, rgba(0, 0, 0, 0.12));
}

/* Le campiture degli stati.

   Ogni regola porta due selettori perche' i due posti in cui la campitura si
   vede sono fatti diversi: sulla cartina e' un tracciato che il file consegna
   gia' col suo colore letterale, in legenda e' un rettangolo vuoto che ha solo
   la classe. Stanno insieme apposta — se fossero due regole potrebbero
   divergere, e il campione smetterebbe di dire il vero.

   Il selettore sull'esadecimale serve anche a prendere il riquadro delle Isole
   Canarie, che sulla cartina europea e' un inserto a parte con dentro la sua
   porzione di terra e non sta nel gruppo degli stati. */
.mappa-stati-ue rect,
.cartina__mappa [fill="#f6f6f6" i] {
	fill: var(--cartina-terra, var(--c-grey-100, #f4f2ef));
	stroke: var(--c-border, rgba(0, 0, 0, 0.12));
}

.mappa-paesi-terzi rect,
.cartina__mappa [fill="#e6e6e3" i] {
	fill: var(--cartina-terra-terzi, var(--c-grey-200, #dcd8d2));
	stroke: var(--c-border, rgba(0, 0, 0, 0.12));
}

/* Mare, laghi e il fondo dell'inserto delle Canarie: vuoti, cosi' si vede la
   tinta della fascia sotto. Lo sfondo grande del mare e' gia' stato tolto dal
   file; questi sono i pezzi d'acqua rimasti, che devono comportarsi uguale. */
.cartina__mappa [fill="#d0e6f6" i] {
	fill: none;
}

/* I nove corridoi della revisione 2024.

   **Una tinta per corridoio**, nove su nove: cosi' il colore basta da solo e
   non serve piu' distinguere i tracciati col trattino. Le tinte non sono
   gradini di una sola scala chiaro-scuro — a nove gradini due vicini restano a
   1.2-1.4:1 e si confondono — ma escono da tre assi (tinta, chiarezza,
   saturazione) e da tre materiali: verdi caldi, verdi freddi e neutri fino al
   quasi-nero. La tavola e i conti stanno in inc/colori.php, sopra a dove le
   tinte si calcolano; il cambio fra tema chiaro e scuro lo fa
   sass/utilities/_tema.scss, qui non si sa in che tema si e'.

   Al Mediterraneo va il verde caldo scuro — pieno, la tinta della pagina, non
   un grigio — e il tratto piu' grosso: e' il corridoio che passa di qui,
   quindi e' quello che deve saltare all'occhio per primo. */

/* categoria: (tinta, spessore, trattino) */

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--mediterraneo path,
.mappa-corridoio--mediterraneo line {
	stroke: var(--colore-mappa-8, #2c3909);
	stroke-dasharray: none;
	stroke-width: 7.5;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--mediterraneo [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-8, #2c3909);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--baltico-adriatico path,
.mappa-corridoio--baltico-adriatico line {
	stroke: var(--colore-mappa-9, #0d0d0c);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--baltico-adriatico [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-9, #0d0d0c);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--scandinavo-mediterraneo path,
.mappa-corridoio--scandinavo-mediterraneo line {
	stroke: var(--colore-mappa-2, #99b454);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--scandinavo-mediterraneo [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-2, #99b454);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--reno-danubio path,
.mappa-corridoio--reno-danubio line {
	stroke: var(--colore-mappa-6, #167528);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--reno-danubio [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-6, #167528);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--mare-del-nord-reno-mediterraneo path,
.mappa-corridoio--mare-del-nord-reno-mediterraneo line {
	stroke: var(--colore-mappa-3, #50ae62);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--mare-del-nord-reno-mediterraneo [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-3, #50ae62);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--balcani-occidentali-mediterraneo-orientale path,
.mappa-corridoio--balcani-occidentali-mediterraneo-orientale line {
	stroke: var(--colore-mappa-4, #8a8c84);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--balcani-occidentali-mediterraneo-orientale [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-4, #8a8c84);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--baltico-mar-nero-egeo path,
.mappa-corridoio--baltico-mar-nero-egeo line {
	stroke: var(--colore-mappa-7, #235366);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--baltico-mar-nero-egeo [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-7, #235366);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--atlantico path,
.mappa-corridoio--atlantico line {
	stroke: var(--colore-mappa-1, #b5b7ae);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--atlantico [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-1, #b5b7ae);
}

/* `line` e' il campione in legenda, `path` il tracciato sulla cartina:
   stessa regola per tutti e due, cosi' non possono divergere. */
.mappa-corridoio--mare-del-nord-baltico path,
.mappa-corridoio--mare-del-nord-baltico line {
	stroke: var(--colore-mappa-5, #648315);
	stroke-dasharray: none;
	stroke-width: 6;
}

/* `fill` su un selettore a parte, e solo dove il file aveva gia' un
   riempimento vero: le rotte hanno `fill="none"` per disegnare il solo
   tratto, e riempirle chiuderebbe ogni curva in una macchia. E' lo
   stesso inciampo gia' documentato per lo schema dei binari. */
.mappa-corridoio--mare-del-nord-baltico [fill]:not([fill="none" i]) {
	fill: var(--colore-mappa-5, #648315);
}

/* Le tratte marittime tengono tinta e spessore del loro corridoio e cambiano
   solo il trattino, che le dichiara marittime: va dopo il ciclo qui sopra
   perche' vince a parita' di specificita'. */
.mappa-marittimo path {
	stroke-dasharray: 2 11;
}

/* Le due cartine locali: Nord-Est e aree dell'Interporto
   ------------------------------------------------------------------

   Stessa scala di tinte dei corridoi, ma prese salteggiando i gradini: qui le
   categorie sono sei e non nove, quindi si possono tenere lontane fra loro
   invece di stare su gradini adiacenti.

   Le scelte sono legate fra le due cartine, perche' stanno nella stessa
   pagina: la **ferrovia** e' sempre la tinta piu' scura, la **strada** sempre
   il verde della pagina. Chi scende dalla cartina delle aree a quella del
   Nord-Est non deve reimparare il codice.

   Le tinte non sono quelle del cliente — rosso, giallo, verde, azzurro — ma
   l'ordine di importanza e' rimasto il suo: la primaria e' la piu' forte, le
   statali la piu' tenue.

   **`--sagoma` e `--filo` non sono sinonimi**: la prima colora il
   riempimento, la seconda il tratto, e tenerle separate evita l'inciampo gia'
   documentato per lo schema dei binari — una `fill` su un tracciato con
   `fill="none"` lo chiuderebbe in una macchia.

   Quale delle due serve dipende da come e' disegnata la cartina, e le due non
   sono disegnate uguale. Nella **Nord-Est ridisegnata** (18/09/2026) strade e
   ferrovie sono linee vere con un `stroke-width`, quindi tutte le sue
   categorie stanno fra i fili. Nelle **aree** sono ancora sagome piene, cioe'
   il contorno di una linea gia' espansa dal programma di disegno. I campioni
   di legenda sono `<rect>` pieni, quindi leggono le sagome anche per le
   categorie che sulla cartina sono fili: le due tavole qui sotto danno la
   stessa tinta allo stesso nome apposta, e prendendola dalla stessa
   `$tinta-mappa-N` non possono divergere.

   L'alta capacita' e l'alta velocita' **sono** la ferrovia primaria con un
   filetto colorato intorno, non una terza e una quarta tinta: sulla cartina
   sono due tracciati sovrapposti (l'anima rossa della primaria e la linea
   piu' larga della categoria), in legenda un rettangolo pieno col bordo
   colorato. Stessa cosa detta due volte. */

/* La classe sta sul tracciato (cartina) o sull'`<svg>` del campione
   (legenda): nel secondo caso il `<rect>` dentro eredita, perche' `fill` e
   `stroke` sono proprieta' ereditate. Una regola sola per tutti e due. */
.mappa-sagoma--ferrovia-primaria {
	fill: var(--colore-mappa-9, #0d0d0c);
}

.mappa-sagoma--ferrovia {
	fill: var(--colore-mappa-9, #0d0d0c);
}

.mappa-sagoma--ferrovia-secondaria {
	fill: var(--colore-mappa-7, #235366);
}

.mappa-sagoma--autostrada {
	fill: var(--colore-mappa-5, #648315);
}

.mappa-sagoma--strada {
	fill: var(--colore-mappa-5, #648315);
}

.mappa-sagoma--statale {
	fill: var(--colore-mappa-1, #b5b7ae);
}

.mappa-filo--alta-capacita {
	stroke: var(--colore-mappa-6, #167528);
}

.mappa-filo--alta-velocita {
	stroke: var(--colore-mappa-2, #99b454);
}

.mappa-filo--ferrovia-primaria {
	stroke: var(--colore-mappa-9, #0d0d0c);
}

.mappa-filo--ferrovia-secondaria {
	stroke: var(--colore-mappa-7, #235366);
}

.mappa-filo--ferrovia {
	stroke: var(--colore-mappa-9, #0d0d0c);
}

.mappa-filo--autostrada {
	stroke: var(--colore-mappa-5, #648315);
}

.mappa-filo--strada {
	stroke: var(--colore-mappa-5, #648315);
}

.mappa-filo--statale {
	stroke: var(--colore-mappa-1, #b5b7ae);
}

/* L'alta capacita' e l'alta velocita' sono due tracciati sovrapposti: quello
   largo che porta la tinta di categoria, e sopra la ferrovia primaria piu'
   stretta che lo lascia intravedere solo ai bordi (vedi il commento sopra
   `$cartina-sagome`). Il nero pieno della primaria pero' comprime il filetto
   colorato — si vede poco, soprattutto sui colori scuri. Qui lo si schiarisce
   a un grigio neutro, solo su questi due tracciati: la primaria "vera" (lo
   stesso tracciato quando non e' anche alta capacita'/velocita') resta nera.
   Il selettore prende il fratello successivo perche' nell'SVG il tracciato
   largo di categoria viene prima e quello stretto della primaria dopo, nello
   stesso `<g>` — verificato nei quattro file in images/pagine/. */
.mappa-filo--alta-capacita ~ .mappa-filo--ferrovia-primaria,
.mappa-filo--alta-velocita ~ .mappa-filo--ferrovia-primaria {
	stroke: var(--c-grey-500, #7b7b7b);
}

/* La legenda usa le due classi sullo stesso elemento — un'unica banda con
   riempimento (la primaria) e bordo (la categoria) — quindi qui serve il
   selettore composto invece del fratello, e solo il riempimento cambia: il
   bordo colorato deve restare quello della categoria, non diventare grigio
   anche lui. */
.mappa-sagoma--ferrovia-primaria.mappa-filo--alta-capacita,
.mappa-sagoma--ferrovia-primaria.mappa-filo--alta-velocita {
	fill: var(--c-grey-500, #7b7b7b);
}

/* Il collegamento tratteggiato verso la bretella: stessa tinta delle strade,
   com'e' nel disegno del cliente — il tratteggio, non il colore, dice che e'
   un'altra cosa. E' l'unica voce di queste due cartine il cui campione e' un
   tratto e non una banda, perche' sulla cartina e' davvero una linea con uno
   spessore. Il passo del trattino e' riscritto qui e non ereditato: il campione
   ha un sistema di coordinate tutto suo, dieci volte piu' piccolo. */
.legenda__campione--tratto.mappa-collegamento-previsto line {
	stroke-dasharray: 1 9;
	stroke-linecap: round;
	stroke-width: 6;
}

/* Il segno dell'Interporto resta a colori in tutte e quattro le cartine: e'
   il marchio, non una categoria. Il disco pero' non ha un contorno nel file,
   e nel tema scuro diventa scuro anche lui su una terra gia' scura: il
   filetto glielo mette il CSS, come alla cartina intera. */
.mappa-interporto__disco {
	stroke: var(--c-black, #1c1a18);
	stroke-width: 2;
}

/* Lo spessore e' in unita' del disegno, e i due disegni non stanno alla stessa
   scala: la cartina delle aree inquadra due chilometri invece di trecento, e
   sta in una colonna di testo invece che a tutta fascia, quindi li' due unita'
   sono mezzo pixel. Stesso filetto a vedersi, numero diverso. */
.espansione__cartina .mappa-interporto__disco {
	stroke-width: 4;
}

/* I segni che marcano il sedime dell'Interporto sulla cartina delle aree:
   l'insegna sotto al marchio e l'area indicata a Vallenoncello, rosse nel file
   del disegnatore. Dal 18/09/2026 portano loro il verde dell'Interporto,
   perche' sono la proprieta' vera; le due campiture larghe sotto — il sedime e
   la zona industriale — sono tornate al grigio della terraferma e sono uscite
   dalla legenda (vedi `interporto_pordenone_variabili_colore()`). */
.mappa-interporto__insegna {
	fill: var(--colore-mappa-interporto, #4d6410);
}

/* Legenda delle cartine
   ------------------------------------------------------------------

   Il campione non e' il pallino della ciambella: qui il colore da solo non
   basta (vedi sopra), quindi il campione e' un pezzo di tratto vero, con lo
   stesso spessore e lo stesso trattino della cartina.

   Lo stacco dalla cartina lo da' gia' `.cartina__note`, che tiene insieme
   legenda e fonte: senza l'azzeramento qui sotto si sommerebbe a quello di
   `.legenda`. */
.legenda--cartina {
	columns: 18rem auto;
	margin-block-start: 0;
}

.legenda--cartina .legenda__voce {
	break-inside: avoid;
}

.legenda__campione {
	block-size: 0.875rem;
	flex: none;
	inline-size: 3rem;
	overflow: visible;
}

/* Lo spessore del filetto vale solo qui: sulla cartina lo porta il file, nel
   sistema di coordinate del disegno, e li' 3 sarebbero invisibili. La tinta
   invece e' la stessa, e arriva dalla classe `mappa-filo--*` sull'`<svg>`. */
.legenda__campione--banda rect {
	stroke-width: 3;
}

/* Il campione dei segnaposti — il Porto della Nord-Est e l'Interporto delle
   aree. Il riempimento e' dichiarato qui e non lasciato all'ereditarieta'
   perche' il Porto sulla cartina non ha una classe propria: e' inchiostro e
   basta, come le pillole coi nomi delle citta'. */
.legenda__campione--insegna rect,
.legenda__campione--porto rect {
	fill: var(--c-black, #1c1a18);
}

/* L'Interporto invece la classe ce l'ha, ma la regola generica qui sopra e' un
   selettore piu' specifico della sua: va ripetuta insieme alla classe, se no
   il campione resterebbe nero mentre sulla cartina il segno e' verde. */
.legenda__campione--insegna.mappa-interporto__insegna rect {
	fill: var(--colore-mappa-interporto, #4d6410);
}

.legenda__campione--insegna .legenda__campione-centro,
.legenda__campione--porto .legenda__campione-centro {
	fill: var(--c-white, #faf9f7);
}

.legenda__campione--marittimo line {
	stroke: var(--c-grey-700, #6e6e6e);
	stroke-width: 5;
	stroke-dasharray: 2 11;
}

.legenda__campione--nodo circle {
	fill: var(--c-white, #faf9f7);
	stroke: var(--c-black, #1c1a18);
	stroke-width: 1.8;
}

.legenda__campione--nodo .legenda__campione-centro {
	fill: var(--c-black, #1c1a18);
	stroke: none;
}

/* `r` come proprieta' CSS (SVG 2): dove non e' supportata i due campioni
   dei nodi restano uguali e li distingue l'etichetta, che e' una perdita
   accettabile per una sfumatura del simbolo. */
.legenda__campione--nodo-minore circle {
	r: 3;
}

.modalita {
	display: grid;
	gap: 3rem;
	margin-block-start: 3rem;
}

@media (min-width: 64rem) {

	.modalita {
		column-gap: 4rem;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Gomma, ferro, mare, aria: erano quattro blocchi di testo appoggiati sul
   bianco, gli unici riquadri della pagina senza una superficie sotto. Adesso
   sono scatole velate come le altre tessere del sito. Il testo resta nero.

   Fase 10: sfondo e testo tema-aware, coppia coordinata —
   sass/utilities/_tema.scss ridefinisce `--colore-velo`. Il titolo
   (.modalita__titolo, sotto) legge `--colore-testo-piccolo`, calibrata
   sul bianco: nel tema scuro ha la sua correzione dedicata, sempre in
   sass/utilities/_tema.scss. */
.modalita__voce {
	background-color: var(--colore-velo, var(--c-grey-100, #f4f2ef));
	border-radius: 0.5rem;
	color: var(--c-black, #1c1a18);
	padding: 1.5rem;
}

.modalita__titolo {
	color: var(--colore-testo-piccolo, var(--c-black, #1c1a18));
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
	font-weight: 700;
	margin-block: 0 1rem;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
## Intermodale — dotazioni e schema dei binari
--------------------------------------------------------------*/

/* La dotazione tecnica ha un titolo suo, che sta nella colonna stretta
   accanto al testo: è quindi alla misura di un sottotitolo e non prende il
   filetto del titolo di sezione. */
.dotazioni__titolo {
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
	font-weight: 700;
	margin-block: 4rem 0.5rem;
	text-transform: uppercase;
}

/* Dal 2026-09-01 ogni riquadro porta il nome della voce e il dato, non più
   una frase sola: sono due righe dentro la stessa scatola, come nei riquadri
   delle superfici del Polo Logistico.

   E dalla stessa data non sono più incolonnati accanto al testo ma
   distesi su tutta la larghezza del contenuto, sotto il paragrafo. Le
   voci sono sette: a quattro per riga l'ultima resta sola, ed è il motivo
   per cui i riquadri non hanno un'altezza minima — si adattano al testo
   che portano, che qui va da "158.000 m²" a due righe e mezza. */
.dotazioni {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {

	.dotazioni {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {

	.dotazioni {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Prende il colore della pagina. Il ripiego resta il rosso di prima, così
   senza custom property la fascia è identica a com'era — anche se il colore
   assegnato a Intermodale non è più il rosso ma il magenta. */
.dotazione {
	background-color: var(--colore-superficie, #d10a11);
	border-radius: 0.5rem;
	color: var(--colore-testo, var(--c-white, #faf9f7));
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.5rem;
}

.dotazione__etichetta {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dotazione__valore {
	font-weight: 700;
}

.intermodale__foto {
	block-size: auto;
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
	margin-block-start: 4rem;
}

/* Le etichette dello schema sono testo dentro l'SVG/l'immagine, alla stessa
   scala del disegno (a differenza della legenda della ciambella di
   governance, che e' HTML vero e si reimpagina da sola): sotto tablet il
   riquadro scala a meno di un terzo e il testo diventa illeggibile.
   Nascosto tutto il <figure>, didascalia compresa — niente da mostrare
   senza il disegno — non solo l'immagine: la richiesta del 2026-09-11 era
   di nascondere anche quella. Le stesse informazioni restano leggibili
   nei riquadri di Dotazione tecnica sopra, quindi non si perde contenuto,
   solo la vista planimetrica. */
.schema {
	display: none;
	margin: 4rem 0 0;
}

@media (min-width: 48rem) {

	.schema {
		display: block;
	}
}

/* Il disegno dei binari e' un'immagine caricata dal cliente: si adatta
   alla colonna e non ha un formato imposto, perche' e' un disegno tecnico
   e ritagliarlo lo renderebbe illeggibile. */
.schema__immagine {
	block-size: auto;
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
}

/* Ripiego quando l'ACPT e' vuoto: lo stesso disegno, ma SVG inline
   (inc/rail-diagram.php) invece di un'immagine caricata, cosi' si puo'
   ricolorare qui sotto. A differenza di un <img>, un <svg> inlineato non
   segue da solo il contenitore: stessa larghezza di .schema__immagine. */
.schema__binari {
	block-size: auto;
	display: block;
	inline-size: 100%;
}

/* Rosso e viola dell'originale sono identita' di pagina (impianti "attivi",
   l'edificio dell'officina), non brand fisso: seguono --colore-pagina come
   il resto di Intermodale (inc/colori.php). Ripiego al magenta di questa
   pagina (INTERPORTO_PORDENONE_COLORI) e non a un generico: questo schema
   compare solo su Intermodale.

   `fill` e `stroke` restano su selettori separati apposta: molti gruppi del
   file (es. `<g fill="none" stroke="#FF0000">`) hanno `fill="none"` per
   disegnare solo il tratto delle polyline, non un'area piena. Un'unica
   regola che rispondesse sia a `[fill=...]` sia a `[stroke=...]` — anche
   scrivendo solo `stroke:` al suo interno — avrebbe comunque *selezionato*
   quei gruppi e, per ereditarieta', bastava scrivere anche `fill:` nella
   stessa regola per forzarlo su tutti: e' quello che succedeva nella prima
   versione, con ogni polyline richiusa e riempita di nero, quasi tutto il
   riquadro coperto. Qui `fill:` scatta solo dove il file aveva gia' un
   `fill` letterale da sostituire, `stroke:` solo dove aveva uno `stroke`. */
.schema__binari [fill="#FF0000" i],
.schema__binari [fill="#800080" i] {
	fill: var(--colore-pagina, #e0007b);
}

.schema__binari [stroke="#FF0000" i],
.schema__binari [stroke="#800080" i] {
	stroke: var(--colore-pagina, #e0007b);
}

/* Nero e' invece neutro, non identita': $c-black e' gia' theme-aware
   (sass/utilities/_tema.scss ridefinisce la custom property sotto
   [data-a11y-tema="dark"] e prefers-color-scheme), quindi una sola regola
   per chiaro e scuro basta qui, senza ripetere la selettoria di quel file.
   Il disegno non ha piu' un proprio sfondo pieno ne' una cornice (tolti
   dal file, non solo nascosti in CSS: erano solo i due <rect> "sfondo" e
   "cornice" del file originale — richiesta del 2026-09-11, il riquadro
   deve mostrare la tinta della sezione sotto, non un foglio bianco). */
.schema__binari [fill="#000000" i] {
	fill: var(--c-black, #1c1a18);
}

.schema__binari [stroke="#000000" i] {
	stroke: var(--c-black, #1c1a18);
}

.schema__didascalia {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-block-start: 1rem;
	text-transform: uppercase;
}

.sottosezione__titolo {
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
	font-weight: 700;
	margin-block: 2.5rem 0.5rem;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
## Elenchi filtrabili (Appalti, News)
--------------------------------------------------------------*/
.tabs-barra {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-block-end: 2.5rem;
}

.tabs-barra__extra {
	flex: none;
}

/* Avviso con rimando a un portale esterno (pagina Appalti: dal 2026 gli
   appalti stanno su Trasparenza). Sfondo e testo dai token del tema, cosi'
   regge chiaro e scuro. */
.avviso-portale {
	background-color: var(--c-grey-100, #f4f2ef);
	border-radius: 0.875rem;
	display: grid;
	gap: 1rem;
	justify-items: start;
	margin-block-end: 2.5rem;
	padding: 1.5rem;
}

.avviso-portale__titolo,
.avviso-portale__testo {
	margin: 0;
}

.elenco-vuoto {
	color: var(--c-grey-700, #6e6e6e);
}

/* Impaginazione: i numeri sono link, quello corrente no. Serve area
   sufficiente al dito, non solo al puntatore. */
.page-numbers {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding-inline: 0.75rem;
	text-decoration: none;
}

a.page-numbers:hover,
a.page-numbers:focus {
	background-color: var(--colore-velo-forte, var(--c-grey-200, #dcd8d2));
	border-radius: 62.4375rem;
}

/* La regola sopra non tocca `color`, quindi al passaggio vince il rosso di
   ripiego di `a:hover` (sass/base/_links.scss) — nella paginazione di
   Appalti e News legge come un errore, non come un link. Richiesta del
   2026-09-11: testo nero anche al passaggio. Scoped alle due pagine (classi
   `body.page-template-...`, stessa convenzione gia' usata per "Pagina
   legale" piu' sopra in questo file) e non a `.page-numbers` in generale:
   la stessa impaginazione nella Ricerca (search.php) non e' nella richiesta
   e resta com'era. */
body.page-template-page-templatesappalti-php a.page-numbers:hover,
body.page-template-page-templatesappalti-php a.page-numbers:focus,
body.page-template-page-templatesnews-php a.page-numbers:hover,
body.page-template-page-templatesnews-php a.page-numbers:focus {
	color: var(--c-black, #1c1a18);
}

.page-numbers.current {
	background-color: var(--colore-superficie, var(--c-black, #1c1a18));
	border-radius: 62.4375rem;
	color: var(--colore-testo, var(--c-white, #faf9f7));
	font-weight: 700;
}

.pagination,
nav.navigation.pagination {
	margin-block-start: 3rem;
}

/*--------------------------------------------------------------
## Pagine senza mockup (Sostenibilita', Operatori, informative)
--------------------------------------------------------------*/

/* Segnaposto dichiarato: si vede che il contenuto manca invece di
   riempire il buco con testo inventato. Stesso principio — e stessi
   colori — del segnaposto delle cartine qui sopra: fondo $c-bg-section
   con testo nero, 14.9:1. Il grigio del testo secondario su questo fondo
   scenderebbe a 3.21:1. */
.segnaposto {
	background-color: var(--c-grey-200, #dcd8d2);
	border-radius: 0.5rem;
	max-width: 70ch;
	padding: 1.5rem;
}

.segnaposto__etichetta {
	color: var(--c-black, #1c1a18);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-block: 0 0.5rem;
	text-transform: uppercase;
}

.segnaposto__testo {
	color: var(--c-black, #1c1a18);
	margin: 0;
}

/* Informative privacy e cookie: una colonna sola, misura di lettura
   corta. Sono testi lunghi che si leggono davvero, non si scorrono. */
.pagina-legale {
	max-width: 70ch;
}

.pagina-legale__titolo {
	font-size: clamp(1.875rem, 2.6vw, 2.8125rem);
	font-weight: 700;
	line-height: 1.1;
	margin-block: 0 2.5rem;
	text-transform: uppercase;
}

.pagina-legale__corpo h2 {
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
	margin-block: 2.5rem 1rem;
	text-transform: uppercase;
}

.pagina-legale__corpo h3 {
	font-size: clamp(1.0625rem, 1.27vw, 1.375rem);
	margin-block: 2rem 0.75rem;
}

.pagina-legale__data {
	border-top: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	color: var(--c-grey-700, #6e6e6e);
	font-size: 0.875rem;
	margin-block-start: 3rem;
	padding-block-start: 1rem;
}

/*--------------------------------------------------------------
## Contatti
--------------------------------------------------------------*/

/* Dati della sede a sinistra, mappa a destra, come nel mockup. Sotto il
   desktop si impilano: la mappa sopra il testo perderebbe il filo del
   discorso, quindi resta sotto. */
.contatti {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 64rem) {

	.contatti {
		align-items: start;
		column-gap: 4rem;
		grid-template-columns: 1fr 1fr;
	}
}

/* Il ritmo verticale lo detta il contenitore. I figli azzerano solo il
   margine di sotto: se azzerassero anche quello di sopra vincerebbero
   loro — stessa specificita', ma scritti dopo — e il ritmo sparirebbe.
   E' successo, e si vedeva. */
.contatti__sede > * + * {
	margin-block-start: 1.5rem;
}

.contatti__indirizzo {
	font-style: normal;
	line-height: 1.5;
	margin-block: 0;
}

.contatti__indirizzo strong {
	font-weight: 700;
}

.contatti__recapiti {
	display: grid;
	gap: 0.5rem;
	margin-block-end: 0;
}

/* Etichetta e valore sulla stessa riga, come "Telefono: +39 …" del
   mockup, ma restano <dt>/<dd>: e' una coppia nome-valore, e la
   semantica e' cio' che la fa leggere giusta a chi non vede la riga. */
.contatti__recapito {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.contatti__recapito > dt {
	font-weight: 700;
}

.contatti__recapito > dt::after {
	content: ":";
}

.contatti__recapito > dd {
	margin: 0;
}

.contatti__nota {
	color: var(--c-black, #1c1a18);
	margin-block-end: 0;
	max-width: 60ch;
}

.contatti__mappa {
	margin: 0;
}

.contatti__mappa figcaption {
	margin-block-start: 1rem;
}

.referenti {
	margin-block-end: 5rem;
	margin-block-start: 5rem;
}

.ufficio + .ufficio {
	border-top: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	margin-block-start: 2.5rem;
	padding-block-start: 2.5rem;
}

.ufficio__titolo {
	font-size: clamp(1.25rem, 1.39vw, 1.5rem);
	font-weight: 700;
	margin-block: 0 0.75rem;
	text-transform: uppercase;
}

/* Stesso grigio del titolo principale, stessa richiesta del 2026-09-28 di
   .titolo-sezione qui sopra: .ufficio__titolo compare solo su Contatti,
   quindi qui il selettore scoped e' una precauzione per coerenza col resto
   del file, non una necessita' — se un domani la classe arrivasse altrove
   non erediterebbe questo colore senza volerlo. */
body.page-template-page-templatescontatti-php .ufficio__titolo {
	color: var(--colore-titolo, var(--c-grey-500, #7b7b7b));
}

.ufficio__elenco {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {

	.ufficio__elenco {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {

	.ufficio__elenco {
		grid-template-columns: repeat(3, 1fr);
	}
}

.referente {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.referente__ruolo {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.referente__nome {
	font-weight: 700;
}

/* Gli indirizzi sono lunghi e non hanno spazi: senza questo, su schermi
   stretti escono dal contenitore. `inline` e non `inline-flex`: un flex
   container non lascerebbe piu' andare a capo il testo dentro, che e'
   proprio quello che questa regola vuole permettere. L'icona (davanti
   all'email normale, non alla PEC, che dal 2026-09-28 non e' piu' un link)
   resta quindi un elemento inline allineato via vertical-align. */
.referente__email {
	overflow-wrap: anywhere;
}

.referente__email .icon {
	margin-inline-end: 0.25rem;
	vertical-align: -3px;
}

.referente__etichetta {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-inline-end: 0.25rem;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
## Contenuti singoli, ricerca, 404
--------------------------------------------------------------*/

/* Un contenuto singolo si legge: colonna corta, non tutta la larghezza
   del contenitore. */
.singolo {
	max-width: 70ch;
}

.singolo__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1rem;
}

/* Stesso principio di .card__meta (sass/components/_cards.scss): il badge
   "IT" va ancorato a sinistra, il resto del meta (stato/categoria, fonte,
   data) resta raggruppato a destra invece di restare incollato subito
   dopo. */
.singolo__meta .badge--lingua {
	margin-inline-end: auto;
}

.singolo__titolo {
	font-size: clamp(1.875rem, 2.6vw, 2.8125rem);
	margin-block: 0 2.5rem;
}

.singolo__logo {
	block-size: auto;
	inline-size: auto;
	margin-block-end: 1.5rem;
	max-block-size: 6rem;
	max-inline-size: 100%;
	object-fit: contain;
}

.singolo__immagine {
	block-size: auto;
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
	margin-block-end: 2rem;
}

.singolo__azione {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-start: 2.5rem;
}

/* Coppie etichetta/valore di un bando. Su schermi larghi l'etichetta sta
   a sinistra, su quelli stretti sopra: incolonnare due colonne strette
   spezzerebbe ogni valore su troppe righe. */
.dati {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}

.dati__voce > dt {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dati__voce > dd {
	margin: 0.25rem 0 0;
}

@media (min-width: 48rem) {

	.dati__voce {
		display: grid;
		gap: 1.5rem;
		grid-template-columns: 14rem 1fr;
	}

	.dati__voce > dd {
		margin: 0;
	}
}

/* La documentazione di un bando. Era un bottone solo finche' il campo
   allegato ne teneva uno; con i 436 appalti del vecchio sito un avviso ne
   porta fino a quattordici, e quattordici bottoni non sono un elenco. */
.documenti {
	margin-block-start: 2.5rem;
}

.documenti__titolo {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-block: 0 0.75rem;
	text-transform: uppercase;
}

.documenti__elenco {
	list-style: none;
	margin: 0;
	padding: 0;
}

.documenti__voce {
	border-block-start: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
}

.documenti__voce:last-child {
	border-block-end: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
}

/* L'icona non si stringe e il nome del file va a capo: certi nomi sono
   lunghi quanto una frase, e troncarli nasconde proprio la parte che
   distingue un verbale dall'altro. */
.documenti__link {
	align-items: baseline;
	color: inherit;
	display: flex;
	gap: 0.75rem;
	padding-block: 0.75rem;
	text-decoration: none;
}

.documenti__link:hover .documenti__nome,
.documenti__link:focus-visible .documenti__nome {
	text-decoration: underline;
}

.documenti__icona {
	flex: 0 0 auto;
	line-height: 0;
	transform: translateY(0.25rem);
}

.documenti__nome {
	overflow-wrap: anywhere;
}

.documenti__peso {
	color: var(--c-grey-700, #6e6e6e);
	flex: 0 0 auto;
	font-size: 0.875rem;
	margin-inline-start: auto;
}

.ritorno {
	margin-block-start: 3rem;
}

.risultati {
	display: grid;
	gap: 2rem;
	list-style: none;
	margin: 0;
	max-width: 70ch;
	padding: 0;
}

.risultato__titolo {
	font-size: clamp(1.0625rem, 1.27vw, 1.375rem);
	margin: 0 0 0.5rem;
}

.risultato__estratto {
	margin: 0;
	text-transform: none;
}

/*--------------------------------------------------------------
# Colonna di destra dell'introduzione con un blocco al posto della foto
--------------------------------------------------------------*/

/* Servizi e Polo Logistico non hanno una fotografia accanto
   all'introduzione: hanno un contenuto. Centrarlo verticalmente lo
   farebbe galleggiare a mezza altezza accanto a un testo molto più lungo,
   quindi qui le due colonne partono dall'alto. E i riquadri delle
   superfici, quando stanno nella colonna invece che nella fascia a tutta
   pagina, restano su due colonne anche da desktop: la colonna è metà
   pagina, e le quattro della fascia non ci starebbero. */
@media (min-width: 64rem) {

	.pagina-intro__inner--lato {
		align-items: start;
	}

	.pagina-intro__media .superfici {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Servizi (2026-09-27) e Aziende insediate (2026-09-30, richiesta del
   cliente: stesso punto di partenza e stessa larghezza delle ancore di
   Servizi): le pastiglie vanno su piu' righe da desktop e il loro bordo
   sinistro deve combaciare con quello di `.home-split__body` della prima
   `.servizio`/`.settore` subito sotto. Le due colonne di
   `.pagina-intro__inner` sono 44%/50% (regola sopra, righe 72-81):
   scambiandole si ottiene lo stesso punto di partenza (50% + 6.4% di gap =
   56.4%) usato da `.home-split__inner` nella riga non invertita — e in piu'
   la colonna si restringe da ~49.6% a ~43.6%, il che aiuta le pastiglie ad
   andare a capo prima. Scoperto per classe body e non su
   `.pagina-intro__inner--lato` da sola, perche' quella classe la
   condivide anche Polo Logistico, che non deve muoversi: la sua colonna
   `lato` porta le superfici di espansione, non le ancore. */
@media (min-width: 64rem) {

	body.page-template-page-templatesservizi-php .pagina-intro__inner--lato,
	body.page-template-page-templatesaziende-insediate-php .pagina-intro__inner--lato {
		grid-template-columns: 50% minmax(0, 33rem);
	}
}

/* La mappa in coda alle aree di espansione, nelle due forme che puo' avere:
   la cartina inline del tema (di norma) o lo slider, se un redattore carica
   un'immagine. Stesso stacco dal testo per tutte e due. */
.espansione__media,
.espansione__cartina {
	margin-block-start: 1rem;
}

@media (min-width: 48rem) {

	.espansione__media,
	.espansione__cartina {
		margin-block-start: 2.5rem;
	}
}

/* `.cartina` porta un margine sotto che serve fra una figura e l'altra nella
   fascia delle cartine; qui la figura e' l'ultima cosa della colonna di testo
   e quel margine si sommerebbe a quello della sezione. */
.espansione__cartina {
	margin-block-end: 0;
}

/*--------------------------------------------------------------
# Contatti — la mappa incorporata
--------------------------------------------------------------*/

/* L'iframe di Google arriva con width/height fissi (600x450): servono
   perché il browser sappia che spazio riservare prima che il frame
   carichi, ma il riquadro deve poi adattarsi alla colonna. Il rapporto
   è quello dei due attributi, così la sostituzione non fa saltare la
   pagina. */
.contatti__embed {
	aspect-ratio: 4/3;
	border-radius: 0.8125rem;
	overflow: hidden;
}

.contatti__embed iframe {
	block-size: 100%;
	border: 0;
	display: block;
	inline-size: 100%;
}

/*--------------------------------------------------------------
# Servizi — bersaglio delle ancore
--------------------------------------------------------------*/

/* La testata è `position: sticky`: senza questo margine, chi clicca una
   delle ancore in cima alla pagina si ritrova il titolo del servizio
   nascosto sotto la testata invece che appena sotto di essa. */
.servizio {
	scroll-margin-block-start: calc(5.175rem + 1rem);
}

@media (min-width: 64rem) {

	.servizio {
		scroll-margin-block-start: calc(7rem + 1rem);
	}
}

/* Logo che chiude il testo di una sezione (Dogana, Centro logistico), ridotto
   due volte del 15% (6rem/0.75rem -> 4.335rem/0.5419rem). Sta
   su una piastra bianca fissa, come `.insediato__logo`: i loghi sono
   scuri su trasparente e nel tema scuro sparirebbero sul canvas. */
.servizio__logo {
	background-color: #fff;
	block-size: auto;
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.8125rem;
	display: block;
	inline-size: auto;
	margin-block-start: 1rem;
	max-block-size: 4.335rem;
	max-inline-size: 100%;
	padding: 0.5419rem;
}

/*--------------------------------------------------------------
# Affitti e locazione
--------------------------------------------------------------*/

/* La planimetria interattiva e l'elenco delle aree (2026-10-01)
   ------------------------------------------------------------------

   I colori sono custom property sul contenitore della planimetria.

   **Tutto sul viola della pagina** (richiesta del 2026-10-01, al posto di
   verde/ambra/grigio): i gradini si ricavano da `--colore-pagina` mescolato
   con bianco o nero, cosi' se un giorno la pagina cambia colore la
   planimetria la segue. Il ripiego dentro `var()` e' esplicito: senza, una
   `--colore-pagina` mancante renderebbe invalido tutto il `color-mix()`.

   - disponibile: il viola pieno (al buio schiarito, perche' il pieno su
     #1a1917 sta a 2:1);
   - non disponibile: grigio, non viola tenue, che si leggerebbe come
     "disponibile ma meno";
   - fabbricati di proprieta': retino viola scuro (chiaro al buio), sottile;
   - selezione: contorno nero (bianco al buio) con un alone del fondo, non
     viola su viola.

   Il prato e' un grigio molto chiaro e non piu' verde: il verde competeva con
   le aree, e cosi' l'unico colore della planimetria e' il viola.

   Il colore dello stato non e' mai l'unica informazione: in legenda e in
   ogni voce dell'elenco c'e' sempre l'etichetta scritta. */
.affitti-pianta {
	--affitti-viola: var(--colore-pagina, #821f81);
	--affitti-disponibile: var(--affitti-viola);
	--affitti-non-disponibile: #7b7b7b;
	--affitti-retino: color-mix(in srgb, var(--affitti-viola) 70%, #000);
	--affitti-prato: color-mix(in srgb, var(--c-grey-200, #dcd8d2) 45%, var(--c-white, #faf9f7));
	--affitti-scelta: var(--c-black, #1c1a18);
	--affitti-opacita-disponibile: 0.5;
}

html[data-a11y-tema="dark"] .affitti-pianta {
	--affitti-disponibile: color-mix(in srgb, var(--affitti-viola) 60%, #fff);
	--affitti-opacita-disponibile: 0.7;
	--affitti-non-disponibile: #9a9a9a;
	--affitti-retino: color-mix(in srgb, var(--affitti-viola) 75%, #fff);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .affitti-pianta {
		--affitti-disponibile: color-mix(in srgb, var(--affitti-viola) 60%, #fff);
		--affitti-opacita-disponibile: 0.7;
		--affitti-non-disponibile: #9a9a9a;
		--affitti-retino: color-mix(in srgb, var(--affitti-viola) 75%, #fff);
	}
}

/* Il titolo della fascia non e' piu' seguito da un sottotitolo: lo spazio
   sotto lo da' lui, prima dei tab. */
.affitti-aree .titolo-sezione {
	margin-block-end: 1.5rem;
}

/* Una colonna da mobile: planimetria, legenda, elenco. Da 1024px la
   planimetria sta a sinistra e resta ferma mentre si scorre l'elenco, che
   con una voce aperta (gli uffici del civ. 180) e' piu' alto di lei. */
.affitti-pianta {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {

	.affitti-pianta {
		align-items: start;
		gap: 2.5rem;
		grid-template-columns: minmax(0, 3fr) minmax(19rem, 2fr);
	}
}

/* I due tab (Affitto / Acquisto) stanno sopra a tutte e due le colonne. */
.affitti-pianta__modalita {
	grid-column: 1/-1;
}

.affitti-pianta__modalita[hidden] {
	display: none;
}

.affitti-pianta__figura {
	margin: 0;
}

@media (min-width: 64rem) {

	.affitti-pianta__figura {
		inset-block-start: calc(4.9rem + 1rem);
		position: sticky;
	}
}

/* La planimetria e' un disegno CAD: le linee sono hairline in unita' del
   disegno (0,12-0,72 punti) e a 375px sparirebbero. `non-scaling-stroke`
   le tiene allo spessore scritto qui, in px dello schermo, a qualunque
   larghezza e a qualunque ingrandimento. */
.planimetria-affitti {
	background-color: var(--c-white, #faf9f7);
}

.planimetria-affitti path {
	vector-effect: non-scaling-stroke;
}

.planimetria-affitti .pianta-contesto {
	opacity: 0.55;
	stroke: var(--c-grey-500, #7b7b7b);
	stroke-width: 0.5px;
}

.planimetria-affitti .pianta-verde {
	fill: var(--affitti-prato);
}

.planimetria-affitti .pianta-ferrovia {
	stroke: var(--c-grey-500, #7b7b7b);
	stroke-width: 0.6px;
}

.planimetria-affitti .pianta-rilievo {
	stroke: var(--c-black, #1c1a18);
	stroke-width: 0.6px;
}

.planimetria-affitti .pianta-rilievo-fine,
.planimetria-affitti .pianta-dettaglio {
	stroke: var(--c-grey-500, #7b7b7b);
	stroke-width: 0.4px;
}

.planimetria-affitti .pianta-fabbricato--proprieta {
	stroke: var(--affitti-retino);
	stroke-width: 0.8px;
}

.planimetria-affitti .pianta-fabbricato--altri {
	stroke: var(--c-grey-500, #7b7b7b);
	stroke-width: 0.6px;
}

/* I retini sono la legenda del PDF del cliente: viola per i fabbricati di
   proprieta', grigio per gli altri. Stessa classe sui campioni
   della legenda, cosi' non possono dire cose diverse. */
.pianta-retino--proprieta {
	fill: none;
	stroke: var(--affitti-retino);
	stroke-width: 0.5px;
}

.pianta-retino--altri {
	fill: none;
	stroke: var(--c-grey-500, #7b7b7b);
	stroke-width: 0.5px;
}

/* Le etichette: piccole a vista intera, leggibili ingrandendo. Da mobile a
   vista intera sarebbero alte 3px, cioe' sporco: compaiono solo ingrandendo.
   L'alone del colore del fondo le stacca dalle linee che attraversano. */
.planimetria-affitti .pianta-etichette {
	fill: var(--c-black, #1c1a18);
	paint-order: stroke;
	pointer-events: none;
	stroke: var(--c-white, #faf9f7);
	stroke-linejoin: round;
	stroke-width: 2;
	text-rendering: geometricprecision;
}

@media (max-width: 47.9375rem) {

	.planimetria-affitti .pianta-etichette {
		display: none;
	}
}

.cartina__quadro--ingrandita .planimetria-affitti .pianta-etichette {
	display: inline;
}

/* Le aree. Riempimento velato per vedere il disegno sotto, filo pieno per
   il bordo. Le classi di stato le scrive gia' inc/cartine.php, quindi i
   colori ci sono anche senza JavaScript. */
.pianta-area {
	fill-opacity: 0.5;
	stroke-width: 1.5px;
	transition: fill-opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pianta-area--disponibile {
	fill: var(--affitti-disponibile);
	fill-opacity: var(--affitti-opacita-disponibile);
	stroke: var(--affitti-disponibile);
}

.pianta-area--non-disponibile {
	fill: var(--affitti-non-disponibile);
	fill-opacity: 0.25;
	stroke: var(--affitti-non-disponibile);
}

.pianta-area--spenta {
	display: none;
}

.affitti-pianta--attiva .planimetria-affitti .pianta-area--fuori {
	cursor: default;
	pointer-events: none;
}

.affitti-elenco__voce[hidden] {
	display: none;
}

.affitti-pianta--attiva .planimetria-affitti .pianta-area {
	cursor: pointer;
}

.affitti-pianta--attiva .planimetria-affitti .pianta-area:hover {
	fill-opacity: 0.6;
}

.planimetria-affitti .pianta-area--scelta,
.planimetria-affitti .pianta-area--scelta:hover {
	filter: drop-shadow(0 0 1.5px var(--c-white, #faf9f7)) drop-shadow(0 0 1.5px var(--c-white, #faf9f7));
	stroke: var(--affitti-scelta);
	stroke-width: 3px;
}

/* La legenda: campioni disegnati con le stesse classi della planimetria. */
.affitti-pianta__legenda {
	margin-block-start: 1rem;
}

.affitti-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.affitti-legenda__voce {
	align-items: center;
	display: flex;
	font-size: 0.875rem;
	gap: 0.5rem;
}

.affitti-legenda__campione {
	block-size: 1rem;
	flex: 0 0 auto;
	inline-size: 1.5rem;
}

.affitti-legenda__campione path,
.affitti-legenda__campione rect {
	vector-effect: non-scaling-stroke;
}

.affitti-legenda__campione .pianta-retino--proprieta,
.affitti-legenda__campione .pianta-retino--altri {
	stroke-width: 1px;
}

.affitti-legenda__fondo {
	fill: none;
	stroke: var(--c-border, rgba(0, 0, 0, 0.12));
	stroke-width: 1px;
}

/* Solo su EN e DE: l'avviso che l'elenco e' in italiano. Una sigla a pillola
   e una riga di testo nella lingua della pagina, sopra l'elenco. */
.affitti-elenco__lingua {
	align-items: center;
	display: flex;
	font-size: 0.875rem;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.affitti-elenco__lingua-sigla {
	border: 1px solid currentcolor;
	border-radius: 62.4375rem;
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.25rem 0.5rem;
}

/* L'elenco: una lista di voci che si aprono. Senza JavaScript il bottone
   resta nascosto, il nome e' testo e il dettaglio e' aperto. */
.affitti-elenco {
	border-block-start: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	list-style: none;
	margin: 0;
	padding: 0;
}

.affitti-elenco__voce {
	border-block-end: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	padding-inline: 0.75rem;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.affitti-elenco__voce--scelta {
	background-color: var(--colore-velo, var(--c-grey-100, #f4f2ef));
}

.affitti-elenco__nome {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.affitti-elenco__testo-nome {
	display: block;
	padding-block: 0.75rem 0.25rem;
}

.affitti-pianta--attiva .affitti-elenco__testo-nome {
	display: none;
}

/* Pallino, nome, stato, freccia. Da mobile lo stato va sotto il nome: in
   riga, "Centro Direzionale – Palazzo di Vetro" andava a capo quattro volte. */
.affitti-elenco__bottone {
	align-items: center;
	background: none;
	border: 0;
	color: var(--c-black, #1c1a18);
	column-gap: 0.75rem;
	cursor: pointer;
	display: grid;
	font: inherit;
	grid-template-areas: "pallino titolo freccia" ". stato freccia";
	grid-template-columns: auto minmax(0, 1fr) auto;
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0.75rem 0;
	text-align: start;
}

@media (min-width: 48rem) {

	.affitti-elenco__bottone {
		grid-template-areas: "pallino titolo stato freccia";
		grid-template-columns: auto minmax(0, 1fr) auto auto;
	}
}

.affitti-elenco__bottone .affitti-elenco__pallino {
	grid-area: pallino;
}

.affitti-elenco__bottone .affitti-elenco__titolo {
	grid-area: titolo;
}

.affitti-elenco__bottone .affitti-elenco__stato-breve {
	grid-area: stato;
}

.affitti-elenco__bottone .icon {
	grid-area: freccia;
}

.affitti-elenco__bottone[hidden] {
	display: none;
}

.affitti-elenco__bottone .icon {
	flex: 0 0 auto;
	transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.affitti-elenco__bottone[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.affitti-elenco__pallino {
	block-size: 0.75rem;
	border-radius: 50%;
	flex: 0 0 auto;
	inline-size: 0.75rem;
}

.affitti-elenco__voce--disponibile .affitti-elenco__pallino {
	background-color: var(--affitti-disponibile);
}

.affitti-elenco__voce--non-disponibile .affitti-elenco__pallino {
	background-color: var(--affitti-non-disponibile);
}

.affitti-elenco__titolo {
	flex: 1 1 auto;
}

.affitti-elenco__stato-breve {
	color: var(--c-grey-700, #6e6e6e);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.affitti-elenco__dettaglio {
	padding-block-end: 1.25rem;
}

.affitti-elenco__dettaglio[hidden] {
	display: none;
}

.affitti-elenco__stato {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.affitti-pianta--attiva .affitti-elenco__stato {
	display: none;
}

.affitti-elenco__dati {
	display: grid;
	gap: 0.75rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	margin: 0 0 1rem;
}

.affitti-elenco__dati dt {
	color: var(--c-grey-700, #6e6e6e);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.affitti-elenco__dati dd {
	font-weight: 700;
	margin: 0;
}

.affitti-pianta--attiva[data-modo-attivo="affitto"] .affitti-elenco__dati [data-modo="acquisto"],
.affitti-pianta--attiva[data-modo-attivo="acquisto"] .affitti-elenco__dati [data-modo="affitto"] {
	display: none;
}

.affitti-aree .affitti-elenco__stato-breve,
.affitti-aree .affitti-elenco__dati dt,
.affitti-elenco__voce--scelta .affitti-elenco__stato-breve,
.affitti-elenco__voce--scelta .affitti-elenco__dati dt {
	color: var(--c-black, #1c1a18);
}

.affitti-elenco__testo {
	margin: 0 0 1rem;
}

.affitti-elenco__sottotitolo {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.affitti-unita {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.affitti-unita__voce {
	border-block-start: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	padding-block: 0.5rem;
}

.affitti-unita__nome {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	margin: 0;
}

.affitti-unita__dotazioni {
	font-size: 0.875rem;
	margin: 0.25rem 0 0;
	padding-inline-start: 1.25rem;
}

.affitti-elenco__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* I bottoni del dettaglio al 70% di `.btn` (richiesta del 2026-10-01):
   testo, spaziature, raggio e icona, ogni valore di
   components/_buttons.scss moltiplicato per 0,7. "Documenti" segue
   "Manifesta il tuo interesse", che gli sta accanto.

   Eccezione: da telefono l'altezza resta 44px ($tap-min), il minimo per un
   dito che il sito tiene anche sui tab delle cartine; il 70% di 49px ne
   farebbe 34. Da tablet in su, dove si usa il mouse, e' al 70% anche lei. */
.affitti-elenco__azioni .btn {
	border-radius: 0.6125rem;
	font-size: clamp(0.590625rem, 0.7308vw, 0.7875rem);
	gap: 1.4rem;
	min-height: 2.75rem;
	padding: 0.48125rem 0.7rem 0.48125rem 1.05rem;
}

@media (min-width: 48rem) {

	.affitti-elenco__azioni .btn {
		font-size: clamp(0.65625rem, 0.812vw, 0.875rem);
		min-height: 2.14375rem;
	}
}

.affitti-elenco__azioni .btn__icon .icon {
	height: 1.3125rem;
	width: 1.3125rem;
}

/* Le due ancore delle call to action: la testata e' sticky, e senza margine
   il titolo arriverebbe nascosto sotto di lei (come `.servizio` in
   layout/_pagine.scss). */
#affitti-contatti-titolo,
#affitti-documenti-titolo {
	scroll-margin-block-start: calc(5.175rem + 1rem);
}

@media (min-width: 64rem) {

	#affitti-contatti-titolo,
	#affitti-documenti-titolo {
		scroll-margin-block-start: calc(7rem + 1rem);
	}
}

/* Contatti: tre recapiti in fila da tablet. */
.affitti-contatti__testo {
	margin-block: 0 1.25rem;
}

.affitti-contatti__elenco {
	display: grid;
	gap: 1rem;
	margin: 0;
}

@media (min-width: 48rem) {

	.affitti-contatti__elenco {
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		column-gap: 2.5rem;
	}
}

.affitti-contatti__voce dt {
	color: var(--c-grey-700, #6e6e6e);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.affitti-contatti__voce dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/*--------------------------------------------------------------
# Componenti — icone
--------------------------------------------------------------*/

/* Gli SVG sono inlineati da inc/icons.php con fill="currentColor":
   il colore si eredita, non va impostato sull'icona. */
.icon {
	display: inline-block;
	fill: currentcolor;
	flex: none;
	vertical-align: middle;
}

.icon--arrow-outward {

	/* La freccia ↗ del mockup punta in alto a destra. Ruotata di 90°
     diventa la ↘/↙ usata accanto ai titoli di sezione. */
	transform: none;
}

/* La freccia **spessa** dei titoli di pagina e delle voci di menu, chiesta
   il 2026-09-09. E' l'unica icona del tema disegnata a **tratto** invece che
   a superficie piena, e non e' un vezzo: le Material Symbols hanno un asse
   di peso che si ferma a ~2.8px di tratto su un'icona da 24px, mentre qui ne
   servono 5. Il disegno ricalca comunque le linee mediane di
   `arrow_outward.svg`, quindi ingombro e proporzioni restano quelle.

   **Lo spessore sta qui e non nel file**, ed e' il motivo per cui l'SVG da
   solo sarebbe un capello: senza questa regola il tratto vale 1 unita' di
   viewBox, cioe' un millesimo del lato. In cambio la misura e' un token
   solo, che vale in tutti e due i punti in cui la freccia compare.

   Il valore e' **senza unita'**, cioe' in unita' del viewBox, e non in px:
   e' quello che fa scalare il tratto insieme al disegno. Vedi
   `$freccia-spessore` per il conto e per la strada scartata.

   `stroke-width` si eredita dall'<svg> al <path>, quindi basta metterlo qui.

   Il `fill` non va toccato: `.icon` mette `fill: currentcolor`
   sull'<svg>, che al <path> arriverebbe per eredita', ma il path porta il
   proprio `fill="none"`, e un attributo di presentazione sull'elemento batte
   un valore ereditato.

   Hamburger/close, disegnate a tratto lo stesso giorno per lo stesso motivo,
   condividono ora lo **stesso** `$freccia-spessore` (un giro dopo avevano un
   token proprio, piu' spesso: il cliente l'ha trovato eccessivo, e un solo
   peso "bold" in tutto il tema e' anche piu' semplice da tenere coerente). */
.icon--arrow-outward-bold,
.icon--menu-bold,
.icon--close-bold {
	stroke: currentcolor;
	stroke-linecap: butt;
	stroke-linejoin: miter;
	stroke-width: 128;
}

/* Bottoni e caroselli non hanno un disegno proprio per la freccia dritta:
   e' la **stessa** `arrow_outward_bold` di menu e testata, ruotata via CSS
   (richiesta del 2026-09-09, altro giro: "usiamo le stesse arrow... metti in
   orizzontale"). Prima c'erano due file a se' (`arrow_forward_bold.svg`,
   `arrow_back_bold.svg`) con un disegno ridisegnato a mano: somigliava ma
   non era la stessa icona. Ruotare quella vera aggiunge la garanzia che
   restino identiche per costruzione, non per somiglianza.

   La diagonale ↗ e' a **45° esatti** (dx e dy uguali in valore assoluto sul
   viewBox): ruotarla di +45° in senso orario la porta orizzontale verso
   destra, di +225° verso sinistra. Il verso e' quello di `rotate()` in CSS,
   che ruota in senso orario per valori positivi. */
.icon--orizzontale-avanti {
	transform: rotate(45deg);
}

.icon--orizzontale-indietro {
	transform: rotate(225deg);
}

/*--------------------------------------------------------------
# Componenti — bottone
--------------------------------------------------------------*/

/* Misurato sul mockup a 216 dpi (bottone "SOCIETA" della home, e
   verificato uguale sul rosso "INTERMODALE"): rettangolo 175x59 con
   raggio ~14px — **non** un pill a tutto raggio — etichetta maiuscola
   con letter-spacing, e una freccia orizzontale bianca **nuda** a
   destra, senza nessun cerchio dietro. La versione precedente aveva
   pill e cerchio: era una lettura sbagliata del mockup, corretta il
   2026-08-27 ritagliando il PDF a 3x. Padding misurato: 26px a
   sinistra, 32px fra etichetta e freccia. Il destro e' stato portato
   a 16px (1rem) il 2026-09-27, su richiesta esplicita, scostandosi
   dalla misura del mockup.
   Varianti di colore: nero (default), rosso (Intermodale), grigio
   (azioni secondarie, es. "lista azionisti"). */
.btn {
	align-items: center;
	background-color: var(--c-black, #1c1a18);
	border: 0;
	border-radius: 0.875rem;
	color: var(--c-white, #faf9f7);
	cursor: pointer;
	display: inline-flex;
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: clamp(0.84375rem, 1.044vw, 1.125rem);
	font-weight: 700;
	gap: 2rem;
	letter-spacing: 0.04em;
	line-height: 1;
	min-height: 3.0625rem;
	padding: 0.6875rem 1rem 0.6875rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 48rem) {

	.btn {
		font-size: clamp(0.9375rem, 1.16vw, 1.25rem);
	}
}

/* Al passaggio il bottone nero prende **il colore della pagina** invece del
   grigio che aveva prima. E' il caso piu' frequente della richiesta del
   2026-09-08: fino a ieri ogni stato convergeva al nero o al grigio, cioe'
   il colore spariva proprio quando si interagiva con l'elemento.
   L'etichetta la sceglie il PHP fra bianco e nero, cosi' regge qualunque
   colore. I ripieghi riproducono esattamente lo stato di prima. */
.btn:hover,
.btn:focus {
	background-color: var(--colore-superficie, var(--c-grey-700, #6e6e6e));
	color: var(--colore-testo, var(--c-white, #faf9f7));
}

/* La freccia e' nuda: nel mockup non c'e' nessun disco dietro, e
   prende il colore del testo del bottone. Lo span resta solo per
   allineare il glifo e impedirgli di stringersi.

   Al passaggio si sposta verso destra: e' una `arrow_outward`, cioe' una
   freccia che dice "porta altrove", e il movimento lo ripete. Erano 3px,
   dal 2026-09-09 sono 6: restano dentro i $sp-4 (16px) di padding a destra,
   quindi la freccia non tocca il bordo nemmeno a meta' corsa. */
.btn__icon {
	align-items: center;
	color: inherit;
	display: inline-flex;
	flex: none;
	justify-content: center;
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .btn__icon,
.btn:focus .btn__icon {
	transform: translateX(6px);
}

.btn__icon .icon {
	height: 1.875rem;
	width: 1.875rem;
}

/* Fase 10: colore letterale, non ereditato da `.btn` (che userebbe
   $c-white, diventato tema-aware) — lo sfondo rosso è fisso, quindi
   anche il testo sopra deve restarlo, per lo stesso motivo già scritto
   per il footer e le superfici velate. */
.btn--red {
	background-color: #d10a11;
	color: #fff;
}

.btn--red:hover,
.btn--red:focus {
	background-color: var(--colore-scuro, var(--c-black, #1c1a18));
	color: var(--colore-testo-scuro, var(--c-white, #faf9f7));
}

.btn--grey {
	background-color: var(--c-grey-700, #6e6e6e);
}

.btn--grey:hover,
.btn--grey:focus {
	background-color: var(--colore-scuro, var(--c-black, #1c1a18));
	color: var(--colore-testo-scuro, var(--c-white, #faf9f7));
}

/* Variante che prende il colore della pagina a cui il bottone porta. La usa
   la home: ogni fascia ha il colore della sua destinazione. L'etichetta non
   e' sempre bianca — la sceglie il PHP fra bianco e nero secondo la luminanza
   del fondo, cosi' regge qualunque colore venga messo in wp-admin. I ripieghi
   sono il nero e il bianco del bottone di base: senza custom property la
   variante non si distingue da `.btn`. */
.btn--colore {
	background-color: var(--colore-superficie, var(--c-black, #1c1a18));
	color: var(--colore-testo, var(--c-white, #faf9f7));
}

/* Il bottone gia' colorato non va al nero: **scurisce restando in tinta**.
   Il gradino e' il 12%, calcolato in PHP: sopra il 20% l'ambra scenderebbe
   sotto la soglia dove il testo dovrebbe passare da nero a bianco, cioe'
   l'etichetta cambierebbe colore a meta' del passaggio del mouse. */
.btn--colore:hover,
.btn--colore:focus {
	background-color: var(--colore-scuro, var(--c-black, #1c1a18));
	color: var(--colore-testo-scuro, var(--c-white, #faf9f7));
}

/* L'anello di focus e' rosso ovunque nel tema. Su un bottone rosso —
   Intermodale — sarebbe rosso su rosso separato da 2px di bianco: si vede,
   ma male. Qui l'anello passa al nero, che sta sopra tutti e cinque i colori
   della palette. */
.btn--colore:focus-visible {
	outline-color: var(--c-black, #1c1a18);
}

/* Variante chiara, usata sopra le immagini delle card servizio. */
.btn--light {
	background-color: var(--c-white, #faf9f7);
	color: var(--c-black, #1c1a18);
}

.btn--light .btn__icon {
	background-color: var(--c-black, #1c1a18);
	color: var(--c-white, #faf9f7);
}

.btn--light:hover,
.btn--light:focus {
	background-color: var(--c-grey-200, #dcd8d2);
	color: var(--c-black, #1c1a18);
}

/* Pulsanti di sola icona: frecce dei caroselli, hamburger.
   L'area cliccabile resta 44px anche se l'icona e' piu' piccola. */
.btn-icon {
	align-items: center;
	background: none;
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 50%;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 2.75rem;
}

/* Al passaggio **niente fondo**: solo l'anello, e piu' spesso (richiesta del
   2026-09-09, alzata **un'altra volta** lo stesso giorno: da 2px a 3).
   Prima il fondo era la velatura leggera del colore di pagina; ora il
   segnale e' tutto nel bordo, che prende il tono del testo piccolo — 4.5:1
   su bianco, quindi molto sopra il 3:1 che le WCAG chiedono a un indicatore
   (1.4.11).
   L'ispessimento del bordo **non sposta niente**: `.btn-icon` ha `height` e
   `width` fissi a $tap-min e il contenuto centrato con flex, quindi l'anello
   cresce verso l'interno e l'icona resta dov'e'. */
.btn-icon:hover,
.btn-icon:focus {
	background-color: transparent;
	border-color: var(--colore-testo-piccolo, var(--c-black, #1c1a18));
	border-width: 3px;
	color: var(--colore-testo-piccolo, var(--c-black, #1c1a18));
}

.btn-icon[disabled] {
	cursor: not-allowed;
	opacity: 0.4;
}

.btn-icon--bare {
	border-color: transparent;
}

/* Coppia di frecce di navigazione di un carosello. */
.carousel-nav {
	display: inline-flex;
	gap: 0.5rem;

	/* Scarto fra il centro del riquadro icona e il vertice disegnato della
     freccia (vedi $carousel-nav-scarto-frazione, base/_variables.scss).
     Una sola custom property, riletta col segno giusto dai contesti "a
     destra" (sass/layout/_home.scss, _pagine.scss,
     components/_section-header.scss) invece di ricalcolarla li'. */
	--carousel-nav-scarto: 1.0708061rem;

	/* Allineamento di default (flex-start, vedi .media-slider__nav in
     _media-slider.scss): il primo bottone del gruppo (__prev,
     "indietro") e' quello piu' vicino al bordo, quindi quello che deve
     toccarlo. E' un transform e non un margin apposta: non deve
     ridistribuire lo spazio nel flex del genitore — importante in
     .section-header--carousel, dove un margin sposterebbe anche il
     titolo (flex: 1 1 0%). */
	transform: translateX(calc(-1 * var(--carousel-nav-scarto)));
}

@media (min-width: 48rem) {

	.carousel-nav {
		--carousel-nav-scarto: 0.932257625rem;
	}
}

/* Frecce +50% (richiesta del 2026-09-11): il default della funzione
   interporto_pordenone_icon() e' 24px, qui diventano 36px. Lo spessore del
   tratto scala da solo con la dimensione — $freccia-spessore e' un valore
   in unita' di viewBox, non un px fisso — quindi resta identico a quello di
   hamburger/close, senza reintrodurre un token separato.
   Ridotte del 5% lo stesso giorno (giro successivo): 36px * 0.95 = 34.2px.
   Ridotte di un altro 20% da mobile (richiesta del cliente, 2026-09-27):
   scala solo il disegno, non il cerchio cliccabile sotto. */
.carousel-nav .icon {
	height: 1.71rem;
	width: 1.71rem;
}

@media (min-width: 48rem) {

	.carousel-nav .icon {
		height: 2.1375rem;
		width: 2.1375rem;
	}
}

/* Il cerchio resta $tap-min (44px) su .btn-icon in generale: con l'icona a
   36px restavano solo 4px di margine per lato, poco evidente a riposo
   (fondo trasparente) ma marcato in hover, dove il cerchio si riempie di
   colore pieno e il confine con l'icona salta all'occhio (richiesta del
   2026-09-11: "le frecce non sono ben iscritte nei cerchi in hover"). Cresce
   solo qui, non su .btn-icon in generale (condiviso con l'hamburger): resta
   comunque sopra i 44px minimi, quindi il bersaglio tattile non peggiora.
   Non si riduce insieme all'icona da mobile: e' l'area cliccabile, non il
   disegno, e deve restare sopra i 44px minimi anche li'. */
.carousel-nav .btn-icon {
	height: 3.25rem;
	width: 3.25rem;
}

/* Le frecce prendono il colore della pagina — o della fascia, in home, dove
   ogni carosello sta dentro una sezione con il suo colore. Il selettore e'
   ristretto a `.carousel-nav` e non a `.btn-icon--bare` in generale: usa la
   stessa classe anche l'hamburger dell'header, che pero' ha una sua regola
   dedicata (sass/layout/_header.scss, richiesta del 2026-09-27) — tenerle
   separate evita che una modifica scoped a una delle due finisca per
   toccare anche l'altra. */
.carousel-nav .btn-icon {
	color: var(--colore-titolo, var(--c-black, #1c1a18));
}

/* Al passaggio la freccia del carosello si **riempie** del colore invece di
   limitarsi a schiarire il fondo. Il contrasto qui non e' da verificare a
   mano: `--colore-testo` e' scelto in PHP fra bianco e nero sulla luminanza
   e non scende mai sotto 4.58:1, qualunque colore venga messo in wp-admin.

   Solo da tablet in su (richiesta del cliente, 2026-09-27): da mobile il
   tocco non ha un vero hover, e il riempimento restava "incollato" dopo il
   tap invece di sparire con il mouse che si allontana. Sotto $bp-tablet
   niente override: vale la regola generica di `.btn-icon:hover/:focus` qui
   sopra (fondo trasparente, bordo a 3px), la stessa dell'hamburger.

   Serve la doppia classe perche' `.carousel-nav .btn-icon` (0,2,0) e
   `.btn-icon:hover` (0,2,0) hanno la stessa specificita' e questa e' scritta
   dopo: senza, il colore della regola sopra vincerebbe sull'hover. */
@media (min-width: 48rem) {

	.carousel-nav .btn-icon:hover,
	.carousel-nav .btn-icon:focus {
		background-color: var(--colore-superficie, var(--c-grey-200, #dcd8d2));
		border-color: var(--colore-superficie, var(--c-black, #1c1a18));

		/* Il bordo torna sottile: qui il segnale e' il riempimento, e un
       anello da 2px sopra un disco gia' pieno di colore si vede solo
       come un contorno piu' scuro. La regola sopra lo aveva portato a
       2px. */
		border-width: 1px;
		color: var(--colore-testo, var(--c-black, #1c1a18));
	}
}

/*--------------------------------------------------------------
# Componenti — badge di stato
--------------------------------------------------------------*/

/* "APERTO" negli Appalti, "RASSEGNA" / "COMUNICATO" nelle News.
   Il badge accompagna sempre un testo leggibile: il colore non
   veicola mai da solo l'informazione (WCAG 2.1 AA, 1.4.1). */

/* Il fondo neutro e' la velatura forte del colore della pagina, col grigio
   di prima come ripiego — che e' quello che si vede su Appalti e News, dove
   un colore di pagina non c'e'. */

/* Fase 10: la velatura di sfondo (compreso il ripiego) e il testo sono
   entrambi tema-aware — sass/utilities/_tema.scss ridefinisce
   `--colore-velo-forte` col tema scuro, e $c-grey-200/$c-black seguono
   già il tema da soli. Coppia coordinata, non più letterale. */
.badge {
	background-color: var(--colore-velo-forte, var(--c-grey-200, #dcd8d2));
	border-radius: 62.4375rem;
	color: var(--c-black, #1c1a18);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.1875rem 0.75rem;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Il badge pieno resta **nero**: dice lo stato di un bando ("APERTO"), non
   l'identita' della pagina, e deve staccare dal badge neutro accanto. */
.badge--solid {
	background-color: var(--c-black, #1c1a18);
	color: var(--c-white, #faf9f7);
}

/* Era rosso fisso, cioe' sarebbe rimasto rosso anche su una pagina blu: e'
   la stessa divergenza che il colore per pagina toglie ovunque. Il ripiego
   resta il rosso, per non cambiare niente dove il colore non c'e' — ed e'
   il caso di Appalti e News, che sono le pagine dove questo badge compare. */
.badge--red {
	background-color: var(--colore-superficie, #d10a11);
	color: var(--colore-testo, #fff);
}

/* `background-color: transparent` lascia vedere il canvas della pagina
   sotto: eredita `color: $c-black` da `.badge`, che ormai è lo stesso
   valore di `$c-text` e segue il tema come lui. */
.badge--outline {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px currentcolor;
}

/*--------------------------------------------------------------
# Componenti — ancore ai contenuti della pagina
--------------------------------------------------------------*/

/* L'indice dei Servizi: sette pastiglie che portano alle sette sezioni
   della stessa pagina. Sta nella colonna dove le altre pagine hanno una
   fotografia.

   Sono link, non bottoni: portano a un punto del documento, quindi
   devono comportarsi da link (tasto centrale, nuova scheda, cronologia).
   Lo scorrimento lo fa il browser da solo — nessun JavaScript, e chi ha
   `prefers-reduced-motion` non subisce animazioni che non ha chiesto. */
.ancore__elenco {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 44px di altezza minima: è il bersaglio tattile di WCAG 2.5.5, e con
   sette pastiglie affiancate su un telefono è la differenza fra
   toccarne una e toccarne due. Nero su $c-grey-200 misura 14.9:1.

   Fase 10: sfondo e testo tema-aware, coppia coordinata — la velatura si
   scurisce col tema (sass/utilities/_tema.scss ridefinisce
   `--colore-velo-forte`), $c-grey-200/$c-black la seguono già da soli. */
.ancora {
	align-items: center;
	background-color: var(--colore-velo-forte, var(--c-grey-200, #dcd8d2));
	border-radius: 62.4375rem;
	color: var(--c-black, #1c1a18);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Al passaggio prende il colore della pagina, che è già calcolato con il
   testo a contrasto (vedi inc/colori.php): sulla pagina Servizi non c'è
   una tinta propria, e il ripiego è il nero dei pulsanti. */
.ancora:hover,
.ancora:focus {
	background-color: var(--colore-superficie, var(--c-black, #1c1a18));
	color: var(--colore-testo, var(--c-white, #faf9f7));
}

/*--------------------------------------------------------------
# Componenti — tab a pill
--------------------------------------------------------------*/

/* Appalti: Aperti / Archiviati / Tutti (etichetta del tab al plurale,
   vedi inc/elenchi.php — il badge della card resta singolare, Aperto /
   Archiviato). News: Rassegna / Comunicati / Tutti. Il tab attivo e' un
   pill nero pieno, gli altri sono grigio chiaro. Marcato come tablist per
   gli screen reader. */
.tabs {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Il tab a riposo prende la velatura forte al posto del grigio uguale per
   tutti: sulla pagina Aziende insediate le chip dei settori appartengono
   cosi' alla pagina. Il nero sopra la velatura sta fra 15.0:1 e 17.3:1.
   Dove la pagina un colore non ce l'ha — Appalti, News — resta il grigio.

   Fase 10: tema-aware, coppia coordinata — stesso motivo di .ancora in
   _ancore.scss. */
.tabs__item {
	align-items: center;
	background-color: var(--colore-velo-forte, var(--c-grey-200, #dcd8d2));
	border: 0;
	border-radius: 62.4375rem;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	display: inline-flex;
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tabs__item:hover,
.tabs__item:focus {
	background-color: var(--colore-superficie, var(--c-grey-700, #6e6e6e));
	color: var(--colore-testo, var(--c-white, #faf9f7));
}

/* Il tab attivo resta **nero** anche adesso che l'hover e' colorato: sono
   due stati diversi e devono restare distinguibili. Stessa specificita'
   dell'hover (0,2,0) ed e' scritto dopo, quindi vince gia'. */
.tabs__item[aria-selected="true"],
.tabs__item[aria-pressed="true"],
.tabs__item[aria-current="page"] {
	background-color: var(--c-black, #1c1a18);
	color: var(--c-white, #faf9f7);
}

/* Nel mockup l'azione verso il portale Albo Fornitori sta in fondo
   alla stessa riga, spinta a destra. */
.tabs__spacer {
	margin-inline-start: auto;
}

/*--------------------------------------------------------------
# Componenti — card
--------------------------------------------------------------*/

/* Una sola card, tre usi: appalto (badge + titolo + estratto),
   news (badge + titolo), servizio (immagine + pill sovrapposto). */

/* Fondo leggermente diverso dal canvas della pagina ($c-bg-alt invece di
   $c-white), non lo stesso bianco/nero: su Appalti e News, dove non c'è
   un colore di pagina a fare da bordo, le card si vedevano solo grazie
   all'ombra — una tinta appena percettibile le fa leggere come
   superfici a sé anche a riposo, in entrambi i temi. */
.card {
	background-color: var(--c-grey-100, #f4f2ef);
	border: 1px solid var(--colore-velo-forte, var(--c-border, rgba(0, 0, 0, 0.12)));
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	padding: 1.5rem;
	position: relative;
	transition: border-color 380ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1), transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* `:focus-within` non e' un di piu': l'elemento focalizzabile della card e'
   il link nel titolo, non la card. Senza, chi naviga da tastiera non vedrebbe
   succedere niente dove chi usa il mouse vede la card sollevarsi.

   Il bordo prende il colore della pagina; il ripiego e' il nero, che sul
   bordo grigio al 12% resta un cambiamento leggibile anche dove un colore
   di pagina non c'e'. */
.card:hover,
.card:focus-within {
	border-color: var(--colore-titolo, var(--c-black, #1c1a18));

	/* Sollevamento e ombra cresciuti il 2026-09-09 (2px -> 6px): a due
     pixel il movimento si vedeva solo confrontando due schermate. L'ombra
     sale insieme allo scarto, o la card sembra staccata dal proprio buio. */
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-6px);
}

/* L'estratto e' fuori dal link (fratello, non figlio): `.card__link:hover`
   non lo tocca. Scurisce insieme al titolo passando dal contenitore, cosi'
   tutta la card risponde allo stesso modo al passaggio del mouse. */
.card:hover .card__excerpt,
.card:focus-within .card__excerpt {
	color: var(--c-black, #1c1a18);
}

/* Il badge sta in alto a destra, sopra il titolo. */
.card__meta {
	display: flex;
	justify-content: flex-end;
}

/* Il badge "IT" (contenuto di ripiego, vedi card-appalto.php/card-news.php)
   va invece ancorato a sinistra, non incollato al badge di stato/categoria
   che `justify-content: flex-end` spinge a destra: il margine automatico
   assorbe tutto lo spazio libero fra i due, senza bisogno di cambiare
   l'allineamento della card che porta il solo badge di stato/categoria
   (`justify-content: flex-end` resta l'unico figlio in quel caso). */
.card__meta .badge--lingua {
	margin-inline-end: auto;
}

/* Grigio scuro invece del nero puro (richiesta del 2026-09-09), per non
   competere col titolo di sezione sopra la griglia (Appalti, News), che
   quello resta nero. $c-grey-700 e non $c-grey-500: 5.10:1 su bianco,
   contro il 4.23:1 di $c-grey-500 — qui il corpo del testo non e'
   garantito grande (il titolo e' grassetto ma a certe larghezze scende
   sotto la soglia dei 18.66px), quindi serve il 4.5:1 pieno e con
   margine, non il 3:1 del testo grande. */

/* Titolo -10% dal 2026-09-28 (richiesta del cliente): derivato da $fs-card
   con calc() invece di un secondo valore letterale, per non sdoppiare la
   fonte di verita' — la variabile resta quella usata anche da
   .pagina-legale__corpo h3 e .risultato__titolo (sass/layout/_pagine.scss),
   che non sono nello scope di questa richiesta e restano alla taglia
   piena. Il contrasto di $c-grey-700 (5.10:1 su bianco, vedi sopra) resta
   valido: rimpicciolire il testo non abbassa la soglia richiesta, la alza. */
.card__title {
	color: var(--c-grey-700, #6e6e6e);
	font-size: calc(clamp(1.0625rem, 1.27vw, 1.375rem) * 0.9);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}

/* L'estratto, dal 2026-09-28, non e' piu' una variante piu' piccola del
   titolo: e' testo di paragrafo vero, alla stessa taglia del corpo testo
   del sito ($fs-body, 16px) e non piu' maiuscolo — anche quando il
   contenuto e' digitato tutto maiuscolo in wp-admin, `lowercase` lo
   riporta a lettere minuscole invece di limitarsi a non trasformarlo (il
   dato in origine e' incoerente: alcuni appalti sono scritti tutti
   maiuscoli, altri no). Serve anche a compattare la card, richiesta
   esplicita. Il contrasto di $c-grey-700 resta valido: a 16px il testo non
   e' mai "grande" per le WCAG, quindi serve comunque il 4.5:1 pieno, e
   5.10:1 lo passa con margine. */
.card__excerpt {
	color: var(--c-grey-700, #6e6e6e);
	font-size: 1rem;
	line-height: 1.3;
	margin: 0;
	text-transform: lowercase;
}

/* La testata della rassegna stampa (es. "Il Gazzettino"): un nome proprio,
   quindi ne' maiuscolo ne' con lo stesso peso del titolo. */
.card__fonte {
	color: var(--c-grey-700, #6e6e6e);
	font-size: 0.875rem;
	line-height: 1.3;
	margin: 0;
}

.card__footer {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Tutta la card e' cliccabile ma l'elemento focalizzabile resta il
   link nel titolo: niente div cliccabili senza semantica. */
.card__link::after {
	content: "";
	inset: 0;
	position: absolute;
}

.card__link {
	color: inherit;
	text-decoration: none;
}

/* Senza questo il titolo diventerebbe rosso: la regola globale
   `a:hover, a:active { color: $c-red }` (sass/base/_links.scss) e' piu'
   specifica del riposo `.card__link { color: inherit }` e vincerebbe lei.
   Qui si scavalca **solo per le card**, non toccando quella regola
   globale — la usa anche il rosso intenzionale di Servizi altrove nel
   sito. Nero e non $c-grey-700: al passaggio il titolo deve scurirsi, non
   restare com'era. */
.card__link:hover,
.card__link:focus {
	color: var(--c-black, #1c1a18);
	text-decoration: underline;
}

/* Card servizio: immagine piena con un pill sovrapposto in basso a
   sinistra, come nella home e nella pagina Servizi. */
.card-media {
	border-radius: 0.8125rem;
	cursor: pointer;
	display: block;
	overflow: hidden;
	position: relative;
}

/* Il ritaglio lo fa gia' `.card-media` con `overflow: hidden`, quindi
   l'ingrandimento al passaggio non sborda dagli angoli arrotondati. */
.card-media__img {
	aspect-ratio: 3/4;
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
	width: 100%;
}

.card-media:hover .card-media__img,
.card-media:focus-visible .card-media__img {
	transform: scale(1.06);
}

/* E' un h3 (gerarchia del documento: il titolo della card sotto quello
   della sezione): senza azzerarlo qui prende il margin-bottom generico di
   tutti i titoli (sass/base/_typography.scss, $sp-3) — e siccome la card
   e' posizionata da `bottom`, quel margine la spingerebbe in su invece di
   incollarla al bordo. */
.card-media__label {
	bottom: 0.7rem;
	left: 0.7rem;
	margin-bottom: 0;
	position: absolute;
	right: 1rem;
}

/* Bottone piu' compatto di quello di base (sass/components/_buttons.scss,
   min-height 49px/padding 11px-16px-11px-24px/gap 32px): qui sopra una
   fotografia, dentro una scheda che puo' essere stretta (una sola per riga
   da mobile), serve piu' piccolo — richiesta del cliente, 2026-09-29. */
.card-media__label .btn {
	gap: 1rem;
	max-width: 100%;
	min-height: 2rem;
	padding: 0.5rem 1rem;
}

/*--------------------------------------------------------------
# Componenti — azienda insediata
--------------------------------------------------------------*/

/* Logo con il nome sotto. Compare in due posti: il carosello della home
   e la griglia della pagina Operatori. Stava in layout/_home.scss finche'
   era solo della home; da quando e' condiviso sta qui, perche' il posto
   di un componente usato da due pagine non e' il layout di una delle
   due. */

/* Griglia e non flex: la prima riga e' alta 6.125rem sempre, anche quando
   il logo manca. Cosi' i nomi partono tutti dalla stessa altezza invece di
   scalare dietro alla forma del logo — con loghi larghi e bassi accanto a
   loghi quadrati la differenza si vede tutta. (5rem d'immagine + 2 x 8px di
   padding + 2 x 1px di bordo aggiunti sotto = 6.125rem, il caso peggiore di
   un logo che tocca davvero il max-block-size.) */
.insediato {
	align-content: start;
	color: inherit;
	display: grid;
	gap: 0.75rem;
	grid-template-rows: 6.125rem auto;
	justify-items: center;
	text-align: center;
	text-decoration: none;
}

/* La riga del logo e' alta 6.125rem fissi (vedi sopra — 5rem piu' padding e
   bordo aggiunti sotto), quindi l'ingrandimento al passaggio non sposta il
   nome sotto: cresce dentro il suo spazio.

   Sfondo bianco e bordo arrotondato (richiesta del 2026-09-11): alcuni
   loghi hanno gia' uno sfondo bianco cucito nel file, altri sono
   trasparenti — senza un fondo comune questi ultimi risultavano incoerenti
   col resto (e nel tema scuro un logo pensato per un fondo chiaro puo'
   diventare illeggibile). Bianco letterale e non tema-aware apposta: come
   `.hero__title`, deve restare leggibile a prescindere dal tema del sito,
   non seguirlo. Il raggio e' lo stesso delle altre immagini del sito
   (`.cartina__image`, `.intermodale__foto`, `.card-media__img`). */
.insediato__logo {
	align-self: center;
	background-color: #fff;
	block-size: auto;
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.8125rem;
	inline-size: auto;
	max-block-size: 5rem;
	max-inline-size: 100%;
	object-fit: contain;
	padding: 0.5rem;
	transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

a.insediato:hover .insediato__logo,
a.insediato:focus .insediato__logo {
	transform: scale(1.08);
}

/* Riga fissa: senza, l'azienda che non ha ancora un logo finirebbe con il
   nome nella prima riga, cioe' piu' in alto di tutte le altre. */
.insediato__nome {
	font-size: 0.75rem;
	grid-row: 2;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Il nome prende il colore della pagina nella versione per il testo piccolo:
   qui e' da 12px, quindi vale la soglia del 4.5:1 e non quella del testo
   grande. La sottolineatura resta, cosi' il colore non e' l'unico segnale. */
a.insediato:hover .insediato__nome,
a.insediato:focus .insediato__nome {
	color: var(--colore-testo-piccolo, var(--c-black, #1c1a18));
	text-decoration: underline;
}

/* Griglia dell'elenco completo. Le colonne sono a larghezza minima e non
   in numero fisso: i loghi hanno proporzioni molto diverse fra loro e una
   griglia che si adatta li tiene allineati meglio di tre colonne rigide.
   Il passo verticale e' piu' largo di quello orizzontale perche' sotto
   ogni logo c'e' il nome, che altrimenti si attaccherebbe alla riga
   seguente.

   Portato a 80/40px il 2026-09-08 (era 48/20), e a 96/64px il 2026-09-09,
   quando un logo non aveva ne' bordo ne' fondo e a separarlo dal vicino
   c'era **solo** il vuoto. Da quando .insediato__logo ha un fondo bianco e
   un bordo suoi (richiesta del 2026-09-11, vedi sopra), quel vuoto non è più
   l'unico segnale di dove finisce un'azienda e dove comincia la successiva
   — la card lo fa già da sola — quindi con le 83 aziende dell'elenco
   aggiornato (erano 55) lo stacco di prima allungava la pagina più di
   quanto la leggibilità richiedesse. Ridotto il 2026-09-14 a 48/32px
   desktop, poi a 32/24px lo stesso giorno (seconda richiesta): la colonna
   resta sopra i 20px gia' segnalati come troppo stretti per due marchi
   larghi affiancati, la riga scende insieme al resto della pagina. */
.griglia-loghi {
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {

	.griglia-loghi {
		gap: 2rem 1.5rem;
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}
}

.griglia-loghi__item {
	display: flex;
	justify-content: center;
}

/* Il primo settore stacca dalla barra delle chip: quella ha il suo margine
   sotto, ma e' calibrato su un elenco che comincia subito, non su un titolo
   di gruppo. Ridotto a $sp-6 il 2026-09-14 insieme al resto della pagina. */
.settore:first-of-type {
	margin-block-start: 1.5rem;
}

/* Fra un settore e il successivo lo stacco e' ampio perche' qui e' l'unica
   cosa che separa i due gruppi — non c'e' nessuna linea a farlo. Senza
   abbastanza aria l'ultima riga di loghi si legge come se appartenesse al
   titolo che segue.

   Portato a 160px il 2026-09-08 (erano 96), quando il passo fra le righe di
   loghi era 96px e 96 fra un settore e l'altro sarebbero stati **lo stesso
   valore**. Ridotto a 80px e poi, lo stesso giorno, a 48px: resta piu'
   largo dei 32px fra due righe dello stesso gruppo (vedi .griglia-loghi
   sopra), quindi continua a dire che i gruppi sono due. Raddoppiato a 96px
   il 2026-09-27, su richiesta del cliente: resta comunque piu' largo dei
   32px fra due righe dello stesso gruppo. Portato a 160px il 2026-09-27
   (stesso giorno, secondo giro), su ulteriore richiesta del cliente. */
.settore + .settore {
	margin-block-start: 10rem;
}

/* Il titolo del settore prende colore e dimensione dei titoli di sezione di
   Servizi (`.titolo-sezione`, sass/layout/_pagine.scss), richiesta del
   2026-09-27 per uniformare le due pagine. Resta un <h3> (vedi il docblock
   di page-templates/aziende-insediate.php: e' una sottosezione, non perde
   gerarchia diventando piu' grande).

   Il colore e' `--colore-titolo`, non piu' la variante per il testo
   piccolo: a $fs-h3 (min. 22px, grassetto) vale la soglia WCAG del testo
   grande (3:1), la stessa gia' verificata per `.titolo-sezione` — a
   $fs-label (min. 15px) serviva il 4.5:1, che l'ambra di questa pagina da
   sola non supera, da cui la vecchia variante attenuata calcolata in PHP.
   I due cambi (colore e dimensione) vanno insieme: il colore pieno da solo,
   alla vecchia dimensione, sarebbe stato sotto soglia. */
.settore__titolo {
	color: var(--colore-titolo, var(--c-black, #1c1a18));
	font-size: clamp(1.375rem, 1.85vw, 2rem);
	letter-spacing: 0.04em;
	margin: 0 0 2rem;
}

/*--------------------------------------------------------------
# Componenti — testata di sezione
--------------------------------------------------------------*/

/* Titolo di pagina o di sezione con il filetto orizzontale e la
   freccia in diagonale sulla destra, come nelle pagine Appalti,
   News, Contatti e Servizi del mockup. */
.section-header {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 48rem) {

	.section-header {
		margin-bottom: 3rem;
	}
}

/* Il titolo deve poter rimpicciolirsi e andare a capo. Con `flex: none`
   non lo faceva, e su schermi stretti spingeva filetto e freccia fuori
   dallo schermo: la pagina scorreva di lato. Si vedeva solo con i titoli
   piu' lunghi — l'inglese "Resident companies" sfondava di 31px a 375px
   dove l'italiano "Aziende Insediate" stava dentro. Un layout che regge
   una lingua sola non regge.

   **`flex-basis: 0`, non `auto`** (corretto il 2026-09-11: verificato a
   schermo, non solo letto sul codice). Con `auto` il browser decide se
   mandare la freccia a capo usando la larghezza **non ristretta** del
   titolo — quella di una riga sola, che per un titolo che deve davvero
   andare a capo e' sempre piu' larga del contenitore — quindi la freccia
   finiva su una riga tutta sua, allineata a sinistra invece che ancorata
   in fondo a destra: `justify-content: space-between` con un solo elemento
   su una riga si comporta come `flex-start`. Con basis 0 e grow 1 il
   titolo riempie lo spazio rimasto **dopo** aver messo la freccia sulla
   stessa riga, e il suo testo va a capo dentro quello spazio invece di far
   saltare la freccia altrove. */
.section-header__title {
	flex: 1 1 0%;
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
}

.section-header__rule {
	background-color: currentcolor;
	flex: 1 1 1rem;
	height: 1px;
	min-width: 0;
	opacity: 0.35;
}

.section-header__icon {
	flex: none;

	/* La freccia e' decorativa: il titolo accanto porta gia'
     l'informazione, quindi resta aria-hidden. */
	transform: rotate(90deg);
}

/*--------------------------------------------------------------
## Testata di pagina
--------------------------------------------------------------*/

/* La testata delle pagine, rifatta il 2026-09-01 sulle misure del PDF.
   Tutto sta su questo modificatore e niente sulla classe base, perche' la
   base la usa anche `--carousel` in home, che una testata di pagina non
   e' e che non deve muoversi di un pixel.

   Nel mockup il blocco e' largo **il 48%** del container — il filetto va
   da x=66 a x=832 su 1596 — con titolo e freccia sulla prima riga, la
   freccia in fondo, e il filetto **sotto tutti e due**. Il filetto ci
   arriva da solo: `flex: 1 0 100%` gli impone una riga intera e, stando
   ultimo nel documento, e' l'ultima. Nessun `order`: l'ordine che si
   vede e' quello che c'e' scritto.

   Il 48% e' una percentuale e non un valore in pixel, cosi' resta la
   stessa proporzione a ogni larghezza. Vale solo da desktop: sotto, meta'
   schermo non si legge piu' come una linea ma come un trattino. */
.section-header--pagina {

	/* In basso e non sulla linea di base: la freccia e' un quadrato senza
     testo dentro, quindi la sua "linea di base" e' il bordo inferiore e
     allinearla al piede delle lettere la lasciava alta. Richiesta del
     2026-09-01, e combacia col mockup, dove la freccia poggia sulla
     stessa riga della base del titolo. */
	align-items: flex-end;
	column-gap: 1rem;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 0.5rem;
}

@media (min-width: 64rem) {

	.section-header--pagina {
		margin-bottom: 2.5rem;
		max-inline-size: 48%;
	}
}

/* I tre pezzi della testata — titolo, filetto e freccia — prendono tutti e
   tre `--colore-titolo`, il tono calibrato per la lettura (3:1 su bianco e
   sulla propria velatura), e non `--colore-pagina` grezzo.

   **E' rientrato dall'eccezione WCAG che c'era qui fino al 2026-09-09.**
   Quell'eccezione esisteva perche' su Aziende insediate `--colore-pagina`
   (`#f8b100`, 1.86:1 su bianco) e `--colore-titolo` (`#bc8700`, calcolato)
   erano due toni diversi, e il cliente voleva la testata come un blocco
   solo. Da quando Aziende insediate ha un titolo forzato a `#e8a702`
   (vedi INTERPORTO_PORDENONE_TITOLO_FORZATO in inc/colori.php — un altro
   giro di eccezione WCAG, stavolta scritta li'), `--colore-titolo` **e'**
   il tono unico voluto dal cliente: non serve piu' leggere il colore
   grezzo qui, e farlo tornerebbe a leggere `--colore-superficie` sulla
   testata invece del titolo. Sulle altre quattro pagine il cambio non si
   vede: li' i due valori restano vicini per costruzione.

   Il ripiego di `--colore-titolo` sui tre pezzi era nero e filetto/freccia
   `#D9D9D9`, misurato dal mockup, fino al 2026-09-28: da quella data il
   cliente lo vuole invece del grigio gia' usato nel menu ($c-grey-500,
   sass/layout/_nav-overlay.scss). E' un ripiego diretto sulla regola base,
   non un'eccezione scoped a un template: `.section-header--pagina` la usano
   solo Appalti, News e Contatti, le uniche tre pagine senza un colore
   proprio (niente campo ACPT, niente riga in INTERPORTO_PORDENONE_COLORI),
   quindi il ripiego si vede gia' solo li' — su una pagina con un colore la
   custom property e' sempre valorizzata e vince comunque. Cosi' anche una
   futura quarta pagina senza colore che usasse questo stesso markup
   riceverebbe lo stesso grigio, senza bisogno di ricordarsi di aggiungere
   una riga qui. */
.section-header--pagina .section-header__title {
	color: var(--colore-titolo, var(--c-grey-500, #7b7b7b));
}

.section-header--pagina .section-header__rule {
	background-color: var(--colore-titolo, var(--c-grey-500, #7b7b7b));
	flex: 1 0 100%;

	/* Pieno e alto 4px, non un capello semitrasparente: e' la differenza
     piu' visibile fra il sito e il mockup. `height` e non `block-size`
     perche' e' la stessa proprieta' della regola base, e due nomi diversi
     per la stessa cosa si annullano a vicenda invece di sovrascriversi in
     ordine di specificita' — successo davvero, il filetto veniva alto 0. */
	height: 4px;
	opacity: 1;
}

.section-header--pagina .section-header__icon {
	color: var(--colore-titolo, var(--c-grey-500, #7b7b7b));
}

/* Piu' grande delle altre icone del sito, in **tre** passaggi chiesti dal
   cliente: il 2026-09-01 prima un quinto, poi un altro 30% sopra quello
   (1.5rem x 1.2 x 1.3 = 2.34rem = 37.44px); il 2026-09-09 un altro 28%, a
   3rem = 48px. Adesso la freccia e' piu' alta del titolo che accompagna —
   l'h1 e' 45px al massimo — ed e' voluto: e' l'unico segno grafico della
   testata insieme al filetto.

   Il tratto **cresce con lei**, perche' lo spessore e' in unita' del disegno:
   passa da 4.99 a 6.4px. Non e' una svista rispetto ai "5px" chiesti il
   giorno prima: una freccia piu' grande con lo stesso tratto sembrerebbe
   piu' magra, non piu' grande.

   La misura sta qui e non nel PHP perche' `arrow_outward` compare anche
   altrove — nei bottoni, per esempio — e li' deve restare com'e'. Il CSS
   vince sugli attributi width/height con cui `interporto_pordenone_icon()`
   stampa l'SVG. */
.section-header--pagina .section-header__icon .icon {

	/* Piu' piccola da mobile (richiesta del 2026-09-11): a 48px su un
     titolo che va a capo su due righe la freccia domina lo schermo. Resta
     ancorata in fondo a destra della riga (flex: none piu' sopra) anche
     qui: si rimpicciolisce, non si sposta. */
	block-size: 2rem;
	inline-size: 2rem;
}

@media (min-width: 48rem) {

	.section-header--pagina .section-header__icon .icon {
		block-size: 3rem;
		inline-size: 3rem;
	}
}

/* Variante con le frecce del carosello a destra invece della
   freccia diagonale (home: SERVIZI, INSEDIATI). Il filetto non ce l'ha:
   nel mockup quelle due etichette la linea non l'hanno.

   Stacco sotto uguale a tutte le larghezze (richiesta del cliente,
   2026-09-29): prima era azzerato da mobile e $sp-6 da tablet in su
   (richiesta del 2026-09-27). */
.section-header--carousel {
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

/* Qui il gruppo e' gia' a destra per costruzione (l'header e' flex con
   justify-content: space-between e il titolo che cresce, vedi sopra): serve
   solo ribaltare il segno dello scarto della punta (base/_variables.scss,
   components/_buttons.scss), non la direzione del gruppo. Vale a tutte le
   larghezze: l'header non ha varianti sotto $bp-tablet/$bp-desktop. */
.section-header--carousel .carousel-nav {
	transform: translateX(var(--carousel-nav-scarto));
}

/*--------------------------------------------------------------
# Components — Pannello di accessibilità
--------------------------------------------------------------*/

/* Bottone fisso, angolo in basso a destra, incollato al bordo della
   finestra: `right: 0`, non un offset che segue il respiro del contenuto.
   Fino al 2026-09-11 stava a meta' altezza (`top: 50%`), a un offset fisso
   dal bordo (`right: $sp-4`): funzionava solo quando lo schermo aveva
   margine vuoto fuori dal contenuto. L'angolo in basso e' anche meno
   affollato di contenuto rispetto a meta' pagina — richiesta del
   2026-09-11.

   Fra l'11 e il 14 settembre 2026 qui c'era una progressione legata ai
   token di `.container` (`$gutter-mobile`/`$gutter-tablet`/`$gutter`),
   pensata per restare "appena fuori dal contenuto" a ogni larghezza. Sugli
   schermi oltre `$container-max` (1596px) pero' quell'offset (66px+16px)
   si vedeva comunque staccato dal bordo vero — richiesta esplicita del
   2026-09-14: il bottone deve toccare il bordo, non avvicinarsi soltanto. */
.a11y-toolbar__toggle {
	align-items: center;
	background-color: var(--c-black, #1c1a18);
	border: none;
	border-radius: 62.4375rem;
	bottom: 0.25rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	color: var(--c-white, #faf9f7);
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	position: fixed;
	right: 0;
	width: 2.75rem;
	z-index: 400;
}

.a11y-toolbar__toggle:hover {
	background-color: var(--c-grey-500, #7b7b7b);
}

/* Solo `bottom` sale con la larghezza, non `right`: quello resta 0 a ogni
   soglia, incollato al bordo della finestra. */
@media (min-width: 48rem) {

	.a11y-toolbar__toggle {
		bottom: 1rem;
	}
}

/* Ancora "molto invadente" da mobile (richiesta del 2026-09-11, giro
   successivo): il cerchio non puo' scendere sotto i 44px (bersaglio
   tattile), quindi qui si riduce solo il peso visivo — icona piu' piccola
   e un filo di trasparenza a riposo, piena su hover/focus perche' chi sta
   per usarlo lo veda bene. L'area cliccabile resta 44x44px invariata. */
@media (max-width: 63.9375rem) {

	.a11y-toolbar__toggle {
		opacity: 0.75;
	}

	.a11y-toolbar__toggle .icon {
		block-size: 1.125rem;
		inline-size: 1.125rem;
	}

	.a11y-toolbar__toggle:hover,
	.a11y-toolbar__toggle:focus {
		opacity: 1;
	}
}

/* Velo dietro al pannello: il pannello si apre grande e al centro, non
   come un fumetto accanto al bottone — serve a segnalare che il resto
   della pagina è momentaneamente sospeso, ed è la superficie su cui
   chiudere con un click "fuori". */
.a11y-toolbar__velo {
	background-color: rgba(0, 0, 0, 0.5);
	inset: 0;
	position: fixed;
	z-index: 400;
}

.a11y-toolbar__panel {
	background-color: var(--c-white, #faf9f7);
	border-radius: 0.5rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	left: 50%;
	max-height: 85vh;
	max-width: 32rem;
	overflow-y: auto;
	padding: 2rem;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2rem);
	z-index: 401;
}

.a11y-toolbar__panel[hidden],
.a11y-toolbar__velo[hidden] {
	display: none;
}

.a11y-toolbar__title {
	color: var(--c-black, #1c1a18);
	font-size: clamp(1.375rem, 1.85vw, 2rem);
	font-weight: 700;
	margin: 0 0 1.5rem;
}

.a11y-toolbar__chiudi {
	background: none;
	border: none;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	height: 2.75rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2.75rem;
}

.a11y-toolbar__righe {
	list-style: none;
	margin: 0;
	padding: 0;
}

.a11y-toolbar__riga {
	align-items: center;
	border-bottom: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0.75rem 0;
}

.a11y-toolbar__riga:last-child {
	border-bottom: none;
}

.a11y-toolbar__etichetta {
	color: var(--c-black, #1c1a18);
	font-size: 1rem;
}

/* Tendina (Tema, Dimensioni, Spaziatura, Interlinea, Animazioni)
--------------------------------------------- */

/* `appearance: none` toglie anche la freccia nativa: senza una propria
   una tendina non si distingue da una casella di testo. Un'immagine di
   sfondo invece di un `::after` — un `<select>` non ne accetta uno in
   modo affidabile su tutti i motori — con due colori diversi per i due
   temi, perché una data URI non può leggere `currentColor`. */
.a11y-toolbar__tendina {
	appearance: none;
	background-color: var(--c-white, #faf9f7);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	border: 2px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.875rem;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	font-family: poppins, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", sans-serif;
	font-size: 0.875rem;
	min-height: 2.5rem;
	padding: 0 2.5rem 0 0.75rem;
}

html[data-a11y-tema="dark"] .a11y-toolbar__tendina {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .a11y-toolbar__tendina {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

/* Interruttore (Contrasto elevato, Attenuazione colori, Nascondi
   immagini, Allinea il testo a sinistra)
--------------------------------------------- */

/* Bottone vero, `role="switch"` nel markup: lo stato non lo dice solo
   il colore (che cambia) ma anche la posizione del pallino, cosi'
   resta leggibile in scala di grigi o a contrasto forzato.

   $c-grey-500 e non $c-grey-200 per il binario spento: $c-grey-200 è
   quasi indistinguibile dal fondo del pannello ($c-bg) nel tema scuro,
   dove i due sono entrambi grigi scuri — è il difetto "non si vedono
   gli switch". $c-grey-500 resta un grigio medio in entrambi i temi,
   quindi si stacca sia dal pannello chiaro sia da quello scuro. Il
   pallino è bianco letterale con un'ombra propria, non $c-bg: da solo
   $c-bg diventerebbe nero nel tema scuro, sparendo sopra un binario
   comunque scuro. */
.a11y-toolbar__interruttore {
	background-color: var(--c-grey-500, #7b7b7b);
	border: none;
	border-radius: 62.4375rem;
	cursor: pointer;
	flex: 0 0 auto;
	height: 1.5rem;
	padding: 0;
	position: relative;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 2.75rem;
}

/* Blu-grigio neutro invece del rosso di brand: nel pannello lo stato
   "attivo" non deve competere con l'identità del sito, che il rosso
   porta con sé ovunque altrove. */
.a11y-toolbar__interruttore[aria-checked="true"] {
	background-color: #52708a;
}

.a11y-toolbar__pallino {
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	height: 1.125rem;
	left: 0.1875rem;
	position: absolute;
	top: 0.1875rem;
	transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 1.125rem;
}

.a11y-toolbar__interruttore[aria-checked="true"] .a11y-toolbar__pallino {
	transform: translateX(1.25rem);
}

/* Stesso blu-grigio neutro dello stato "attivo" sopra, applicato
   all'anello di focus: il rosso globale (`$c-focus`, base/_links.scss)
   è pensato per il canvas del sito, dove porta l'identità del marchio.
   Dentro il pannello — bottone fisso incluso, stesso sistema visivo —
   competerebbe con gli altri usi del rosso (badge "APERTO",
   sottolineature) senza motivo: qui il focus è pura funzione, non
   marchio. */
.a11y-toolbar__toggle:focus-visible,
.a11y-toolbar__panel :focus-visible {
	outline-color: #52708a;
}

.a11y-toolbar__reset {
	background: none;
	border: 1px solid var(--c-border, rgba(0, 0, 0, 0.12));
	border-radius: 0.875rem;
	color: var(--c-black, #1c1a18);
	cursor: pointer;
	margin-top: 1.5rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	width: 100%;
}

/* Sotto i 480px il pannello occupa quasi tutta la larghezza, ma resta
   centrato: niente pattern "a comparsa dal basso" da inventare a parte. */
@media (max-width: 30rem) {

	.a11y-toolbar__panel {
		padding: 1.5rem;
	}
}

/*--------------------------------------------------------------
# Componenti — slider dell'immagine di una fascia
--------------------------------------------------------------*/

/* La colonna dell'immagine delle fasce "immagine + testo". Una sola
   fotografia resta una fotografia; da due in su si scorre. Il markup e
   il comportamento stanno in template-parts/media-slider.php: qui c'e'
   solo il formato e la disposizione delle frecce. */

/* Formato 3:2 verticale (richiesta del 2026-08-31): due di larghezza per
   tre di altezza. Il rapporto e' fissato per due ragioni. La prima e'
   che le fotografie caricate non hanno tutte le stesse proporzioni, e
   senza un rapporto imposto la fascia cambierebbe altezza a ogni
   scorrimento, facendo saltare il testo accanto. La seconda e' che il
   ritaglio lo fa `object-fit: cover`, cioe' il browser, invece di
   chiedere a chi carica di preparare i file gia' tagliati.

   Nota per chi ci torna: e' una scelta esplicita del cliente contro il
   mockup, dove queste fotografie sono orizzontali. In colonna piena una
   3:2 verticale e' alta una volta e mezza la sua larghezza, quindi le
   fasce sono molto piu' alte di prima. */

/* Due vincoli che si incontrano, e l'ordine in cui vincono conta.
   L'immagine occupa **tutta la colonna** della fascia (richiesta del
   2026-08-31): niente tetto sulla larghezza, e quindi si allinea da sola
   ai margini del contenitore come tutto il resto della pagina. L'altezza
   pero' non supera il **75% dello schermo** (era 80%, abbassato il
   2026-09-29), e a colonna piena il 2:3 sfonderebbe: a 1440x900 la colonna
   e' larga 654px, che per tre mezzi fanno 981px contro i 675px del tetto.

   Quindi il tetto sta su `max-block-size` e vince lui. Conseguenza da
   sapere: **quando morde, il 2:3 non e' piu' rispettato** — la fotografia
   resta larga quanto la colonna e viene ritagliata piu' bassa da
   `object-fit: cover`. L'`aspect-ratio` resta come proporzione naturale e
   torna a valere dove il tetto non arriva, cioe' su mobile e sugli schermi
   molto alti. Era il compromesso opposto a quello di prima, quando il
   tetto stava sulla larghezza per salvare il rapporto e lasciava
   l'immagine piu' stretta della colonna.

   `dvh` con `vh` sotto come ripiego, per la barra del browser su mobile:
   stesso accorgimento dell'hero. Per spostare il tetto si cambia il 75vh
   nelle due righe qui sotto. */
.media-slider__image {
	aspect-ratio: 2/3;
	block-size: auto;
	border-radius: 0.8125rem;
	display: block;
	inline-size: 100%;
	max-block-size: 75vh;
	max-block-size: 75dvh;
	object-fit: cover;
}

.media-slider {
	position: relative;
}

/* Una immagine per volta: il contenitore e' gia' largo quanto la colonna
   della fascia, quindi la scheda occupa tutto. Sovrascrive il 78% del
   carosello della home, che li' serve a far intravedere la card dopo. */
.media-slider__track {
	grid-auto-columns: 100%;
}

/* Frecce sotto l'immagine. Fuori dal contenitore che scorre, non sopra la
   fotografia: sopra avrebbero avuto contrasto variabile a seconda
   dell'immagine.

   Allineate a sinistra di default (`flex-start`): e' il punto esterno
   giusto quando la colonna immagine sta a sinistra. Quando invece sta a
   destra — `.home-split--reverse` in sass/layout/_home.scss,
   `.pagina-intro__media` in sass/layout/_pagine.scss, entrambi da
   $bp-desktop in su — quei due file sovrascrivono a `flex-end`, cosi' le
   frecce restano sempre sul lato esterno della colonna e non su quello
   interno verso il testo.

   Senza stacco sopra (richiesta del 2026-09-01): i bottoni hanno gia' i
   loro 44px di area cliccabile attorno a un'icona da 24, quindi lo spazio
   fra la fotografia e la freccia c'era due volte. */
.media-slider__nav {
	display: flex;
}

/*--------------------------------------------------------------
# Formati diversi dal 2:3
--------------------------------------------------------------*/

/* Il 2:3 verticale qui sopra vale per le fasce "immagine + testo", dove
   la fotografia e' una colonna accanto a un paragrafo. I tre casi qui
   sotto non sono quello, e con quel rapporto verrebbero altissimi. */

/* Servizi: le sette fotografie tornano orizzontali (richiesta del
   2026-09-01, contro la scelta del 2026-08-31). Vale **solo** qui:
   InRail, il Polo Logistico e la home tengono il verticale. Per questo
   e' agganciato a `.servizio`, che e' la sezione del singolo servizio,
   e non al componente. */
.servizio .media-slider__image {
	aspect-ratio: 3/2;
}

/* Polo Logistico: la mappa sotto le aree di espansione e' quadrata. */
.espansione__media .media-slider__image {
	aspect-ratio: 1/1;
}

/* Formato quadrato per la fascia "immagine + testo" di una pagina di
   contenuto — opzionale, campo ACPT `intro/formato`
   (interporto_pordenone_formato_immagine_intro(), inc/content-fields.php),
   classe `.pagina-intro__media--quadrata` aggiunta da
   template-parts/pagine/intro.php. Il ripiego resta il 2:3 verticale della
   regola base qui sopra: vale su tutte le pagine finche' un redattore non
   sceglie "quadrata" per quella specifica pagina — oggi solo Società
   (richiesta cliente 2026-09-28).

   Nato per un problema di misura specifico di Società: la foto vi si vedeva
   troppo alta rispetto alle card del carosello Servizi in home (stesso 2:3,
   vedi `.home-carousel .card-media__img` in layout/_home.scss), perche' qui
   la colonna e' larga circa meta' pagina contro 1/3 per le card, e il tetto
   `max-block-size: 80vh` qui sopra segue l'ALTEZZA del viewport mentre le
   card seguono la sua LARGHEZZA — le due misure non si inseguono allo
   stesso modo a ogni proporzione di schermo (misurato: da 60 a 162px di
   differenza a seconda dello schermo). Un rapporto fisso invece si', perche'
   le due colonne scalano insieme con la stessa larghezza di container:
   misurato via Playwright su 1024-1920px di viewport, 1:1 porta la
   differenza a un ~20px/3-4% costante ovunque, contro il 10-30% di prima.

   Poi diventato anche una scelta di impaginazione, non solo di misura: da
   quando la Vision di Società sta sotto questa fascia nella stessa sezione
   (parametro `coda` di pagine/intro.php), il quadrato tiene la foto piu'
   compatta accanto al testo che segue. Le altre pagine (es. Intermodale)
   non hanno questo problema di impaginazione e restano verticali di
   default — solo da desktop: e' li' che le due colonne diventano affiancate
   (da `$bp-desktop` in su, vedi `.pagina-intro__inner` in
   layout/_pagine.scss). */
@media (min-width: 64rem) {

	.pagina-intro__media--quadrata .media-slider__image {
		aspect-ratio: 1/1;
	}
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

/* Il margine dopo il footer segnalato dal cliente (2026-09-09) veniva da
   qui: `.post`/`.page` sono pensate per l'`<article>` del loop di _s, ma
   WordPress mette anche una classe `page` su **`<body>`** di qualunque
   pagina singola (`body_class()`) — non c'entra col contenuto, e' solo
   una coincidenza di nomi. Il selettore senza `article` davanti prendeva
   quindi anche `<body>`, aggiungendo 1.5em (24px) sotto tutto, footer
   compreso: si vedeva come uno spazio bianco dopo la fascia scura. */
article.post,
article.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Pannello di accessibilità — effetti generici
--------------------------------------------- */

/* Dimensione testo: un'unica dichiarazione invece di classi discrete —
   la scala tipografica del tema è tutta in rem/clamp(), quindi segue
   il font-size del root. */
html {
	font-size: calc(100% * var(--a11y-scala-testo, 1));
}

/* Attenuazione colori: scrive `--a11y-filtro`, che questa regola legge.
   Sull'intero <html>, pannello compreso: è voluto, l'effetto deve
   essere coerente con quello che vede il resto della pagina. Un solo
   `filter` può stare su un elemento: se in futuro un'altra preferenza
   dovesse usarlo, si comporrebbe qui con questa invece di litigarsi la
   proprietà. */
html {
	filter: var(--a11y-filtro, none);
}

/* Nascondi immagini: `display: none`, non più `visibility: hidden` — il
   cliente vuole che lo spazio si richiuda (richiesta del 2026-09-28),
   non solo che l'immagine sparisca lasciando il vuoto. Le icone
   dell'interfaccia (`.icon`, stampate da interporto_pordenone_icon())
   restano visibili: non sono contenuto, sono controlli. */

/* `:not(a img)` esclude le immagini dentro un link — il logo
   dell'intestazione è un'ancora con la sola immagine come contenuto:
   nasconderla toglierebbe il link dall'albero di accessibilità
   (`display: none` esclude esattamente come `visibility: hidden`), e
   senza testo alternativo il link resterebbe senza nome. Stesso difetto
   trovato con axe-core. */
html.a11y-nascondi-immagini img:not(a img),
html.a11y-nascondi-immagini video:not(a video),
html.a11y-nascondi-immagini picture:not(a picture) {
	display: none;
}

html.a11y-nascondi-immagini {

	/* Fasce che sono *solo* immagine (caroselli fotografici di
     media-slider.php e il confronto satellitare di societa/futuro.php):
     con la sola immagine nascosta resterebbero le frecce di
     navigazione, che non muovono più niente, e uno spazio riservato
     senza contenuto. Queste tre classi avvolgono sempre e solo
     immagini nei loro usi nel tema — verificato leggendo ogni
     chiamante — mai testo indipendente, a differenza del carosello
     "Insediati" (loghi aziende), che porta comunque il nome
     dell'azienda in testo e resta quindi gestito dalla sola regola
     qui sopra. */
}

html.a11y-nascondi-immagini .home-split__media,
html.a11y-nascondi-immagini .espansione__media,
html.a11y-nascondi-immagini .media-slider {
	display: none;
}

html.a11y-nascondi-immagini {

	/* .pagina-intro__media (template-parts/pagine/intro.php) non e' sempre
     immagine: l'argomento `lato` ci mette contenuto vero (le ancore dei
     Servizi, le superfici del Polo Logistico) al posto della fotografia,
     e quel caso non va mai nascosto. :has() isola il solo caso immagine
     — una foto sola o il carosello — senza toccare l'altro. */
}

html.a11y-nascondi-immagini .pagina-intro__media:has(img, .media-slider) {
	display: none;
}

html.a11y-nascondi-immagini {

	/* Le fasce "immagine + testo" (.home-split__inner, .pagina-intro__inner)
     sono a griglia con colonne esplicite da $bp-desktop in su: nascondere
     la colonna immagine la toglie dalla griglia ma non le colonne stesse,
     lasciando su desktop una colonna vuota riservata. Qui la griglia
     torna a una sola colonna, cosi' il testo occupa tutta la larghezza. */
}

@media (min-width: 64rem) {

	html.a11y-nascondi-immagini .home-split__inner {
		grid-template-columns: 1fr;
	}

	html.a11y-nascondi-immagini {

		/* Non :has(> .pagina-intro__media:has(...)): :has() annidato dentro
       un altro :has() non e' un selettore valido (la specifica lo
       vieta esplicitamente), la regola non scatterebbe mai e la
       griglia resterebbe a due colonne. Le due condizioni vanno
       quindi ripetute in piano, non annidate. */
	}

	html.a11y-nascondi-immagini .pagina-intro__inner:has(> .pagina-intro__media > img),
	html.a11y-nascondi-immagini .pagina-intro__inner:has(> .pagina-intro__media > .media-slider) {
		grid-template-columns: 1fr;
	}
}

/* Allinea il testo a sinistra: sovrascrive centrature/giustificazioni
   del contenuto testuale. Non tocca pulsanti/pillole/etichette, il cui
   allineamento è parte del componente, non della lettura. */
html.a11y-allinea-sinistra p,
html.a11y-allinea-sinistra li,
html.a11y-allinea-sinistra blockquote,
html.a11y-allinea-sinistra h1,
html.a11y-allinea-sinistra h2,
html.a11y-allinea-sinistra h3,
html.a11y-allinea-sinistra h4,
html.a11y-allinea-sinistra h5,
html.a11y-allinea-sinistra h6 {
	text-align: left !important;
}

/* Spaziatura testo e interlinea: due controlli indipendenti nel
   pannello, due custom property indipendenti qui. "Standard" non
   scrive nulla (nessuna classe, ripiego naturale = nessuna modifica);
   gli altri tre passi di ciascuno sono livelli crescenti, non una
   scala che scende sotto lo standard. Il passo "Media" della
   spaziatura coincide con i minimi del criterio WCAG 1.4.12; quello
   dell'interlinea con l'1.5 che lo stesso criterio chiede. */
html {
	letter-spacing: var(--a11y-spaziatura-lettere, normal);
	word-spacing: var(--a11y-spaziatura-parole, normal);
}

html.a11y-interlinea p,
html.a11y-interlinea li,
html.a11y-interlinea blockquote {
	line-height: var(--a11y-interlinea, inherit);
}

/*--------------------------------------------------------------
# Utilities — Tema (chiaro/scuro), pannello di accessibilità
--------------------------------------------------------------*/

/* I sei token neutri di base/_variables.scss ($c-black, $c-white,
   $c-grey-100/200/500/700) sono custom property: qui vivono i due soli
   posti che le ridefiniscono. I colori di brand (rosso, arancio, e la
   tavolozza per-pagina di inc/colori.php) restano fissi in entrambi i
   temi — sono identità del marchio, non superficie, e non li tocca
   questo file.

   Le due dichiarazioni sotto (chiaro di default, scuro sotto
   `prefers-color-scheme`) bastano per "Come il sistema". La scelta
   esplicita di "Chiaro"/"Scuro" dal pannello aggiunge l'attributo
   `data-a11y-tema` su `<html>`, che vince sempre per specificità —
   anche dentro la media query, grazie a `:not([data-a11y-tema="light"])`. */
:root {
	--c-black: #1c1a18;
	--c-white: #faf9f7;
	--c-grey-100: #f4f2ef;
	--c-grey-200: #dcd8d2;
	--c-grey-500: #7b7b7b;

	/* #6e6e6e e non #767676. La scelta e' spiegata in base/_variables.scss:
     il 2026-09-09 il #767676 era stato scartato perche' l'antialiasing lo
     porta a 4.47:1 misurati, sotto la soglia. Quando la Fase 10 ha
     trasformato i token neutri in custom property, pero', qui e' stato
     ricopiato il valore vecchio — e siccome la custom property vince sul
     ripiego Sass, in pagina arrivava proprio il colore scartato: axe lo
     segnalava su ogni titolo di card di Appalti, News e Operatori.
     Riallineato l'11/09/2026. */
	--c-grey-700: #6e6e6e;
	--c-border: rgba(0, 0, 0, 0.12);
}

/* `--colore-testo-piccolo` (inc/colori.php) è calcolato in PHP contro
   uno sfondo bianco, sempre — la funzione che lo produce lo dichiara nel
   proprio nome. **Non è ridefinita qui**, di proposito: a differenza di
   `--colore-titolo` (sotto), questa variabile viene letta in due
   contesti diversi — testo puro sul canvas della pagina (es.
   `.settore__titolo`, che infatti ha una correzione dedicata sotto) *e*
   testo dentro scatole a fondo velato fisso (es. `.modalita__titolo`
   dentro `.modalita__voce`, `layout/_pagine.scss`), dove il fondo NON
   segue il tema (stessa famiglia di `.section--tint`,
   `layout/_footer.scss`) e quindi nemmeno il colore calibrato su quel
   fondo deve seguirlo. Un'unica ridefinizione globale ne avrebbe
   sistemato uno rompendo l'altro — provato, e tornato indietro: vedi
   `docs/piano-sviluppo/10-accessibilita-audit-pannello.md`. */
@media (prefers-color-scheme: dark) {

	:root:not([data-a11y-tema="light"]) {
		--c-black: #ece8e3;
		--c-white: #1a1917;
		--c-grey-100: #22201e;
		--c-grey-200: #2c2926;
		--c-grey-500: #9a9a9a;
		--c-grey-700: #b3b3b3;
		--c-border: rgba(255, 255, 255, 0.16);
	}
}

:root[data-a11y-tema="dark"] {
	--c-black: #ece8e3;
	--c-white: #1a1917;
	--c-grey-100: #22201e;
	--c-grey-200: #2c2926;
	--c-grey-500: #9a9a9a;
	--c-grey-700: #b3b3b3;
	--c-border: rgba(255, 255, 255, 0.16);
}

/* Testo calibrato sul bianco (`.settore__titolo`, sul canvas nudo) o
   dentro una scatola velata che ora si scurisce col tema
   (`.modalita__titolo` dentro `.modalita__voce`, sotto): in entrambi i
   casi nel tema scuro torna al token neutro, che segue il tema. */
html[data-a11y-tema="dark"] .settore__titolo,
html[data-a11y-tema="dark"] .modalita__titolo {
	color: var(--c-grey-700);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .settore__titolo,
	html:not([data-a11y-tema="light"]) .modalita__titolo {
		color: var(--c-grey-700);
	}
}

/* Velature (colori "tenui") nel tema scuro
--------------------------------------------- */

/* `--colore-velo`/`--colore-velo-forte` (inc/colori.php) sono la tinta
   piena della pagina mescolata verso il **bianco**: nel tema scuro
   restano chiare per costruzione, un rettangolo chiaro su un canvas
   scuro invece di appartenerci. Qui si ricalcolano con `color-mix()`
   mescolando la stessa tinta (`--colore-pagina`) verso lo scuro invece
   che verso il bianco.
   Dove la pagina non ha un colore proprio (Appalti, News, Contatti...)
   `var(--colore-pagina, …)` userebbe il ripiego `#767676`: un grigio
   medio neutro, così la velatura resta visibile invece di perdersi nel
   canvas scuro — lo stesso problema per cui in chiaro c'è
   `$c-bg-alt`/`$c-bg-section`.

   Il testo sopra queste superfici (`.badge`, `.ancora`, `.tabs__item`,
   `.section--tint`, `.section--grigia`, `.modalita__voce`) usa i token
   neutri ($c-text/$c-black, già tema-aware): con la velatura ora scura
   il nero diventerebbe quasi bianco insieme a lei, restando leggibile —
   la stessa coppia chiaro/scuro che già funziona per il resto del sito,
   non più letterale.

   Percentuali basse apposta (6%/10%, contro il 14%/26% del chiaro): un
   titolo di sezione (`.titolo-sezione`, layout/_pagine.scss) porta la
   tinta piena della pagina anche sopra queste fasce, e il rosso di
   Servizi — il più scuro dei cinque, appena 0.138 di luminanza relativa
   — a percentuali più alte scende sotto il 3:1 (misurato: 30% su
   #242424 dava 2.85:1). Verificato con axe-core che tutti e cinque i
   colori restano sopra soglia a queste percentuali, sulla base più
   scura di #141414 (lo stesso valore di --c-white scuro). */
html[data-a11y-tema="dark"] {
	--colore-velo: color-mix(in srgb, var(--colore-pagina, #767676) 6%, #1a1917);
	--colore-velo-forte: color-mix(in srgb, var(--colore-pagina, #767676) 10%, #1a1917);
	--colore-pillola: color-mix(in srgb, var(--colore-pagina, #767676) 50%, #1a1917);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) {
		--colore-velo: color-mix(in srgb, var(--colore-pagina, #767676) 6%, #1a1917);
		--colore-velo-forte: color-mix(in srgb, var(--colore-pagina, #767676) 10%, #1a1917);
		--colore-pillola: color-mix(in srgb, var(--colore-pagina, #767676) 50%, #1a1917);
	}
}

/* Titoli sul tema scuro normale. `--colore-titolo` e' calcolato per il
   bianco (inc/colori.php): al buio il viola di Affitti e locazione, per
   esempio, scendeva a 2.02:1. `--colore-titolo-scuro` e' lo stesso tono
   schiarito fino al 3:1 sul fondo scuro e sulla sua velatura, e lascia
   com'e' un colore che gia' regge. Senza `!important`: le fasce della home
   che portano il loro colore inline devono continuare a vincere, e il
   contrasto alto (`html.a11y-contrasto-alto`, sotto) ha il suo, piu' forte. */
html[data-a11y-tema="dark"] {
	--colore-titolo: var(--colore-titolo-scuro);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) {
		--colore-titolo: var(--colore-titolo-scuro);
	}
}

/* La terraferma delle cartine.

   Nel tema chiaro sono i due grigi neutri di sempre. Nel tema scuro **non**
   diventano quasi nere come farebbero seguendo `--c-grey-100`/`--c-grey-200`:
   cosi' i continenti sparivano dentro al mare e la cartina si leggeva come un
   groviglio di linee sospese nel vuoto (segnalato dal cliente il 18/09/2026).
   Qui sono schiarite fino a staccare dal mare restando comunque sotto a tutti e
   nove i tracciati, che nel tema scuro sono chiari: il piu' scuro di loro tiene
   2.19:1 su questo fondo. I paesi terzi restano un gradino sotto, come nel tema
   chiaro. */
:root {
	--cartina-terra: #f8f8f8;
	--cartina-terra-terzi: #d9d9d9;
}

html[data-a11y-tema="dark"] {
	--cartina-terra: #393c34;
	--cartina-terra-terzi: #26281f;
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) {
		--cartina-terra: #393c34;
		--cartina-terra-terzi: #26281f;
	}
}

/* Le nove tinte dei tracciati delle cartine. Non si ricalcolano con
   `color-mix()` come le velature qui sopra: le diciotto tinte sono gia'
   calcolate in PHP (`interporto_pordenone_variabili_colore()`, che spiega da
   quali tre assi escono e perche' le due serie sono scritte per esteso invece
   che l'una il negativo dell'altra), qui si scambiano e basta. Sul chiaro
   quasi tutte stanno sotto al colore della pagina, sul quasi-nero del tema
   scuro tutte devono stargli sopra, altrimenti spariscono.

   `--colore-mappa-interporto` sta nella stessa lista ma non e' una delle nove:
   e' il colore dei segni che marcano il sedime dell'Interporto sulla cartina
   delle aree — l'insegna sotto al marchio e l'area indicata a Vallenoncello.
   Si scambia allo stesso modo, e per la stessa ragione: sul tema chiaro e' un
   verde scuro, su quello scuro un verde chiaro, perche' il disco bianco del
   marchio ci sta sopra e nel tema scuro diventa quasi nero. */
html[data-a11y-tema="dark"] {
	--colore-mappa-interporto: var(--colore-mappa-interporto-scuro);
	--colore-mappa-1: var(--colore-mappa-1-scuro);
	--colore-mappa-2: var(--colore-mappa-2-scuro);
	--colore-mappa-3: var(--colore-mappa-3-scuro);
	--colore-mappa-4: var(--colore-mappa-4-scuro);
	--colore-mappa-5: var(--colore-mappa-5-scuro);
	--colore-mappa-6: var(--colore-mappa-6-scuro);
	--colore-mappa-7: var(--colore-mappa-7-scuro);
	--colore-mappa-8: var(--colore-mappa-8-scuro);
	--colore-mappa-9: var(--colore-mappa-9-scuro);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) {
		--colore-mappa-interporto: var(--colore-mappa-interporto-scuro);
		--colore-mappa-1: var(--colore-mappa-1-scuro);
		--colore-mappa-2: var(--colore-mappa-2-scuro);
		--colore-mappa-3: var(--colore-mappa-3-scuro);
		--colore-mappa-4: var(--colore-mappa-4-scuro);
		--colore-mappa-5: var(--colore-mappa-5-scuro);
		--colore-mappa-6: var(--colore-mappa-6-scuro);
		--colore-mappa-7: var(--colore-mappa-7-scuro);
		--colore-mappa-8: var(--colore-mappa-8-scuro);
		--colore-mappa-9: var(--colore-mappa-9-scuro);
	}
}

/* Contorno delle pillole "tenui" nel tema scuro
--------------------------------------------- */

/* `.tabs__item`/`.badge`/`.ancora` a riposo condividono lo stesso sfondo di
   `--colore-velo`/`--colore-velo-forte` sopra: un mix al 6-10% dentro
   #141414 e' quasi lo stesso #141414 del canvas scuro (`--c-white` scuro).
   Il testo sopra resta leggibilissimo (e' tema-aware, va verso il quasi-
   bianco), ma la sagoma della pillola sparisce — si legge la scritta ma non
   si vede piu' "e' un bottone" (richiesta del 2026-09-11, verificato con
   uno screenshot reale in `prefers-color-scheme: dark` su Appalti e Aziende
   insediate). Le `.card` non hanno questo problema: hanno un fondo proprio
   (`$c-bg-alt`), distinguibile dal canvas anche scuro, indipendente dalla
   velatura.

   Due tentativi precedenti (stesso giorno) si sono rivelati insufficienti
   alla verifica a schermo: prima solo un contorno interno sottile, poi uno
   sfondo fisso `--c-grey-200` (#262626 in scuro) — un neutro piatto, non
   piu' tenue del canvas #141414 quanto sembrava sulla carta (il salto di
   luminanza relativa e' minimo, ~1.2:1), e comunque senza piu' nessun
   legame col colore della pagina ("i colori tenui" della richiesta
   originale). Qui si sostituisce con `--colore-pillola` (sopra, nella
   sezione velature): la stessa idea di `--colore-velo-forte` ma mescolata
   al 50% invece che al 10%, molto piu' satura. Non e' un problema di
   contrasto testo/sfondo (il testo sopra e' sempre neutro, $c-black/
   $c-text, mai il colore pieno della pagina), quindi non c'entra il
   limite del 3:1 che tiene `--colore-velo-forte` cosi' tenue per il
   titolo di sezione colorato che a volte le sta sopra (vedi il commento
   sulle velature qui sopra) — qui si puo' essere piu' generosi: il 50%
   e' stato scelto verificando il contrasto testo/pillola per tutti e
   cinque i colori di pagina piu' il ripiego grigio, il caso peggiore
   (l'ambra di Aziende insediate, la piu' chiara) resta comunque sopra
   5:1, ben oltre il 4.5:1 minimo. Il bordo resta, un po' piu' marcato,
   per un contorno netto anche sui bordi arrotondati dove il rosso di
   Servizi (il piu' scuro) da solo si confonderebbe ancora un po' col
   canvas. Solo gli stati "a riposo, non selezionato":
   `.badge--solid`/`.badge--red`/`.tabs__item[aria-selected="true"]`/
   `.tabs__item[aria-current="page"]` sono gia' pieni e ben visibili —
   esclusi qui sotto con `:not()`, insieme a `:hover`/`:focus`
   (`.ancora`/`.tabs__item` diventano pieni del colore della pagina al
   passaggio, _ancore.scss/_tabs.scss: senza escluderli, questa regola —
   piu' specifica per via di `html[data-a11y-tema="dark"]` — vincerebbe
   anche sull'hover, disattivandolo in scuro). */
html[data-a11y-tema="dark"] .tabs__item:not([aria-selected="true"]):not([aria-current="page"]):not(:hover):not(:focus),
html[data-a11y-tema="dark"] .badge:not(.badge--solid):not(.badge--red),
html[data-a11y-tema="dark"] .ancora:not(:hover):not(:focus) {
	background-color: var(--colore-pillola);
	box-shadow: inset 0 0 0 1px var(--c-border);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .tabs__item:not([aria-selected="true"]):not([aria-current="page"]):not(:hover):not(:focus),
	html:not([data-a11y-tema="light"]) .badge:not(.badge--solid):not(.badge--red),
	html:not([data-a11y-tema="light"]) .ancora:not(:hover):not(:focus) {
		background-color: var(--colore-pillola);
		box-shadow: inset 0 0 0 1px var(--c-border);
	}
}

/* Logo nel tema scuro
--------------------------------------------- */

/* Il logo è un SVG inlineato (inc/navigation.php), non un <img>: si può
   ricolorare in CSS. La scritta usa `#2D2A27` su ogni tracciato (valore
   letterale nel file sorgente, non currentColor) — un unico selettore
   sul valore esatto del `fill`, invece di aggiungere una classe a ogni
   lettera. La stella multicolore non è toccata: è identità di marchio,
   resta la stessa in entrambi i temi. */
html[data-a11y-tema="dark"] .site-logo path[fill="#2D2A27" i] {
	fill: var(--c-black);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .site-logo path[fill="#2D2A27" i] {
		fill: var(--c-black);
	}
}

/* Intestazione e overlay del menu nel tema scuro
--------------------------------------------- */

/* Restano bianche in chiaro (`$c-white`, .site-header/.nav-overlay). Nel
   tema scuro **non** diventano il nero quasi pieno del canvas
   (`--c-white` scuro, #1a1917): l'utente le vuole più chiare/tenui, una
   superficie "sollevata" invece del fondo — lo stesso principio delle
   card sotto. `--c-grey-100` è già tema-aware ed è esattamente quel
   grigio scuro più chiaro del canvas. */
html[data-a11y-tema="dark"] .site-header,
html[data-a11y-tema="dark"] .nav-overlay {
	background-color: var(--c-grey-100);
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .site-header,
	html:not([data-a11y-tema="light"]) .nav-overlay {
		background-color: var(--c-grey-100);
	}
}

/* Footer nel tema scuro
--------------------------------------------- */

/* In chiaro il footer è scuro per scelta del cliente (`$c-grey-800`,
   layout/_footer.scss) a prescindere dal tema — quello resta. In scuro
   l'utente lo vuole ancora più scuro, non uguale: qui si abbassa di un
   gradino ulteriore, restando ben sopra il 4.5:1 richiesto dal testo
   bianco sopra (che resta letterale, invariato). */
html[data-a11y-tema="dark"] .site-footer {
	background-color: #121110;
}

@media (prefers-color-scheme: dark) {

	html:not([data-a11y-tema="light"]) .site-footer {
		background-color: #121110;
	}
}

/* Contrasto elevato (pannello di accessibilità)
--------------------------------------------- */

/* WCAG 1.4.6 (AAA, 7:1) reale, non solo bordi/focus: il testo di base
   ($c-text = $c-black) è già al massimo contrasto in entrambi i temi, ma
   grigio muto, pulsanti d'accento e la tavolozza per-pagina no. Ogni
   proprietà qui sotto è una custom property già letta da tutto il resto
   del CSS: riassegnarla qui basta, senza toccare i componenti.

   `--colore-superficie/testo/titolo/testo-piccolo` diventano le varianti
   `-aaa` calcolate in inc/colori.php (interporto_pordenone_variabili_colore(),
   sempre dalla tinta grezza, mai dal tono forzato di Aziende insediate).
   `!important` è necessario: le cinque fasce home impostano queste stesse
   proprietà via attributo `style` inline, che batte qualunque regola di
   un foglio esterno indipendentemente dalla specificità. */
html.a11y-contrasto-alto {
	--colore-superficie: var(--colore-superficie-aaa) !important;
	--colore-testo: var(--colore-testo-aaa) !important;
	--colore-titolo: var(--colore-titolo-aaa) !important;
	--colore-testo-piccolo: var(--colore-testo-piccolo-aaa) !important;

	/* Il gradino dell'hover di .btn--red/.btn--grey/.btn--colore
     (sass/components/_buttons.scss): stessa coppia, stesso ragionamento
     di --colore-superficie/--colore-testo qui sopra — vedi il commento
     su $scuro_aaa in inc/colori.php. */
	--colore-scuro: var(--colore-scuro-aaa) !important;
	--colore-testo-scuro: var(--colore-testo-scuro-aaa) !important;

	/* --colore-superficie/--colore-testo (e --colore-scuro/--colore-testo-scuro,
     che ne derivano) non hanno bisogno di una variante scura: sono coppie
     autosufficienti (il testo e' sempre bianco sulla propria superficie),
     indipendenti dal tema della pagina. --colore-titolo/--colore-testo-piccolo
     invece sono testo puro sopra il canvas della pagina, che cambia fra
     chiaro e scuro: la variante sotto (dark) li sostituisce con il tono
     "scuro", vedi le due funzioni in inc/colori.php. */

	/* Il grigio 500 (4.23:1 su bianco) passava già al grigio 700, che pero'
     in chiaro e' solo 5.10:1: sotto AAA. Si alza di un gradino ulteriore,
     al nero/bianco pieno — gia' theme-aware da solo, quindi una riga
     sistema entrambi i temi. Sistema anche .btn--grey, che legge lo
     stesso token (base/_variables.scss: $c-grey-700 è
     var(--c-grey-700, #6e6e6e), non un letterale). */
	--c-grey-500: var(--c-grey-700);
	--c-grey-700: var(--c-black);
}

@media (prefers-color-scheme: dark) {

	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) {
		--colore-titolo: var(--colore-titolo-aaa-scuro) !important;
		--colore-testo-piccolo: var(--colore-testo-piccolo-aaa-scuro) !important;
	}
}

html.a11y-contrasto-alto[data-a11y-tema="dark"] {
	--colore-titolo: var(--colore-titolo-aaa-scuro) !important;
	--colore-testo-piccolo: var(--colore-testo-piccolo-aaa-scuro) !important;
}

html.a11y-contrasto-alto :focus-visible {
	outline-width: 4px;
}

html.a11y-contrasto-alto a {
	text-decoration: underline;
}

/* $c-red (accento) è un letterale fisso, non theme-aware: 5.58:1 su
   bianco (sotto AAA) e solo 3.30:1 sullo sfondo scuro (--c-white scuro,
   #141414 — sotto anche l'AA attuale, indipendentemente dal contrasto
   elevato). Il colore a riposo dei link resta $c-text (nero/bianco, gia'
   21:1): solo hover/active e .text-accent usano il rosso e vanno
   corretti, con un tono per tema attraverso lo stesso schema a tre
   blocchi (chiaro di default, media query scoped, attributo esplicito)
   gia' usato in questo file.

   Ricalibrati il 2026-09-18: i due toni sotto erano calcolati solo contro
   il canvas pieno (bianco / #141414) e ci arrivavano appena (7.03:1 /
   7.14:1) — misurando dal vivo (hover reale + axe) il rosso cadeva sotto
   7:1 anche sul fondo leggermente piu' scuro delle card ($c-grey-100,
   #f8f8f8 in chiaro / #1c1c1c in scuro), che e' l'altro sfondo "piatto"
   su cui un link puo' davvero stare. Ricalcolati contro quel fondo (piu'
   severo, quindi coprono anche il bianco/#141414 per costruzione):
   #ab080e e' 7.13:1 su #f8f8f8 (7.57:1 su bianco), #ea8e92 e' 7.13:1 su
   #1c1c1c (7.70:1 su #141414). */
html.a11y-contrasto-alto .btn--red {
	background-color: #b4090f;
}

html.a11y-contrasto-alto a:hover,
html.a11y-contrasto-alto a:active,
html.a11y-contrasto-alto .text-accent {
	color: #ab080e;
}

@media (prefers-color-scheme: dark) {

	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) a:hover,
	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) a:active,
	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .text-accent {
		color: #ea8e92;
	}
}

html.a11y-contrasto-alto[data-a11y-tema="dark"] a:hover,
html.a11y-contrasto-alto[data-a11y-tema="dark"] a:active,
html.a11y-contrasto-alto[data-a11y-tema="dark"] .text-accent {
	color: #ea8e92;
}

/* La regola sopra ha specificita' (0,2,2) in chiaro e (0,3,2) nella
   variante scura (`:not([data-a11y-tema="light"])` conta come attributo,
   in piu' all'elemento `a`) — sopra la soglia (0,2,0) con cui quattro
   componenti gia' scavalcavano di proposito il rosso globale di riposo
   (sass/base/_links.scss) per un colore che sul loro fondo funziona
   davvero (vedi i commenti su `.card__link:hover`, `.ancora:hover`,
   `.tabs__item:hover`, e il fondo scuro fisso del footer). Il contrasto
   elevato, attivando *questa* regola, li scavalcava a sua volta —
   rimettendo il rosso (ricalibrato ma comunque calibrato solo sul canvas)
   esattamente dove quei quattro posti avevano gia' dimostrato che non
   funziona: 1.02:1 sui pillola `.ancora`/`.tabs__item` quando la pagina
   e' gia' rossa o ambra (testo e fondo diventano lo stesso colore), 1.47:1
   sul footer (fondo grigio scuro fisso, #404040, che nessun rosso puo'
   reggere restando leggibile anche sul bianco). Trovato misurando l'hover
   vero con Playwright, non a occhio: nessuno di questi quattro fallimenti
   si vede leggendo il CSS.

   Le quattro regole sotto ripristinano quei colori. Salire di specificita'
   non basta — batterebbe la variante chiara (0,2,2) ma non quella scura
   (0,3,2), che ha un elemento in piu' — quindi usano `!important`, come
   gia' fa il blocco delle custom property qui sopra per lo stesso motivo:
   deve vincere in ogni combinazione di tema chiaro/scuro e pagina con o
   senza colore proprio, non solo in quella misurata per prima. */
html.a11y-contrasto-alto .card__link:hover,
html.a11y-contrasto-alto .card__link:focus {
	color: var(--c-black, #000) !important;
}

/* `-aaa` diretto, non `--colore-superficie`/`--colore-testo` (che il
   blocco `html.a11y-contrasto-alto` in cima al file reindirizza alla
   coppia -aaa): quel reindirizzo vince solo dove il colore di **base** e'
   scritto su `:root`, cioe' su ogni pagina tranne la home. La home lo
   scrive con un attributo `style` per **fascia**
   (`interporto_pordenone_stile_colore()`, inc/colori.php) — cinque
   colori, uno a sezione — e li' il valore sta sulla sezione, non su
   `<html>`: l'`!important` su `<html>` non la raggiunge, perche' non e'
   una sostituzione del valore ereditato ma una dichiarazione propria di
   un altro elemento, e la sezione ne ha gia' una sua (l'attributo
   `style`, che vince comunque sull'eredita'). Il sintomo era `.btn--colore`
   della home ferma al tono AA (5.65:1) col contrasto elevato acceso.
   `-aaa` invece e' scritto **sullo stesso elemento** del non-aaa, sia su
   `:root` sia sulla sezione — leggerlo diretto non dipende da dove sta
   il colore di partenza. Stessi ripieghi della regola di riposo
   (sass/components/_ancore.scss): senza, su una pagina senza colore
   proprio `var(--colore-superficie-aaa)` non risolto rende l'intera
   dichiarazione non valida — e per una proprieta' non ereditata come
   `background-color` questo significa *trasparente*, non "ignora e prova
   la regola sotto". Verificato dal vivo su Appalti (nessun colore di
   pagina): senza ripiego lo sfondo del tab spariva. */
html.a11y-contrasto-alto .ancora:hover,
html.a11y-contrasto-alto .ancora:focus {
	background-color: var(--colore-superficie-aaa, var(--c-black, #000)) !important;
	color: var(--colore-testo-aaa, var(--c-white, #fff)) !important;
}

html.a11y-contrasto-alto .tabs__item:hover,
html.a11y-contrasto-alto .tabs__item:focus {
	background-color: var(--colore-superficie-aaa, var(--c-grey-700, #6e6e6e)) !important;
	color: var(--colore-testo-aaa, var(--c-white, #fff)) !important;
}

/* Il footer non ha mai avuto un colore di hover: il testo resta bianco
   (10.36:1 sul suo fondo, sempre #404040) semplicemente perche' l'hover
   non tocca `color` (sass/layout/_footer.scss) e la regola di riposo
   vince per ordine di sorgente sul rosso globale non scoped. Il rosso ad
   alta specificita' del contrasto elevato rompe anche questo — vedi sopra. */
html.a11y-contrasto-alto .site-footer__nav a:hover,
html.a11y-contrasto-alto .site-footer__nav a:focus,
html.a11y-contrasto-alto .site-footer__legal a:hover,
html.a11y-contrasto-alto .site-footer__legal a:focus,
html.a11y-contrasto-alto .site-footer__contacts a:hover,
html.a11y-contrasto-alto .site-footer__contacts a:focus {
	color: #fff !important;
}

/* Il menu principale (nav-overlay) e' rimasto fuori da questo lavoro
   finche' non l'ha chiesto il cliente: al riposo il rosso globale non lo
   tocca (`--colore-voce` vince gia' li', vedi sass/layout/_nav-overlay.scss),
   ma su hover/focus/corrente il rosso del contrasto elevato lo scavalcava
   come gli altri quattro sopra — solo che li' *sembrava* innocuo, perche'
   il rosso ricalibrato passa comunque 7:1 sul bianco. Il difetto era
   sostanziale, non di contrasto: la voce doveva restare quella della
   *propria* pagina, non diventare tutta rossa.

   `--colore-voce` pero' e' calibrato al 3:1 (testo grande, soglia AA) — non
   basta all'AAA del contrasto elevato (4.5:1 per il testo grande, WCAG
   1.4.6; non 7:1, quello e' per il testo normale). Da qui la coppia
   `--colore-voce-aaa`/`--colore-voce-aaa-scuro`, calcolata in PHP per ogni
   voce (inc/navigation.php, stessa funzione), con lo stesso schema chiaro/
   media-query/attributo di `--colore-titolo-aaa` qui sopra. Il ripiego
   resta `--c-grey-500`: sulle voci senza colore proprio (Home, Appalti,
   News, Contatti) quel token e' gia' portato al nero/bianco pieno dalla
   riga `--c-grey-500: var(--c-grey-700)` a inizio file, quindi arriva gia'
   corretto senza bisogno di un terzo valore calcolato. */
html.a11y-contrasto-alto .nav-overlay__list a:hover,
html.a11y-contrasto-alto .nav-overlay__list a:focus-visible,
html.a11y-contrasto-alto .nav-overlay__list [aria-current="page"] {
	color: var(--colore-voce-aaa, var(--c-grey-500, #7b7b7b)) !important;
}

html.a11y-contrasto-alto .nav-overlay__list .icon {
	color: var(--colore-voce-aaa, var(--c-grey-500, #7b7b7b));
}

@media (prefers-color-scheme: dark) {

	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .nav-overlay__list a:hover,
	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .nav-overlay__list a:focus-visible,
	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .nav-overlay__list [aria-current="page"] {
		color: var(--colore-voce-aaa-scuro, var(--c-grey-500, #7b7b7b)) !important;
	}

	html.a11y-contrasto-alto:not([data-a11y-tema="light"]) .nav-overlay__list .icon {
		color: var(--colore-voce-aaa-scuro, var(--c-grey-500, #7b7b7b));
	}
}

html.a11y-contrasto-alto[data-a11y-tema="dark"] .nav-overlay__list a:hover,
html.a11y-contrasto-alto[data-a11y-tema="dark"] .nav-overlay__list a:focus-visible,
html.a11y-contrasto-alto[data-a11y-tema="dark"] .nav-overlay__list [aria-current="page"] {
	color: var(--colore-voce-aaa-scuro, var(--c-grey-500, #7b7b7b)) !important;
}

html.a11y-contrasto-alto[data-a11y-tema="dark"] .nav-overlay__list .icon {
	color: var(--colore-voce-aaa-scuro, var(--c-grey-500, #7b7b7b));
}

/* `.btn`/`.btn--red`/`.btn--grey`/`.btn--colore`/`.btn--light` sono tutti
   `<a>` (sass/components/_buttons.scss): stesso difetto delle regole sopra,
   il rosso del contrasto elevato le scavalcava su hover/focus. Le prime
   tre leggono `-aaa` diretto e non la coppia ridefinita in cima al file,
   per lo stesso motivo spiegato sopra su `.ancora`/`.tabs__item`: sono
   proprio i bottoni `.btn--colore` della home (dentro una fascia con
   colore per attributo `style`) il caso che ha fatto scoprire il problema.
   `.btn--light` non usa il colore di pagina (e' la variante chiara sopra
   le foto servizio) ma va comunque riaffermata, stesso motivo di
   `.card__link` piu' sopra. */
html.a11y-contrasto-alto .btn:hover,
html.a11y-contrasto-alto .btn:focus {
	background-color: var(--colore-superficie-aaa, var(--c-grey-700, #6e6e6e)) !important;
	color: var(--colore-testo-aaa, var(--c-white, #fff)) !important;
}

html.a11y-contrasto-alto .btn--red:hover,
html.a11y-contrasto-alto .btn--red:focus,
html.a11y-contrasto-alto .btn--grey:hover,
html.a11y-contrasto-alto .btn--grey:focus,
html.a11y-contrasto-alto .btn--colore:hover,
html.a11y-contrasto-alto .btn--colore:focus {
	background-color: var(--colore-scuro-aaa, var(--c-black, #000)) !important;
	color: var(--colore-testo-scuro-aaa, var(--c-white, #fff)) !important;
}

/* Serve anche `background-color`, non solo `color`: `.btn--light` porta
   anche la classe `.btn`, quindi la regola `.btn:hover` qui sopra le si
   applica comunque e le vince lo sfondo (nero, il suo ripiego per una
   pagina senza colore) se questa non lo riafferma a sua volta — stessa
   specificita', ma quella base e' scritta prima. Valori invariati da
   sass/components/_buttons.scss: gia' un neutro fisso e theme-aware,
   14.9:1 nero su $c-grey-200 in chiaro (commento in base/_variables.scss),
   niente da ricalcolare. */
html.a11y-contrasto-alto .btn--light:hover,
html.a11y-contrasto-alto .btn--light:focus {
	background-color: var(--c-grey-200, #d9d9d9) !important;
	color: var(--c-black, #000) !important;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Utilities — meno movimento, su richiesta di chi naviga
--------------------------------------------------------------*/

/* Fino alla Fase 9 il tema aveva **una** regola di questo tipo, sul solo
   titolo dell'hero (`layout/_home.scss`), perche' quella era quasi l'unica
   cosa che si muoveva. Con le animazioni diffuse enumerare i selettori uno
   per uno vorrebbe dire dimenticarne uno alla prima aggiunta, e il difetto
   sarebbe silenzioso: chi ha chiesto meno movimento continuerebbe a
   riceverlo senza che nessuno se ne accorga.

   Gli `!important` sono quindi la forma giusta e non una scorciatoia: e'
   l'unico modo di coprire anche le regole che verranno, e una preferenza
   dichiarata dall'utente batte per definizione una preferenza dell'autore.

   Non e' `animation: none`: azzerare del tutto un'animazione impedisce agli
   eventi `animationend`/`transitionend` di scattare, e il codice che aspetta
   quegli eventi per pulire uno stato resterebbe appeso. 0.01ms li fa
   scattare subito. La chiusura del pannello del menu dipende esattamente da
   questo.

   **I ritardi vanno azzerati a parte** (aggiunti il 2026-09-09), e la
   distinzione non e' pedanteria: un `transition-delay` non e' una durata,
   quindi la riga qui sopra non lo tocca. Le voci di menu entrano sfalsate
   con ritardi fino a mezzo secondo, e senza queste due righe chi ha chiesto
   meno movimento vedrebbe un pannello vuoto per quel mezzo secondo — cioe'
   la cosa peggiore delle due. Qui pero' e' `0s` e non `0.01ms`: il ritardo
   non fa scattare nessun evento, e non c'e' niente da tenere in vita. */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

/* Le due scelte esplicite del pannello di accessibilità ("Ridotte" e
   "Complete") accanto a "Come il sistema" (che non aggiunge nessuna
   classe, e lascia decidere solo la media query sopra).

   "Ridotte" rispecchia esattamente il blocco sopra, attivabile a
   prescindere dalla preferenza di sistema. */
html.a11y-movimento-ridotto *,
html.a11y-movimento-ridotto *::before,
html.a11y-movimento-ridotto *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
	transition-duration: 0.01ms !important;
}

/* Copre anche lo stato nascosto di sass/utilities/_rivela.scss, che non
   è un'animazione CSS ma un opacity/transform statico gatato dalla
   classe `rivela-attiva` scritta in `<head>` — quello script controlla
   solo `prefers-reduced-motion` di sistema, non la scelta salvata nel
   pannello. Se qualcuno ha scelto "Ridotte"/"Disattivate" nel pannello ma
   il sistema non chiede movimento ridotto, `rivela-attiva` verrebbe
   comunque aggiunta: questa regola annulla l'effetto visivo a
   prescindere da chi ha vinto la corsa fra i due script in `<head>`. Il
   JS del pannello toglie anche la classe `rivela-attiva` stessa, come
   misura in più. */
html.a11y-movimento-ridotto.rivela-attiva .rivela,
html.a11y-movimento-disattivo.rivela-attiva .rivela {
	opacity: 1 !important;
	transform: none !important;
}

/* "Disattivate": più forte di "Ridotte", rimuove animazione/transizione
   per intero invece di renderle quasi-istantanee. Più semplice del
   blocco sopra apposta — `none` non lascia nessun ritardo da azzerare a
   parte, a differenza di una durata solo ridotta. Chi dipende da
   `animationend`/`transitionend` per pulire uno stato (il menu mobile,
   js/navigation.js) deve gestire anche il caso "l'evento non arriva
   mai", non solo "arriva quasi subito" — vedi la correzione in quel
   file. */
html.a11y-movimento-disattivo *,
html.a11y-movimento-disattivo *::before,
html.a11y-movimento-disattivo *::after {
	animation: none !important;
	scroll-behavior: auto !important;
	transition: none !important;
}

/* "Complete" è il caso inverso: chi ha *prefers-reduced-motion: reduce*
   a livello di sistema ma vuole comunque vedere le animazioni di
   questo sito. Fra due regole `!important` sullo stesso elemento e
   proprietà vince l'ordine nel foglio, non la specificità del
   selettore: bastano queste quattro righe, scritte dopo la media query,
   per annullarla — `revert` riporta la proprietà al valore che avrebbe
   senza questa dichiarazione, cioè quello scritto altrove nel tema. */
html.a11y-movimento-pieno *,
html.a11y-movimento-pieno *::before,
html.a11y-movimento-pieno *::after {
	animation-duration: revert !important;
	animation-iteration-count: revert !important;
	scroll-behavior: revert !important;
	transition-duration: revert !important;
}

/*--------------------------------------------------------------
# Utilities — comparsa dei blocchi allo scorrimento
--------------------------------------------------------------*/

/* Un blocco entra sfumando e risalendo di 20px. Chi mette in moto la cosa e'
   `js/rivela.js`, che marca gli elementi con `.rivela` e li scopre con un
   IntersectionObserver.

   **Tutto sta dentro `.rivela-attiva`, e non e' un dettaglio: e' la sola
   ragione per cui questa animazione non puo' lasciare la pagina bianca.**
   Quella classe la scrive uno script in `<head>`
   (`interporto_pordenone_attiva_rivelazioni()`), non l'observer che sta in
   fondo alla pagina. Quindi:

   - JavaScript spento o bloccato -> la classe non c'e' -> **niente si
     nasconde**, e il sito e' quello di prima. Se lo stato nascosto stesse
     nella classe base, un file non raggiungibile darebbe una pagina vuota;
   - `prefers-reduced-motion` -> lo script non aggiunge la classe, quindi non
     serve una media query che rimetta `opacity: 1`, e non c'e' modo di
     sbagliare la specificita' dell'annullamento;
   - se `js/rivela.js` non parte entro 10 secondi, lo script in testa toglie
     la classe da solo (functions.php, interporto_pordenone_attiva_rivelazioni —
     salito da 2s il 2026-09-11, un refresh a freddo su mobile poteva superare
     il margine vecchio prima ancora che lo script arrivasse).

   In `<head>` e non in fondo perche' uno script nel footer puo' eseguire a
   pagina gia' dipinta: si vedrebbe il contenuto comparire, sparire e
   rientrare. */
.rivela-attiva .rivela {
	opacity: 0;
	transform: translate(var(--rivela-x, 0), var(--rivela-y, 4.5rem)) scale(0.9);
	transition: opacity 1050ms cubic-bezier(0.16, 1, 0.3, 1) var(--rivela-ritardo, 0ms), transform 1050ms cubic-bezier(0.16, 1, 0.3, 1) var(--rivela-ritardo, 0ms);
}

/* Stessa specificita' della regola sopra (0,2,0): a decidere e' l'ordine, e
   per questo le due regole devono restare in quest'ordine dentro questo file.
   Mai `transition: all` qui: si porterebbe dietro anche i `background-color`
   e i `box-shadow` degli stati, che hanno durate loro. */
.rivela-attiva .rivela--dentro {
	opacity: 1;
	transform: none;
}

/* La direzione si dichiara con due custom property, e non con una classe.
   `--rivela-x` e `--rivela-y` entrano dentro la `translate()` qui sopra, quindi
   cambiare direzione non richiede una regola con piu' specificita' di
   `.rivela--dentro`: se fosse una classe, `.rivela-attiva .qualcosa.rivela`
   (0,3,0) batterebbe `.rivela-attiva .rivela--dentro` (0,2,0) e l'elemento
   resterebbe fuori posto **dopo** essere comparso. Con le property la regola
   che azzera resta una sola, e vince per ordine come prima.

   Il valore di riposo e' la sola risalita, che e' com'era.

   **Lo spostamento orizzontale e' l'eccezione, non la regola.** Fino al
   2026-09-09 qui c'era scritto "solo verticale, mai translateX", e la ragione
   era un difetto vero: in Fase 7 uno spostamento laterale ha fatto scorrere la
   home di 106px a 375px di larghezza. Adesso c'e', ma solo per le due colonne
   di una fascia a due colonne, solo da desktop in su — sotto si impilano, e
   "da sinistra" e "da destra" non vorrebbero dire niente — e dentro una fascia
   che ritaglia (`overflow-x: clip` su `.section`, layout/_grid.scss). La scala
   invece resta **sotto** 1 come sempre: un elemento che rimpicciolisce non puo'
   sfondare, uno che parte ingrandito si'. */
@media (min-width: 64rem) {

	.home-split__media {
		--rivela-x: -2rem;
		--rivela-y: 0;
	}

	.home-split__body {
		--rivela-x: 2rem;
		--rivela-y: 0;
	}

	/* A colonne scambiate si scambiano anche le direzioni: ognuna arriva
     comunque dal proprio bordo, non da quello dell'altra. */
	.home-split--reverse .home-split__media {
		--rivela-x: 2rem;
	}

	.home-split--reverse .home-split__body {
		--rivela-x: -2rem;
	}
}

/* Le fotografie delle schede entrano con un ingrandimento che si posa.

   E' un'**animazione** e non una transizione su `.rivela--dentro`, ed e'
   obbligatorio: una regola `.rivela-attiva .rivela--dentro .card-media__img`
   ha specificita' (0,3,0) contro la (0,2,0) di `.card-media:hover
   .card-media__img`, quindi il suo `transform: none` vincerebbe **per sempre**
   e spegnerebbe l'ingrandimento al passaggio del mouse. Un'animazione con
   `backwards` invece esiste solo mentre dura: prima tiene lo stato iniziale,
   dopo restituisce l'elemento al valore dichiarato, e l'hover torna suo.
   E' la stessa ragione per cui il titolo dell'hero non usa `both`
   (layout/_home.scss).

   Il ritaglio ce l'ha gia' `.card-media` con `overflow: hidden`, quindi
   l'ingrandimento non sborda dagli angoli arrotondati. */
@keyframes card-entra {

	from {
		transform: scale(1.06);
	}

	to {
		transform: none;
	}
}

.rivela-attiva .rivela--dentro .card-media__img {
	animation: card-entra 1050ms cubic-bezier(0.16, 1, 0.3, 1) var(--rivela-ritardo, 0ms) backwards;
}

/* Il filetto della testata di pagina cresce da sinistra invece di comparire
   tutto insieme. E' `scaleX` e non `width`: la larghezza fa ricalcolare il
   layout a ogni fotogramma, la trasformazione no. */
.rivela-attiva .rivela .section-header__rule,
.rivela-attiva .section-header__rule.rivela {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1050ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rivela-ritardo, 0ms) + 120ms);
}

.rivela-attiva .rivela--dentro .section-header__rule,
.rivela-attiva .section-header__rule.rivela--dentro {
	transform: none;
}

/* E la freccia della testata arriva **dopo il filetto** (2026-09-09), cosi'
   la testata si compone in tre tempi: titolo, filetto, freccia.

   Si anima l'`.icon` e non lo `<span>` che la contiene, ed e' obbligatorio:
   lo span porta gia' `transform: rotate(90deg)` da `_section-header.scss` —
   e' cosi' che la ↗ diventa la ↘ del mockup — e una regola qui che finisse
   con `transform: none` gliela porterebbe via, raddrizzando la freccia a
   fine comparsa. Sull'icona interna il `transform` e' invece libero.

   Ed e' una **scala** e non uno spostamento per la stessa ragione al
   contrario: dentro un contenitore ruotato di 90 gradi una traslazione va
   dove dice il sistema di coordinate ruotato, non dove la si vede andare.
   Una scala e' invariante per rotazione, e sotto 1 non puo' sfondare. */
.rivela-attiva .rivela .section-header__icon .icon,
.rivela-attiva .section-header__icon.rivela .icon {
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 1050ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rivela-ritardo, 0ms) + 220ms), transform 1050ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rivela-ritardo, 0ms) + 220ms);
}

.rivela-attiva .rivela--dentro .section-header__icon .icon,
.rivela-attiva .section-header__icon.rivela--dentro .icon {
	opacity: 1;
	transform: none;
}

/* Le fasce a sfondo colorato (`.section--tint`, `.section--grigia`,
   `.section--colore`): stessa dissolvenza generica di sopra, ma senza
   spostamento ne' scala — sono bande a piena larghezza, farle scorrere o
   scalare sposterebbe la banda stessa, non un contenuto interno. La
   specificita' (0,3,0) batte quella della regola generica (0,2,0) e vale
   per entrambi gli stati (nascosto e comparso), quindi il transform resta
   fermo a `none` dall'inizio alla fine invece di limitarsi ad azzerarsi
   all'arrivo. Marcatura e osservatore a parte in js/rivela.js. */
.rivela-attiva .rivela.section--tint,
.rivela-attiva .rivela.section--grigia,
.rivela-attiva .rivela.section--colore {
	transform: none;
}

/* In stampa non c'e' nessuno scorrimento che riveli alcunche'. */
@media print {

	.rivela-attiva .rivela,
	.rivela-attiva .rivela .section-header__rule,
	.rivela-attiva .rivela .section-header__icon .icon {
		opacity: 1;
		transform: none;
	}

	.rivela-attiva .rivela--dentro .card-media__img {
		animation: none;
	}
}