/* =========================================================================
   Italiani Volanti - sito istituzionale.
   Identità del portale VA (Manrope per i titoli, Inter per il testo, blu #1d5fd1, navy #0b1930),
   home cinematografica approvata il 17/10/2026, tema chiaro e scuro.
   Sistema di design: design-system/italiani-volanti/MASTER.md
   ========================================================================= */

/* ---------- Font ospitati sul sito ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-var.woff2") format("woff2"); font-weight: 500 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-ext-var.woff2") format("woff2"); font-weight: 500 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Token (contrasti verificati AA) ---------- */
:root {
	--fondo: #f2f6fb;
	--carta: #ffffff;
	--testo: #10213a;
	--tenue: #5f6f85;
	--blu: #1d5fd1;
	--blu-scuro: #154da9;
	--link: #1d5fd1;
	--navy: #0b1930;
	--navy-2: #122541;
	--ambra: #d97706;
	--ambra-testo: #b45309;
	--linea: #dce5f0;
	--tenue-blu: #e8f1ff;
	--ombra: 0 18px 40px rgba(18, 43, 75, 0.12);
	--ease: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--titoli: "Manrope", "Inter", "Segoe UI", sans-serif;
	--testi: "Inter", "Segoe UI", Arial, sans-serif;
	--larghezza: 1240px;
	--misura: 36rem; /* righe di testo da leggere: circa 70 lettere a 18 px (checklist: 45-75), misurato il 18/10 */
	--margine: clamp(20px, 4vw, 56px);
	--testata: 76px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="chiaro"]) { --fondo: #0c1324; --carta: #151d31; --testo: #eef4ff; --tenue: #aab7ca; --link: #66a9ff; --ambra-testo: #fbbf24; --linea: #2d3b55; --tenue-blu: #18345b; --ombra: 0 18px 40px rgba(0, 0, 0, 0.35); color-scheme: dark; }
}
:root[data-tema="scuro"] { --fondo: #0c1324; --carta: #151d31; --testo: #eef4ff; --tenue: #aab7ca; --link: #66a9ff; --ambra-testo: #fbbf24; --linea: #2d3b55; --tenue-blu: #18345b; --ombra: 0 18px 40px rgba(0, 0, 0, 0.35); color-scheme: dark; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--testata) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 400 17px/1.6 var(--testi); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--link); }
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titoli); letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.contenitore, .wrap { width: min(100% - 2 * var(--margine), var(--larghezza)); margin-inline: auto; }
:focus-visible { outline: 3px solid #66a9ff; outline-offset: 3px; border-radius: 6px; }
.solo-lettori, .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.salta-al-contenuto { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--blu); color: #fff; font-weight: 600; }
.salta-al-contenuto:focus { top: 12px; }
.icona, .ico { width: 20px; height: 20px; flex: none; }
svg.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico-cuore, .btn .ico-giu { width: 18px; height: 18px; }
.btn .ico-cuore { color: #fbbf24; }

/* ---------- Bottoni e collegamenti ---------- */
.btn, .pillola { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 14px; font: 600 16px/1 var(--testi); text-decoration: none; cursor: pointer; transition: background-color 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease), transform 160ms var(--ease); }
.btn:active, .pillola:active { transform: scale(0.97); }
.btn-blu, .pillola { background: var(--blu); color: #fff; }
.btn-blu:hover, .pillola:hover { background: var(--blu-scuro); }
.btn-vetro { color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.btn-vetro:hover { background: rgba(255, 255, 255, 0.14); }
.btn-chiaro, .pillola--chiara { background: #fff; color: #0b1930; }
.btn-chiaro:hover, .pillola--chiara:hover { background: #e8f1ff; }
.btn-bordo { color: var(--testo); background: var(--carta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.btn-bordo:hover { box-shadow: inset 0 0 0 1.5px var(--link); }
.btn svg.ico { transition: transform 220ms var(--ease); }
.btn:hover svg.ico { transform: translateX(3px); }
.btn:hover svg.ico-giu { transform: translateY(3px); }
.btn:hover svg.ico-fuori { transform: translate(2px, -2px); }
.btn:hover svg.ico-cuore, .btn:hover svg.icona--discord { transform: scale(1.12); }
/* Icone coerenti su tutti i pulsanti (17/10/2026). Davanti: logo Discord, cuore per le donazioni, download per "Scarica".
   In fondo: freccia per le pagine del sito, freccia in diagonale per il portale VA e i siti esterni, freccia in giù
   per i salti dentro la pagina. I pulsanti con l'icona già nel codice (svg) restano come sono. */
:is(.btn, .pillola):not(:has(svg))::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat; transition: transform 220ms var(--ease); }
:is(.btn, .pillola)[href^="#"]:not(:has(svg))::after { -webkit-mask-image: var(--freccia-giu); mask-image: var(--freccia-giu); }
:is(.btn, .pillola):is([target="_blank"], [href^="https://apps.apple.com"], [href^="https://play.google.com"]):not(:has(svg))::after { -webkit-mask-image: var(--freccia-fuori); mask-image: var(--freccia-fuori); }
:is(.btn, .pillola):is([href*="discord.gg"], [href*="sostieni-il-gruppo"], [href$=".zip"], [href*="/downloads"]):not(:has(svg))::after { display: none; }
:is(.btn, .pillola):is([href*="discord.gg"], [href*="sostieni-il-gruppo"], [href$=".zip"], [href*="/downloads"]):not(:has(svg))::before { content: ""; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat; transition: transform 220ms var(--ease); }
:is(.btn, .pillola)[href*="discord.gg"]:not(:has(svg))::before { -webkit-mask-image: var(--discord); mask-image: var(--discord); }
:is(.btn, .pillola)[href*="sostieni-il-gruppo"]:not(:has(svg))::before { -webkit-mask-image: var(--cuore); mask-image: var(--cuore); }
:is(.btn, .pillola):is([href$=".zip"], [href*="/downloads"]):not(:has(svg))::before { -webkit-mask-image: var(--scarica); mask-image: var(--scarica); }
@media (hover: hover) {
	:is(.btn, .pillola):not(:has(svg)):hover::after { transform: translateX(3px); }
	:is(.btn, .pillola)[href^="#"]:not(:has(svg)):hover::after { transform: translateY(3px); }
	:is(.btn, .pillola):is([target="_blank"], [href^="https://apps.apple.com"], [href^="https://play.google.com"]):not(:has(svg)):hover::after { transform: translate(2px, -2px); }
	:is(.btn, .pillola):is([href*="discord.gg"], [href*="sostieni-il-gruppo"]):not(:has(svg)):hover::before { transform: scale(1.12); }
	:is(.btn, .pillola):is([href$=".zip"], [href*="/downloads"]):not(:has(svg)):hover::before { transform: translateY(2px); }
}
/* Pulsante per donare: oro con il cuore rosso, si nota anche sulla foto scura dell'apertura */
.btn-dona { color: #1c1000; background: linear-gradient(135deg, #fde68a 0%, #fbbf24 48%, #f59e0b 100%); box-shadow: 0 16px 34px -14px rgba(245, 158, 11, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.55); font-weight: 700; }
.btn-dona:hover { background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 48%, #fbbf24 100%); box-shadow: 0 20px 40px -14px rgba(245, 158, 11, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn-dona svg.ico-cuore, .donazione .btn svg.ico-cuore { color: #dc2626; fill: currentColor; stroke: none; }
.btn-dona:hover svg.ico-cuore, .donazione .btn:hover svg.ico-cuore { transform: scale(1.18); }
.prosa a.btn.btn-dona, .prosa a.btn.btn-dona:hover { color: #1c1000; }
.freccia, .collegamento { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.freccia svg.ico { width: 18px; height: 18px; transition: transform 220ms var(--ease); }
.freccia:hover svg.ico { transform: translateX(4px); }
.collegamento:hover { text-decoration: underline; text-underline-offset: 4px; }
.riga-collegamenti { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 24px; }
.etichetta { color: var(--tenue); font-size: 14px; }

/* Presenza su Discord (dato vero) */
.presenza, .stato { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.presenza b, .stato b { font-weight: 600; }
.presenza__punto, .punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #4ade80; animation: battito 2.4s var(--ease) infinite; }
@keyframes battito { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } }

/* ---------- Testata ---------- */
.testata { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--testo); background: var(--carta); box-shadow: 0 1px 0 var(--linea); transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease); }
.testata--trasparente:not(.piena) { background: transparent; color: #fff; box-shadow: none; }
.admin-bar .testata { top: 32px; }
@media (max-width: 782px) { .admin-bar .testata { top: 46px; } }
.testata .contenitore { display: flex; align-items: center; gap: 20px; min-height: var(--testata); }
.marchio { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 800 18px var(--titoli); letter-spacing: -0.02em; }
/* Logo più grande (17/10, Mattia): 54 px in testata, 46 sul telefono */
.marchio img { height: 54px; width: auto; }
.marchio__logo--scuro { display: none; }
:root[data-tema="scuro"] .marchio__logo--chiaro { display: none; }
:root[data-tema="scuro"] .marchio__logo--scuro { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .marchio__logo--chiaro { display: none; } :root:not([data-tema="chiaro"]) .marchio__logo--scuro { display: block; } }
.testata--trasparente:not(.piena) .marchio__logo--chiaro { display: none; }
.testata--trasparente:not(.piena) .marchio__logo--scuro { display: block; }
.menu { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.menu a { display: block; padding: 10px 12px; border-radius: 10px; color: inherit; font-weight: 500; font-size: 15px; text-decoration: none; transition: background-color 200ms var(--ease); }
.menu a:hover, .menu a[aria-current="page"] { background: color-mix(in srgb, currentColor 10%, transparent); }
/* "Area piloti" nel menu solo sui telefoni, dove il pulsante della testata non c'è (18/10); freccia in diagonale: è il portale */
.menu .menu__solo-telefono { display: none; }
.menu a[target="_blank"]::after { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.4em; background: currentColor; -webkit-mask: var(--freccia-fuori) center / contain no-repeat; mask: var(--freccia-fuori) center / contain no-repeat; }
.attrezzi { display: flex; align-items: center; gap: 8px; }
.tasto { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; transition: background-color 200ms var(--ease); }
.tasto:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.attrezzi .btn { min-height: 44px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
/* Sulla foto la testata ha un velo scuro che sfuma in basso, e "Area piloti" è un vetro scuro col bordo chiaro:
   si leggono anche sopra un cielo chiaro o un tramonto */
.testata--trasparente:not(.piena)::before { content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; background: linear-gradient(rgba(8, 17, 31, 0.6), rgba(8, 17, 31, 0.28) 55%, rgba(8, 17, 31, 0)); pointer-events: none; }
.testata--trasparente:not(.piena) .btn-va { color: #fff; background: rgba(11, 25, 48, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.testata--trasparente:not(.piena) .btn-va:hover { background: rgba(11, 25, 48, 0.62); }
.tasto-menu { display: none; }
.tasto-tema .icona--luna { display: none; }
.tema-scuro-attivo .tasto-tema .icona--sole { display: none; }
.tema-scuro-attivo .tasto-tema .icona--luna { display: block; }
.bottone-tema[hidden], .tasto-tema[hidden] { display: none; }
main { display: block; }
.testata-spazio main { padding-top: var(--testata); }

/* ---------- Intro (solo home) ---------- */
.intro { display: none; }
.con-intro .intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; }
.intro__meta { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--navy); }
.intro__meta--su { top: 0; }
.intro__meta--giu { bottom: 0; }
.intro__centro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.intro__logo { width: 156px; height: auto; opacity: 0; }
.intro__linea { width: min(60vw, 520px); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); transform: scaleX(0); }

/* ---------- Home: apertura cinematografica ---------- */
/* overflow-x: clip: nell'entrata la cornice parte ingrandita e, senza, allargherebbe la pagina sul telefono */
.apertura { --apertura-basso: clamp(100px, 12vh, 130px); position: relative; height: 100svh; min-height: 620px; overflow-x: clip; background: var(--navy); }
.apertura__cornice { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 0; }
.apertura__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.apertura__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 17, 31, 0.78) 0%, rgba(8, 17, 31, 0.45) 42%, rgba(8, 17, 31, 0) 72%), linear-gradient(0deg, rgba(8, 17, 31, 0.55) 0%, rgba(8, 17, 31, 0) 40%); }
/* Il testo resta sopra l'indicatore "Scorri", anche quando la riga dei pulsanti arriva a metà schermo */
.apertura__testo { position: absolute; left: 0; right: 0; bottom: var(--apertura-basso); color: #fff; }
.apertura__testo .contenitore > * { max-width: 760px; }
.apertura__testo .contenitore > h1 { max-width: 1040px; }
.apertura .stato { margin-bottom: 22px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); }
.apertura h1 { font-size: clamp(38px, 1.1rem + 4.1vw, 86px); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; }
.titolo-righe .riga { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.titolo-righe .riga > span { display: block; }
.apertura__frase { max-width: 34rem; margin-top: 22px; font-size: clamp(17px, 1rem + 0.35vw, 20px); color: rgba(255, 255, 255, 0.86); }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pausa { position: absolute; right: var(--margine); bottom: var(--apertura-basso); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background-color 200ms var(--ease); }
.pausa:hover { background: rgba(255, 255, 255, 0.26); }
.pausa .ico-play { display: none; }
.pausa.ferma .ico-play { display: block; }
.pausa.ferma .ico-pausa { display: none; }
.scorri { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: grid; justify-items: center; gap: 6px; color: rgba(255, 255, 255, 0.78); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
/* La freccia rimbalza piano (nella versione morbida pulsa soltanto) */
.scorri svg.ico { width: 22px; height: 22px; stroke-width: 2; animation: rimbalza 2.2s ease-in-out infinite; }
@keyframes rimbalza { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(7px); } 60% { transform: translateY(3px); } }
@keyframes pulsa-piano { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* La riga dei pulsanti non arriva mai sotto il tasto pausa del video */
.apertura__testo .contenitore > .azioni { max-width: min(760px, calc(100% - 64px)); }

/* Manifesto: le parole si accendono */
.manifesto { padding: clamp(110px, 16vh, 200px) 0 clamp(90px, 12vh, 160px); }
.manifesto .grande { max-width: 18ch; font: 800 clamp(38px, 1.2rem + 4.2vw, 88px)/1.04 var(--titoli); letter-spacing: -0.04em; }
.manifesto .sotto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: clamp(48px, 7vh, 88px); padding-top: 28px; border-top: 1px solid var(--linea); }
.manifesto .sotto b { display: block; margin-bottom: 6px; font: 700 19px var(--titoli); }
.manifesto .sotto p { color: var(--tenue); font-size: 16px; }
.js .parola { opacity: 0.16; }

/* Cosa facciamo insieme: quattro scene a tutto schermo.
   Senza JavaScript e nella versione morbida si impilano scorrendo; nella versione completa (da 721px)
   il palco si blocca e le scene si danno il cambio (home.js). */
.attivita { background: var(--navy); color: #fff; padding: clamp(90px, 12vh, 150px) 0 clamp(60px, 10vh, 120px); }
.attivita__testa { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; }
.attivita__testa h2 { font-size: clamp(34px, 1.5rem + 2.4vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.attivita__testa p { max-width: 26rem; color: #aab7ca; }
.mazzo { --bordo: clamp(10px, 1.1vw, 18px); display: grid; gap: 22px; padding-inline: var(--bordo); }
.scena { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(84svh, 780px); overflow: hidden; border-radius: clamp(20px, 2vw, 32px); background: var(--navy-2); color: #fff; box-shadow: 0 -24px 60px rgba(3, 8, 18, 0.45); }
.scena__foto { position: absolute; inset: 0; z-index: -2; }
.scena__foto img { width: 100%; height: 100%; object-fit: cover; }
.scena__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 17, 31, 0.8) 0%, rgba(8, 17, 31, 0.45) 38%, rgba(8, 17, 31, 0) 66%), linear-gradient(0deg, rgba(8, 17, 31, 0.75) 0%, rgba(8, 17, 31, 0) 55%); }
.scena--blu .scena__velo { background: linear-gradient(90deg, rgba(19, 58, 138, 0.94) 0%, rgba(29, 79, 174, 0.66) 40%, rgba(29, 79, 174, 0.1) 76%), linear-gradient(0deg, rgba(11, 25, 48, 0.6) 0%, rgba(11, 25, 48, 0) 50%); }
.scena__testo { display: grid; justify-items: start; gap: 18px; max-width: 60rem; padding: clamp(28px, 5vw, 84px); }
.scena__num { font: 700 14px var(--titoli); letter-spacing: 0.14em; color: #fbbf24; }
.scena h3 { font-size: clamp(40px, min(1.1rem + 4.2vw, 10.5vh), 104px); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; }
.scena h3 .riga { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.scena p { max-width: 31rem; font-size: clamp(17px, 0.95rem + 0.35vw, 20px); color: rgba(255, 255, 255, 0.88); }
.scena .freccia { margin-top: 4px; color: #fff; }
.scena__ombra { position: absolute; inset: 0; z-index: 3; background: #050b16; opacity: 0; pointer-events: none; }
.scena__locandina { position: absolute; z-index: 1; top: 15%; right: clamp(28px, 4vw, 72px); width: min(31%, 480px); transform: rotate(-3deg); }
.scena__locandina img { width: 100%; border-radius: 14px; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.16); }
.mazzo__quadrante { display: none; }
@media (min-width: 721px) {
	.scena { position: sticky; top: calc(var(--testata) + var(--bordo) + var(--i) * 14px); height: calc(100svh - var(--testata) - 2 * var(--bordo) - 42px); min-height: 520px; }
	/* Testo a metà scheda (18/10, Mattia): in fondo lo copriva quasi subito la scheda che sale da sotto */
	.mazzo .scena { align-items: center; }
	/* Versione completa: palco bloccato, le scene una sopra l'altra */
	.js.mov-pieno .attivita { padding-bottom: 0; }
	.js.mov-pieno .attivita__testa { margin-bottom: 0; }
	.js.mov-pieno .mazzo { position: relative; display: block; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; overflow: clip; perspective: 1800px; }
	.js.mov-pieno .scena { position: absolute; inset: calc(var(--testata) + var(--bordo)) var(--bordo) var(--bordo); height: auto; min-height: 0; transform-origin: 50% 0; will-change: transform; }
	.js.mov-pieno .scena + .scena { visibility: hidden; }
	.js.mov-pieno .mazzo__quadrante { position: absolute; z-index: 5; top: calc(var(--testata) + var(--bordo) + clamp(18px, 2.4vw, 36px)); right: calc(var(--bordo) + clamp(18px, 2.4vw, 36px)); display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-radius: 999px; background: rgba(8, 17, 31, 0.42); backdrop-filter: blur(10px); font: 700 14px/1 var(--titoli); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
	.mazzo__finestra { display: block; height: 1em; overflow: hidden; }
	.mazzo__cifre, .mazzo__cifre b { display: block; height: 1em; font-weight: 700; }
	.mazzo__cifre { height: auto; }
	.mazzo__barra { position: relative; width: clamp(56px, 6vw, 110px); height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
	.mazzo__barra i { position: absolute; inset: 0; background: #fff; transform: scaleX(0.25); transform-origin: 0 50%; }
	.mazzo__totale { color: rgba(255, 255, 255, 0.6); }
}

/* La vita del gruppo */
.vita { padding: clamp(100px, 14vh, 170px) 0 0; overflow: hidden; }
.vita__testa { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.vita__testa h2, .sezione-titolo { font-size: clamp(34px, 1.5rem + 2.4vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.vita__testa p { color: var(--tenue); font-size: 18px; }
/* Il binario esce dal contenitore, ma il primo e l'ultimo quadro si allineano ai suoi bordi (come .contenitore) */
.binario { display: flex; gap: 24px; width: max-content; padding: 0 0 24px; padding-inline: max(var(--margine), (100% - var(--larghezza)) / 2); }
@media (min-width: 721px) { .mov-pieno .vita__palco { height: 100svh; display: flex; flex-direction: column; justify-content: center; } .mov-pieno .vita { padding-top: 0; } }
.quadro { flex: none; width: clamp(280px, 34vw, 520px); margin: 0; }
.quadro img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; box-shadow: var(--ombra); }
.quadro figcaption { margin-top: 14px; font: 700 18px var(--titoli); }
.quadro figcaption span { display: block; font: 400 15px var(--testi); color: var(--tenue); }
.quadro--testo { display: flex; flex-direction: column; justify-content: center; gap: 16px; width: clamp(280px, 28vw, 420px); padding-right: 20px; }
.quadro--testo h3 { font-size: 30px; font-weight: 800; line-height: 1.1; }
.quadro--testo p { color: var(--tenue); }
.quadro--vuoto .vuoto { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 28px; border: 2px dashed color-mix(in srgb, var(--link) 45%, transparent); border-radius: 20px; background: var(--tenue-blu); color: var(--link); font-weight: 500; text-align: center; }

/* Cronologia */
.storia { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); padding: clamp(90px, 12vh, 150px) 0; }
.storia__testa { position: sticky; top: calc(var(--testata) + 44px); align-self: start; }
.storia__testa h2 { font-size: clamp(30px, 1.3rem + 2vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.storia__testa p { margin: 16px 0 22px; color: var(--tenue); }
.linea-box { position: relative; }
.linea-box::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.linea-tempo__riempi { position: absolute; z-index: 1; left: 6px; top: 8px; width: 2px; height: calc(100% - 16px); background: linear-gradient(var(--ambra), var(--blu)); transform-origin: top; transform: scaleY(0); }
.linea-tempo { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.linea-tempo li { position: relative; padding: 0 0 44px; }
.linea-tempo li::before { content: ""; position: absolute; left: -34px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--fondo); box-shadow: inset 0 0 0 3px var(--ambra); }
.anno { display: block; font: 800 clamp(34px, 1.4rem + 1.6vw, 52px)/1 var(--titoli); color: var(--ambra-testo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.linea-tempo h3 { margin: 10px 0 6px; font-size: 22px; font-weight: 700; }
.linea-tempo p { color: var(--tenue); }
/* Le tappe prima del 2024: una riga "2010 - 2022" con il tratteggio che sale (c'è dell'altro prima) e il pulsante per aprirle */
.linea-tempo__prima::before { box-shadow: inset 0 0 0 3px var(--linea) !important; }
.linea-tempo__prima::after { content: ""; position: absolute; left: -28px; top: -34px; height: 40px; border-left: 2px dashed var(--linea); -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000); }
.linea-tempo__prima .anno, .linea-tempo__vecchia .anno { font-size: clamp(24px, 1rem + 0.9vw, 32px); color: var(--tenue); }
.linea-tempo__prima p { margin-top: 8px; }
.linea-tempo .bollo { margin: 12px 0 0; vertical-align: 0; }
.linea-tempo__vecchia .bollo { margin-top: 8px; }
.linea-tempo li.linea-tempo__traguardo::before { background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25), 0 0 20px 2px rgba(245, 158, 11, 0.5) !important; }
.linea-tempo__apri { display: none; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--link); font: 600 16px var(--testi); cursor: pointer; }
.js .linea-tempo__apri { display: inline-flex; }
.linea-tempo__apri svg.ico { width: 18px; height: 18px; transition: transform 250ms var(--ease); }
.linea-tempo__apri[aria-expanded="true"] svg.ico { transform: rotate(180deg); }
.linea-tempo__apri:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.linea-tempo__apri:focus-visible { outline: 3px solid #66a9ff; outline-offset: 3px; border-radius: 6px; }
.linea-tempo__vecchia { padding-bottom: 26px !important; }
.linea-tempo__vecchia::before { width: 10px !important; height: 10px !important; left: -32px !important; top: 8px !important; box-shadow: inset 0 0 0 2px var(--ambra) !important; }
.js .linea-tempo:not(.linea-tempo--aperta) .linea-tempo__vecchia { display: none; }
.linea-tempo--aperta .linea-tempo__vecchia { animation: iv-appare 500ms ease both; }

/* Come partecipare */
.partecipa { padding: clamp(90px, 12vh, 150px) 0; background: var(--carta); }
.titolo-sez { font-size: clamp(32px, 1.4rem + 2vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
.intro-sez { max-width: 40rem; margin: 16px 0 48px; color: var(--tenue); font-size: 18px; }
.percorsi { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; }
.percorso { padding: 34px; border-radius: 24px; background: var(--fondo); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.percorso:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.percorso h3 { margin-bottom: 14px; font-size: 24px; font-weight: 800; }
.percorso p { margin-bottom: 20px; color: var(--tenue); }
.percorso--nuovo { background: var(--blu); color: #fff; }
.percorso--nuovo ol { display: grid; gap: 12px; margin: 0 0 26px; padding-left: 22px; }
.rapidi { margin: 0; padding: 0; list-style: none; }
.rapidi a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--linea); color: var(--testo); font-weight: 500; text-decoration: none; transition: color 200ms var(--ease), padding 200ms var(--ease); }
.rapidi a:hover { color: var(--link); padding-left: 6px; }
.rapidi small { color: var(--tenue); font-size: 13px; font-weight: 400; }

/* Virtual Airline */
.fascia-va { position: relative; overflow: hidden; padding: clamp(100px, 14vh, 170px) 0; background: radial-gradient(120% 140% at 90% 0%, #1b3b73 0%, #0b1930 60%); color: #dbe7fb; }
.fascia-va .contenitore { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.fascia-va h2 { color: #fff; font-size: clamp(32px, 1.4rem + 2vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
.fascia-va p { margin-top: 16px; font-size: 18px; }
.fascia-va ul { display: grid; gap: 16px; margin: 30px 0; padding: 0; list-style: none; }
.fascia-va li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.fascia-va li svg.ico { margin-top: 3px; color: #5bb8f9; }
.fascia-va li b { color: #fff; font-weight: 600; }
.fascia-va .nota { margin-top: 22px; font-size: 16px; color: #aab7ca; }
.fascia-va .nota a { color: #9cc8ff; }
.scena { perspective: 1400px; }
/* La fascia VA usa .scena solo per la prospettiva: niente riquadro scuro delle scene di "Cosa facciamo insieme" */
.fascia-va .scena { display: block; min-height: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.schermo { position: relative; width: 100%; transform: rotateX(14deg) rotateY(-18deg) rotateZ(2deg); transform-style: preserve-3d; }
.schermo > img { width: 100%; border-radius: 22px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55); }
.schermo .chip { position: absolute; left: -6%; bottom: -10%; width: 44%; border-radius: 16px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); transform: translateZ(60px); }

/* Motto */
.motto { padding: clamp(110px, 16vh, 200px) 0; text-align: center; }
.motto blockquote { max-width: 16ch; margin: 0 auto; font: 800 clamp(40px, 1.4rem + 4.6vw, 104px)/1.02 var(--titoli); letter-spacing: -0.045em; }
.motto .virgolette { display: block; margin-bottom: 18px; color: var(--ambra); font: 800 90px/0.6 var(--titoli); }

/* Blog in home, domande, chiusura */
.blog-home { padding: 0 0 clamp(90px, 12vh, 140px); }
.testa-sezione { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; }
.domande { padding: 0 0 clamp(90px, 12vh, 140px); }
.domande .contenitore { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.domande .contenitore > div:first-child p { margin-top: 16px; color: var(--tenue); }
.domande details, .faq details { border-bottom: 1px solid var(--linea); }
.domande summary, .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none; font: 700 19px/1.35 var(--titoli); }
.domande summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.domande summary::after, .faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--link), var(--link)) center / 100% 2px no-repeat, linear-gradient(var(--link), var(--link)) center / 2px 100% no-repeat; transition: transform 250ms var(--ease); }
.domande details[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.domande details p, .faq details p { max-width: var(--misura); padding-bottom: 22px; color: var(--tenue); }
.chiusura .contenitore { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: clamp(90px, 12vh, 140px); }
.riquadro { padding: 36px; border-radius: 24px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); }
.riquadro h3 { margin-bottom: 10px; font-size: 24px; font-weight: 800; }
.riquadro p { margin-bottom: 20px; color: var(--tenue); }

/* ---------- Schede degli articoli (home, blog, correlati) ---------- */
.griglia-articoli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
.scheda { position: relative; display: grid; align-content: start; gap: 12px; }
.scheda__foto { overflow: hidden; border-radius: 20px; background: var(--tenue-blu); }
.scheda__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 700ms var(--ease); }
.scheda:hover .scheda__foto img { transform: scale(1.05); }
.scheda__meta { color: var(--tenue); font-size: 14px; }
.scheda__titolo { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.scheda__titolo a { color: var(--testo); text-decoration: none; }
.scheda__titolo a::after { content: ""; position: absolute; inset: 0; }
.scheda:hover .scheda__titolo a { color: var(--link); }
.scheda__estratto { margin-top: 8px; color: var(--tenue); font-size: 16px; }
.in-evidenza { grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--linea); }
.in-evidenza .scheda__titolo { font-size: clamp(28px, 1.3rem + 1.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.in-evidenza .scheda__estratto { font-size: 18px; }

/* ---------- Pagine, blog, archivi, ricerca ---------- */
.elenco, .pagina, .fuori-rotta { padding-top: clamp(48px, 7vh, 88px); } /* gli articoli aprono con la copertina (18/10) */
.elenco { padding-bottom: clamp(80px, 12vh, 140px); }
.elenco__testa, .pagina__testa, .articolo__testa { display: grid; gap: 18px; max-width: 58rem; margin-bottom: clamp(32px, 5vh, 56px); }
.elenco__titolo, .articolo__titolo { font-size: clamp(38px, 1.3rem + 3.4vw, 72px); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.elenco__intro { max-width: 40rem; color: var(--tenue); font-size: 19px; }
.elenco__intro > * { margin: 0; }
.briciole { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--tenue); font-size: 14px; }
.briciole li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.briciole a { color: inherit; text-decoration: none; }
.briciole a:hover { color: var(--link); }
.articolo__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--tenue); font-size: 15px; }
.articolo__corpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.indice { position: sticky; top: calc(var(--testata) + 32px); max-height: calc(100svh - var(--testata) - 64px); overflow-y: auto; font-size: 14px; scrollbar-width: thin; }
.indice details summary { display: none; }
.indice__titolo { margin: 0 0 12px; color: var(--tenue); font-weight: 600; }
.indice ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--linea); }
.indice a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--tenue); line-height: 1.35; text-decoration: none; transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.indice a:hover, .indice a[aria-current="true"] { border-left-color: var(--blu); color: var(--testo); }

/* Testo lungo (articoli e pagine) */
/* overflow-wrap: indirizzi web ed email lunghi vanno a capo invece di allargare la pagina sul telefono */
.prosa { max-width: 44rem; font-size: 18px; line-height: 1.72; overflow-wrap: break-word; }
/* Leggibilità (18/10): paragrafi ed elenchi semplici non oltre la misura; immagini, video, tabelle e schede restano larghi */
.prosa > p:not(.azioni, .largo, .tutta-larghezza):not(:has(img, iframe, video)), .prosa > ul:not([class]), .prosa > ol:not([class]), .prosa > blockquote { max-width: var(--misura); }
.prosa > * { margin-block: 0 1.15em; }
.prosa .lead { font-size: clamp(19px, 1rem + 0.5vw, 22px); line-height: 1.5; color: var(--testo); }
.prosa .aggiornamento { color: var(--tenue); font-size: 15px; }
.prosa h2 { margin-top: 2.2em; margin-bottom: 0.6em; font-size: clamp(26px, 1.2rem + 1.2vw, 36px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; scroll-margin-top: calc(var(--testata) + 24px); }
.prosa h3 { margin-top: 1.7em; margin-bottom: 0.5em; font-size: clamp(20px, 1.05rem + 0.5vw, 24px); font-weight: 700; line-height: 1.25; scroll-margin-top: calc(var(--testata) + 24px); }
.prosa h4 { margin-top: 1.5em; font-size: 18px; font-weight: 700; }
.prosa a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prosa a.btn { color: inherit; text-decoration: none; }
.prosa a.btn-blu { color: #fff; }
.prosa strong { font-weight: 650; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin-bottom: 0.45em; }
.prosa li::marker { color: var(--blu); font-weight: 600; }
.prosa img { height: auto; border-radius: 16px; }
.prosa .video { margin: 1.4em 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--navy); }
.prosa .video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; }
/* Video leggero: anteprima con titolo e tasto play; il video vero parte al clic (main.js) */
.video__anteprima { position: relative; display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; }
.prosa .video__anteprima img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 500ms var(--ease); }
.video__anteprima::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 17, 31, 0.78) 0%, rgba(8, 17, 31, 0) 55%); }
.video__anteprima::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(8, 17, 31, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E") 54% 50% / 26px no-repeat; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); transition: transform 250ms var(--ease), background-color 250ms var(--ease); }
.video__titolo { position: absolute; right: 18px; bottom: 14px; left: 18px; z-index: 2; font: 700 15px/1.3 var(--titoli); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
@media (hover: hover) { .video__anteprima:hover img { transform: scale(1.03); } .video__anteprima:hover::after { transform: scale(1.08); background-color: var(--blu); } }
.video__anteprima:focus-visible { outline-offset: -4px; }
.prosa .loghi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 1.4em 0; }
.prosa .loghi figure { margin: 0; }
.prosa .loghi a { display: grid; place-items: center; height: 110px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.prosa .loghi img { width: auto; max-height: 70px; object-fit: contain; border-radius: 0; }
.prosa figure { margin-inline: 0; }
.prosa figcaption, .prosa .wp-caption-text { margin-top: 10px; color: var(--tenue); font-size: 14px; }
.prosa blockquote { margin-inline: 0; padding-left: 20px; border-left: 3px solid var(--ambra); font: 600 21px/1.45 var(--titoli); }
.prosa table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prosa th, .prosa td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.prosa hr { margin-block: 2.5em; border: 0; border-top: 1px solid var(--linea); }
.prosa code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--tenue-blu); font-size: 0.9em; }
.prosa iframe { max-width: 100%; border-radius: 16px; }
.tabella-scorrevole { overflow-x: auto; }
.prosa .azioni { margin-top: 1.4em; }
.prosa .faq { margin-top: 2.4em; }
.prosa .faq h2 { margin-top: 0; }
.prosa .faq details p { margin: 0; }
.prosa .galleria-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.6em 0 2em; }
.prosa .galleria-foto figure { margin: 0; }
.prosa .galleria-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.prosa .galleria-foto figcaption { margin-top: 8px; color: var(--tenue); font-size: 14px; line-height: 1.4; }
.prosa .cronologia { display: grid; gap: 14px; padding: 0; list-style: none; }
.prosa .cronologia li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.prosa .cronologia strong { color: var(--ambra-testo); font: 800 24px/1.2 var(--titoli); font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.pagina { padding-bottom: clamp(80px, 12vh, 140px); }
.pagina .prosa { max-width: 46rem; }
/* Pagine lunghe a capitoli (regolamento, privacy): indice fisso a sinistra, testo che occupa il resto */
.pagina__corpo { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pagina__corpo .prosa { max-width: 50rem; }
.pagina__corpo .prosa > h2:first-child { margin-top: 0; }
.indice .indice__voce--2 a { margin-top: 10px; color: var(--testo); font-weight: 700; }
.indice .indice__voce--2:first-child a { margin-top: 0; }
.indice .indice__voce--3 a { padding-left: 26px; }

/* ---------- Pagine con apertura a foto (page.php, meta _iv_apertura) ---------- */
.apertura-pagina { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(80svh, 780px); padding: calc(var(--testata) + 56px) 0 clamp(52px, 9vh, 96px); overflow: hidden; background: var(--navy); color: #fff; }
.apertura-pagina__foto { position: absolute; inset: 0; z-index: -2; }
.apertura-pagina__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.apertura-pagina__foto img[src*="scena-c27"] { object-position: 50% 30%; } /* Chi siamo: sopra il C-27J c'è un po' di cielo, così eliche e antenna restano sotto la testata (18/10) */
.apertura-pagina__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 17, 31, 0.9) 0%, rgba(8, 17, 31, 0.62) 40%, rgba(8, 17, 31, 0.12) 78%), linear-gradient(0deg, rgba(8, 17, 31, 0.78) 0%, rgba(8, 17, 31, 0) 52%), linear-gradient(180deg, rgba(8, 17, 31, 0.6) 0%, rgba(8, 17, 31, 0) 24%); }
.apertura-pagina__dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
.apertura-pagina__testo { display: grid; justify-items: start; gap: 18px; max-width: 48rem; }
.apertura-pagina .briciole { color: rgba(255, 255, 255, 0.72); }
.occhiello { margin: 0; color: #fbbf24; font: 700 13px var(--titoli); letter-spacing: 0.14em; text-transform: uppercase; }
.apertura-pagina__titolo { font-size: clamp(40px, 1.1rem + 4.2vw, 88px); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; }
.apertura-pagina__frase { max-width: 38rem; color: rgba(255, 255, 255, 0.88); font-size: clamp(17px, 1rem + 0.4vw, 21px); line-height: 1.55; }
.apertura-pagina__frase a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 0.2em; }
.apertura-pagina__visuale { width: clamp(220px, 21vw, 300px); margin: 0 0 8px; }
.apertura-pagina__visuale img { width: 100%; border-radius: 18px; box-shadow: 0 44px 80px -24px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.18); transform: rotate(3deg); }
.pagina--con-apertura { padding-top: clamp(64px, 9vh, 112px); }
.pagina--con-apertura .prosa > h2:first-child { margin-top: 0; }

/* Entrata dell'apertura: foto che si avvicina, testo che sale, riquadro che arriva e galleggia */
.js.mov-pieno .apertura-pagina__foto img { animation: iv-avvicina 2.2s var(--ease) both; }
.js.mov-pieno .apertura-pagina__testo > * { animation: iv-sale 1.1s var(--ease) both; }
.js.mov-pieno .apertura-pagina__testo > :nth-child(2) { animation-delay: 0.08s; }
.js.mov-pieno .apertura-pagina__testo > :nth-child(3) { animation-delay: 0.16s; }
.js.mov-pieno .apertura-pagina__testo > :nth-child(4) { animation-delay: 0.24s; }
.js.mov-pieno .apertura-pagina__visuale { animation: iv-arriva 1.3s var(--ease) 0.35s both; }
.js.mov-pieno .apertura-pagina__visuale img { animation: iv-galleggia 7s ease-in-out 1.7s infinite; }
.js.mov-dolce .apertura-pagina__testo > *, .js.mov-dolce .apertura-pagina__visuale { animation: iv-appare 1s ease both; }
@keyframes iv-avvicina { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes iv-sale { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes iv-arriva { from { opacity: 0; transform: translateY(40px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes iv-galleggia { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-8px); } }
@keyframes iv-appare { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Blocchi delle pagine: schede, etichette, requisiti, passi, fascia con i pulsanti ---------- */
.prosa .largo { width: min(var(--larghezza), calc(100vw - 2 * var(--margine))); max-width: none; }
.prosa .schede, .prosa .requisiti, .prosa .passi, .prosa .etichette { padding: 0; list-style: none; }
.prosa .schede li, .prosa .requisiti li, .prosa .passi li, .prosa .etichette li { margin: 0; }
.prosa .schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.prosa .schede li { position: relative; padding: 92px 26px 26px; border-radius: 24px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); color: var(--tenue); font-size: 16px; line-height: 1.55; }
.prosa .schede li::before { content: ""; position: absolute; top: 26px; left: 26px; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg, #1d5fd1 0%, #4f8fff 100%); box-shadow: 0 12px 24px -12px rgba(29, 95, 209, 0.85); }
.prosa .schede li::after { content: ""; position: absolute; top: 38px; left: 38px; width: 24px; height: 24px; background: #fff; -webkit-mask: var(--icona, none) center / contain no-repeat; mask: var(--icona, none) center / contain no-repeat; }
.prosa .schede strong, .prosa .schede h2, .prosa .schede h3 { display: block; margin: 0 0 8px; color: var(--testo); font: 700 20px/1.2 var(--titoli); letter-spacing: -0.02em; }
.prosa .schede p { margin: 0; }
/* Pagina dei link per i social (/link/, 18/10): pulsanti grandi uno sotto l'altro, con l'icona come nelle schede */
.prosa ul.lista-link { display: grid; gap: 12px; max-width: 36rem; margin: 1.2em 0 2.2em; padding: 0; list-style: none; }
.prosa ul.lista-link li { margin: 0; }
.prosa ul.lista-link a { position: relative; display: block; min-height: 78px; padding: 16px 20px 16px 84px; border-radius: 20px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); color: var(--testo); text-decoration: none; transition: box-shadow 200ms ease, transform 200ms ease; }
.prosa ul.lista-link a:hover { box-shadow: inset 0 0 0 1.5px var(--link); transform: translateY(-1px); }
.prosa ul.lista-link a::before { content: ""; position: absolute; top: 50%; left: 18px; width: 48px; height: 48px; margin-top: -24px; border-radius: 15px; background: linear-gradient(135deg, #1d5fd1 0%, #4f8fff 100%); box-shadow: 0 12px 24px -12px rgba(29, 95, 209, 0.85); }
.prosa ul.lista-link a::after { content: ""; position: absolute; top: 50%; left: 30px; width: 24px; height: 24px; margin-top: -12px; background: #fff; -webkit-mask: var(--icona, none) center / contain no-repeat; mask: var(--icona, none) center / contain no-repeat; }
.prosa ul.lista-link strong { display: block; padding-top: 4px; font: 700 18px/1.25 var(--titoli); letter-spacing: -0.01em; }
.prosa ul.lista-link span { display: block; margin-top: 3px; color: var(--tenue); font-size: 16px; line-height: 1.4; }
.prosa ul.lista-link a:not(:has(span)) strong { padding-top: 13px; }
@media (prefers-reduced-motion: reduce) { .prosa ul.lista-link a { transition: none; } .prosa ul.lista-link a:hover { transform: none; } }
.prosa .schede p + p { margin-top: 0.6em; }
.prosa .schede li:not(:has(strong, h2, h3)) { color: var(--testo); font-size: 17px; }
/* Scheda con il titolo che porta a una pagina: tutta la scheda è cliccabile. */
.prosa .schede strong a { color: inherit; text-decoration: none; }
.prosa .schede strong a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.prosa .schede li:has(strong a) { transition: box-shadow 250ms var(--ease); }
@media (hover: hover) { .prosa .schede li:has(strong a):hover { box-shadow: inset 0 0 0 1.5px var(--link), var(--ombra); } .prosa .schede li:has(strong a):hover strong { color: var(--link); } }
.prosa .schede strong a:focus-visible { outline: none; }
.prosa .schede li:has(strong a:focus-visible) { box-shadow: inset 0 0 0 3px #66a9ff; }
@media (min-width: 900px) {
	/* Cinque voci: tre sopra e due più larghe sotto, senza buchi. */
	.prosa .schede:has(> li:nth-child(5):last-child), .prosa .requisiti:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.prosa .schede:has(> li:nth-child(5):last-child) > li, .prosa .requisiti:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
	.prosa .schede:has(> li:nth-child(5):last-child) > li:nth-child(n+4), .prosa .requisiti:has(> li:nth-child(5):last-child) > li:nth-child(n+4) { grid-column: span 3; }
	/* Quattro schede con un paragrafo intero: due per riga, si leggono meglio. */
	.prosa .schede:has(> li > p):has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prosa .etichette { display: flex; flex-wrap: wrap; gap: 10px; }
.prosa .etichette li { padding: 11px 18px; border-radius: 999px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); color: var(--testo); font: 650 15px/1.2 var(--titoli); }
.prosa .requisiti { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.prosa .requisiti li { position: relative; padding: 18px 20px 18px 54px; border-radius: 18px; background: var(--tenue-blu); color: var(--testo); font-size: 16px; line-height: 1.45; }
.prosa .requisiti li::before { content: ""; position: absolute; top: 19px; left: 20px; width: 22px; height: 22px; background: var(--link); -webkit-mask: var(--icona-spunta) center / contain no-repeat; mask: var(--icona-spunta) center / contain no-repeat; }
.prosa .passi { counter-reset: passo; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.prosa .passi li { counter-increment: passo; position: relative; padding: 24px 24px 26px; border-radius: 24px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); font-size: 16px; line-height: 1.55; }
.prosa .passi li::before { content: counter(passo, decimal-leading-zero); display: block; margin-bottom: 14px; color: var(--ambra-testo); font: 800 36px/1 var(--titoli); letter-spacing: -0.03em; }
.prosa .passi li::marker { content: none; }
.prosa .fascia-azione { display: grid; justify-items: start; gap: 18px; margin-block: 2.6em; padding: clamp(30px, 4.5vw, 56px); border-radius: 30px; background: radial-gradient(120% 140% at 90% 0%, #1b3b73 0%, #0b1930 62%); color: #c7d3e6; }
.prosa .fascia-azione > * { margin: 0; }
.prosa .fascia-azione__titolo { max-width: 22ch; color: #fff; font: 800 clamp(28px, 1.2rem + 1.6vw, 44px)/1.06 var(--titoli); letter-spacing: -0.035em; }
.prosa .fascia-azione__nota { font-size: 15px; }
.prosa .fascia-azione .azioni { margin: 0; }
.prosa .fascia-azione a.btn-chiaro { color: var(--navy); }
.prosa .fascia-azione a.btn-vetro { color: #fff; }
.tema-scuro-attivo .prosa .fascia-azione { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.prosa .fascia-azione h2.fascia-azione__titolo { margin: 0; }
.prosa .fascia-azione a:not(.btn) { color: #fff; }
/* Pulsanti saliti nell'apertura */
.apertura-pagina .azioni { margin-top: 8px; }
.apertura-pagina .btn-bordo { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
/* Catalogo: livree, scenari, lezioni. Anteprima in alto, nome, testo e pulsante in fondo alla scheda. */
.prosa .catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; padding: 0; list-style: none; }
.prosa .catalogo > li { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 22px; overflow: hidden; border-radius: 24px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); color: var(--tenue); font-size: 16px; line-height: 1.55; }
.prosa .catalogo > li > :not(figure) { margin: 0 22px; }
.prosa .catalogo > li > figure { margin: 0 0 6px; border-radius: 0; }
.prosa .catalogo > li > figure:not(.video) img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.prosa .catalogo h3 { color: var(--testo); font: 700 19px/1.25 var(--titoli); letter-spacing: -0.02em; }
.prosa .catalogo strong { color: var(--testo); }
.prosa .catalogo ul { padding-left: 1.15em; }
.prosa .catalogo li li { margin-bottom: 0.2em; }
.prosa .catalogo .azioni { margin-top: auto; padding-top: 6px; }
/* Anteprime delle livree X-Plane (aerei su sfondo trasparente, 18/10): riquadro blu notte con l'aereo intero al centro;
   la foto dei mezzi di terra riempie il riquadro; senza anteprima, il logo in trasparenza. */
.prosa .catalogo > li > figure.anteprima-livrea { display: grid; place-items: center; aspect-ratio: 16 / 10; background: radial-gradient(130% 120% at 50% 0%, #1a3a70 0%, #0b1930 68%); }
.prosa .catalogo > li > figure.anteprima-livrea img { width: 94%; height: 94%; aspect-ratio: auto; object-fit: contain; }
.prosa .catalogo > li > figure.anteprima-livrea--foto img { width: 100%; height: 100%; object-fit: cover; }
.prosa .catalogo > li > figure.anteprima-livrea--logo::before { content: ""; width: 30%; aspect-ratio: 114 / 80; background: url("../img/logo-iv-scuro.svg") center / contain no-repeat; opacity: 0.4; }
/* Al telefono due livree per riga: dodici schede una sotto l'altra facevano una pagina lunghissima */
@media (max-width: 560px) {
	.prosa .catalogo:has(> li > .anteprima-livrea) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.prosa .catalogo:has(> li > .anteprima-livrea) > li { gap: 8px; padding-bottom: 14px; border-radius: 18px; }
	.prosa .catalogo:has(> li > .anteprima-livrea) > li > :not(figure) { margin: 0 12px; }
	.prosa .catalogo:has(> li > .anteprima-livrea) h3 { font-size: 16px; }
	.prosa .catalogo:has(> li > .anteprima-livrea) .btn { width: 100%; justify-content: center; }
}
/* Ricerca sopra un elenco di schede (main.js, data-cerca): le schede che non corrispondono si nascondono */
.prosa .catalogo > li[hidden], .prosa .schede > li[hidden], .prosa .catalogo[hidden], .prosa .schede[hidden], .sezione .sezione__testa[hidden], .pagina-sezioni > .sezione[hidden] { display: none; }
.prosa .ricerca--elenco { max-width: 34rem; margin: 0 0 12px; }
.prosa .ricerca__esito { min-height: 1.55em; margin: 0 0 16px; color: var(--tenue); font-size: 16px; }
/* Foto in griglia larga e foto con link agli articoli */
.prosa .galleria-foto.largo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prosa .galleria-link { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 0; list-style: none; }
.prosa .galleria-link li { margin: 0; }
.prosa .galleria-link a { display: block; overflow: hidden; border-radius: 22px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); color: var(--testo); text-decoration: none; }
.prosa .galleria-link img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; transition: transform 600ms var(--ease); }
.prosa .galleria-link span { display: block; padding: 14px 18px 18px; font: 700 17px/1.3 var(--titoli); }
.prosa .galleria-link small { display: block; margin-top: 3px; color: var(--tenue); font: 400 14px var(--testi); }
@media (hover: hover) { .prosa .galleria-link a:hover img { transform: scale(1.04); } .prosa .galleria-link a:hover span { color: var(--link); } }

/* ---------- Pagine a sezioni: fasce a tutta larghezza (page.php, contenuto con <section class="sezione ...">) ---------- */
:root {
	--motivo-rotte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.5' stroke-dasharray='6 10'%3E%3Cpath d='M-40 470C260 300 520 520 800 260S1180 120 1260 180'/%3E%3Cpath d='M-40 140C220 220 380 60 640 150S1000 420 1260 380'/%3E%3Cpath d='M120 640C300 420 700 520 980 300'/%3E%3Cg fill='white' fill-opacity='.4' stroke='none'%3E%3Ccircle cx='800' cy='260' r='4'/%3E%3Ccircle cx='640' cy='150' r='4'/%3E%3Ccircle cx='980' cy='300' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.pagina-sezioni { overflow: clip; }
.sezione { position: relative; isolation: isolate; padding: clamp(84px, 12vh, 144px) 0; }
/* Ogni fascia sale di 1 px sulla precedente: con lo zoom dello schermo al 125-150% il confine cade a metà di un pixel e
   i due bordi sfumati lasciavano vedere il fondo della pagina, una riga chiara o scura (18/10, segnalata da Mattia). */
.pagina-sezioni > .sezione + .sezione { margin-top: -1px; }
.sezione--chiara { background: var(--fondo); }
.sezione--bianca { background: var(--carta); }
.sezione--scura { background: radial-gradient(120% 130% at 88% 0%, #1a3a70 0%, #0b1930 58%); color: #c7d3e6; }
.sezione--scura::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--motivo-rotte) center / max(1200px, 100%) auto no-repeat; pointer-events: none; }
.sezione .prosa { max-width: none; }
.sezione .sezione__testa { display: grid; justify-items: start; gap: 14px; max-width: 48rem; margin: 0 0 clamp(36px, 5vh, 60px); }
.sezione .sezione__testa > * { margin: 0; }
.sezione .sezione__testa h2 { color: var(--testo); font-size: clamp(34px, 1.5rem + 2.4vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
.sezione .sezione__testa > p:not(.occhiello) { max-width: 40rem; color: var(--tenue); font-size: 18px; }
.sezione--chiara .occhiello, .sezione--bianca .occhiello { color: var(--ambra-testo); }
.sezione--scura .sezione__testa h2, .sezione--scura .prosa h3 { color: #fff; }
.sezione--scura .sezione__testa > p:not(.occhiello), .sezione--scura .prosa p { color: #aab7ca; }
.sezione--scura .prosa a:not(.btn) { color: #9cc8ff; }
.sezione .prosa h3 { margin: clamp(40px, 6vh, 64px) 0 20px; font-size: clamp(22px, 1.1rem + 0.8vw, 28px); }
.sezione .prosa .schede h3 { margin: 0 0 10px; font-size: 22px; }
/* Testo e foto affiancati, con un'etichetta che galleggia sulla foto */
.sezione__divisa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.sezione__divisa--inversa > :first-child { order: 2; }
.sezione .sezione__divisa .sezione__testa { margin-bottom: 22px; }
.sezione__foto { position: relative; margin: 0; }
.sezione .sezione__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 30px; box-shadow: 0 44px 80px -40px rgba(11, 25, 48, 0.6); }
.gettone { position: absolute; bottom: 28px; left: -26px; display: flex; align-items: center; gap: 12px; max-width: 290px; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--carta); color: var(--testo); box-shadow: 0 24px 48px -18px rgba(11, 25, 48, 0.45), inset 0 0 0 1px var(--linea); font: 650 15px/1.3 var(--titoli); }
.gettone::before { content: ""; flex: none; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #1d5fd1 0%, #4f8fff 100%); }
.gettone[data-icona]::after { content: ""; position: absolute; top: 50%; left: 23px; width: 20px; height: 20px; margin-top: -10px; background: #fff; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; }
.js.mov-pieno .sezione__foto[data-entra] { opacity: 1; transform: none; }
.js.mov-pieno .sezione__foto[data-entra] img { clip-path: inset(10% 10% 10% 10% round 30px); transform: scale(1.06); transition: clip-path 1.2s var(--ease), transform 1.4s var(--ease); }
.js.mov-pieno .sezione__foto[data-entra].dentro img { clip-path: inset(0 0 0 0 round 30px); transform: none; }
.js.mov-pieno .sezione__foto[data-entra] .gettone { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease) 600ms, transform 700ms var(--ease) 600ms; }
.js.mov-pieno .sezione__foto[data-entra].dentro .gettone { opacity: 1; transform: none; }
/* Sulle fasce scure le schede sono di vetro */
.sezione--scura .prosa .schede li { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #aab7ca; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow 300ms var(--ease), background-color 300ms var(--ease); }
.sezione--scura .prosa .schede strong, .sezione--scura .prosa .schede h2, .sezione--scura .prosa .schede h3 { color: #fff; }
@media (hover: hover) { .sezione--scura .prosa .schede li:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(102, 169, 255, 0.45), 0 30px 60px -32px rgba(29, 95, 209, 0.7); } }
/* La rotta: passi numerati su una linea tratteggiata, con un aereo che la percorre */
.prosa .rotta { position: relative; gap: 28px; }
.prosa .rotta::before { content: ""; position: absolute; top: 31px; right: 32px; left: 32px; border-top: 2px dashed color-mix(in srgb, var(--link) 45%, transparent); }
.prosa .rotta::after { content: ""; position: absolute; top: 15px; left: 14px; width: 34px; height: 34px; background: var(--link); -webkit-mask: var(--icona-aereo) center / contain no-repeat; mask: var(--icona-aereo) center / contain no-repeat; transform: rotate(90deg); }
.js.mov-pieno .prosa .rotta::after { transition: left 2.8s var(--ease-in-out) 0.3s; }
.js .prosa .rotta.dentro::after { left: calc(100% - 48px); }
.prosa .rotta li { position: relative; z-index: 1; padding: 0; background: none; box-shadow: none; color: var(--tenue); }
.prosa .rotta li::before { content: counter(passo); display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: var(--navy); color: #fff; font: 800 24px var(--titoli); box-shadow: 0 0 0 7px var(--fondo); }
.sezione--bianca .prosa .rotta li::before { box-shadow: 0 0 0 7px var(--carta); }
.tema-scuro-attivo .prosa .rotta li::before { background: var(--blu); }
/* La checklist prima del volo: le caselle si spuntano una dopo l'altra */
.prosa .controllo { display: grid; grid-template-columns: 1fr; gap: 0; padding: 10px 28px; border-radius: 26px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -36px rgba(11, 25, 48, 0.45); }
.prosa .controllo li { padding: 18px 0 18px 46px; border-bottom: 1px dashed var(--linea); border-radius: 0; background: none; }
.prosa .controllo li:last-child { border-bottom: 0; }
.prosa .controllo li::before { top: 19px; left: 0; width: 24px; height: 24px; border-radius: 7px; background: transparent; box-shadow: inset 0 0 0 2px var(--linea); -webkit-mask: none; mask: none; transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.prosa .controllo.dentro li::before { background: var(--blu) var(--spunta-bianca) center / 15px no-repeat; box-shadow: none; }
.js.mov-pieno .prosa .controllo.dentro li:nth-child(2)::before { transition-delay: 250ms; }
.js.mov-pieno .prosa .controllo.dentro li:nth-child(3)::before { transition-delay: 500ms; }
.js.mov-pieno .prosa .controllo.dentro li:nth-child(4)::before { transition-delay: 750ms; }
.js.mov-pieno .prosa .controllo.dentro li:nth-child(5)::before { transition-delay: 1000ms; }
.js.mov-pieno .prosa .controllo.dentro li:nth-child(6)::before { transition-delay: 1250ms; }
.sezione .prosa ul.controllo[data-entra] > li { opacity: 1; transform: none; }
/* La checklist è sempre una colonna sola, anche con cinque voci. */
.prosa .requisiti.controllo { grid-template-columns: 1fr !important; }
.prosa .requisiti.controllo > li { grid-column: auto !important; }
/* Pulsanti dentro le sezioni scure e a foto */
.sezione .prosa a.btn-chiaro { color: var(--navy); }
.sezione .prosa a.btn-vetro { color: #fff; }
/* Fascia finale a foto, con un leggero movimento della foto mentre si scorre */
.sezione--foto { display: grid; align-items: end; min-height: min(80svh, 760px); overflow: hidden; background: var(--navy); color: #fff; }
.sezione--foto > picture, .sezione--foto > img { position: absolute; inset: 0; z-index: -2; }
.sezione--foto img { width: 100%; height: 100%; object-fit: cover; }
.sezione--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 17, 31, 0.72) 0%, rgba(8, 17, 31, 0.3) 55%, rgba(8, 17, 31, 0) 100%), linear-gradient(0deg, rgba(8, 17, 31, 0.9) 0%, rgba(8, 17, 31, 0.4) 55%, rgba(8, 17, 31, 0.15) 100%); }
.sezione--foto .sezione__testa { margin-bottom: 0; }
/* Interlinea stretta: g e p scendono sotto la riga, quindi sotto il titolo serve aria in proporzione alla sua misura. */
.sezione--foto .sezione__testa h2 { padding-bottom: 0.14em; color: #fff; font-size: clamp(46px, 1.4rem + 5.4vw, 116px); line-height: 0.95; letter-spacing: -0.045em; }
.sezione--foto .azioni { margin-top: 20px; }
@supports (animation-timeline: view()) {
	.js.mov-pieno .sezione--foto img { animation: iv-parallasse linear both; animation-timeline: view(); }
	@keyframes iv-parallasse { from { transform: scale(1.16) translateY(-6%); } to { transform: scale(1.16) translateY(6%); } }
}
/* Domande: titolo a sinistra, risposte a destra */
.sezione .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 96px); margin: 0; }
.sezione .faq h2 { grid-row: 1 / span 40; align-self: start; margin: 0; font-size: clamp(32px, 1.3rem + 2vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.sezione .faq details { grid-column: 2; }
.sezione .faq .faq__testa { grid-row: 1 / span 40; align-self: start; }
.sezione .faq .faq__testa p { margin: 18px 0 0; color: var(--tenue); font-size: 17px; }
/* Paragrafi a misura di lettura anche nelle fasce a tutta larghezza, tranne le note brevi sotto una fila di schede
   (.tutta-larghezza, larghe come le schede: meno righe e fascia più bassa; 18/10, Mattia) */
.sezione .contenitore.prosa > p:not(.azioni, .tutta-larghezza) { max-width: var(--misura); }
.sezione__testa p, .scheda__estratto, .donazione p { max-width: var(--misura); }
/* La rotta sta su una riga sola, qualunque sia il numero dei passi */
.prosa .rotta { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Rotta verticale: nelle colonne accanto a una foto (sui telefoni lo diventano tutte, vedi sotto) */
.prosa .rotta--verticale { grid-template-columns: 1fr; grid-auto-flow: row; gap: 22px; padding-bottom: 58px; }
.prosa .rotta--verticale li { display: block; min-height: 64px; padding: 18px 0 0 82px; }
.prosa .rotta--verticale li::before { position: absolute; top: 0; left: 0; margin: 0; }
.prosa .rotta--verticale::before { top: 32px; right: auto; bottom: 24px; left: 31px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--link) 45%, transparent); }
.prosa .rotta--verticale::after { top: 14px; left: 15px; transform: rotate(180deg); }
.js.mov-pieno .prosa .rotta--verticale::after { transition: top 2.8s var(--ease-in-out) 0.3s; }
.js .prosa .rotta--verticale.dentro::after { top: calc(100% - 44px); left: 15px; }
/* Titolo di sezione con l'icona sopra */
.sezione__testa[data-icona] { position: relative; }
.sezione__testa[data-icona]::before { content: ""; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 17px; background: linear-gradient(135deg, #1d5fd1 0%, #4f8fff 100%); box-shadow: 0 14px 28px -14px rgba(29, 95, 209, 0.9); }
.sezione__testa[data-icona]::after { content: ""; position: absolute; top: 14px; left: 14px; width: 28px; height: 28px; background: #fff; -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; }
/* Schede una sotto l'altra, con l'icona a sinistra (accanto a un modulo o a una foto) */
.prosa .schede--righe { grid-template-columns: 1fr; }
.prosa .schede--righe li { min-height: 100px; padding: 26px 26px 26px 98px; }
/* Fasce scure: schede di sola frase, etichette, gallerie */
.sezione--scura .prosa .schede li:not(:has(strong, h2, h3)) { color: #e1e8f3; }
@media (hover: hover) { .sezione--scura .prosa .schede li:has(strong a):hover strong { color: #9cc8ff; } }
.sezione--scura .prosa .etichette li { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.sezione--scura .prosa .galleria-link a { background: rgba(255, 255, 255, 0.05); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.sezione--scura .prosa .galleria-link small, .sezione--scura .prosa .galleria-foto figcaption { color: #aab7ca; }
@media (hover: hover) { .sezione--scura .prosa .galleria-link a:hover span { color: #9cc8ff; } }
/* Fasce a foto con un paragrafo: titolo meno grande e velo più scuro a sinistra, per leggere bene */
.sezione--foto .prosa > p:not(.azioni, .nota) { max-width: var(--misura); color: rgba(255, 255, 255, 0.88); }
.sezione--foto .prosa a:not(.btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); }
.sezione--foto:has(.prosa > p:not(.azioni, .nota))::after { background: linear-gradient(90deg, rgba(8, 17, 31, 0.9) 0%, rgba(8, 17, 31, 0.62) 48%, rgba(8, 17, 31, 0.15) 100%), linear-gradient(0deg, rgba(8, 17, 31, 0.8) 0%, rgba(8, 17, 31, 0) 60%); }
.sezione--foto:has(.prosa > p:not(.azioni, .nota)) .sezione__testa h2 { font-size: clamp(34px, 1.5rem + 2.4vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
.sezione--foto:has(.prosa > p:not(.azioni, .nota)) .sezione__testa { margin-bottom: 22px; }
.sezione--foto .prosa > p.nota { margin-top: 14px; color: rgba(255, 255, 255, 0.72); font-size: 16px; }
/* Schede con la foto in alto e l'icona appoggiata sulla foto (Attività) */
.prosa .schede--foto li { padding: 0 0 30px; overflow: hidden; }
.prosa .schede--foto li > img { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 26px; object-fit: cover; border-radius: 0; }
.prosa .schede--foto li > :not(img) { margin-inline: 30px; }
.prosa .schede--foto h2 { font-size: 24px; }
/* Schede con foto cliccabili: il titolo è il link e copre tutta la scheda, i link nel testo restano cliccabili sopra */
.prosa .schede--foto li:has(h2 a) { position: relative; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.prosa .schede--foto h2 a { color: inherit; text-decoration: none; }
.prosa .schede--foto h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.prosa .schede--foto h2:has(a)::after { content: ""; display: inline-block; width: 20px; height: 20px; margin-left: 8px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat; transition: transform 250ms var(--ease); }
.prosa .schede--foto li p a { position: relative; z-index: 2; }
.prosa .schede--foto li > img { transition: transform 600ms var(--ease); }
.prosa .schede--foto li:has(h2 a:focus-visible) { outline: 3px solid #66a9ff; outline-offset: 3px; }
.prosa .schede--foto h2 a:focus-visible { outline: none; }
@media (hover: hover) {
	.prosa .schede--foto li:has(h2 a):hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--linea), 0 36px 70px -36px rgba(11, 25, 48, 0.55); }
	.prosa .schede--foto li:has(h2 a):hover > img { transform: scale(1.04); }
	.prosa .schede--foto li:has(h2 a):hover h2 { color: var(--link); }
	.prosa .schede--foto li:has(h2 a):hover h2::after { transform: translateX(4px); }
}
/* Lo shop in vetrina (pagina /shop/): le foto vere dei prodotti in una cornice arrotondata (19/10, Mattia: "usa le
   immagini che ti ho dato"), accanto nome, descrizione, prezzo finale con la spedizione inclusa e il link */
.prosa .vetrina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.prosa .vetrina li { margin: 0; }
.prosa .vetrina a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.2vw, 30px); height: 100%; padding: clamp(12px, 1.4vw, 18px); border-radius: 28px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -42px rgba(11, 25, 48, 0.5); color: var(--testo); text-decoration: none; transition: box-shadow 300ms var(--ease); }
.vetrina__foto { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px; background: var(--fondo); }
.prosa .vetrina img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; transition: transform 500ms var(--ease); }
.vetrina__testo { display: grid; justify-items: start; gap: 6px; padding-right: clamp(4px, 1vw, 14px); }
.vetrina__testo strong { font: 800 clamp(22px, 1rem + 0.9vw, 30px)/1.1 var(--titoli); letter-spacing: -0.02em; }
.vetrina__testo > span:not(.vetrina__azione, .vetrina__prezzo) { color: var(--tenue); font-size: 16px; line-height: 1.5; }
.vetrina__prezzo { margin-top: 10px; color: var(--testo); font: 800 clamp(24px, 1rem + 0.8vw, 30px)/1.1 var(--titoli); letter-spacing: -0.02em; }
.vetrina__prezzo small { display: block; margin-top: 4px; color: var(--tenue); font: 600 14px/1.3 var(--testi); letter-spacing: 0; }
.vetrina__azione { display: inline-block; margin-top: 10px; color: var(--link); font-weight: 700; }
.vetrina__azione::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat; transition: transform 250ms var(--ease); }
@media (hover: hover) {
	.prosa .vetrina a:hover { box-shadow: inset 0 0 0 1.5px var(--link), 0 40px 70px -40px rgba(29, 95, 209, 0.45); }
	.prosa .vetrina a:hover img { transform: scale(1.04); }
	.prosa .vetrina a:hover .vetrina__azione::after { transform: translateX(4px); }
}
/* Sul telefono la foto sopra e il testo sotto: affiancati, nella colonna stretta il link andava a capo e la freccia
   restava da sola (19/10) */
@media (max-width: 560px) {
	.prosa .vetrina a { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
	.vetrina__foto { aspect-ratio: 1 / 1; }
	.vetrina__testo { padding: 0 6px 8px; }
}
/* Pagina dello shop (page-shop.php, 19/10): niente foto d'apertura, i prodotti subito sotto il titolo */
.negozio > .sezione:first-child { padding-top: clamp(36px, 6vh, 72px); }
.negozio__titolo { color: var(--testo); font: 800 clamp(36px, 1.2rem + 3.2vw, 64px)/1.02 var(--titoli); letter-spacing: -0.035em; }
/* Foto che resta ferma accanto a un testo lungo (la storia in Chi siamo) */
.sezione__divisa:has(.sezione__foto--ferma), .sezione__divisa--alto { align-items: start; }
.sezione__foto--ferma { position: sticky; top: calc(var(--testata) + 40px); }
.sezione .sezione__foto--ferma img { aspect-ratio: 16 / 10; }
/* La storia come linea del tempo: un punto per anno, unito al successivo da un tratteggio */
.sezione .prosa .cronologia { gap: 0; }
.sezione .prosa .cronologia li { position: relative; padding: 0 0 24px 34px; border-bottom: 0; }
.sezione .prosa .cronologia li::before { content: ""; position: absolute; top: 9px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--blu); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blu) 16%, transparent); }
.sezione .prosa .cronologia li::after { content: ""; position: absolute; top: 30px; bottom: 2px; left: 5.5px; border-left: 2px dashed color-mix(in srgb, var(--link) 40%, transparent); }
.sezione .prosa .cronologia li:last-child { padding-bottom: 0; }
.sezione .prosa .cronologia li:last-child::after { display: none; }
/* Traguardi della cronologia (10 e 15 anni): pallino d'oro e bollino con la stella */
.bollo { --stella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E"); display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 4px 0; padding: 3px 11px 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%); color: #3b2300; font: 800 13px/1.35 var(--titoli); letter-spacing: 0.01em; vertical-align: 2px; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(217, 119, 6, 0.9); }
.bollo::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--stella) center / contain no-repeat; mask: var(--stella) center / contain no-repeat; }
.sezione .prosa .cronologia li.traguardo::before { top: 7px; left: -2px; width: 17px; height: 17px; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.22), 0 0 22px 2px rgba(245, 158, 11, 0.45); }
/* Foto che si alternano da sole accanto alla cronologia (senza JavaScript resta la prima) */
.sezione__foto--giro { display: grid; }
.sezione__foto--giro > figure { grid-area: 1 / 1; position: relative; margin: 0; }
/* Restano nascoste del tutto (e non si scaricano) finché non tocca a loro: si prepara solo la prossima */
.sezione__foto--giro > figure:not(:first-child) { display: none; }
.sezione__foto--giro.giro-attivo > figure { display: none; opacity: 0; transition: opacity 1.2s ease; }
.sezione__foto--giro.giro-attivo > figure.prossima { display: block; visibility: hidden; }
.sezione__foto--giro.giro-attivo > figure.attiva { display: block; z-index: 2; opacity: 1; }
.sezione__foto--giro.giro-attivo > figure.uscente { display: block; z-index: 1; opacity: 1; transition: none; }
.js .sezione__foto.sezione__foto--giro.giro-attivo[data-giro] > figure.uscente .gettone { opacity: 0; transition: opacity 300ms ease; }
.giro__pausa { position: absolute; z-index: 3; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 25, 48, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; opacity: 0.75; transition: opacity 250ms ease, background-color 250ms ease; }
.giro__pausa svg { width: 16px; height: 16px; fill: currentColor; }
.giro__pausa:hover, .giro__pausa:focus-visible { opacity: 1; background: rgba(11, 25, 48, 0.75); }
.giro__pausa:focus-visible { outline: 3px solid #66a9ff; outline-offset: 2px; }
/* Tutti gli incontri dal vivo, in ordine di data; l'ultima riga resta centrata */
.sezione .prosa .incontri { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 20px; margin: 2.2em 0 0; padding: 0; list-style: none; }
.sezione .prosa .incontri li { display: flex; flex: 0 0 calc((100% - 60px) / 4); flex-direction: column; margin: 0; }
.prosa .incontri img { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 14px; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 50px -36px rgba(11, 25, 48, 0.55); }
.incontri__data { color: var(--ambra-testo); font: 700 13px/1.3 var(--titoli); letter-spacing: 0.06em; text-transform: uppercase; }
.prosa .incontri strong { margin-top: 4px; color: var(--testo); font: 700 18px/1.3 var(--titoli); }
.prosa .incontri li > span:last-child { color: var(--tenue); font-size: 15px; line-height: 1.45; }
.sezione .prosa .incontri li { position: relative; }
.prosa .incontri .bollo { position: absolute; z-index: 1; top: 12px; left: 12px; margin: 0; }
/* Sostieni il gruppo: i due modi di donare, affiancati */
.prosa .donazioni { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; margin: 0; }
.donazione { display: flex; flex-direction: column; gap: 8px; padding: clamp(26px, 3vw, 42px); border-radius: 28px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -40px rgba(11, 25, 48, 0.45); }
.prosa .donazione p { margin: 0; }
.donazione--mese { background: linear-gradient(160deg, #123566 0%, #0b1930 100%); color: #c9d5e6; box-shadow: 0 40px 80px -40px rgba(11, 25, 48, 0.85); }
.donazione--mese strong { color: #fff; }
.donazione__tipo { color: var(--ambra-testo); font: 700 13px/1.3 var(--titoli); letter-spacing: 0.08em; text-transform: uppercase; }
.donazione--mese .donazione__tipo { color: #fbbf24; }
.prosa .donazione .donazione__cifra { margin: 2px 0 8px; color: var(--tenue); font: 600 18px/1.2 var(--titoli); }
.donazione__cifra strong { margin-right: 6px; color: var(--testo); font: 800 clamp(44px, 3.4vw, 60px)/1 var(--titoli); letter-spacing: -0.03em; }
.prosa .donazione--mese .donazione__cifra { color: #c9d5e6; }
.donazione--mese .donazione__cifra strong { color: #fff; }
.donazione__nota { color: var(--tenue); font-size: 16px; }
.donazione--mese .donazione__nota { color: #9fb0c8; }
.prosa .donazione .azioni { margin-top: auto; padding-top: 18px; }
/* Loghi dei partner: riempiono la riga e si sollevano al passaggio */
.sezione .prosa .loghi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin: 0; }
.sezione .prosa .loghi a { height: 150px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--linea), 0 24px 48px -34px rgba(11, 25, 48, 0.5); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.sezione .prosa .loghi img { max-height: 84px; }
@media (hover: hover) { .sezione .prosa .loghi a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--link), 0 30px 56px -30px rgba(29, 95, 209, 0.55); } }
/* Sei lezioni: due righe da tre */
@media (min-width: 901px) { .sezione .prosa .catalogo:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Foto dei prodotti dello shop: quadrate, per vederli interi */
.prosa .galleria-link--prodotti img { aspect-ratio: 1 / 1; }
/* Riquadro bianco per i moduli (Contatti, Callsign IVV) */
.riquadro-modulo { padding: clamp(26px, 3.4vw, 44px); border-radius: 28px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -36px rgba(11, 25, 48, 0.45); }
.riquadro-modulo > h2:first-child { margin-top: 0; }
.sezione .contenitore.prosa > .riquadro-modulo { max-width: 52rem; margin-inline: auto; } /* centrato (18/10 sera, Mattia, Callsign IVV) */
:root {
	--freccia-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m6 13 6 6 6-6'/%3E%3C/svg%3E");
	--freccia-fuori: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
	--scarica: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
	--cuore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z'/%3E%3C/svg%3E");
	--discord: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
	--freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--icona-aereo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c.9 0 1.6.8 1.6 1.8v5.2l7.4 4.4v2l-7.4-2.3v4.9l2.3 1.7v1.7L12 20.6l-3.9 1.2v-1.7l2.3-1.7v-4.9L3 15.8v-2l7.4-4.4V4c0-1 .7-1.8 1.6-1.8z' fill='black'/%3E%3C/svg%3E");
	--spunta-bianca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Icone delle schede (tratto 2, come le altre icone del tema) */
:root {
	--icona-spunta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
[data-icona="avvio"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5v7l5.5-3.5z'/%3E%3C/svg%3E"); }
[data-icona="registra"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 5 12 2.5-6h4'/%3E%3C/svg%3E"); }
[data-icona="rapporto"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
[data-icona="radar"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 12l6-6'/%3E%3C/svg%3E"); }
[data-icona="aereo"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3.5 13.5 12 9l8.5 4.5'/%3E%3Cpath d='M8.5 20.5 12 18.5l3.5 2'/%3E%3C/svg%3E"); }
[data-icona="calendario"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
[data-icona="chat"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 21l1.4-4.6A8.5 8.5 0 1 1 20.5 12z'/%3E%3C/svg%3E"); }
[data-icona="cuffie"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3' y='14' width='4.5' height='7' rx='1.5'/%3E%3Crect x='16.5' y='14' width='4.5' height='7' rx='1.5'/%3E%3C/svg%3E"); }
[data-icona="libro"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h6a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H3z'/%3E%3Cpath d='M21 5h-6a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h7z'/%3E%3C/svg%3E"); }
[data-icona="video"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='m16 10 5-3v10l-5-3'/%3E%3C/svg%3E"); }
[data-icona="globo"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
[data-icona="antenna"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M5 5a10 10 0 0 0 0 14M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); }
[data-icona="download"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
[data-icona="pennello"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4l5 5-10 10H5v-5z'/%3E%3Cpath d='M13 6l5 5'/%3E%3C/svg%3E"); }
[data-icona="montagna"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19l6-9 4 6 3-4 5 7z'/%3E%3Ccircle cx='17' cy='6' r='1.5'/%3E%3C/svg%3E"); }
[data-icona="telefono"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
/* Marchi per la pagina dei link (18/10): stesse forme delle icone del piede (inc/icone.php) */
[data-icona="discord"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E"); }
[data-icona="youtube"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E"); }
[data-icona="facebook"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
[data-icona="instagram"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); }
[data-icona="medaglia"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13.5 7.5 21l4.5-2.5 4.5 2.5L15 13.5'/%3E%3C/svg%3E"); }
[data-icona="passaporto"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E"); }
[data-icona="bandiera"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
[data-icona="bersaglio"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
[data-icona="no"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
[data-icona="cuore"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.3A4.2 4.2 0 0 1 12 7.2a4.2 4.2 0 0 1 7.5 2.5C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E"); }
[data-icona="aiuto"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m5.6 5.6 3.6 3.6M14.8 14.8l3.6 3.6M18.4 5.6l-3.6 3.6M9.2 14.8l-3.6 3.6'/%3E%3C/svg%3E"); }
[data-icona="accendi"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.3 7.5a8 8 0 1 0 11.4 0'/%3E%3C/svg%3E"); }
[data-icona="mail"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
[data-icona="gruppo"] { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14.2c2.8.4 5 2.8 5 5.8'/%3E%3C/svg%3E"); }

/* Entrate dei blocchi: le voci arrivano una dopo l'altra (solo dissolvenza nella versione morbida) */
.js .prosa ul[data-entra], .js .prosa ol[data-entra] { opacity: 1; transform: none; }
.js.mov-pieno .prosa ul[data-entra] > li, .js.mov-pieno .prosa ol[data-entra] > li { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
.js.mov-dolce .prosa ul[data-entra] > li, .js.mov-dolce .prosa ol[data-entra] > li { opacity: 0; transition: opacity 700ms var(--ease); }
.js .prosa ul[data-entra].dentro > li, .js .prosa ol[data-entra].dentro > li { opacity: 1; transform: none; }
.js .prosa [data-entra].dentro > li:nth-child(2) { transition-delay: 70ms; }
.js .prosa [data-entra].dentro > li:nth-child(3) { transition-delay: 140ms; }
.js .prosa [data-entra].dentro > li:nth-child(4) { transition-delay: 210ms; }
.js .prosa [data-entra].dentro > li:nth-child(5) { transition-delay: 280ms; }
.js .prosa [data-entra].dentro > li:nth-child(6) { transition-delay: 350ms; }

/* Invito a fine articolo e correlati */
.correlati { padding: clamp(80px, 12vh, 140px) 0 0; }
.invito { display: grid; gap: 22px; margin-top: clamp(80px, 12vh, 140px); padding: clamp(56px, 8vh, 96px) var(--margine); border-radius: var(--piede-raggio) var(--piede-raggio) 0 0; background: radial-gradient(120% 140% at 90% 0%, #1b3b73 0%, #0b1930 60%); color: #dbe7fb; }
.invito__titolo { max-width: 18ch; color: #fff; font-size: clamp(32px, 1.4rem + 2vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
.invito p { max-width: 36rem; font-size: 18px; }
.invito__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.invito .presenza { color: #aab7ca; }
.invito .presenza b { color: #fff; }

/* Impaginazione e ricerca */
.impaginazione { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 56px; }
.impaginazione .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding-inline: 14px; border-radius: 12px; color: var(--testo); font-weight: 600; text-decoration: none; transition: background-color 200ms var(--ease); }
.impaginazione a.page-numbers:hover { background: var(--tenue-blu); }
.impaginazione .current { background: var(--blu); color: #fff; }
.ricerca { display: flex; gap: 10px; min-width: 0; max-width: 34rem; }
.ricerca input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 18px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--carta); color: var(--testo); font: 400 16px var(--testi); }
.ricerca input:focus-visible { border-color: var(--blu); outline: none; box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.25); }
.ricerca button { border: 0; }
/* La lente dentro il campo */
.ricerca__campo { position: relative; display: flex; flex: 1; min-width: 0; }
.ricerca__campo .ico { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; color: var(--tenue); transform: translateY(-50%); pointer-events: none; }
.ricerca .ricerca__campo input { width: 100%; padding-left: 46px; }
.ricerca { width: 100%; } /* si adatta allo spazio: il campo non impone una larghezza minima (404 sul telefono sbordava) */
/* Versione grande, di vetro, sulle aperture scure (prima pagina del blog) */
.ricerca--grande { width: 100%; max-width: 40rem; margin-top: 6px; }
.ricerca--grande input { min-height: 60px; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 17px; }
.ricerca--grande input::placeholder { color: rgba(255, 255, 255, 0.75); }
.ricerca--grande .ricerca__campo .ico { color: rgba(255, 255, 255, 0.85); }
.ricerca--grande input:focus-visible { border-color: #fff; box-shadow: 0 0 0 3px rgba(102, 169, 255, 0.5); }
.ricerca--grande button { min-height: 60px; padding-inline: 28px; background: #fff; color: var(--navy); }
.ricerca--grande button:hover { background: #e8f1ff; }
/* Argomenti più cercati, sotto la ricerca del blog */
.temi { display: grid; gap: 10px; }
.temi__titolo { color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.temi ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.temi a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.temi a:hover { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.temi a:focus-visible { outline: 3px solid #66a9ff; outline-offset: 2px; }
.apertura-blog .apertura-pagina__testo { max-width: 50rem; }
.vuoto { max-width: 38rem; color: var(--tenue); font-size: 19px; }
.fuori-rotta { display: grid; justify-items: start; gap: 22px; min-height: 64svh; align-content: center; padding-bottom: 96px; }

/* ---------- Piede con il nome gigante ---------- */
.piede { position: relative; overflow: hidden; margin-top: 0; padding: 80px 0 0; background: var(--navy); color: #aab7ca; font-size: 15px; }
.piede__griglia { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
.piede__titoletto { margin: 0 0 12px; color: #fff; font: 700 15px var(--titoli); }
.piede ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.piede a { color: #aab7ca; text-decoration: none; }
.piede a:hover { color: #fff; }
.piede__motto { max-width: 24ch; margin-top: 14px; color: #fff; font: 700 18px/1.35 var(--titoli); }
.piede .piede__social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.piede__newsletter { max-width: 22rem; margin-top: 28px; }
.piede__newsletter .frm_forms { margin: 0; }
.piede__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: #fff; }
.piede__social a:hover { background: rgba(255, 255, 255, 0.14); }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding: 22px 0; border-top: 1px solid #22324d; font-size: 14px; }
/* Privacy e cookie: ben visibili, separati da un punto */
.piede__legale { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.piede .piede__legale a { color: #dbe7fb; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(219, 231, 251, 0.35); text-underline-offset: 0.25em; }
.piede .piede__legale a:hover { color: #fff; text-decoration-color: #fff; }
.piede__nome { margin: 0; padding: 0 var(--margine) clamp(14px, 1.6vw, 30px); pointer-events: none; color: #fff; font: 800 clamp(48px, 13.4vw, 220px)/0.82 var(--titoli); letter-spacing: -0.055em; white-space: nowrap; text-align: center; }
.piede--attaccato { padding-top: 40px; }

/* ---------- Comparse leggere (tutte le pagine) ---------- */
.js.mov-pieno [data-entra] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.js.mov-dolce [data-entra] { opacity: 0; transition: opacity 700ms var(--ease); }
.js [data-entra].dentro { opacity: 1; transform: none; }

/* ---------- Movimento ridotto: versione morbida, non spenta ---------- */
.mov-dolce .punto, .mov-dolce .presenza__punto { animation: none; }
.mov-dolce .scorri svg.ico { animation: pulsa-piano 2.4s ease-in-out infinite; }
.mov-dolce .schermo { transform: none; }
.mov-dolce .binario { overflow-x: auto; width: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--margine), (100% - var(--larghezza)) / 2); scrollbar-width: none; }
.mov-dolce .binario::-webkit-scrollbar { display: none; }
/* Frecce della galleria "La vita del gruppo": solo dove la galleria si scorre a mano (versione morbida e telefono) */
.binario__frecce { display: none; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.js.mov-dolce .binario__frecce { display: flex; }
.binario__freccia { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--carta); color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--linea), 0 12px 28px -18px rgba(11, 25, 48, 0.6); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease), opacity 200ms var(--ease); }
.binario__freccia svg.ico { width: 22px; height: 22px; }
.binario__freccia--indietro svg.ico { transform: scaleX(-1); }
@media (hover: hover) { .binario__freccia:not(:disabled):hover { background: var(--blu); color: #fff; box-shadow: none; } }
.binario__freccia:focus-visible { outline: 3px solid #66a9ff; outline-offset: 3px; }
.binario__freccia:disabled { opacity: 0.35; cursor: default; }
/* Trascinamento con il mouse: mano aperta, mano chiusa mentre si trascina (main.js) */
.binario--trascinabile { cursor: grab; }
.binario.binario--presa { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.binario--presa a, .binario--presa img { pointer-events: none; }
.binario img { -webkit-user-drag: none; }
.mov-dolce .quadro { scroll-snap-align: start; }
/* L'ultima scheda ("La nostra storia") si aggancia sul bordo destro: allineata a sinistra non ci arriva mai, e restava tagliata */
.binario > .quadro:last-child { scroll-snap-align: end; }

/* ---------- Menu a tendina (18/10): sotto i 1260 px le voci andavano a capo su due righe ---------- */
@media (max-width: 1259px) {
	.menu { display: none; }
	.tasto-menu { display: grid; }
	.attrezzi { margin-left: auto; }
	.menu.aperto { position: absolute; top: var(--testata); left: 0; right: 0; display: flex; flex-direction: column; padding: 10px var(--margine) 20px; background: var(--carta); color: var(--testo); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15); }
	.menu.aperto a { padding: 14px 10px; font-size: 18px; text-align: right; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
	.scena__locandina { width: min(46%, 420px); }
	.fascia-va .contenitore, .storia, .domande .contenitore, .chiusura .contenitore, .vita__testa, .in-evidenza { grid-template-columns: 1fr; }
	.storia__testa { position: static; }
	.percorsi { grid-template-columns: 1fr 1fr; }
	.percorso--nuovo { grid-column: 1 / -1; }
	.griglia-articoli { grid-template-columns: 1fr 1fr; }
	.piede__griglia { grid-template-columns: 1fr 1fr; }
	.articolo__corpo, .pagina__corpo { grid-template-columns: minmax(0, 1fr); }
	.indice { position: static; max-height: none; }
	.indice details summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 12px 18px; border-radius: 14px; background: var(--carta); box-shadow: inset 0 0 0 1px var(--linea); font-weight: 600; cursor: pointer; list-style: none; }
	.indice details summary::-webkit-details-marker { display: none; }
	.indice details[open] summary { margin-bottom: 12px; }
	.indice__titolo { display: none; }
}
/* ---------- Sezioni delle pagine su schermi stretti ---------- */
@media (max-width: 900px) {
	.prosa .vetrina { grid-template-columns: 1fr; }
	.prosa .donazioni { grid-template-columns: 1fr; }
	.sezione .prosa .incontri { gap: 24px 14px; }
	.sezione .prosa .incontri li { flex-basis: calc((100% - 14px) / 2); }
	.prosa .incontri strong { font-size: 16px; }
	.prosa .incontri li > span:last-child { font-size: 14px; }
	.sezione__divisa { grid-template-columns: 1fr; }
	.sezione__divisa--inversa > :first-child { order: 0; }
	.gettone { bottom: 16px; left: 16px; }
	.sezione .faq { grid-template-columns: 1fr; }
	.sezione .faq h2 { grid-row: auto; margin-bottom: 18px; }
	.sezione .faq details { grid-column: 1; }
	.sezione .faq .faq__testa { grid-row: auto; margin-bottom: 18px; }
	.sezione__foto--ferma { position: static; }
	/* La rotta diventa verticale: la linea scende e l'aereo la percorre dall'alto in basso, fino a sotto l'ultimo passo. */
	.prosa .rotta { grid-template-columns: 1fr; grid-auto-flow: row; gap: 22px; padding-bottom: 58px; }
	.prosa .rotta li { display: block; min-height: 64px; padding: 18px 0 0 82px; }
	.prosa .rotta li::before { position: absolute; top: 0; left: 0; margin: 0; }
	.prosa .rotta::before { top: 32px; right: auto; bottom: 24px; left: 31px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--link) 45%, transparent); }
	.prosa .rotta::after { top: 14px; left: 15px; transform: rotate(180deg); }
	.js.mov-pieno .prosa .rotta::after { transition: top 2.8s var(--ease-in-out) 0.3s; }
	.js .prosa .rotta.dentro::after { top: calc(100% - 44px); left: 15px; }
}
/* ---------- Telefono ---------- */
@media (max-width: 720px) {
	.ricerca--grande input { font-size: 16px; }
	.ricerca--grande button { padding-inline: 18px; }
	.attrezzi .btn-va { display: none; }
	.menu.aperto .menu__solo-telefono { display: block; }
	.attrezzi .btn { padding: 0 14px; }
	.apertura__video { object-position: 70% 50%; }
	.apertura__velo { background: linear-gradient(0deg, rgba(8, 17, 31, 0.88) 0%, rgba(8, 17, 31, 0.55) 45%, rgba(8, 17, 31, 0.15) 100%); }
	.apertura .azioni .btn { flex: 1 1 100%; }
	/* Sotto "Entra in Discord", gli altri due pulsanti affiancati; sui telefoni stretti uno sotto l'altro, più bassi */
	.apertura .azioni .btn:not(:first-child) { flex: 1 1 calc(50% - 6px); padding-inline: 12px; white-space: nowrap; }
	.pausa { top: calc(var(--testata) + 16px); bottom: auto; width: 44px; height: 44px; }
	.scorri { display: none; }
	/* Sul telefono il testo segue il flusso: se non sta in uno schermo basso l'apertura si allunga, invece di finire sotto la testata */
	.apertura { display: flex; flex-direction: column; justify-content: flex-end; height: auto; min-height: max(100svh, 560px); }
	.apertura__testo { position: relative; bottom: auto; padding: calc(var(--testata) + 76px) 0 clamp(40px, 8vh, 96px); }
	.apertura__testo .contenitore > .azioni { max-width: none; }
	.manifesto .sotto { grid-template-columns: 1fr; }
	.attivita__testa { flex-direction: column; align-items: start; }
	.mazzo { gap: 14px; }
	.scena { min-height: min(88svh, 700px); border-radius: 22px; }
	.scena__velo { background: linear-gradient(0deg, rgba(8, 17, 31, 0.92) 0%, rgba(8, 17, 31, 0.6) 42%, rgba(8, 17, 31, 0) 72%); }
	.scena--blu .scena__velo { background: linear-gradient(0deg, rgba(19, 58, 138, 0.95) 0%, rgba(29, 79, 174, 0.62) 45%, rgba(29, 79, 174, 0) 76%); }
	.scena__testo { gap: 14px; padding: 26px 22px 30px; }
	.scena__locandina { top: 22px; right: auto; left: 22px; width: min(78%, 360px); transform: rotate(-2deg); }
	.apertura-pagina { min-height: min(78svh, 660px); }
	.apertura-pagina__dentro { grid-template-columns: 1fr; }
	.apertura-pagina__visuale { display: none; }
	.prosa .galleria-foto.largo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.apertura-pagina__velo { background: linear-gradient(0deg, rgba(8, 17, 31, 0.94) 0%, rgba(8, 17, 31, 0.62) 50%, rgba(8, 17, 31, 0.3) 100%); }
	.percorsi, .griglia-articoli { grid-template-columns: 1fr; }
	.binario { overflow-x: auto; width: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); scrollbar-width: none; }
	.binario::-webkit-scrollbar { display: none; }
	.js .binario__frecce { display: flex; }
	.quadro, .quadro--testo { width: 82vw; scroll-snap-align: start; }
	.prosa .cronologia li { grid-template-columns: 60px 1fr; }
}
/* Telefoni stretti: pulsanti della testata un poco più stretti (dal 19/10 il pulsante dice solo "Discord" ovunque) */
@media (max-width: 400px) {
	.attrezzi .btn { gap: 8px; padding: 0 14px; }
}
@media (max-width: 520px) { .marchio span { display: none; } } /* il nome accanto al logo andava su due righe */
@media (max-width: 420px) { .apertura .azioni .btn:not(:first-child) { flex-basis: 100%; min-height: 46px; } }
@media (max-width: 720px) { .marchio img { height: 46px; } }

/* ---------- Stacchi tra le fasce (17-18/10/2026) ----------
   Niente bordi netti: tre modi di passare da una fascia all'altra, alternati tra le pagine (functions.php,
   iv_stacco_pagina), e un trattamento per ogni tipo di confine (18/10, dopo il controllo di Mattia):
   - da chiaro a scuro: la curva della Terra (orizzonte), la tratta (rotta) o il finestrino (oblò);
   - da scuro a chiaro: un cielo che schiarisce, blu notte, blu, azzurro (mai una sfumatura grigia);
   - tra due fasce scure: la foto emerge dal blu notte.
   Nessuno copre il testo: sopra ogni passaggio c'è lo spazio in più che serve. */
:root { --cielo-medio: #405f92; --cielo-chiaro: #b9cce8; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { --cielo-medio: #12284f; --cielo-chiaro: #101c34; } }
:root[data-tema="scuro"] { --cielo-medio: #12284f; --cielo-chiaro: #101c34; }

/* Sotto la foto d'apertura la stessa sfumatura in tutte le pagine (18/10, Mattia: "gli stacchi delle immagini sopra
   tutti uguali"): la foto si scioglie in un cielo che schiarisce, blu e azzurro, fino al fondo di quello che segue;
   se sotto c'è una fascia scura o con foto scende nel blu notte, senza riga. Sopra la sfumatura c'è lo spazio in più
   perché non copra il testo. In home il video scurisce in fondo fino al blu notte e il cielo schiarisce in cima al
   manifesto. */
.apertura-pagina { --dopo-apertura: var(--fondo); padding-bottom: calc(clamp(52px, 9vh, 96px) + 120px); }
.apertura-pagina::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: 150px; background: linear-gradient(rgba(11, 25, 48, 0), var(--cielo-medio) 46%, var(--cielo-chiaro) 76%, var(--dopo-apertura)); pointer-events: none; }
.stacco-orizzonte main:has(> .pagina-sezioni > .sezione--bianca:first-child) .apertura-pagina { --dopo-apertura: var(--carta); }
main:has(> .pagina-sezioni > .sezione:first-child:is(.sezione--scura, .sezione--foto)) .apertura-pagina { padding-bottom: clamp(52px, 9vh, 96px); }
main:has(> .pagina-sezioni > .sezione:first-child:is(.sezione--scura, .sezione--foto)) .apertura-pagina::after { height: 140px; background: linear-gradient(rgba(11, 25, 48, 0), #0b1930); }
/* Pagine fatte solo dell'apertura (conferme dei moduli, 404; 18/10): sotto c'è subito il piede scuro, stessa sfumatura */
main:has(> .apertura-pagina:only-child) .apertura-pagina::after { height: 140px; background: linear-gradient(rgba(11, 25, 48, 0), #0b1930); }
.pagina-sezioni > .sezione--scura:first-child { background: linear-gradient(#0b1930, rgba(11, 25, 48, 0)) top / 100% 220px no-repeat, radial-gradient(120% 110% at 85% 55%, #1a3a70 0%, #0b1930 62%); }
.pagina-sezioni > .sezione--foto:first-child > picture { -webkit-mask: linear-gradient(transparent, #000 170px); mask: linear-gradient(transparent, #000 170px); }
.apertura__cornice::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: clamp(140px, 24%, 240px); background: linear-gradient(rgba(11, 25, 48, 0), #0b1930); pointer-events: none; }
.manifesto { padding-top: calc(clamp(110px, 16vh, 200px) + 80px); background: linear-gradient(#0b1930, var(--cielo-medio) 36%, var(--cielo-chiaro) 72%, var(--fondo)) top / 100% 150px no-repeat; }

/* 1. Orizzonte: ogni fascia sale sulla precedente con la curvatura della Terra vista dall'alto, che scorrendo si
   appiattisce come in discesa; le fasce scure portano un filo d'atmosfera azzurro e oro. */
.stacco-orizzonte { --curva: clamp(40px, 7vw, 120px); }
.stacco-orizzonte .pagina-sezioni { overflow: clip visible; }
.stacco-orizzonte .pagina-sezioni > .sezione { margin-top: calc(-1 * var(--curva)); padding-top: calc(clamp(84px, 12vh, 144px) + var(--curva) * 0.5); padding-bottom: calc(clamp(84px, 12vh, 144px) + var(--curva)); border-radius: 50% 50% 0 0 / var(--curva) var(--curva) 0 0; overflow: clip; }
.stacco-orizzonte .sezione--chiara, .stacco-orizzonte .sezione--bianca { box-shadow: 0 -22px 50px -36px rgba(11, 25, 48, 0.24); }
.stacco-orizzonte .pagina-sezioni > .sezione:first-child { margin-top: 0; padding-top: clamp(84px, 12vh, 144px); border-radius: 0; box-shadow: none; } /* sotto l'apertura la sfumatura comune */
.stacco-orizzonte .sezione--scura { box-shadow: 0 -1px 0 rgba(150, 196, 255, 0.75), 0 -10px 36px -6px rgba(102, 169, 255, 0.5), 0 -46px 90px -36px rgba(245, 158, 11, 0.35); }
.stacco-orizzonte .sezione--foto { box-shadow: 0 -1px 0 rgba(255, 214, 150, 0.8), 0 -14px 46px -10px rgba(251, 191, 36, 0.45); }
@keyframes iv-orizzonte {
	from { border-top-left-radius: 50% var(--curva); border-top-right-radius: 50% var(--curva); }
	to { border-top-left-radius: 50% calc(var(--curva) * 0.15); border-top-right-radius: 50% calc(var(--curva) * 0.15); }
}
@supports (animation-timeline: view()) {
	.mov-pieno .stacco-orizzonte .pagina-sezioni > .sezione:not(:first-child) { animation: iv-orizzonte linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
}

/* Comuni a rotta e oblò: le fasce chiare hanno tutte lo stesso fondo (da chiaro a chiaro non si vede il confine) */
:is(.stacco-rotta, .stacco-oblo) .pagina-sezioni { background: var(--fondo); }
:is(.stacco-rotta, .stacco-oblo) :is(.sezione--chiara, .sezione--bianca) { background: var(--fondo); }
/* Da una fascia scura (o con foto) a una chiara: il cielo schiarisce in cima alla fascia chiara. Il chiaro è uno strato
   che parte sotto il cielo, non il colore di fondo: sul bordo in alto, a mezzo pixel con lo zoom al 125-150%, il colore
   chiaro e il cielo sfumavano insieme e facevano una riga chiara (18/10, Mattia). Sotto c'è comunque il fondo della pagina. */
:is(.stacco-rotta, .stacco-oblo) :is(.sezione--scura, .sezione--foto) + :is(.sezione--chiara, .sezione--bianca) { padding-top: calc(clamp(84px, 12vh, 144px) + 110px); background: linear-gradient(#0b1930, var(--cielo-medio) 36%, var(--cielo-chiaro) 72%, var(--fondo)) top / 100% 150px no-repeat, linear-gradient(var(--fondo), var(--fondo)) 0 100px / 100% calc(100% - 100px) no-repeat; }
/* Tra due fasce scure: la foto emerge dal blu notte */
:is(.stacco-rotta, .stacco-oblo) :is(.sezione--scura, .sezione--foto) + .sezione--foto > picture { -webkit-mask: linear-gradient(transparent, #000 170px); mask: linear-gradient(transparent, #000 170px); }

/* 2. Rotta: le fasce sfumano una nell'altra e in ogni passaggio una tratta tratteggiata attraversa la pagina,
   con un aereo che la percorre mentre si scorre (main.js). */
.stacco-rotta .pagina-sezioni > .sezione { padding-block: clamp(150px, 20vh, 220px); }
/* Prima della prima fascia non c'è una tratta: margine normale (sotto l'ultima ci pensa il piede, in fondo) */
.stacco-rotta .pagina-sezioni > .sezione:first-child { padding-top: clamp(84px, 12vh, 144px); }
/* Da chiaro a scuro: il cielo si scurisce in cima alla fascia scura (il disegno delle rotte parte sotto) */
.stacco-rotta :is(.sezione--chiara, .sezione--bianca) + .sezione--scura { padding-top: calc(clamp(150px, 20vh, 220px) + 40px); background: linear-gradient(var(--fondo), var(--cielo-chiaro) 26%, var(--cielo-medio) 62%, #0b1930) top / 100% 150px no-repeat, radial-gradient(120% 110% at 85% 45%, #1a3a70 0%, #0b1930 62%) bottom / 100% calc(100% - 150px) no-repeat; }
.stacco-rotta :is(.sezione--chiara, .sezione--bianca) + .sezione--scura::before { top: 150px; }
/* Da chiaro a una foto: la foto parte dal cielo chiaro */
.stacco-rotta .pagina-sezioni > .sezione--foto { padding-top: 280px; }
.stacco-rotta :is(.sezione--chiara, .sezione--bianca) + .sezione--foto::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 180px; background: linear-gradient(var(--fondo), var(--cielo-chiaro) 26%, rgba(64, 95, 146, 0.5) 60%, rgba(8, 17, 31, 0)); pointer-events: none; } /* sopra il velo, sotto il testo (che parte a 280 px) */
/* In cima a questa fascia c'è solo il cielo chiaro: blu di fondo, foto e velo partono 40 px sotto, dove il cielo è ancora
   pieno. Sul bordo, a mezzo pixel con lo zoom al 125-150%, sfumavano insieme al chiaro e facevano una riga scura (18/10). */
.stacco-rotta :is(.sezione--chiara, .sezione--bianca) + .sezione--foto { background: linear-gradient(var(--navy), var(--navy)) 0 40px / 100% calc(100% - 40px) no-repeat; }
.stacco-rotta :is(.sezione--chiara, .sezione--bianca) + .sezione--foto > picture { -webkit-mask: linear-gradient(transparent, #000 40px); mask: linear-gradient(transparent, #000 40px); }
.stacco-rotta :is(.sezione--chiara, .sezione--bianca) + .sezione--foto::after { top: 40px; }
.tratta { position: absolute; top: -110px; right: 0; left: 0; z-index: 2; height: 220px; pointer-events: none; }
/* Nelle fasce con la foto la tratta sta tutta dentro, in cima, sopra la sfumatura del cielo: la fascia taglia quello che
   sporge (overflow: hidden) e la linea sembrava partire dal nulla a metà pagina; la fascia prima ha meno spazio sotto
   (18/10, Mattia su Inizia da qui). */
.stacco-rotta .sezione--foto > .tratta { top: 24px; }
.stacco-rotta .pagina-sezioni > .sezione:has(+ .sezione--foto) { padding-bottom: clamp(84px, 12vh, 144px); }
.tratta svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tratta__linea { fill: none; stroke: #5b97ff; stroke-width: 2; stroke-dasharray: 1 10; stroke-linecap: round; opacity: 0.75; }
.tratta__fatta { fill: none; stroke: #f59e0b; stroke-width: 2.5; stroke-linecap: round; }
.tratta__punto { fill: var(--fondo); stroke: #5b97ff; stroke-width: 2; }
.tratta__aereo { position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: #f59e0b; -webkit-mask: var(--icona-aereo) center / contain no-repeat; mask: var(--icona-aereo) center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.5)); will-change: transform; }

/* 3. Oblò: una fascia scura (o con foto) che segue una chiara entra da un finestrino d'aereo che si allarga fino a
   tutto schermo; è già aperto quando il titolo arriva a metà schermo.
   Fermo (animazioni ridotte, o browser che non anima allo scorrimento) resta la cima arrotondata di un oblò.
   Il taglio scende 2 px sotto la fascia: con lo zoom dello schermo al 125-150% il bordo di sotto cadeva a mezzo pixel,
   sfumava e lasciava una riga chiara tra la fascia scura e la successiva (18/10, segnalata da Mattia). */
.stacco-oblo { --oblo: 27%; --oblo-raggio: clamp(28px, 4.5vw, 72px); }
@media (max-width: 720px) { .stacco-oblo { --oblo: 10%; } }
.stacco-oblo :is(.sezione--chiara, .sezione--bianca) + :is(.sezione--scura, .sezione--foto) { clip-path: inset(0 0 -2px 0 round var(--oblo-raggio) var(--oblo-raggio) 0 0); }
@keyframes iv-oblo {
	from { clip-path: inset(0 var(--oblo) -2px var(--oblo) round 48vw 48vw 0 0 / 30vw 30vw 0 0); }
	70% { clip-path: inset(0 calc(var(--oblo) * 0.2) -2px calc(var(--oblo) * 0.2) round 30vw 30vw 0 0 / 10vw 10vw 0 0); }
	to { clip-path: inset(0 0 -2px 0 round var(--oblo-raggio) var(--oblo-raggio) 0 0); }
}
@supports (animation-timeline: view()) {
	.mov-pieno .stacco-oblo :is(.sezione--chiara, .sezione--bianca) + :is(.sezione--scura, .sezione--foto) { animation: iv-oblo linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
	.mov-pieno .stacco-oblo .pagina-sezioni > .sezione--foto img { animation: none; transform: scale(1.06); }
}

/* 4. Piede: uguale in tutte le pagine (18/10, richiesta di Mattia: gli angoli arrotondati di Risorse, un po' meno tondi).
   Sale di poco sull'ultima fascia, così negli angoli si vede il colore che c'è sopra (anche una fascia scura o una
   foto, mai una tacca chiara); il filo azzurro disegna la curva quando sopra è scuro. Sopra resta lo stesso spazio:
   all'ultima fascia, o in fondo alle pagine senza fasce, si aggiunge l'altezza dell'angolo.
   Negli articoli il piede continua l'invito a Discord: gli angoli, uguali, li ha l'invito. */
:root { --piede-raggio: clamp(22px, 3.4vw, 56px); }
.piede:not(.piede--attaccato) { z-index: 1; margin-top: calc(-1 * var(--piede-raggio)); border-radius: var(--piede-raggio) var(--piede-raggio) 0 0; box-shadow: 0 -1px 0 rgba(150, 196, 255, 0.45); }
.pagina-sezioni > .sezione:last-child { padding-bottom: calc(clamp(84px, 12vh, 144px) + var(--piede-raggio)); }
main:not(:has(> .pagina-sezioni, > .invito, > .apertura-pagina:only-child))::after { content: ""; display: block; height: var(--piede-raggio); } /* nelle pagine fatte solo dell'apertura il piede sale sulla foto: negli angoli il blu, non il fondo chiaro (18/10) */

/* Bersagli tattili di almeno 44 px (checklist, 18/10): l'area che si tocca si allarga senza spostare niente.
   Link con freccia, "Tutte le guide", "Mostra le tappe" e Privacy/Cookie nel piede: un rettangolo invisibile intorno;
   indice degli articoli e argomenti del blog: più alti sul telefono; tasto pausa delle foto: 44 px. */
:is(.freccia, .collegamento, .linea-tempo__apri, .piede .piede__legale a) { position: relative; }
:is(.freccia, .collegamento, .linea-tempo__apri, .piede .piede__legale a)::before { content: ""; position: absolute; inset: -12px -4px; }
.giro__pausa { width: 44px; height: 44px; }
@media (max-width: 720px) {
	.indice a { padding-block: 13px; }
	.temi a { min-height: 44px; }
}

/* Vecchi annunci di eventi (18/10, strumenti/archivio_eventi.php): sotto la data, "Evento del 2020, ormai concluso" */
.avviso-storico { max-width: 46rem; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--tenue-blu); box-shadow: inset 3px 0 0 var(--ambra); color: var(--testo); font-size: 16px; line-height: 1.5; }
.avviso-storico a { color: var(--link); font-weight: 600; }

/* Emoji salvate come immagini di WordPress nei vecchi testi (18/10): grandi come il testo, non come la colonna.
   Il convertitore le rimette come caratteri; questa regola copre i testi che non passano dal convertitore. */
.prosa img[src*="s.w.org/images/core/emoji"], img[src*="s.w.org/images/core/emoji"] { display: inline; width: 1em; height: 1em; margin: 0 0.05em; vertical-align: -0.1em; border-radius: 0; box-shadow: none; }

/* ---------- Pagina articolo (18/10, Mattia ha scelto la proposta A) ----------
   La copertina apre la pagina come nelle pagine del sito, con la stessa sfumatura. Le locandine (eventi, tour,
   meeting: piene di scritte) stanno intere accanto al titolo, con la stessa immagine sfocata dietro. Capitoli
   numerati quando sono almeno tre, attacco più grande e una barra d'avanzamento sotto la testata. */
.articolo__apertura { min-height: min(76svh, 760px); }
.articolo__apertura .apertura-pagina__testo { max-width: 62rem; }
.articolo__apertura .apertura-pagina__titolo { max-width: 20ch; font-size: clamp(38px, 1.1rem + 3.6vw, 76px); }
.articolo__apertura .articolo__meta { color: rgba(255, 255, 255, 0.84); font-size: 16px; }
.articolo__apertura .avviso-storico { background: rgba(255, 255, 255, 0.12); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.articolo__apertura .avviso-storico a { color: #fff; }
.articolo__apertura--locandina .apertura-pagina__foto img { filter: blur(28px) saturate(1.15); transform: scale(1.18); }
.articolo__apertura--locandina .apertura-pagina__velo { background: linear-gradient(90deg, rgba(8, 17, 31, 0.92) 0%, rgba(8, 17, 31, 0.74) 52%, rgba(8, 17, 31, 0.5) 100%), linear-gradient(180deg, rgba(8, 17, 31, 0.6) 0%, rgba(8, 17, 31, 0) 24%); }
.articolo__apertura--locandina .apertura-pagina__titolo { max-width: 18ch; }
.articolo__locandina { width: clamp(280px, 30vw, 460px); margin-bottom: 12px; }
.articolo__locandina img { transform: rotate(2deg); }
.articolo__corpo.contenitore { padding-top: clamp(8px, 2vh, 24px); }
.articolo .prosa > p:first-of-type { color: var(--testo); font-size: clamp(19px, 1rem + 0.4vw, 22px); line-height: 1.6; }
.articolo--capitoli .prosa { counter-reset: capitolo; }
.articolo--capitoli .prosa > h2::before { counter-increment: capitolo; content: counter(capitolo, decimal-leading-zero); display: block; margin-bottom: 10px; color: var(--ambra-testo); font: 800 15px/1 var(--titoli); letter-spacing: 0.14em; }
.lettura { position: fixed; top: var(--testata); right: 0; left: 0; z-index: 40; height: 3px; pointer-events: none; }
.lettura span { display: block; height: 100%; background: var(--ambra); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@media (max-width: 720px) {
	.articolo__apertura { min-height: min(64svh, 560px); }
	.articolo__apertura--locandina { min-height: 0; }
	.articolo__apertura--locandina .apertura-pagina__visuale { display: block; order: -1; width: min(100%, 420px); margin: 0 0 6px; }
	.articolo__locandina img { transform: none; }
}

/* ---------- Consenso ai cookie (18/10, inc/consenso.php) ----------
   Banner in basso sopra a tutto. "Rifiuta" e "Accetta tutto" hanno la stessa misura e sono ugualmente in vista. */
.consenso { position: fixed; z-index: 120; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; pointer-events: none; }
.consenso[hidden], .consenso__scelte[hidden], .consenso__btn[hidden] { display: none; }
.consenso__scheda { position: relative; width: min(100%, 760px); padding: 22px 24px 20px; border-radius: 22px; background: var(--carta); color: var(--testo); box-shadow: 0 0 0 1px var(--linea), 0 24px 60px -18px rgba(11, 25, 48, 0.45); pointer-events: auto; }
.consenso__titolo { display: flex; align-items: center; min-height: 34px; margin: 0 44px 10px 0; font-family: var(--titoli); font-size: 18px; font-weight: 700; }
.consenso__testo { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--tenue); }
.consenso__testo a { color: var(--link, var(--blu)); font-weight: 600; }
.consenso__scelte { display: grid; gap: 12px; margin: 0 0 18px; }
.consenso__voce { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--tenue); cursor: pointer; }
.consenso__voce strong { display: block; color: var(--testo); }
.consenso__voce input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blu); }
.consenso__azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.consenso__btn { min-height: 46px; padding: 0 20px; font-size: 15px; }
.consenso__btn::after { display: none; } /* niente freccia: sono scelte, non link */
.consenso__btn--rifiuta { background: var(--testo); color: var(--carta); }
.consenso__btn--rifiuta:hover { opacity: 0.88; }
.consenso__btn--scegli { background: transparent; color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--linea); }
.consenso__btn--scegli:hover { box-shadow: inset 0 0 0 1.5px var(--tenue); }
.consenso__chiudi { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--tenue); font-size: 28px; line-height: 1; cursor: pointer; }
.consenso__chiudi:hover { background: var(--tenue-blu); color: var(--testo); }
.mov-pieno .consenso--aperto .consenso__scheda { animation: iv-consenso 420ms var(--ease) both; }
@keyframes iv-consenso { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 600px) {
	.consenso { left: 8px; right: 8px; bottom: 8px; }
	.consenso__scheda { max-height: calc(100svh - 16px); overflow-y: auto; padding: 16px 16px 14px; border-radius: 18px; }
	.consenso__titolo { font-size: 17px; }
	.consenso__testo { margin-bottom: 14px; font-size: 16px; }
	.consenso__btn { flex: 1 1 0; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 399px) {
	.consenso__azioni { display: grid; grid-template-columns: 1fr 1fr; }
	.consenso__btn--scegli { grid-column: 1 / -1; order: 1; }
}
/* "Preferenze cookie" nel piede: un pulsante che sembra uno dei link legali (senza JavaScript non serve e non si vede). */
.piede .piede__legale .piede__preferenze { position: relative; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #dbe7fb; text-decoration: underline; text-decoration-color: rgba(219, 231, 251, 0.35); text-underline-offset: 0.25em; cursor: pointer; }
.piede .piede__legale .piede__preferenze:hover { color: #fff; text-decoration-color: #fff; }
.piede .piede__legale .piede__preferenze::before { content: ""; position: absolute; inset: -12px -4px; }
html:not(.js) [data-preferenze-cookie] { display: none; }
/* Tabelle nei testi al telefono (18/10): se sono più larghe della colonna scorrono dentro di sé invece di uscire.
   Quelle a schede (cookie policy, class="tabella-schede") diventano una scheda per riga, con il nome della colonna. */
@media (max-width: 600px) {
	.prosa table { display: block; max-width: 100%; overflow-x: auto; }
	.prosa th, .prosa td { overflow-wrap: anywhere; }
	.prosa table.tabella-schede { display: table; overflow: visible; }
	.prosa .tabella-schede thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.prosa .tabella-schede tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--linea); }
	.prosa .tabella-schede td { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 3px 0; border: 0; }
	.prosa .tabella-schede td::before { content: attr(data-etichetta); font-weight: 600; color: var(--tenue); }
}

/* Link alle pagine della V.A. riservate ai piloti (18/10, inc/link-esterni.php): "serve l'accesso" accanto al testo,
   nel colore del link, così si legge anche sui pulsanti e nel tema scuro. */
.serve-accesso { display: inline-block; margin-left: 0.4em; padding: 0 0.5em; border: 1px solid currentColor; border-radius: 999px; font-size: max(13px, 0.8em); font-weight: 500; line-height: 1.45; text-decoration: none; white-space: nowrap; vertical-align: 0.06em; }

/* Home (18/10, Mattia: "in home ci sono ancora degli stacchi netti"): come nelle pagine interne, dal chiaro allo scuro il
   cielo si scurisce in cima alla fascia scura e dallo scuro al chiaro schiarisce in cima a quella chiara; più spazio in
   alto, così i titoli partono sotto la sfumatura. Nel tema scuro i colori del cielo sono già scuri (--cielo-*).
   Il colore pieno della fascia è uno strato che parte 100 px sotto, sotto il cielo, non il colore di fondo: sul bordo in
   alto, a mezzo pixel con lo zoom al 125-150%, i due sfumavano insieme e facevano una riga (18/10, Mattia). */
.home main > section + section { margin-top: -1px; } /* come .pagina-sezioni: ogni fascia sale di 1 px sulla precedente */
.manifesto + .attivita { padding-top: calc(clamp(90px, 12vh, 150px) + 60px); background: linear-gradient(var(--fondo), var(--cielo-chiaro) 26%, var(--cielo-medio) 62%, var(--navy)) top / 100% 150px no-repeat, linear-gradient(var(--navy), var(--navy)) 0 100px / 100% calc(100% - 100px) no-repeat; }
.attivita + .vita { padding-top: calc(clamp(100px, 14vh, 170px) + 60px); background: linear-gradient(var(--navy), var(--cielo-medio) 36%, var(--cielo-chiaro) 72%, var(--fondo)) top / 100% 150px no-repeat, linear-gradient(var(--fondo), var(--fondo)) 0 100px / 100% calc(100% - 100px) no-repeat; }
.partecipa + .fascia-va { padding-top: calc(clamp(100px, 14vh, 170px) + 60px); }
.partecipa + .fascia-va::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: 150px; background: linear-gradient(var(--carta), var(--cielo-chiaro) 26%, color-mix(in srgb, var(--cielo-medio) 55%, transparent) 62%, transparent); pointer-events: none; }
.partecipa + .fascia-va > .contenitore { position: relative; z-index: 1; }
.fascia-va + .motto { padding-top: calc(clamp(110px, 16vh, 200px) + 60px); background: linear-gradient(var(--navy), var(--cielo-medio) 36%, var(--cielo-chiaro) 72%, var(--fondo)) top / 100% 150px no-repeat, linear-gradient(var(--fondo), var(--fondo)) 0 100px / 100% calc(100% - 100px) no-repeat; }

/* Moduli Formidable (18/10, visti per la prima volta sul sito vero: in locale il plugin non c'era). Gli stili salvati in
   Formidable avevano colori e caratteri fissi: nel tema scuro le etichette di Contatti erano grigio scuro su blu notte e
   il pulsante della newsletter nel piede era azzurro e centrato. Qui le variabili di Formidable prendono colori e
   caratteri del tema (chiaro e scuro), i pulsanti sono quelli del tema e il riquadro invisibile di reCAPTCHA non lascia
   un buco. Specificità sopra a ".frm_style_*.with_frm_style ..." di Formidable. */
main .frm_forms.with_frm_style.with_frm_style { --font: var(--testi); --font-size: 16px; --field-font-size: 16px; --weight: 600; --label-color: var(--testo); --check-label-color: var(--testo); --text-color: var(--testo); --bg-color: var(--carta); --bg-color-active: var(--carta); --border-color: var(--linea); --border-color-active: var(--blu); --border-radius: 12px; }
.piede .frm_forms.with_frm_style.with_frm_style { --font: var(--testi); --font-size: 16px; --field-font-size: 16px; --border-radius: 12px; }
main .frm_forms.with_frm_style :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea) { min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--carta); color: var(--testo); font: 400 16px/1.4 var(--testi); }
main .frm_forms.with_frm_style textarea { min-height: 150px; }
main .frm_forms.with_frm_style :is(input, select, textarea):focus { border-color: var(--blu); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blu) 25%, transparent); }
main .frm_forms.with_frm_style :is(.frm_checkbox, .frm_radio) label { color: var(--testo); font: 400 16px/1.5 var(--testi); }
.piede .frm_forms.with_frm_style :is(input[type=email], input[type=text]) { min-height: 48px; padding: 10px 14px; border-radius: 12px; font: 400 16px/1.4 var(--testi); }
.piede .frm_forms.with_frm_style .frm_checkbox label { font: 400 15px/1.5 var(--testi); }
:is(main, .piede) .frm_forms.with_frm_style .frm_form_field:has(> .frm-g-recaptcha[data-size="invisible"]) { margin-bottom: 0; }
:is(main, .piede) .frm_forms.with_frm_style .frm_submit { text-align: left; }
:is(main, .piede) .frm_forms.with_frm_style .frm_submit :is(button, input[type=submit]) { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: 100%; min-height: 52px; margin: 4px 0 0; padding: 0 26px; border: 0; border-radius: 14px; background: var(--blu); color: #fff; font: 600 16px/1 var(--testi); text-shadow: none; box-shadow: none; transition: background-color 220ms var(--ease); }
:is(main, .piede) .frm_forms.with_frm_style .frm_submit :is(button, input[type=submit]):hover { background: var(--blu-scuro); color: #fff; }
:is(main, .piede) .frm_forms.with_frm_style .frm_submit :is(button, input[type=submit]):focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
main .frm_forms.with_frm_style :is(.frm_html_container, .frm_section_heading h3) { color: var(--testo); } /* titoletti dentro i moduli d'ordine: Formidable li dava grigio fisso #666, illeggibile nel tema scuro */
main .frm_forms.with_frm_style :is(.frm_description, .frm_pro_max_limit_desc) { color: var(--tenue); }
/* Turnstile di Cloudflare (dal 18/10 sera al posto di reCAPTCHA): il riquadro (300 px) prende una riga intera, anche dove
   il campo captcha era largo 3 colonne su 12 (newsletter del piede: finiva sotto il pulsante Invia, sulla stessa riga). */
:is(main, .piede) .frm_forms.with_frm_style :is(.frm_form_field:has(> .frm-cf-turnstile), .frm_submit) { grid-column: 1 / -1; }
main .frm_forms.with_frm_style .frm_inline_total { color: var(--testo); } /* totale dell'ordine (felpa, cappellino): grigio fisso di Formidable, poco leggibile nel tema scuro */
/* Contatti (18/10 sera, Mattia: "ha un buco a sinistra, non mi piace"): col modulo vero la colonna del modulo è alta il
   doppio di quella delle schede e sotto le schede restava un buco. Una colonna sola: schede sopra (in fila da 1100 px,
   prima una sotto l'altra: a tre colonne l'indirizzo email non ci sta), modulo sotto e centrato. È l'unica pagina con
   una sezione divisa che contiene un modulo; sotto i 900 px era già tutto in colonna. */
@media (min-width: 901px) {
	.sezione__divisa:has(> .riquadro-modulo) { grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vw, 48px); }
	.sezione__divisa:has(> .riquadro-modulo) > .riquadro-modulo { justify-self: center; width: 100%; max-width: 52rem; }
	.sezione__divisa:has(> .riquadro-modulo) .schede--righe { max-width: none; }
}
@media (min-width: 1100px) {
	.sezione__divisa:has(> .riquadro-modulo) .schede--righe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Callsign IVV (18/10 sera, Mattia: "togli il separatore striscia arancio sopra il form e metti il form al centro"): sopra
   la fascia col modulo main.js non disegna più la tratta, quindi niente nemmeno dello spazio in più che le lascia lo stacco
   "rotta" (sopra e sotto il confine). Riguarda solo le fasce con .riquadro-modulo: oggi Callsign IVV (Contatti è la prima). */
.stacco-rotta .pagina-sezioni > .sezione:has(> .contenitore > .riquadro-modulo) { padding-top: clamp(24px, 3vh, 40px); } /* 18/10 sera, Mattia: "troppo spazio sopra al form, riduci" */
.stacco-rotta .pagina-sezioni > .sezione:has(+ .sezione > .contenitore > .riquadro-modulo) { padding-bottom: clamp(32px, 5vh, 56px); }
/* Pagina del prodotto (felpa e cappellino; 18/10 sera, Mattia: "migliora la pagina del singolo prodotto graficamente";
   19/10: "usa le immagini che ti ho dato" e "metti il prezzo finale scrivendo spedizione inclusa").
   In alto come in un negozio: la foto vera del prodotto in una cornice arrotondata, accanto nome, introduzione, prezzo
   finale e il pulsante che porta al modulo. Sotto: descrizione e modulo d'ordine nel riquadro. Il testo è quello
   dell'articolo, diviso da inc/prodotti.php. */
.prodotto__apertura { padding: clamp(28px, 5vh, 64px) 0 clamp(56px, 9vh, 104px); background: radial-gradient(80% 120% at 28% 42%, #ffffff 0%, #eef3f9 52%, #dde6f1 100%); }
.prodotto__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 84px); }
.prodotto__foto { display: grid; place-items: center; }
.prodotto__foto img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(72vh, 640px); border-radius: 28px; box-shadow: 0 0 0 1px rgba(11, 25, 48, 0.08), 0 44px 80px -44px rgba(11, 25, 48, 0.6); }
.prodotto__testo .briciole { margin-bottom: 18px; }
.prodotto__testo .occhiello { color: var(--ambra-testo); }
.prodotto__testo .occhiello a { color: inherit; text-decoration: none; }
.prodotto__testo .occhiello a:hover { text-decoration: underline; }
.prodotto__titolo { margin: 8px 0 18px; color: var(--testo); font: 800 clamp(36px, 1.2rem + 3.2vw, 64px)/1.02 var(--titoli); letter-spacing: -0.035em; text-wrap: balance; }
.prodotto__intro p { margin: 0; max-width: 34rem; color: var(--testo); font-size: clamp(18px, 1rem + 0.35vw, 21px); line-height: 1.5; }
.prodotto__etichetta { margin: 28px 0 8px; color: var(--ambra-testo); font: 700 13px/1.2 var(--titoli); letter-spacing: 0.14em; text-transform: uppercase; }
.prodotto__cifre { margin: 0 0 10px; color: var(--testo); font: 800 clamp(36px, 1.4rem + 2vw, 50px)/1 var(--titoli); letter-spacing: -0.02em; }
.prodotto__cifre small { margin-left: 10px; color: var(--tenue); font: 600 18px/1.2 var(--testi); letter-spacing: 0; white-space: nowrap; }
.prodotto__prezzo p { margin: 0 0 24px; max-width: 34rem; color: var(--tenue); font-size: 16px; line-height: 1.6; }
.prodotto__testo .azioni { margin: 0; }
/* Descrizione sotto l'apertura: senza la foto accanto (ora è in alto) la colonna sta al centro, sullo stesso asse del modulo */
.prodotto__dettagli .contenitore.prosa { width: min(100% - 2 * var(--margine), var(--misura)); }
:root[data-tema="scuro"] .prodotto__apertura { background: radial-gradient(80% 120% at 28% 42%, #3a4a68 0%, #26324a 52%, #1a2438 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .prodotto__apertura { background: radial-gradient(80% 120% at 28% 42%, #3a4a68 0%, #26324a 52%, #1a2438 100%); } }
@media (max-width: 900px) {
	.prodotto__griglia { grid-template-columns: minmax(0, 1fr); }
	.prodotto__foto img { max-height: 56vh; }
}