/* Veste «Jewels»: home 07.3 e scheda v3 di ASTRA portate sul motore, più le pagine coerenti con loro.
   Colori dell'evento: arancione #ED8C4F, nero #1A1A1A, bianco, grigi neutri; fondo caldo molto chiaro nelle schede.
   L'arancione non fa mai da colore di un testo piccolo sul bianco: lì il testo è scuro e l'arancione sta nei dettagli. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("caratteri/inter-wght.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("caratteri/inter-italic-wght.woff2") format("woff2"); }

:root {
  --arancio: #ed8c4f;
  --nero: #1a1a1a;
  --bianco: #fff;
  --grigio-testo: #5c5c5c;
  --grigio-nota: #666;
  --filo: #ddd;
  --filo-chiaro: #eee;
  --chiaro: #f7f9fa;
  --caldo: #f3f2f0;
  /* Un solo allineamento per tutte le fasce: i fondi arrivano ai bordi, il contenuto sta in 1360 px. */
  --margine: max(6vw, calc((100vw - 1360px) / 2));
  /* Altezza della testata: la usa anche l'apertura della home per arrivare a filo del fondo della finestra. */
  --testata-alta: 100px;
  --raggio: 10px;
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--nero); background: var(--bianco); font: 400 16px/1.65 "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-optical-sizing: auto; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0 0 1em; }
main:focus { outline: none; }

/* Fuoco sempre visibile: anello arancione più un bordo scuro, che regge su fondi chiari e scuri. */
:focus-visible { outline: 3px solid var(--nero); outline-offset: 3px; box-shadow: 0 0 0 3px var(--arancio); }
.apertura :focus-visible, .sede :focus-visible, .testata-pagina :focus-visible { outline-color: var(--bianco); }

/* Nessuna scritta sotto gli 11 px (11 ottobre 2026, su indicazione di Astra e per gli avvisi «Very small text» di WAVE):
   prima le etichette in maiuscolo erano a 9 e 10 px. Con il corpo è scesa la spaziatura fra le lettere, così la larghezza resta quella. */
.occhiello { margin: 0 0 24px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; line-height: 1.6; text-transform: uppercase; }
.occhiello--filo { border-left: 3px solid var(--arancio); padding-left: 14px; }
.freccia { display: inline-block; }

.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 46px; padding: 13px 22px; border: 0; background: var(--arancio); color: var(--nero); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; }
.pulsante:hover { background: var(--nero); color: var(--bianco); }
/* Pulsante di un contenuto non ancora pronto: al clic la scritta diventa «Coming soon». Le due scritte occupano lo stesso posto. */
button.presto { display: inline-grid; align-items: center; justify-items: center; } /* «button.» perché .collegamento, più in basso, rimetterebbe inline-flex */
.presto > .presto__scritta, .presto > .presto__dopo { grid-area: 1 / 1; }
.presto > .freccia { grid-area: 1 / 2; }
.presto__dopo, .presto--detto .presto__scritta, .presto--detto .freccia { visibility: hidden; }
.presto--detto .presto__dopo { visibility: visible; }
.pulsante--scuro { background: var(--nero); color: var(--bianco); }
.pulsante--scuro:hover { background: var(--arancio); color: var(--nero); }
.apertura .pulsante:hover, .sede .pulsante:hover, .testata-pagina .pulsante:hover { background: var(--bianco); color: var(--nero); }
.collegamento { display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding-bottom: 5px; font-size: 12px; background: linear-gradient(var(--arancio), var(--arancio)) 0 calc(100% - 6px) / 100% 1px no-repeat; }
.collegamento:hover { background-size: 100% 2px; }
/* Un «collegamento» che è un <button> (contenuto non ancora pronto): via bordo, margini e carattere del browser, come un link. */
button.collegamento { border: 0; padding-inline: 0; color: inherit; font-family: inherit; line-height: inherit; cursor: pointer; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.azioni--larghe { gap: 16px 32px; }

.testo > :first-child { margin-top: 0; }
.testo > :last-child { margin-bottom: 0; }
.testo { color: var(--grigio-testo); }
.testo a { text-decoration: underline; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--nero); }
.testo a:hover { text-decoration-color: var(--nero); }
.testo strong { color: var(--nero); font-weight: 600; }
.testo ul, .testo ol { padding-left: 1.2em; }
.testo li { margin-bottom: 0.5em; }
.testo h2, .testo h3 { margin: 1.6em 0 0.6em; color: var(--nero); font-size: 24px; font-weight: 400; letter-spacing: -0.5px; }

.pannello { border: 1px solid var(--filo); border-radius: var(--raggio); background: var(--bianco); }
.filetto { width: 42px; height: 2px; margin: 16px 0 22px; background: var(--arancio); }

/* ---------- testata e menu ---------- */

.testata { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--testata-alta); padding: 20px var(--margine); background: var(--bianco); border-bottom: 2px solid var(--arancio); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07); isolation: isolate; }
.marchio { flex-shrink: 0; font-size: 21px; font-weight: 400; letter-spacing: 3px; line-height: 1.3; text-transform: uppercase; }
/* Stemma della Regione Campania e nome dell'evento come un marchio solo: lo stemma a sinistra, alto quanto le due righe del nome. */
.marchio--ente { display: flex; align-items: center; gap: 16px; }
.marchio__ente { flex-shrink: 0; width: auto; height: 50px; }
.marchio__nome { display: block; }
.marchio small { display: block; font-size: 11px; letter-spacing: 4px; }
.marchio__edizione { display: block; font-size: 11px; letter-spacing: 4px; color: var(--grigio-nota); }
.menu { display: flex; align-items: center; gap: 4px; font-size: 14px; letter-spacing: 1.7px; line-height: 1.4; text-transform: uppercase; }
.menu a { display: flex; align-items: center; min-height: 46px; padding: 14px 12px; border-bottom: 3px solid transparent; }
.menu a:hover, .menu a:focus-visible { background: var(--chiaro); border-bottom-color: var(--arancio); }
/* Accesa sulla pagina stessa (aria-current="page") e sulle pagine che le stanno sotto, come le schede di un elenco ("true"). */
.menu a[aria-current] { border-bottom-color: var(--arancio); }
.menu .menu__archivio { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--filo); }
.menu .menu__ultima { margin-left: 10px; padding: 12px 18px; background: var(--arancio); letter-spacing: 1.5px; }
.menu .menu__ultima:hover, .menu .menu__ultima:focus-visible { background: var(--nero); color: var(--bianco); border-bottom-color: transparent; }
.menu .menu__ultima[aria-current] { border-bottom-color: var(--nero); }
.menu-stretto { display: none; }

@media (max-width: 1345px) {
  .menu { font-size: 12px; letter-spacing: 1.1px; gap: 2px; }
  .menu a { padding: 12px 9px; }
  .menu .menu__ultima { padding: 12px 14px; margin-left: 6px; }
  .menu .menu__archivio { margin-left: 4px; padding-left: 12px; }
  .testata { gap: 20px; }
}
/* Dove il menu su una riga ha poco spazio, e sul telefono, lo stemma accanto al nome è più piccolo. */
@media (max-width: 1280px) {
  .marchio--ente { gap: 12px; }
  .marchio__ente { height: 42px; }
}
/* Negli ultimi pixel prima del menu a pannello il nome prende già la misura che ha lì: sennò il menu va su due righe. */
@media (max-width: 1120px) {
  .marchio--ente { font-size: 19px; }
  .marchio--ente small { letter-spacing: 2.6px; }
}
/* Sotto questa larghezza otto voci non stanno su una riga: il menu passa nel pannello che si apre. */
@media (max-width: 1080px) {
  :root { --testata-alta: 80px; }
  .testata { position: relative; flex-wrap: wrap; gap: 0; padding-top: 15px; padding-bottom: 15px; }
  .marchio { font-size: 19px; }
  .marchio small, .marchio__edizione { font-size: 11px; letter-spacing: 2.6px; }
  .menu--largo { display: none; }
  .menu-stretto { display: block; }
  .menu-stretto summary { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 90px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--filo); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; list-style: none; cursor: pointer; }
  .menu-stretto summary::-webkit-details-marker { display: none; }
  .menu-stretto__righe { width: 18px; height: 12px; border-top: 2px solid var(--nero); border-bottom: 2px solid var(--nero); background: linear-gradient(var(--nero), var(--nero)) center / 100% 2px no-repeat; }
  .menu-stretto[open] { display: flex; flex-direction: column; width: 100%; margin-top: 12px; }
  .menu-stretto[open] summary { width: 90px; margin-left: auto; }
  .menu-stretto[open] .menu-stretto__righe { height: 2px; border-bottom: 0; background: none; }
  .menu-stretto .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filo-chiaro); font-size: 12px; letter-spacing: 1px; }
  .menu-stretto .menu a { min-height: 46px; padding: 12px; }
  .menu-stretto .menu .menu__archivio { margin: 0; padding-left: 12px; border-left: 0; background: var(--chiaro); }
  .menu-stretto .menu .menu__ultima { margin: 0; padding: 12px; }
}

.avviso-archivio { padding: 12px var(--margine); background: var(--nero); color: var(--bianco); font-size: 13px; }
.avviso-archivio p { margin: 0; }
.avviso-archivio a { margin-left: 8px; border-bottom: 1px solid var(--arancio); padding-bottom: 2px; white-space: nowrap; }
.avviso-archivio :focus-visible { outline-color: var(--bianco); }

/* ---------- apertura della home ---------- */

/* Su PC l'apertura occupa ciò che resta della finestra sotto la testata: fotografia e didascalia arrivano a filo del fondo
   e il blocco delle date comincia subito sotto la piega. Se il testo chiede di più, cresce.
   Il filo arancione chiude l'apertura al posto della fascia di parole (scelta del direttore, 11 ottobre 2026): sta dentro la sua altezza. */
.apertura { position: relative; min-height: calc(100vh - var(--testata-alta)); min-height: calc(100svh - var(--testata-alta)); box-sizing: border-box; border-bottom: 4px solid var(--arancio); overflow: hidden; background: var(--nero); color: var(--bianco); }
.apertura__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
/* Il velo scuro segue la colonna del testo, non la finestra: sotto il testo (540 px) copre almeno il 54%, sotto il titolo
   almeno il 42%, quanto basta perché il bianco si legga anche su una fotografia chiara. In basso un secondo velo regge la didascalia. */
.apertura__velo { --colonna: calc(100vw - 2 * var(--margine)); position: absolute; inset: 0;
  /* Schiarito l'11 ottobre 2026 su richiesta del direttore, tenendo le soglie della leggibilità anche su una fotografia bianca:
     almeno 0,54 dietro il testo normale, almeno 0,42 dietro il titolo. Prima erano 0,8, 0,6, 0,42, 0,12 e 0,7 nella fascia in basso. */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.6) 60px, rgba(0, 0, 0, 0) 30%),
              linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0, rgba(0, 0, 0, 0.55) calc(var(--margine) + 0.46 * var(--colonna)), rgba(0, 0, 0, 0.42) calc(var(--margine) + 0.66 * var(--colonna)), rgba(0, 0, 0, 0.06) calc(var(--margine) + 0.97 * var(--colonna))); }
.apertura__testo { position: relative; z-index: 1; width: 100%; padding: 100px var(--margine) 115px; }
.apertura .occhiello { letter-spacing: 2.6px; }
.apertura h1 { max-width: 9.5em; font-size: clamp(52px, 5.2vw, 94px); letter-spacing: -2.5px; line-height: 1.06; }
/* Un titolo lungo scende di corpo e va a capo dentro la parte scura della fotografia. */
.apertura h1.titolo--lungo { max-width: 13em; font-size: clamp(42px, 4.1vw, 72px); letter-spacing: -2px; }
.apertura__sotto { max-width: 540px; margin: 28px 0 34px; color: #eee; }
.apertura__sotto p { margin: 0; }
.apertura .collegamento { text-transform: none; }
.apertura__didascalia { position: absolute; z-index: 2; right: var(--margine); bottom: 28px; margin: 0; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; }
/* Con più fotografie l'apertura le alterna in dissolvenza: una sola è opaca. In basso a sinistra un segno per fotografia
   e il pulsante che ferma e fa ripartire; sul telefono passano a destra, perché a sinistra c'è la didascalia. */
.apertura[data-apertura] .apertura__foto { transition: opacity 0.9s ease; }
.apertura__foto--sotto { opacity: 0; }
.apertura__comandi { position: absolute; z-index: 2; left: calc(var(--margine) - 6px); bottom: 14px; display: flex; align-items: center; }
.apertura__comandi[hidden] { display: none; }
.apertura__segno, .apertura__pausa { display: grid; place-items: center; width: 46px; height: 44px; padding: 0; border: 0; background: none; color: var(--bianco); cursor: pointer; }
.apertura__segno::before { content: ""; width: 34px; height: 2px; background: rgba(255, 255, 255, 0.45); }
.apertura__segno[aria-current="true"]::before { height: 3px; background: var(--bianco); }
.apertura__segno:hover::before { background: var(--arancio); }
/* Due barre per «ferma», un triangolo per «riparti»: disegnati con i bordi, senza immagini. */
.apertura__pausa::before { content: ""; width: 3px; height: 11px; border-right: 3px solid currentColor; border-left: 3px solid currentColor; padding-left: 3px; box-sizing: content-box; }
.apertura__pausa[aria-pressed="true"]::before { width: 0; height: 0; padding: 0; border: solid transparent; border-width: 6px 0 6px 10px; border-left-color: currentColor; }
.apertura__pausa:hover { color: var(--arancio); }

.fascia { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin: 0; padding: 21px var(--margine); background: var(--arancio); color: var(--nero); font-size: 11px; font-weight: 500; letter-spacing: 1.4px; list-style: none; text-transform: uppercase; }

/* ---------- sezioni ---------- */

.sezione { padding: 85px var(--margine); scroll-margin-top: 115px; }
.sezione--chiaro { background: var(--chiaro); }
.sezione--scuro { background: var(--nero); color: var(--bianco); }
.sezione--scuro .testo { color: #ddd; }
.sezione--scuro .testo strong, .sezione--scuro .testo a { color: var(--bianco); }
.sezione h2 { font-size: clamp(32px, 3.5vw, 52px); letter-spacing: -1.6px; }
.sezione h2.titolo--lungo { font-size: clamp(28px, 2.7vw, 40px); letter-spacing: -1px; line-height: 1.15; }
.sezione__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.sezione__testa .testo { max-width: 650px; margin-top: 25px; }
.sezione__testa > .collegamento { flex-shrink: 0; }

.date { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 75px; padding-top: 65px; padding-bottom: 65px; border-bottom: 1px solid var(--filo-chiaro); }
.date .occhiello { margin-bottom: 24px; }
.date h2 { font-size: clamp(45px, 5vw, 72px); letter-spacing: -2px; }
.date__calendario { margin: 28px 0 24px; padding: 22px 0; border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; }
.date__edizione { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
/* Il numero dei giorni non si spezza: «12–13 November 2025» va a capo fra le parole, mai dentro. */
.date__giorni { display: block; font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -1px; line-height: 1.2; overflow-wrap: normal; }
.date__luogo { margin: 0; font-size: 19px; line-height: 1.6; }
.date__luogo span { font-size: 14px; letter-spacing: 0.5px; }
.date__perche { padding-left: 55px; border-left: 1px solid #d7d7d7; }
.date__perche h3 { font-size: 34px; letter-spacing: -1px; }
.date__perche .testo { margin: 24px 0; color: var(--nero); font-size: 15px; }
.date__perche > .testo:first-child { margin-top: 0; }

.vantaggi__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.vantaggio { display: grid; grid-template-columns: 45px minmax(0, 1fr); column-gap: 20px; padding: 35px; border: 1px solid #e5e5e5; background: var(--bianco); }
.vantaggio__numero { grid-row: 1 / 3; font-size: 25px; font-weight: 300; line-height: 1.2; white-space: nowrap; }
/* I segni decorativi arancioni sono disegni e non caratteri (vedi la macro «segno»): stesso colore, stessa forma. */
.segno { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; fill: none; stroke: var(--arancio); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.14em; }
.vantaggio__barra { width: 0.36em; height: 0.96em; stroke-width: 1.25; stroke-linecap: butt; vertical-align: -0.17em; }
.vantaggio h3 { font-size: 24px; font-weight: 400; letter-spacing: -0.5px; line-height: 1.2; }
.vantaggio .testo { grid-column: 2; max-width: 500px; margin-top: 18px; color: var(--grigio-nota); font-size: 14px; }

.percorsi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
/* Dopo una sezione dello stesso colore i percorsi chiudono la stessa fascia, senza stacco. Se il colore cambia sono una fascia
   a sé e tengono lo spazio sopra, uguale a quello sotto: i riquadri stanno al centro e non toccano il bordo. */
.vantaggi:has(+ .percorsi) { padding-bottom: 35px; }
.sezione--chiaro + .percorsi.sezione--chiaro, .sezione--bianco + .percorsi.sezione--bianco, .sezione--scuro + .percorsi.sezione--scuro { padding-top: 0; }
.percorso { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 25px; border: 1px solid var(--arancio); background: var(--bianco); color: var(--nero); font-size: 20px; line-height: 1.3; }
.percorso:hover { background: var(--arancio); }
.percorso--scuro { border-color: var(--nero); background: var(--nero); color: var(--bianco); }
.percorso--scuro:hover { border-color: var(--arancio); color: var(--nero); }
.percorso__nome { display: block; }
.percorso__sotto { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; opacity: 0.86; }
.percorso__vai { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.6em; font-size: 12px; }

.sede { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--nero); color: var(--bianco); }
.sede--senza-foto { grid-template-columns: 1fr; }
.sede__foto { width: 100%; height: 100%; min-height: 530px; object-fit: cover; }
.sede__testo { padding: 80px max(8%, calc((100vw - 1360px) / 2)) 80px 8%; }
.sede--senza-foto .sede__testo { padding: 80px var(--margine); }
.sede h2 { font-size: clamp(36px, 3.6vw, 62px); }
.sede .testo, .sede__luogo { margin: 26px 0; color: #ddd; font-size: 14px; }

.foto-sede { padding-top: 30px; padding-bottom: 55px; border-bottom: 1px solid var(--filo-chiaro); }
.foto-sede .occhiello { margin-bottom: 20px; }
.foto-sede h2 { margin-bottom: 30px; }
.foto-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.foto-griglia figure { margin: 0; min-width: 0; }
.foto-griglia figcaption { margin-top: 12px; color: var(--grigio-nota); font-size: 12px; }
.apre-foto { display: block; overflow: hidden; background: var(--chiaro); cursor: zoom-in; }
.apre-foto img { width: 100%; height: 250px; object-fit: cover; transition: opacity 0.2s; }
.apre-foto:hover img { opacity: 0.9; }
.foto-griglia--sede .apre-foto img { height: auto; aspect-ratio: 16 / 9; }
.momenti { border-top: 1px solid var(--filo-chiaro); }
.momenti .sezione__testa { margin-bottom: 35px; }

/* ---------- pagine interne ---------- */

.testata-pagina { position: relative; padding: 70px var(--margine); overflow: hidden; background: var(--nero); color: var(--bianco); }
.testata-pagina--foto { display: flex; align-items: center; min-height: 480px; }
.testata-pagina__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Il velo scuro sta dove serve al testo (prima era 0,6 dappertutto): 0,56 dietro occhiello e sottotitolo, che sono testo normale
   (ne basta 0,54 anche su una fotografia bianca), almeno 0,44 fin dove può arrivare il titolo, poi la fotografia si schiarisce verso
   destra; in basso una fascia tiene leggibile la didascalia. Sugli schermi stretti il testo occupa tutta la larghezza: velo unito. */
.testata-pagina--foto { --colonna: calc(100vw - 2 * var(--margine)); }
.testata-pagina--foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 56px, rgba(0, 0, 0, 0) 124px),
              linear-gradient(90deg, rgba(0, 0, 0, 0.56) 0, rgba(0, 0, 0, 0.56) calc(var(--margine) + min(680px, 0.62 * var(--colonna))), rgba(0, 0, 0, 0.44) calc(var(--margine) + min(1100px, var(--colonna))), rgba(0, 0, 0, 0.14) 100%); }
@media (max-width: 900px) { .testata-pagina--foto::after { background: rgba(0, 0, 0, 0.55); } }
.testata-pagina__testo { position: relative; z-index: 1; }
.testata-pagina .occhiello { margin-bottom: 22px; color: var(--arancio); }
/* Sopra una fotografia l'occhiello è bianco: l'arancione lì non ha un contrasto garantito. */
.testata-pagina--foto .occhiello { color: var(--bianco); }
.testata-pagina h1 { max-width: 900px; font-size: clamp(43px, 5vw, 74px); letter-spacing: -2px; }
.testata-pagina h1.titolo--lungo { max-width: 1100px; font-size: clamp(32px, 3.5vw, 54px); letter-spacing: -1.2px; line-height: 1.14; }
.testata-pagina__sotto { max-width: 680px; margin: 24px 0 0; color: #ddd; }
.testata-pagina__sotto p { margin: 0; }
/* Testata a fascia (Project, Partners, Exhibitors, Buyers): una fotografia dell'evento con la sua didascalia in basso a destra;
   lo spazio in più sotto il testo è per lei. L'inquadratura è scelta pagina per pagina, sul telefono cambia. */
.testata-pagina--fascia { padding-top: 74px; padding-bottom: 88px; }
.testata-pagina--fascia .occhiello { font-size: 11px; }
.testata-pagina--fascia .testata-pagina__sotto { color: var(--bianco); }
.testata-pagina__didascalia { position: absolute; z-index: 1; right: var(--margine); bottom: 24px; left: var(--margine); margin: 0; color: var(--bianco); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.55; text-align: right; }
/* Entrata della testata fotografica e dell'apertura della home, una volta sola all'apertura della pagina (variante D, scelta dal
   direttore il 10 ottobre 2026):
   la fotografia parte appena più grande e si assesta; l'occhiello compare; il titolo sale riga per riga da dietro la propria linea
   (le righe le prepara lo script; senza script, o se arriva tardi, il titolo sale intero); sottotitolo e didascalia per ultimi.
   Ogni animazione ha solo lo stato di partenza e a fine corsa non resta applicata («backwards»): la testata torna com'era.
   Niente per chi ha chiesto meno movimento. */
@media (prefers-reduced-motion: no-preference) {
  .testata-pagina--foto .testata-pagina__foto { animation: testata-assesta 1.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .testata-pagina--foto .occhiello { animation: testata-compare 0.8s ease 0.15s backwards; }
  .testata-pagina--foto h1 { animation: testata-sale 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
  .testata-pagina--foto h1.titolo--in-attesa { animation: none; opacity: 0; }
  .testata-pagina--foto h1.titolo--a-righe { animation: none; }
  .titolo__riga { display: block; margin-bottom: -0.14em; padding-bottom: 0.14em; overflow: hidden; white-space: nowrap; }
  .titolo__riga-testo { display: block; animation: testata-riga 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
  .titolo__riga-testo--1 { animation-delay: 0.29s; }
  .titolo__riga-testo--2 { animation-delay: 0.38s; }
  .titolo__riga-testo--3 { animation-delay: 0.47s; }
  .titolo__riga-testo--4 { animation-delay: 0.56s; }
  .titolo__riga-testo--5 { animation-delay: 0.65s; }
  .testata-pagina--foto .testata-pagina__sotto { animation: testata-sale 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s backwards; }
  .testata-pagina--foto .testata-pagina__didascalia, .testata-pagina--foto .apertura__didascalia { animation: testata-compare 0.9s ease 0.9s backwards; }
  /* La stessa entrata sull'apertura della home (chiesta dal direttore l'11 ottobre 2026). Si assesta solo la prima fotografia:
     le altre arrivano dopo, con il loro scorrimento. Dopo il sottotitolo salgono anche i pulsanti. */
  .apertura > .apertura__foto:first-of-type { animation: testata-assesta 1.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .apertura .occhiello { animation: testata-compare 0.8s ease 0.15s backwards; }
  .apertura h1 { animation: testata-sale 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
  .apertura h1.titolo--in-attesa { animation: none; opacity: 0; }
  .apertura h1.titolo--a-righe { animation: none; }
  .apertura__sotto { animation: testata-sale 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s backwards; }
  .apertura .azioni { animation: testata-sale 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.67s backwards; }
  .apertura > .apertura__didascalia { animation: testata-compare 0.9s ease 0.9s backwards; }
}
@keyframes testata-assesta { from { transform: scale(1.08); } }
@keyframes testata-sale { from { opacity: 0; transform: translateY(18px); } }
@keyframes testata-compare { from { opacity: 0; } }
@keyframes testata-riga { from { transform: translateY(112%); } }
.pagina-project .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 48%; }
.pagina-partners .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 44%; }
.pagina-exhibitors .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 53%; }
.pagina-buyers .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 55%; }
.pagina-press-area .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 56%; }
/* Briciole: dove sei, nel passo del menu (maiuscolo spaziato). Un trattino arancione separa le voci,
   l'ultima è la pagina aperta. Le voci sono alte 40 px per chi le tocca con il dito. */
.briciole { padding: 4px var(--margine); border-bottom: 1px solid var(--filo-chiaro); background: var(--bianco); }
.briciole__voci { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; color: var(--grigio-testo); font-size: 11px; font-weight: 500; letter-spacing: 1.6px; line-height: 1.5; text-transform: uppercase; }
.briciole__voci li { display: flex; flex: none; align-items: center; min-width: 0; }
/* Su una riga sola: se non c'è posto si accorcia il nome della pagina aperta, che è scritto intero nel titolo qui sotto. */
.briciole__voci li:last-child { flex: 0 1 auto; }
.briciole__voci li + li::before { content: ""; flex: none; width: 18px; height: 1px; margin: 0 12px; background: var(--arancio); }
.briciole__voci a, .briciole__voci [aria-current] { display: inline-flex; align-items: center; min-height: 40px; }
.briciole__voci a:hover, .briciole__voci a:focus-visible { color: var(--nero); text-decoration: underline; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.briciole__voci [aria-current] { display: block; overflow: hidden; color: var(--nero); font-weight: 600; line-height: 40px; text-overflow: ellipsis; white-space: nowrap; }
/* Nella scheda non c'è una testata di pagina: le briciole aprono la pagina sul fondo caldo dei pannelli. */
.pagina-scheda .briciole { padding-top: 12px; padding-bottom: 0; border-bottom: 0; background: var(--caldo); }
.pagina-scheda .briciole + .scheda .scheda__quadro { padding-top: 12px; }

.blocco { padding-top: 65px; padding-bottom: 65px; }
.blocco h2 { max-width: 950px; font-size: clamp(30px, 3vw, 44px); letter-spacing: -1px; }
.blocco > .testo { max-width: 760px; }
.blocco > h2 + .testo { margin-top: 24px; }
.blocco--apertura { padding-bottom: 45px; }
.blocco--apertura + .blocco.sezione--bianco, .blocco--apertura + .elenco { border-top: 1px solid var(--filo-chiaro); }
.testo--apertura { max-width: 900px; color: var(--nero); font-size: clamp(18px, 1.5vw, 22px); font-weight: 300; line-height: 1.6; }
/* Il testo d'apertura occupa tutta la larghezza della pagina (chiesto dal direttore l'11 ottobre 2026: meno righe, il contenuto
   sotto arriva prima). Prima lo teneva a 760 px la regola dei blocchi di testo; le righe ora passano i 120 caratteri. */
.blocco--apertura > .testo--apertura { max-width: none; }
/* Sul telefono l'introduzione lunga di un elenco mostra tre righe e un comando per leggerla tutta: sennò prima della ricerca e
   delle schede c'è da scorrere più di uno schermo. È così già al primo disegno, senza scatti dopo; dove gli script non girano la lascia
   intera la regola «scripting: none» qui sotto. Sugli schermi più larghi non cambia niente. */
.intro__espandi { display: none; }
@media (max-width: 760px) {
  .intro--corta > :first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .intro--corta > :not(:first-child) { display: none; }
  .intro__espandi { display: inline-flex; min-height: 44px; margin-top: 8px; padding: 0 0 5px; border: 0; color: var(--nero); font: inherit; font-size: 12px; cursor: pointer; }
}
/* Dove gli script non girano l'introduzione si legge intera e il suo comando non si mostra. */
@media (scripting: none) {
  .intro--corta > :first-child { display: block; overflow: visible; -webkit-line-clamp: none; line-clamp: none; }
  .intro--corta > :not(:first-child) { display: block; }
  .intro__espandi { display: none; }
}
.testo--pagina { max-width: 760px; }
.due-colonne { display: grid; grid-template-columns: 1fr 1.2fr; gap: 65px; }
.due-colonne--strette { grid-template-columns: 1fr 1.5fr; gap: 70px; }
.due-colonne > div { min-width: 0; }
.due-colonne .testo + .collegamento, .due-colonne .testo + .azioni { margin-top: 24px; }
.due-colonne h2 + .testo { margin-top: 24px; }
.foto-larga { width: 100%; height: auto; max-height: 520px; object-fit: cover; }

.partner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.partner__scheda { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; }
.partner__scheda h3 { font-size: 26px; font-weight: 400; letter-spacing: -0.5px; line-height: 1.2; }
.partner__scheda .testo { margin: 16px 0 14px; font-size: 14px; }
.partner__scheda .testo em { display: inline-block; margin-bottom: 6px; color: var(--nero); }
.partner__scheda .collegamento { margin-top: auto; }
/* Ogni logo ha uno spazio alto uguale, così i nomi dei partner partono allineati: un marchio largo si ferma alla larghezza,
   uno alto all'altezza, tutti interi e accostati a sinistra come il testo. */
.partner__logo { width: auto; max-width: 220px; height: 84px; margin-bottom: 22px; object-fit: contain; object-position: left center; }
/* Un logo molto largo e in alta risoluzione (stemma più scritta su una riga) a 220 px resterebbe minuscolo accanto agli altri: ha più spazio. */
.partner__logo--largo { max-width: min(100%, 330px); }

.risorse { margin: 0; padding: 0; border-top: 1px solid var(--filo); list-style: none; }
.risorse li { border-bottom: 1px solid var(--filo); }
.risorse a, .risorse__ferma { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 64px; padding: 18px 0; }
.risorse a:hover .risorse__titolo { text-decoration: underline; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.risorse__cosa { min-width: 0; }
.risorse__titolo { display: block; font-size: 16px; line-height: 1.4; }
.risorse__nota { display: block; margin-top: 4px; color: var(--grigio-nota); font-size: 13px; line-height: 1.5; }
.risorse__azione { flex-shrink: 0; font-size: 12px; white-space: nowrap; }
.risorse__gruppo { margin: 34px 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; line-height: 1.5; text-transform: uppercase; }
.risorse__gruppo:first-child { margin-top: 0; }
.risorse--grandi .risorse__titolo { font-size: 22px; letter-spacing: -0.4px; }
.testo + .risorse { margin-top: 28px; }
.visita__luogo { margin: 0 0 18px; font-size: 20px; }

/* ---------- elenchi ---------- */

.elenco { padding: 40px var(--margine) 70px; background: var(--caldo); }
/* Ricerca, menu delle località e conteggio su una riga; se non ci stanno vanno a capo. */
.elenco__strumenti { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; margin-bottom: 30px; }
.cerca { flex: 1 1 360px; max-width: 560px; }
.cerca label { display: block; margin-bottom: 9px; font-size: 12px; }
.cerca__riga { display: flex; gap: 8px; }
.cerca input[type="search"] { flex: 1; min-width: 0; min-height: 48px; padding: 12px 16px; border: 1px solid #8a8a8a; border-radius: 5px; background: var(--bianco); color: var(--nero); font: inherit; }
.cerca .pulsante { min-height: 48px; border-radius: 5px; }
.elenco__conto { margin: 0 0 0 auto; color: #555; font-size: 12px; white-space: nowrap; }
/* Il filtro per località è un menu a tendina (prima erano tanti pulsanti quante le località). Chiuso è alto quanto il campo
   di ricerca e dice che cosa si filtra, la scelta corrente e quante schede ha; aperto mostra le voci con il loro numero, sopra
   le schede. La voce scelta ha il fondo nero, come la pagina corrente nella numerazione. */
.filtri { flex: 0 1 300px; min-width: 240px; }
.tendina { position: relative; }
/* stesso riempimento e stesso corpo del campo di ricerca: sulla stessa riga hanno la stessa altezza */
.tendina__comando { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px 12px 16px; border: 1px solid #8a8a8a; border-radius: 5px; background: var(--bianco); cursor: pointer; list-style: none; }
.tendina__comando::-webkit-details-marker { display: none; }
.tendina__comando:hover, .tendina[open] .tendina__comando { border-color: var(--nero); }
.tendina__cosa { color: var(--grigio-nota); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.tendina__scelta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tendina__quante, .filtri__quante { color: var(--grigio-nota); font-size: 12px; font-variant-numeric: tabular-nums; }
.tendina__freccia { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.tendina[open] .tendina__freccia { transform: rotate(180deg); }
.tendina__voci { position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; left: 0; max-height: min(60vh, 420px); margin: 0; padding: 6px; overflow-y: auto; border: 1px solid var(--nero); border-radius: 5px; background: var(--bianco); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); list-style: none; }
.tendina__voci a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 12px; border-radius: 3px; font-size: 14px; }
.tendina__voci a:hover { background: var(--caldo); }
.tendina__voci a[aria-current="true"] { background: var(--nero); color: var(--bianco); }
.tendina__voci a[aria-current="true"] .filtri__quante { color: #ddd; }

.carte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.carta { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.carta:hover, .carta:focus-within { border-color: var(--arancio); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08); }
.carta__foto { width: 100%; height: auto; aspect-ratio: 1080 / 667; object-fit: cover; background: var(--chiaro); }
/* Ritratto di un buyer: anteprima verticale 3:4 come nella scheda, così testa e mento restano dentro anche nelle foto strette dal telefono. */
.carta__foto--ritratto { aspect-ratio: 3 / 4; }
.carta__foto--ritratto:not(.fuoco-0):not(.fuoco-25):not(.fuoco-75):not(.fuoco-100) { object-position: 50% 0; }
.carta__testo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 16px; flex: 1; padding: 20px 22px 18px; }
/* Il logo come una piccola targa in rilievo: luce sul bordo alto, ombra corta sotto. Non è un comando, quindi non cambia al passaggio. */
.carta__logo { grid-column: 2; grid-row: 1 / 4; align-self: start; box-sizing: border-box; width: 104px; height: 60px; padding: 5px 7px; border: 1px solid #e8e6e2; border-bottom-color: #dcd9d4; border-radius: 6px; object-fit: contain; background: var(--bianco);
  box-shadow: inset 0 1px 0 var(--bianco), 0 1px 1px rgba(26, 26, 26, 0.05), 0 3px 8px -3px rgba(26, 26, 26, 0.14); }
.carta__luogo { grid-column: 1; margin: 0; color: #555; font-size: 11px; letter-spacing: 0.9px; line-height: 1.6; text-transform: uppercase; }
.carta__nome { grid-column: 1; margin: 8px 0 10px; font-size: 21px; font-weight: 400; letter-spacing: -0.4px; line-height: 1.2; }
/* Tutta la carta porta alla scheda, con un solo collegamento: quello del nome. */
.carta__nome a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--raggio); }
.carta__nome a:focus-visible { outline: 0; box-shadow: none; }
.carta__nome a:focus-visible::after { outline: 3px solid var(--nero); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--arancio); }
.carta__vai { grid-column: 1; align-self: end; margin: 0; font-size: 12px; }
.carta__vai span { color: var(--nero); }
.vuoto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 620px; padding: 40px; }
.vuoto__testo { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -0.4px; line-height: 1.3; }
.elenco__tutti { margin: 28px 0 0; }
.paginazione { margin-top: 40px; }
.paginazione ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.paginazione a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 46px; min-height: 46px; padding: 8px 14px; border: 1px solid var(--filo); border-radius: 5px; background: var(--bianco); font-size: 13px; font-variant-numeric: tabular-nums; }
.paginazione a:hover { border-color: var(--nero); }
.paginazione a[aria-current="page"] { border-color: var(--nero); background: var(--nero); color: var(--bianco); }

/* ---------- scheda di un espositore o di un buyer ---------- */

.scheda__quadro { padding: 30px var(--margine) 20px; background: var(--caldo); }
.scheda__testata { display: flex; align-items: center; gap: 35px; margin-bottom: 18px; padding: 28px 30px; }
.scheda__logo { flex-shrink: 0; width: 250px; height: 145px; }
.scheda__logo img { width: 100%; height: 100%; border-radius: 5px; object-fit: contain; }
.scheda__logo + .scheda__nome { padding-left: 35px; border-left: 1px solid var(--filo); }
.scheda__nome { flex: 1; min-width: 0; }
.scheda__nome .occhiello { margin: 0 0 13px; color: #555; letter-spacing: 1.8px; }
.scheda__nome h1 { font-size: clamp(30px, 3.2vw, 49px); font-weight: 500; letter-spacing: -1.3px; line-height: 1.15; }
.scheda__nome h1.titolo--lungo { font-size: clamp(26px, 2.5vw, 38px); letter-spacing: -0.9px; }
.scheda__luogo { margin: 15px 0 0; font-size: 11px; letter-spacing: 1.9px; line-height: 1.6; text-transform: uppercase; }
.pulsante--contatto { padding: 16px 25px; border-radius: 5px; font-size: 14px; white-space: nowrap; }
.scheda__corpo { display: grid; grid-template-columns: 1.85fr 1fr; align-items: stretch; gap: 18px; }
.scheda__corpo--senza-foto, .scheda__corpo--senza-contatti { grid-template-columns: 1fr; }
/* La fotografia prende l'altezza del riquadro dei contatti accanto, o la sua se è più alta: nessuno dei due resta con un vuoto. */
.scheda__foto { position: relative; min-width: 0; margin: 0; overflow: hidden; }
/* L'altezza minima viene dalla larghezza (formato 1080 × 667) con un segnaposto: «aspect-ratio» su un elemento
   stirato in altezza dalla griglia ne ricaverebbe la larghezza, e la fotografia uscirebbe dal riquadro. */
.scheda__foto::before { content: ""; display: block; padding-top: 61.76%; }
.scheda__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scheda__corpo--senza-contatti .scheda__foto { max-height: 620px; }
/* Inquadratura scelta dalla gestione: quale fascia di una fotografia verticale resta nel riquadro largo. */
.fuoco-0, .fuoco-0 img { object-position: 50% 0; }
.fuoco-25, .fuoco-25 img { object-position: 50% 25%; }
.fuoco-75, .fuoco-75 img { object-position: 50% 75%; }
.fuoco-100, .fuoco-100 img { object-position: 50% 100%; }
/* Un'immagine intera e quadrata importata dal sito di prima (con dentro la fascia del logo) si vede tutta, in due colonne uguali. */
.scheda__corpo.scheda__corpo--quadrata { grid-template-columns: 1fr 1fr; }
.scheda__foto--quadrata::before { padding-top: 100%; }
/* Il ritratto di un buyer sta in un riquadro verticale 3:4: il viso resta intero, con un po' d'aria sopra la testa. */
.scheda__foto--ritratto::before { padding-top: 133.33%; }
/* Un ritratto parte dall'alto, dove sta il viso; l'inquadratura scelta nella gestione lo sposta. */
.scheda__foto--ritratto:not(.fuoco-0):not(.fuoco-25):not(.fuoco-75):not(.fuoco-100) img { object-position: 50% 18%; }
.scheda__corpo--senza-contatti .scheda__foto--quadrata { max-width: 620px; }
.scheda__contatti { padding: 28px 30px; }
.scheda__contatti h2, .scheda__about h2 { font-size: 29px; font-weight: 400; letter-spacing: -0.5px; }
/* I recapiti sono pulsanti: l'indirizzo si legge per intero e si tocca, senza altri pulsanti che lo ripetano.
   Stessa famiglia delle schede vicine in fondo alla pagina: fondo bianco, filo grigio, angoli da 5 px, una riga piccola
   che dice che cos'è e sotto il valore, che va a capo dove serve. Al passaggio il filo diventa nero. */
.recapiti { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.recapito { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--filo); border-radius: 5px; background: var(--bianco); }
.recapito:hover { border-color: var(--nero); }
.recapito__cosa { grid-column: 1; color: var(--grigio-nota); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; line-height: 1.5; text-transform: uppercase; }
.recapito__valore { grid-column: 1; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.recapito__freccia { grid-row: 1 / span 2; grid-column: 2; width: 17px; height: 17px; }
/* Dove c'è il mouse un indirizzo che non sta su una riga si tronca con i puntini e al passaggio (o con il fuoco della tastiera)
   parte subito, scorre fino in fondo e torna indietro: la corsa è la sua larghezza meno quella del riquadro, quindi uno che ci sta non si muove.
   Dove il mouse non c'è, per chi ha chiesto meno movimento e nei browser senza le unità «cqw» resta su più righe: lì nessuno
   potrebbe farlo scorrere e deve potersi leggere tutto. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @supports (width: 1cqw) {
    .recapito__valore { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; container-type: inline-size; }
    .recapito:hover .recapito__valore, .recapito:focus-visible .recapito__valore { text-overflow: clip; }
    .recapito:hover .recapito__scorre, .recapito:focus-visible .recapito__scorre { display: inline-block; animation: recapito-scorre 4.2s cubic-bezier(0.2, 0.6, 0.35, 1) -0.6s infinite alternate; }
  }
}
/* 0,6 s fermo all'inizio, 2,4 s di corsa, 1,2 s fermo in fondo. Al passaggio del mouse si parte dalla fine della prima sosta: l'indirizzo si muove subito. */
@keyframes recapito-scorre { 0%, 14.3% { transform: translateX(0); } 71.4%, 100% { transform: translateX(min(0px, calc(100cqw - 100%))); } }
/* I social sono icone a tratto in un riquadro con lo stesso filo: nero su bianco, mai i colori dei marchi. */
.seguici__titolo { margin: 0 0 12px; color: var(--grigio-nota); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; line-height: 1.5; text-transform: uppercase; }
/* Sotto i recapiti un filo li separa dai social; se i recapiti non ci sono il filo non serve, c'è già il filetto del titolo. */
.recapiti + .seguici { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--arancio); }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--filo); border-radius: 5px; background: var(--bianco); color: var(--nero); }
.social a:hover { border-color: var(--nero); }
.social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scheda__about { margin-top: 18px; padding: 28px 30px; }
.scheda__about .testo { max-width: 900px; color: #555; font-size: 15px; line-height: 1.7; }
/* Un profilo lungo mostra le prime righe e un comando per leggerlo tutto, a ogni larghezza (chiesto dal direttore il 13 ottobre 2026).
   Dove gli script non girano si legge intero e il comando non c'è. */
.racconto--corto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.racconto__espandi { display: inline-flex; min-height: 44px; margin-top: 8px; padding: 0 0 5px; border: 0; color: var(--nero); font: inherit; font-size: 12px; cursor: pointer; }
@media (max-width: 760px) { .racconto--corto { -webkit-line-clamp: 9; line-clamp: 9; } }
@media (scripting: none) {
  .racconto--corto { display: block; overflow: visible; -webkit-line-clamp: none; line-clamp: none; }
  .racconto__espandi { display: none; }
}
.etichette { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.etichette li { padding: 8px 18px; border-radius: 30px; background: var(--caldo); color: #444; font-size: 12px; }

.collezione { padding: 30px var(--margine) 65px; background: var(--caldo); }
.collezione__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; padding: 25px 30px; }
.collezione__testa .occhiello { margin-bottom: 14px; }
.collezione h2 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -1px; }
.scorri__guida { margin: 18px 0 0; color: #555; font-size: 13px; }
.scorri__comandi { display: flex; flex-shrink: 0; gap: 12px; }
.scorri__comandi button { min-width: 48px; min-height: 48px; border: 1px solid #8a8a8a; background: var(--bianco); color: var(--nero); font: 22px/1 "Inter", Arial, sans-serif; cursor: pointer; }
.scorri__comandi button:hover:not(:disabled) { border-color: var(--arancio); background: var(--arancio); }
.scorri__comandi button:disabled { opacity: 0.3; cursor: default; }
.scorri__binario { display: flex; gap: 24px; margin-top: 24px; padding: 4px 4px 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 4px; scrollbar-width: thin; scrollbar-color: var(--arancio) #e5e5e5; }
.tessera { position: relative; display: flex; flex: 0 0 calc((100% - 72px) / 4); align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1 / 1; padding: 12px; border-radius: 8px; background: var(--bianco); scroll-snap-align: start; cursor: zoom-in; }
.tessera img { width: 100%; height: 100%; object-fit: contain; }
.tessera:hover { box-shadow: 0 0 0 1px var(--arancio); }
.tessera__segno { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; background: var(--bianco); font-size: 16px; line-height: 1.3; }
.momenti--scorre { background: var(--caldo); }
.momenti--scorre .sezione__testa { margin-bottom: 0; }
.momenti--scorre .tessera { aspect-ratio: 4 / 3; padding: 0; overflow: hidden; }
.momenti--scorre .tessera img { object-fit: cover; }

.altre { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 42px var(--margine); }
.altre h2 { font-size: 30px; }
/* In fondo alla scheda: la scheda di prima e quella dopo sono due pulsanti bianchi affiancati, poi viene il ritorno all'elenco.
   Stanno nella famiglia dei riquadri del sito (fondo bianco, filo grigio, angoli da 5 px): una riga piccola dice il verso,
   sotto c'è il nome. Al passaggio il filo diventa nero. Sul telefono le due vicine fanno una riga e l'arancione va a capo. */
.altre__comandi { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: 12px; }
.altre__vicine { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 12px; }
.vicina { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 190px; max-width: 290px; min-height: 64px; padding: 12px 18px; border: 1px solid var(--filo); border-radius: 5px; background: var(--bianco); }
.vicina:hover { border-color: var(--nero); }
.vicina__verso { display: flex; align-items: center; gap: 0.6em; color: var(--grigio-nota); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; line-height: 1.5; text-transform: uppercase; }
.vicina__verso .segno { width: 14px; height: 14px; vertical-align: -0.22em; }
.vicina__nome { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.vicina--dopo { align-items: flex-end; text-align: right; }
.altre__comandi .pulsante { align-self: center; min-height: 64px; border-radius: 5px; }

.visore { width: min(1100px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 0; background: var(--bianco); color: var(--nero); }
.visore::backdrop { background: rgba(0, 0, 0, 0.85); }
/* Con il visore aperto la pagina dietro non scorre. */
html.visore-aperto { overflow: hidden; }
.visore__testa, .visore__comandi { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; font-size: 13px; }
.visore button { min-width: 48px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--filo); background: var(--bianco); color: var(--nero); font: inherit; font-size: 14px; cursor: pointer; }
.visore button:hover { border-color: var(--arancio); background: var(--arancio); }
.visore__quadro { height: min(65vh, 720px); background: var(--bianco); }
.visore__foto { width: 100%; height: 100%; object-fit: contain; }

/* ---------- piede ---------- */

/* Torna in cima. Compare dopo un po' di pagina; il contorno si riempie d'arancione man mano che si scende: la misura la scrive
   lo script nell'attributo «stroke-dashoffset» del rettangolo, che è lungo 100. Il binario è alto zero e sta fra il contenuto e il
   piede e il pulsante gli sta appeso sotto: mentre si scorre resta a 24 px dal fondo della finestra (16 sul telefono), a fine pagina
   il binario si ferma al suo posto e il pulsante si trova dentro il piede, in alto a destra, lontano dai loghi degli enti che
   stanno in fondo. Prima stava sopra il piede e copriva la fine dell'ultima sezione: il direttore l'ha voluto nel piede
   (11 ottobre 2026). Stessa famiglia degli altri pulsanti bianchi. */
.binario-su { position: sticky; bottom: 96px; z-index: 15; height: 0; }
.torna-su { position: absolute; top: 24px; right: 24px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--filo); border-radius: 5px; background: var(--bianco); color: var(--nero); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s; }
.torna-su--visibile { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s, visibility 0s; }
.torna-su:hover { border-color: var(--nero); }
.torna-su__giro { position: absolute; inset: -1px; width: 48px; height: 48px; fill: none; stroke: var(--arancio); stroke-width: 2; stroke-dasharray: 100; pointer-events: none; }
.torna-su__freccia { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .binario-su { bottom: 80px; } .torna-su { top: 16px; right: 16px; } }

.piede { padding: 40px var(--margine); background: var(--bianco); border-top: 1px solid var(--arancio); }
/* La prima riga lascia libero l'angolo in alto a destra, dove a fine pagina si ferma il pulsante per tornare in cima. */
.piede__alto { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-right: max(0px, calc(92px - var(--margine))); }
.piede__testo { max-width: 640px; margin: 0; color: var(--grigio-nota); font-size: 12px; }
.piede__link { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 0 22px; margin: 0; font-size: 12px; }
.piede__link a { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; }
.piede__link a:hover, .piede__diritti a:hover { text-decoration: underline; }
.piede__diritti { margin: 25px 0 0; padding-top: 20px; border-top: 1px solid var(--filo); color: var(--grigio-nota); font-size: 11px; }
.piede__diritti a { text-decoration: underline; }
.piede__norme { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 4px 0 0; color: var(--grigio-nota); font-size: 11px; }
.piede__norme a, .piede__cookie { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.piede__cookie { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.piede__norme a:hover, .piede__cookie:hover { color: var(--nero); }

/* Avviso sui cookie: una fascia bianca in fondo alla finestra. Sta dopo il piede e lo segue («sticky»): a fine pagina resta sotto
   il piede, così i loghi degli enti non sono mai coperti. Le due scelte sono uguali per forma, grandezza e colore; la chiusura
   vale «solo necessari». Finché è aperto il pulsante per tornare in cima non si mostra, perché starebbe sopra l'avviso. */
.cookie { position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 48px; padding: 24px calc(var(--margine) + 40px) 24px var(--margine); border-top: 1px solid var(--nero); background: var(--bianco); box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.08); }
.cookie__titolo { margin: 0 0 6px; color: var(--grigio-nota); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; line-height: 1.5; text-transform: uppercase; }
.cookie__testo p { max-width: 860px; margin: 0; font-size: 14px; line-height: 1.55; }
.cookie__testo a { text-decoration: underline; text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cookie__testo a:hover { text-decoration-color: var(--nero); }
.cookie__scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie__scelta { min-height: 48px; padding: 0 22px; border: 1px solid var(--nero); border-radius: 5px; background: var(--bianco); color: var(--nero); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cookie__scelta:hover { background: var(--nero); color: var(--bianco); }
.cookie__chiudi { position: absolute; top: 8px; right: max(8px, calc(var(--margine) - 44px)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--nero); cursor: pointer; }
.cookie__chiudi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html.cookie-aperto .binario-su { display: none; }
/* Lo stesso per i comandi delle fotografie dell'apertura, che l'avviso coprirebbe a metà: intanto le fotografie stanno ferme. */
html.cookie-aperto .apertura__comandi { visibility: hidden; }
/* Chi si muove con la tastiera non deve trovarsi il fuoco sotto l'avviso: la pagina scorre tenendosi sopra di lui. */
html.cookie-aperto { scroll-padding-bottom: 180px; }
/* Schermi stretti: una colonna. Il titolo fa da riga della chiusura (che è assoluta, in alto a destra), così il testo sotto
   usa tutta la larghezza e l'avviso resta sotto un terzo della finestra anche a 320 px. */
@media (max-width: 900px) {
  html.cookie-aperto { scroll-padding-bottom: 270px; }
  .cookie { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px var(--margine) 16px; }
  .cookie__titolo { display: flex; align-items: center; min-height: 36px; margin: 0; padding-right: 44px; }
  .cookie__testo p { font-size: 13px; line-height: 1.5; }
  .cookie__scelta { min-height: 44px; padding: 6px 8px; font-size: 13px; }
  .cookie__chiudi { top: 4px; right: max(4px, calc(var(--margine) - 14px)); }
}
/* I loghi degli enti sono l'ultima cosa della pagina: piccoli, interi, nei loro colori. Mai oltre 420 px in tutto. */
.piede__enti { margin-top: 24px; }
.enti { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 420px; margin: 0 auto; padding: 0; list-style: none; }
.enti li { min-width: 0; }
.enti a { display: block; }
.enti a:hover { opacity: 0.8; }
.enti__logo { width: auto; max-width: 100%; height: 58px; }
.piede__loghi { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }

/* ---------- schermi medi ---------- */

@media (max-width: 1200px) {
  .scheda__logo { width: 210px; height: 122px; }
  .scheda__testata { gap: 22px; padding: 24px; }
  .scheda__logo + .scheda__nome { padding-left: 22px; }
  .pulsante--contatto { padding: 14px 18px; font-size: 12px; }
  .scheda__contatti { padding: 24px; }
  .scheda__corpo { grid-template-columns: 1.6fr 1fr; }
}
@media (max-width: 1100px) {
  .carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .due-colonne, .due-colonne--strette { gap: 35px; }
  .date { gap: 40px; }
  .date__perche { padding-left: 40px; }
  .tessera { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 900px) {
  .altre { display: block; }
  .altre__comandi { justify-content: flex-start; margin-top: 22px; }
  .foto-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vantaggio { grid-template-columns: 32px minmax(0, 1fr); column-gap: 15px; padding: 26px; }
  .apertura { min-height: 620px; }
  .apertura__velo { background: rgba(0, 0, 0, 0.56); }
}

/* ---------- telefono ---------- */

@media (max-width: 760px) {
  :root { --margine: 6vw; }
  .sezione { padding-top: 42px; padding-bottom: 42px; scroll-margin-top: 20px; }
  .pulsante { padding: 14px 18px; }
  .apertura { min-height: 560px; }
  .apertura__foto { object-position: 58% center; }
  .apertura__testo { padding: 48px var(--margine) 75px; }
  .apertura h1, .apertura h1.titolo--lungo { max-width: none; font-size: clamp(34px, 10vw, 54px); letter-spacing: -1.4px; }
  .apertura h1:not(.titolo--lungo) { font-size: clamp(40px, 11.5vw, 58px); }
  .apertura .occhiello { font-size: 11px; letter-spacing: 0.8px; margin-bottom: 22px; line-height: 1.7; }
  .apertura__sotto { margin: 24px 0; font-size: 14px; }
  .apertura__didascalia { left: var(--margine); right: auto; bottom: 20px; font-size: 11px; letter-spacing: 1px; }
  .apertura[data-apertura] .apertura__didascalia { max-width: calc(100% - 2 * var(--margine) - 132px); }
  .apertura__comandi { right: calc(var(--margine) - 8px); bottom: 6px; left: auto; }
  .apertura__segno { width: 40px; }
  .apertura__segno::before { width: 28px; }
  .fascia { justify-content: flex-start; gap: 6px 18px; padding: 15px var(--margine); letter-spacing: 1.2px; }
  .sezione h2 { font-size: 34px; letter-spacing: -1px; }
  .sezione h2.titolo--lungo { font-size: 28px; letter-spacing: -0.6px; }
  .sezione__testa { display: block; margin-bottom: 28px; }
  .sezione__testa > .collegamento, .sezione__testa > .scorri__comandi { margin-top: 20px; }
  .date { grid-template-columns: 1fr; gap: 26px; padding-top: 42px; padding-bottom: 42px; }
  .date h2 { font-size: 44px; }
  .date .occhiello { font-size: 11px; letter-spacing: 0.8px; }
  .date__calendario { margin: 22px 0 20px; padding: 18px 0; }
  .date__giorni { font-size: 30px; letter-spacing: -0.6px; }
  .date__perche { padding: 25px 0 0; border-left: 0; border-top: 1px solid #d7d7d7; }
  .date__perche h3 { font-size: 28px; }
  .date__perche .testo { margin: 20px 0; font-size: 14px; }
  .vantaggi__griglia { grid-template-columns: 1fr; gap: 16px; }
  /* Sul telefono il numero sta sopra il titolo: una colonna stretta di numeri toglierebbe spazio alle parole. */
  .vantaggio { display: block; padding: 25px 22px; }
  .vantaggio__numero { display: block; margin: 0 0 15px; font-size: 21px; }
  .vantaggio h3 { font-size: 23px; letter-spacing: -0.4px; line-height: 1.22; }
  .vantaggio .testo { margin-top: 17px; line-height: 1.7; }
  .vantaggi:has(+ .percorsi) { padding-bottom: 24px; }
  .percorsi { grid-template-columns: 1fr; gap: 14px; }
  .percorso { min-height: 64px; padding: 19px; font-size: 17px; }
  .sede { grid-template-columns: 1fr; }
  .sede__foto { height: 250px; min-height: 0; }
  .sede__testo, .sede--senza-foto .sede__testo { padding: 38px var(--margine); }
  .sede h2 { font-size: 35px; }
  .foto-sede { padding-top: 25px; padding-bottom: 30px; }
  .foto-griglia--sede { grid-template-columns: 1fr; gap: 20px; }
  .momenti .foto-griglia { gap: 22px 14px; }
  .momenti .apre-foto img { height: 155px; }
  .foto-griglia figcaption { margin-top: 9px; font-size: 11px; line-height: 1.5; overflow-wrap: break-word; }
  .testata-pagina { padding: 42px var(--margine); }
  .testata-pagina--foto { min-height: 380px; }
  .testata-pagina h1 { font-size: 42px; letter-spacing: -1px; }
  .testata-pagina h1.titolo--lungo { font-size: 30px; letter-spacing: -0.6px; }
  .testata-pagina__sotto { font-size: 14px; }
  /* Sul telefono la fascia ha il passo di una fotografia 16:9 (219 px a 390): è un'altezza minima, se il testo ne chiede di più cresce. */
  .testata-pagina--fascia { min-height: calc(100vw * 9 / 16); padding: 28px var(--margine) 44px; }
  .testata-pagina--fascia .occhiello { margin-bottom: 12px; line-height: 1.5; }
  .testata-pagina--fascia h1 { font-size: clamp(34px, 9.5vw, 40px); letter-spacing: -0.8px; line-height: 1.1; }
  .testata-pagina--fascia h1.titolo--lungo { font-size: clamp(22px, 6.5vw, 26px); letter-spacing: -0.4px; line-height: 1.14; }
  .testata-pagina--fascia .testata-pagina__sotto { margin-top: 12px; font-size: 13.5px; line-height: 1.5; }
  .testata-pagina__didascalia { bottom: 12px; letter-spacing: 0.025em; line-height: 1.5; text-align: left; }
  .pagina-project .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 58%; }
  .pagina-partners .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 56%; }
  .pagina-exhibitors .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 52%; }
  .pagina-buyers .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 53%; }
  .pagina-press-area .testata-pagina--fascia .testata-pagina__foto { object-position: 50% 55%; }
  .blocco { padding-top: 40px; padding-bottom: 40px; }
  /* il testo d'apertura sta più vicino alle briciole (26 px invece di 42: chiesto dal direttore l'11 ottobre 2026) */
  .blocco--apertura { padding-top: 26px; padding-bottom: 32px; }
  .due-colonne, .due-colonne--strette { grid-template-columns: 1fr; gap: 22px; }
  .testo { font-size: 15px; }
  .testo--apertura { font-size: 18px; }
  .partner { grid-template-columns: 1fr; gap: 16px; }
  .partner__scheda { padding: 25px; }
  .partner__scheda h3 { font-size: 23px; }
  .risorse a, .risorse__ferma { gap: 16px; padding: 16px 0; }
  .risorse__titolo { font-size: 15px; }
  .risorse--grandi .risorse__titolo { font-size: 19px; }
  .elenco { padding: 28px var(--margine) 50px; }
  .elenco__strumenti { display: block; margin-bottom: 24px; }
  .filtri { margin-top: 10px; }
  .elenco__conto { margin-top: 14px; }
  .carte { gap: 16px 12px; }
  .carta__testo { display: block; padding: 14px 14px 12px; }
  .carta__logo { width: 84px; height: 49px; margin-bottom: 10px; }
  .carta__luogo { font-size: 11px; letter-spacing: 0.2px; }
  .carta__nome { font-size: 17px; overflow-wrap: break-word; }
  .vuoto { padding: 28px 24px; }
  .scheda__quadro { padding: 20px var(--margine) 15px; }
  .scheda__testata { display: block; padding: 22px; }
  .scheda__logo { margin: 0 auto 20px; }
  .scheda__logo + .scheda__nome { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--filo-chiaro); }
  .scheda__nome h1, .scheda__nome h1.titolo--lungo { font-size: 30px; letter-spacing: -0.7px; }
  .scheda__nome h1:not(.titolo--lungo) { font-size: 34px; letter-spacing: -0.8px; }
  .scheda__nome .occhiello { font-size: 11px; letter-spacing: 1px; }
  .scheda__luogo { font-size: 11px; letter-spacing: 0.8px; line-height: 1.8; }
  .pulsante--contatto { display: flex; margin-top: 22px; font-size: 14px; }
  .scheda__corpo, .scheda__corpo.scheda__corpo--quadrata { grid-template-columns: 1fr; }
  .scheda__contatti, .scheda__about { padding: 25px; }
  .scheda__contatti h2, .scheda__about h2 { font-size: 27px; }
  .scheda__about .testo { font-size: 14px; }
  .etichette { gap: 8px; }
  .etichette li { padding: 7px 13px; }
  .collezione { padding: 20px var(--margine) 40px; }
  .collezione__testa { display: block; padding: 24px; }
  .collezione__testa .scorri__comandi { margin-top: 20px; }
  .scorri__binario { gap: 15px; padding-bottom: 18px; }
  .tessera { flex-basis: 78%; max-width: 320px; padding: 8px; }
  .scorri__guida { font-size: 12px; }
  .altre { display: block; padding: 35px var(--margine); }
  .altre__comandi { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 12px; margin-top: 25px; }
  .vicina { min-width: 0; max-width: none; padding: 12px 14px; }
  .altre__comandi .pulsante { width: 100%; min-height: 52px; font-size: 14px; }
  .visore__testa, .visore__comandi { padding: 12px; }
  .visore__quadro { height: 60vh; }
  .piede { padding: 30px var(--margine) 20px; }
  .piede__alto { flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 0; }
  .piede__diritti { margin-top: 20px; line-height: 1.7; }
  .piede__enti { margin-top: 22px; }
  .enti { gap: 10px; max-width: 320px; }
  .enti__logo { height: 48px; }
  .piede__loghi { max-width: 320px; }
}
@media (max-width: 350px) {
  .momenti .foto-griglia, .carte { grid-template-columns: 1fr; }
  .momenti .apre-foto img { height: 190px; }
  .apertura h1:not(.titolo--lungo) { font-size: 39px; }
  .date h2 { font-size: 40px; }
  .date__giorni { font-size: 28px; }
  .vantaggio { padding: 23px 20px; }
  .scheda__nome h1:not(.titolo--lungo) { font-size: 30px; }
  .scheda__logo { width: 100%; max-width: 210px; }
  .enti__logo { height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apre-foto img, .carta { transition: none; }
  .apertura[data-apertura] .apertura__foto { transition: none; }
  .torna-su, .torna-su--visibile { transform: none; transition: none; }
  .tendina__freccia { transition: none; }
}