/* Concept: muretto box di notte. Asfalto bluastro, azzurro Italia, numeri da tabellone cronometrico.
   Profondità: pista 3D nell'hero, carta foto che si inclina, "P2" estruso che ruota con lo scroll,
   carriera che scorre in orizzontale con il kart che avanza, foto a tutto schermo che si apre allo scroll. */
/* INDICE (cerca il titolo per arrivarci; le regole per telefono stanno subito sotto ogni sezione, in @media)
   Base: font, :root (colori e misure), Scorrimento fluido (Lenis), grana pellicola, titoli animati
   Comuni: Nav · settori del giro · Footer · Tocco italiano · Pop-up curriculum PDF · Cursore · Passaggio tra pagine
   Home: Hero · Scena 3D foto · Ticker sobrio · Sezioni · Statement P2 3D · Ultima gara · Bio · Bio: link alla storia
         Carriera orizzontale · Cinema · Galleria: carosello orizzontale · Galleria in home · Box: team e partner
         Scheda team · Loghi dei partner · Pannello partnership · Stampa · Sempre accanto
         Team attuale: KGT Motorsport · Home: invito al curriculum · Home: il film di Viterbo
   Altre pagine: Pagine secondarie · Galleria: mosaico · Storia · Pagina Carriera · Domande frequenti · Pagine gara e inglese · Privacy
   Colori: si cambiano solo in :root (--azzurro, --asfalto, --verde, --cordolo...). */
/* Font ospitati sul sito (nessuna richiesta a Google: più veloce e senza dati inviati a terzi). Licenza SIL OFL. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../font/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../font/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("../font/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("../font/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("../font/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/chakra-petch-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("../font/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("../font/chakra-petch-latin-700-normal.woff2") format("woff2"); }

:root {
  --asfalto: #0b0f15;
  --asfalto-2: #121821;
  --asfalto-3: #19212c;
  --linea: #253041;
  --gesso: #eef1f5;
  --nebbia: #8b97a8;
  --argento: #c3ccd8;
  --azzurro: #3a82ff;
  --azzurro-2: #1f5fe0;
  --azzurro-tenue: rgba(58, 130, 255, .12);
  --cordolo: #e5392c;
  --oro: #f2c230;
  --bronzo: #d9915a;
  --verde: #1fa35a;
  --bianco-it: #f4f5f7;

  --f-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-testo: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-crono: "Chakra Petch", "Consolas", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--asfalto); color: var(--gesso);
  font-family: var(--f-testo); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 3px; }
::selection { background: var(--azzurro); color: var(--gesso); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Scorrimento fluido (Lenis, vedi assets/js/scorrimento.js). La riserva per la barra evita che la pagina
   si sposti quando menu o pop-up fermano lo scorrimento. */
html { scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* grana pellicola */
.grana {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grana 1.2s steps(4) infinite;
}
@keyframes grana { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

h1, h2, h3 { font-family: var(--f-display); font-weight: 900; line-height: .92; letter-spacing: .005em; text-wrap: balance; margin: 0; text-transform: uppercase; }
h2 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
.etichetta {
  font-family: var(--f-crono); font-size: .76rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--azzurro); display: inline-flex; align-items: center; gap: .8em;
}
.etichetta::before { content: ""; width: 30px; height: 4px; background: repeating-linear-gradient(-60deg, var(--cordolo) 0 5px, var(--gesso) 5px 10px); transform: skewX(-20deg); }

/* titoli che si ribaltano lettera per lettera */
.titolo-split .lt { display: inline-block; transform-origin: 50% 100%; }
.titolo-split .parola-s { display: inline-block; white-space: nowrap; perspective: 600px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--asfalto) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.marchio { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo { width: 58px; height: auto; overflow: visible; transition: transform .4s var(--ease); }
.marchio:hover .logo { transform: translateX(3px) skewX(-6deg); }
.parola { display: grid; line-height: 1; }
.parola b { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; }
.parola small { font-family: var(--f-crono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--nebbia); margin-top: 4px; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav a.voce { position: relative; text-decoration: none; font-family: var(--f-crono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nebbia); transition: color .25s; padding-block: 6px; }
.nav a.voce::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--azzurro); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a.voce:hover { color: var(--gesso); }
.nav a.voce:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a.voce.attiva { color: var(--gesso); }
.nav a.voce.attiva::after { transform: scaleX(1); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--linea); background: transparent; cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--gesso); transition: transform .35s var(--ease); }
.menu-btn i:first-child { top: 16px; }
.menu-btn i:last-child { top: 25px; right: 17px; }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-4.5px) rotate(-45deg); right: 11px; }
/* il menu scorre da solo quando le voci non entrano (finestra bassa o telefono in orizzontale) */
.menu-mobile { position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(90px + env(safe-area-inset-top, 0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--asfalto) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: grid; align-content: start; gap: 4px; }
.menu-mobile[hidden] { display: none; }
.menu-mobile a { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.9rem, min(12vw, 8.2vh), 4rem); line-height: 1.05; text-transform: uppercase; text-decoration: none; transform: skewX(-8deg); padding-block: 4px; border-bottom: 1px solid var(--linea); }
.menu-mobile a:active, .menu-mobile a:hover { color: var(--azzurro); }
/* Menu: apertura a cerchio dal pulsante, voci numerate che entrano in obliquo, foto che cambia (comune.js) */
.menu-mobile:not([hidden]) { animation: mm-apre .7s var(--ease) both; }
@keyframes mm-apre { from { clip-path: circle(0 at calc(100% - 44px) 40px); } to { clip-path: circle(150vmax at calc(100% - 44px) 40px); } }
.menu-mobile { grid-template-columns: minmax(0, 1fr); align-content: start; }
.mm-voci { display: grid; gap: 2px; position: relative; z-index: 1; }
.menu-mobile .mm-voci a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; animation: mm-voce .7s var(--ease) both; animation-delay: calc(.12s + var(--i, 0) * .045s); }
@keyframes mm-voce { from { opacity: 0; transform: translateX(-12%) skewX(-30deg); } to { opacity: 1; transform: skewX(-8deg); } }
.mm-num { font-family: var(--f-crono); font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--azzurro); transform: translateY(-.6em); }
.mm-testo { transition: transform .4s var(--ease), color .3s; }
.menu-mobile .mm-voci a:hover .mm-testo { transform: translateX(12px); }
.mm-foto { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .14; }
.mm-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.1); }
.mm-foto img.cambia { animation: mm-foto .7s var(--ease); }
@keyframes mm-foto { from { clip-path: inset(0 0 0 100%); transform: scale(1.12); } to { clip-path: inset(0); transform: none; } }
.mm-piede { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 26px; font-family: var(--f-crono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nebbia); animation: mm-voce .7s var(--ease) .5s both; }
.menu-mobile .mm-piede a { font: inherit; letter-spacing: inherit; transform: none; border: 0; padding: 0; color: var(--gesso); text-decoration: none; }
.menu-mobile .mm-piede a:hover { color: var(--azzurro); }
.mm-p2 { display: inline-flex; gap: 8px; align-items: center; width: 100%; }
.mm-p2 b { font-family: var(--f-display); font-size: 1.4rem; font-style: italic; color: var(--argento); }
@media (min-width: 760px) and (hover: hover) {
  .menu-mobile { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
  .mm-voci, .mm-piede { grid-column: 1; }
  .mm-foto { position: sticky; top: 0; grid-column: 2; grid-row: 1 / span 2; inset: auto; height: min(70vh, 640px); opacity: 1; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
  .mm-foto img { filter: none; }
}
@media (prefers-reduced-motion: reduce) { .menu-mobile:not([hidden]), .menu-mobile .mm-voci a, .mm-piede, .mm-foto img.cambia { animation: none; } }
@media (max-width: 1100px) { .nav ul { display: none; } .menu-btn { display: block; } }

/* settori del giro = avanzamento pagina */
.settori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: 3px; }
.settori i { display: block; background: var(--linea); position: relative; overflow: hidden; }
.settori i::after { content: ""; position: absolute; inset: 0; background: var(--sett); transform: scaleX(var(--p, 0)); transform-origin: left; }
/* i tre settori si riempiono nei colori della bandiera */
#s1 { --sett: var(--verde); } #s2 { --sett: var(--bianco-it); } #s3 { --sett: var(--cordolo); }

/* ---------- Hero ---------- */
/* Copertina. Livelli (z-index dentro .hero): pista 3D -2 · luce e griglia -1 · "Coco" gigante 1 · pilota scontornato 2 ·
   contorno di "Coco" davanti al pilota 3 · testi, timing e mirino 4 · cordolo 5.
   Il movimento col mouse usa la proprietà "translate" con --mx/--my (app.js), lo scroll usa "transform" (GSAP): non si pestano i piedi.
   Foto del pilota: assets/img/pilota-hero.webp, si rifà con strumenti/scontorna.py. Timing: ultime gare di dati/gare.js. */
.hero { --nav-h: 60px; position: relative; overflow: hidden; isolation: isolate; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 600px; max-height: 1040px; --mx: 0; --my: 0; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 5; background: repeating-linear-gradient(-60deg, var(--cordolo) 0 22px, var(--gesso) 22px 44px); opacity: .9; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-luce { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 52% at 56% 44%, rgba(58, 130, 255, .26), transparent 72%),
    linear-gradient(90deg, rgba(11, 15, 21, .8) 0%, rgba(11, 15, 21, .2) 34%, transparent 55%, rgba(11, 15, 21, .55) 100%),
    linear-gradient(180deg, var(--asfalto) 0%, rgba(11, 15, 21, 0) 20%, rgba(11, 15, 21, 0) 62%, rgba(11, 15, 21, .92) 100%); }
/* griglia a 12 colonne appena visibile, come un impaginato */
.hero-griglia { position: absolute; inset: 0 var(--gutter); z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(238, 241, 245, .05) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 24%, #000 66%, transparent 92%); mask-image: linear-gradient(180deg, transparent 6%, #000 24%, #000 66%, transparent 92%); }
/* segni di taglio agli angoli */
.hero-tacche i { position: absolute; z-index: 4; width: 18px; height: 18px; border: 0 solid rgba(238, 241, 245, .4); pointer-events: none; }
.hero-tacche i:nth-child(1) { left: calc(var(--gutter) * .5); top: 22px; border-width: 1px 0 0 1px; }
.hero-tacche i:nth-child(2) { right: calc(var(--gutter) * .5); top: 22px; border-width: 1px 1px 0 0; }
.hero-tacche i:nth-child(3) { left: calc(var(--gutter) * .5); bottom: 26px; border-width: 0 0 1px 1px; }
.hero-tacche i:nth-child(4) { right: calc(var(--gutter) * .5); bottom: 26px; border-width: 0 1px 1px 0; }

.nome-hero { margin: 0; font-size: 1rem; }
.nome-hero .lettera { display: inline-block; }
.nome-hero .r1 { position: absolute; z-index: 4; left: var(--gutter); top: clamp(40px, 9vh, 110px);
  font-size: clamp(2.6rem, 6.6vw, 6.6rem); line-height: .9; color: var(--gesso);
  translate: calc(var(--mx) * 22px) calc(var(--my) * 12px); }
.nome-hero .r1-testo { display: inline-block; transform: skewX(-8deg); }
.nome-hero .r1::after { content: ""; display: block; width: 1.1em; height: .07em; margin-top: .14em; background: linear-gradient(90deg, var(--verde) 0 33%, var(--bianco-it) 33% 66%, var(--cordolo) 66%); transform: skewX(-30deg); }
/* "Coco" gigante: dietro al pilota (r2) e solo contorno davanti (r2-eco), stessa misura e stessa posizione */
.nome-hero .r2, .r2-eco { position: absolute; left: 0; right: 0; top: 47%; text-align: center; white-space: nowrap; pointer-events: none;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(9rem, 34vw, 36rem); line-height: .74; letter-spacing: -.005em;
  translate: calc(var(--mx) * -16px) calc(-50% + var(--my) * -10px); }
/* il riempimento con il gradiente si vede solo dentro il riquadro della scritta: lo allargo con padding e lo compenso con margini negativi */
.nome-hero .r2 > span, .r2-eco > span { display: inline-block; transform: skewX(-8deg); padding: .16em .06em .1em; margin: -.16em -.02em -.1em; }
.nome-hero .r2 { z-index: 1; }
/* con JavaScript misura e posizione arrivano da app.js ("Coco" grande quanto lo spazio libero) */
.hero.impaginato .r2, .hero.impaginato .r2-eco { translate: calc(var(--mx) * -16px) calc(var(--my) * -10px); }
.nome-hero .r2 > span { background: linear-gradient(180deg, #f6f8fb 0%, #cdd7e6 38%, #5e8fe0 82%, rgba(31, 95, 224, .35) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r2-eco { z-index: 3; color: transparent; -webkit-text-stroke: 1.5px rgba(238, 241, 245, .5); }

.hero-pilota { position: absolute; z-index: 2; bottom: 0; left: 55%; height: calc(100% - 70px); translate: calc(-50% + var(--mx) * 10px) calc(var(--my) * 6px); }
/* l'alone azzurro sta sul contenitore, così segue la sagoma già sfumata in basso e non viene tagliato */
.pilota-foto { display: block; height: 100%; filter: drop-shadow(0 0 1px rgba(170, 205, 255, .5)) drop-shadow(-18px -6px 40px rgba(58, 130, 255, .24)); }
.hero-pilota img { height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); }
/* luce che scorre sulla figura del pilota (la maschera è la foto stessa) */
.hero-scansione { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url("../img/pilota-hero.webp") 0 0 / 100% 100% no-repeat; mask: url("../img/pilota-hero.webp") 0 0 / 100% 100% no-repeat;
  background: linear-gradient(180deg, transparent 44%, rgba(58, 130, 255, .35) 48.6%, rgba(220, 235, 255, .8) 50%, rgba(58, 130, 255, .35) 51.4%, transparent 56%) 0 100% / 100% 300% no-repeat;
  animation: scansione 7s var(--ease) 2.4s infinite; }
@keyframes scansione { 0% { background-position: 0 100%; } 32%, 100% { background-position: 0 0; } }
/* mirino sul casco: riquadro in % della foto (--cx --cy --cl --ca in index.html) */
.hud-mira { position: absolute; left: var(--cx); top: var(--cy); width: var(--cl); height: var(--ca); pointer-events: none; }
.hud-mira i { position: absolute; width: 14%; aspect-ratio: 1; border: 0 solid var(--azzurro); }
.hud-mira i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.hud-mira i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.hud-mira i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.hud-mira i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.hud-mira b { position: absolute; left: calc(100% + 34px); top: 22%; white-space: nowrap; font-family: var(--f-crono); font-weight: 600; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gesso);
  padding: 5px 9px; background: rgba(11, 15, 21, .7); border-left: 2px solid var(--azzurro); }
.hud-mira b::before { content: ""; position: absolute; right: 100%; top: 50%; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--azzurro)); }

/* timing: ultime gare, generato da app.js */
.hud-tempi { position: absolute; z-index: 4; right: var(--gutter); top: 50%; width: clamp(250px, 21vw, 310px); translate: calc(var(--mx) * 26px) calc(-42% + var(--my) * 14px);
  font-family: var(--f-crono); background: rgba(11, 15, 21, .55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(238, 241, 245, .09); box-shadow: 0 30px 60px -30px #000; }
.hud-testa { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nebbia); border-bottom: 1px solid rgba(238, 241, 245, .08); }
.hud-live { display: inline-flex; align-items: center; gap: 7px; color: var(--gesso); }
.hud-live i { width: 6px; height: 6px; background: var(--azzurro); transform: rotate(45deg); }
.hud-tempi ol { list-style: none; margin: 0; padding: 4px 0; }
.hud-tempi li a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px; text-decoration: none; transition: background .25s; }
.hud-tempi li a:hover { background: rgba(58, 130, 255, .1); }
.hud-pos { display: grid; place-items: center; height: 26px; font-weight: 700; font-size: .82rem; color: var(--gesso); background: var(--asfalto-3); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.hud-pos.oro { background: linear-gradient(135deg, #fbe39a, #d9a520); color: #2a1d00; }
.hud-pos.argento { background: linear-gradient(135deg, #f2f5f9, #9aa7b8); color: #10151d; }
.hud-pos.bronzo { background: linear-gradient(135deg, #f1c09a, #b8733f); color: #2a1404; }
.hud-nome { min-width: 0; display: grid; line-height: 1.25; }
.hud-nome b { font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gesso); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-nome small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nebbia); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-data { font-size: .64rem; letter-spacing: .12em; color: var(--nebbia); font-variant-numeric: tabular-nums; }
.hud-tutte { display: flex; justify-content: space-between; padding: 10px 14px; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--azzurro); border-top: 1px solid rgba(238, 241, 245, .08); }
.hud-tutte:hover { color: var(--gesso); }

.hero-testo { position: absolute; z-index: 4; left: var(--gutter); bottom: clamp(44px, 8vh, 90px); max-width: min(560px, 44vw); }
.hero-titolo { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--f-crono); font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gesso); }
.hero-titolo::before { content: "P2"; flex: none; display: grid; place-items: center; width: 40px; height: 26px; font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: #10151d; background: linear-gradient(135deg, #f2f5f9, #9aa7b8); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.hero-titolo[data-p]::before { content: attr(data-p); }
.hero .sottotitolo { margin-top: 18px; }
.hero .cta { margin-top: 26px; }
.hero .semaforo { margin-bottom: 20px; }
.hero-lato { position: absolute; z-index: 4; left: calc(var(--gutter) * .5 - 6px); top: 50%; translate: 0 -50%; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: 28px;
  font-family: var(--f-crono); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--nebbia); white-space: nowrap; }
.hero-lato b { color: var(--gesso); font-weight: 600; }

@media (max-width: 1100px) {
  .hud-tempi { display: none; }
  .hero-pilota { left: 68%; }
  .hero-testo { max-width: 42vw; }
}
/* telefoni e tablet in verticale: nome in alto, pilota al centro, testi in basso */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .hero { --nav-h: 68px; min-height: 560px; max-height: 900px; }
  .hero-luce { background:
    radial-gradient(ellipse 70% 40% at 50% 46%, rgba(58, 130, 255, .26), transparent 72%),
    linear-gradient(180deg, var(--asfalto) 0%, rgba(11, 15, 21, 0) 22%, rgba(11, 15, 21, 0) 48%, rgba(11, 15, 21, .75) 70%, rgba(11, 15, 21, .96) 100%); }
  .hero-griglia, .hero-lato, .hero-tacche, .hero-scansione { display: none; }
  .nome-hero .r1 { top: 34px; font-size: 13vw; }
  .nome-hero .r2, .r2-eco { top: 33%; font-size: 47vw; }
  .hero-pilota { left: 50%; height: 72%; bottom: 0; }
  .hud-mira b { display: none; }
  .hero-testo::before { content: ""; position: absolute; z-index: -1; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: -48px; bottom: -26px; background: linear-gradient(180deg, transparent, rgba(11, 15, 21, .82) 40%, rgba(11, 15, 21, .95)); pointer-events: none; }
  .hero-testo { left: var(--gutter); right: var(--gutter); bottom: 26px; max-width: none; }
  .hero-titolo { font-size: .68rem; letter-spacing: .14em; }
  .hero .sottotitolo { margin-top: 12px; gap: 6px 14px; font-size: .72rem; }
  .hero .sottotitolo > span:last-child { display: none; }
  .hero .semaforo { display: none; }
  .hero .cta { margin-top: 16px; gap: 8px; }
  .hero .cta .bottone { padding: 13px 18px; font-size: .74rem; }
  .hero #social-hero { display: none !important; }
}

.semaforo { display: flex; gap: 10px; margin-bottom: 26px; }
.semaforo i { width: 16px; height: 16px; border-radius: 50%; background: #2a1210; box-shadow: inset 0 0 0 2px #00000066; }
.semaforo.acceso i { animation: luce 2.4s forwards; }
.semaforo.acceso i:nth-child(2) { animation-delay: .25s; }
.semaforo.acceso i:nth-child(3) { animation-delay: .5s; }
.semaforo.acceso i:nth-child(4) { animation-delay: .75s; }
.semaforo.acceso i:nth-child(5) { animation-delay: 1s; }
@keyframes luce {
  0% { background: #2a1210; }
  8%, 70% { background: var(--cordolo); box-shadow: 0 0 22px var(--cordolo), inset 0 0 0 2px #00000033; }
  71%, 100% { background: #2a1210; box-shadow: inset 0 0 0 2px #00000066; }
}

/* Partenza: intro della prima visita (app.js). Semaforo a cinque luci doppie, cronometro, "via!", sipario diagonale. */
.in-partenza, .in-partenza body { overflow: hidden; }
.partenza { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none; }
.partenza-telo { position: absolute; inset: 0; background: var(--asfalto); }
.partenza-telo.a { clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); }
.partenza-telo.b { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); background: #0d121a; }
.partenza-telo.a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; clip-path: polygon(61.4% 0, 62% 0, 38% 100%, 37.4% 100%); background: linear-gradient(180deg, var(--verde), var(--bianco-it) 50%, var(--cordolo)); }
.partenza-centro { position: relative; display: grid; justify-items: center; gap: 18px; padding: 0 var(--gutter); text-align: center; }
.partenza-luci { display: flex; gap: clamp(8px, 2vw, 16px); padding: clamp(10px, 2vw, 16px); background: #05070a; border: 1px solid var(--linea); box-shadow: 0 30px 80px -20px #000; }
.partenza-luci i { display: grid; gap: clamp(6px, 1.4vw, 10px); padding: clamp(6px, 1.2vw, 9px); background: #10151d; border-radius: 6px; }
.partenza-luci b { width: clamp(22px, 5vw, 42px); aspect-ratio: 1; border-radius: 50%; background: #2a1210; box-shadow: inset 0 0 0 2px #00000080; transition: background .08s, box-shadow .08s; }
.partenza-luci i.on b { background: #ff3b2f; box-shadow: 0 0 26px 4px rgba(255, 59, 47, .65), inset 0 -4px 8px rgba(0, 0, 0, .35); }
.partenza.verde .partenza-luci b { background: #2a1210; box-shadow: inset 0 0 0 2px #00000080; }
.partenza-luci, .partenza-crono, .partenza-nome { transition: opacity .18s, transform .3s var(--ease); }
.partenza.verde .partenza-luci, .partenza.verde .partenza-crono, .partenza.verde .partenza-nome { opacity: 0; transform: scale(.9); }
.partenza-crono { font-family: var(--f-crono); font-weight: 700; font-size: clamp(2.2rem, 7vw, 4.4rem); letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--gesso); }
.partenza-crono small { font-size: .55em; color: var(--azzurro); }
.partenza-nome { font-family: var(--f-crono); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--nebbia); }
.partenza-via { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-size: clamp(5rem, 22vw, 15rem); text-transform: uppercase; transform: skewX(-10deg) scale(.6); opacity: 0;
  background: linear-gradient(90deg, var(--verde) 0 33%, var(--bianco-it) 33% 66%, var(--cordolo) 66%); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; }

.sottotitolo { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-family: var(--f-crono); font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nebbia); }
.sottotitolo strong { color: var(--gesso); font-weight: 600; }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.bottone {
  position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px; text-decoration: none; overflow: hidden;
  font-family: var(--f-crono); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--gesso); color: var(--asfalto); border: 0; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: color .35s var(--ease);
}
.bottone::before { content: ""; position: absolute; inset: 0; background: var(--azzurro); transform: translateX(-101%); transition: transform .45s var(--ease); z-index: 0; }
.bottone > * { position: relative; z-index: 1; }
.bottone i { font-style: normal; transition: transform .35s var(--ease); }
.bottone:hover { color: var(--gesso); }
.bottone:hover::before { transform: none; }
.bottone:hover i { transform: translateX(4px); }
.bottone.vuoto { background: transparent; color: var(--gesso); box-shadow: inset 0 0 0 1px var(--linea); }

/* invito a scorrere: scritta e linea che si riempie */
.scorri { position: absolute; z-index: 4; right: calc(var(--gutter) + 6px); bottom: 44px; display: grid; justify-items: center; gap: 10px; text-decoration: none;
  font-family: var(--f-crono); font-size: .58rem; letter-spacing: .32em; text-transform: uppercase; color: var(--nebbia); }
.scorri i { position: relative; width: 1px; height: 38px; background: rgba(238, 241, 245, .18); overflow: hidden; }
.scorri i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--gesso); animation: rotella 2s var(--ease) infinite; }
@keyframes rotella { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) { .scorri { display: none; } }

/* ---------- Ticker sobrio ---------- */
.ticker { position: relative; overflow: hidden; white-space: nowrap; border-block: 1px solid var(--linea); background: var(--asfalto-2); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--asfalto-2), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--asfalto-2), transparent); }
.ticker .scorre { display: inline-flex; padding-block: 16px; will-change: transform; }
.ticker .voce-t { display: inline-flex; align-items: center; gap: 12px; padding-inline: 34px; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; color: var(--nebbia); }
.ticker .voce-t b { font-family: var(--f-crono); font-size: .95rem; font-weight: 700; color: var(--gesso); letter-spacing: .06em; }
.ticker .voce-t::after { content: ""; width: 6px; height: 6px; background: var(--azzurro); transform: rotate(45deg); margin-left: 34px; }

/* ---------- Sezioni ---------- */
.sezione { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.testa-sezione { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 32px; margin-bottom: clamp(36px, 5vw, 64px); }
.testa-sezione > div { display: grid; gap: 16px; min-width: 0; }
.testa-sezione > p { margin: 0; max-width: 44ch; color: var(--nebbia); }

/* Statement P2 3D */
.statement { position: relative; padding-block: clamp(64px, 9vw, 120px); overflow: hidden; border-bottom: 1px solid var(--linea); isolation: isolate; }
.statement-foto { position: absolute; inset: 0 0 0 35%; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); opacity: .32; }
.statement-foto img { width: 100%; height: 115%; object-fit: cover; object-position: 60% 40%; }
.statement .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 6vw, 80px); align-items: center; }
.statement-testo { display: grid; gap: 22px; min-width: 0; }
.statement-testo p { margin: 0; color: var(--argento); max-width: 50ch; font-size: 1.12rem; }
.p3d-scena { perspective: 900px; display: grid; place-items: center; min-height: clamp(200px, 26vw, 320px); }
.p3d { position: relative; transform-style: preserve-3d; font-family: var(--f-display); font-weight: 900; font-size: clamp(8rem, 21vw, 17rem); line-height: .8; transform: rotateY(-22deg) rotateX(8deg); }
.p3d span { position: absolute; inset: 0; display: block; white-space: nowrap; }
.p3d span.fronte { position: relative; background: linear-gradient(170deg, var(--gesso) 30%, #9fb3cc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.p3d span.fronte small { font-size: .5em; -webkit-text-fill-color: var(--azzurro); }
@media (max-width: 860px) { .statement .wrap { grid-template-columns: minmax(0, 1fr); } .statement-foto { inset: 0; opacity: .18; } }

.tabellone { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); margin-top: 8px; }
.tabellone > div { padding: 18px 4px 0; display: grid; gap: 6px; }
.tabellone .n { font-family: var(--f-crono); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.tabellone .l { font-family: var(--f-crono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nebbia); }
@media (max-width: 520px) { .tabellone { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }

/* Ultima gara */
.tilt { transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.ultima { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 44px); background: linear-gradient(115deg, var(--asfalto-3), var(--asfalto-2) 60%); border: 1px solid var(--linea); position: relative; overflow: hidden; margin-bottom: 36px; }
.ultima::after { content: ""; position: absolute; inset: 0; background: radial-gradient(500px circle at var(--mx, 80%) var(--my, 0%), var(--azzurro-tenue), transparent 60%); pointer-events: none; }
.ultima .grande-p { font-family: var(--f-display); font-weight: 900; font-size: clamp(5rem, 13vw, 8.5rem); line-height: .8; transform: skewX(-8deg) translateZ(40px); }
.ultima .grande-p small { font-size: .38em; color: var(--azzurro); margin-right: 2px; }
.ultima h3 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-top: 10px; }
.ultima p { margin: 12px 0 0; color: var(--argento); max-width: 60ch; }
@media (max-width: 600px) { .ultima { grid-template-columns: minmax(0, 1fr); } }

/* Scheda trofeo: l'ultima voce di gare.js quando è un podio (P1 oro, P2 argento, P3 bronzo).
   Medaglia con alloro e numero metallico, raggi che girano, tappe del campionato, foto e coriandoli (app.js). */
.ultima.trofeo { --m1: #f6f8fb; --m2: #a3aebd; --m3: #e3e8ef; --m4: #5f6b7c; --m-luce: rgba(210, 222, 240, .16);
  grid-template-columns: auto minmax(0, 1fr) minmax(0, .8fr); gap: clamp(20px, 3.5vw, 48px); padding: clamp(28px, 4vw, 52px);
  background: radial-gradient(70% 120% at 12% 50%, var(--m-luce), transparent 60%), linear-gradient(115deg, #1b2431, var(--asfalto-2) 55%, var(--asfalto));
  border-color: color-mix(in srgb, var(--m2) 45%, var(--linea)); min-height: 420px; isolation: isolate; }
.ultima.trofeo[data-medaglia="oro"] { --m1: #fff4c4; --m2: #e2ac1c; --m3: #ffe07a; --m4: #8f6406; --m-luce: rgba(242, 194, 48, .18); }
.ultima.trofeo[data-medaglia="bronzo"] { --m1: #ffe0c2; --m2: #c27436; --m3: #f2b583; --m4: #74401a; --m-luce: rgba(217, 145, 90, .17); }
/* bandiera a scacchi sfumata nell'angolo */
.ultima.trofeo::before { content: ""; position: absolute; right: 0; top: 0; width: 46%; height: 100%; z-index: -1;
  background: conic-gradient(var(--asfalto-3) 25%, transparent 0 50%, var(--asfalto-3) 0 75%, transparent 0) 0 0 / 28px 28px;
  -webkit-mask: linear-gradient(200deg, #000, transparent 55%); mask: linear-gradient(200deg, #000, transparent 55%); opacity: .7; }
.trofeo-raggi { position: absolute; left: clamp(-120px, -6vw, -40px); top: 50%; width: 620px; aspect-ratio: 1; translate: 0 -50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--m-luce) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent);
  animation: trofeo-gira 60s linear infinite; }
@keyframes trofeo-gira { to { rotate: 360deg; } }
.trofeo-medaglia { position: relative; width: clamp(190px, 20vw, 250px); aspect-ratio: 1; display: grid; place-items: center; transform: translateZ(60px); }
.trofeo-medaglia .alloro { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.trofeo-numero { font-family: var(--f-display); font-weight: 900; font-size: clamp(6.5rem, 11vw, 9rem); line-height: .8; transform: skewX(-8deg); padding: 0 .06em;
  background: linear-gradient(105deg, var(--m4) 0%, var(--m2) 28%, var(--m1) 42%, #fff 48%, var(--m3) 54%, var(--m2) 70%, var(--m4) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 5px 0 var(--m4)) drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); animation: trofeo-luccica 5s var(--ease) infinite; }
.trofeo-numero small { font-size: .38em; margin-right: 2px; }
@keyframes trofeo-luccica { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.trofeo-nastro { position: absolute; bottom: 4%; display: flex; gap: 0; transform: skewX(-12deg); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
.trofeo-nastro i { width: 16px; height: 9px; background: var(--verde); }
.trofeo-nastro i + i { background: var(--bianco-it); }
.trofeo-nastro i + i + i { background: var(--cordolo); }
.trofeo-testo { min-width: 0; position: relative; z-index: 1; }
.trofeo-titolo { display: block; overflow: hidden; margin-top: 12px; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .9;
  font-size: clamp(2.4rem, 4.3vw, 4.1rem); letter-spacing: .01em; }
.trofeo-titolo span { display: inline-block; background: linear-gradient(100deg, var(--m1), var(--m3) 40%, var(--m2) 75%, var(--m4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ultima.trofeo h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 10px; }
.ultima.trofeo h3 small { color: var(--nebbia); font-size: .7em; }
.trofeo-sotto { margin-top: 6px; color: var(--argento); font-size: .95rem; }
.ultima.trofeo p { font-size: .98rem; color: var(--nebbia); }
/* le tappe del campionato su una linea che si riempie */
.trofeo-tappe { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; max-width: 460px; }
.trofeo-tappe::before, .trofeo-tappe::after { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--linea); }
.trofeo-tappe::after { background: linear-gradient(90deg, var(--azzurro), var(--m2)); transform-origin: 0 50%; transform: scaleX(var(--avanza, 1)); }
.trofeo-tappe li { position: relative; z-index: 1; display: grid; gap: 2px; padding-top: 22px; font-family: var(--f-crono); }
.trofeo-tappe li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--asfalto); border: 2px solid var(--azzurro); }
.trofeo-tappe li:last-child { text-align: right; }
.trofeo-tappe li:last-child::before { left: auto; right: 0; }
.trofeo-tappe span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nebbia); }
.trofeo-tappe b { font-family: var(--f-display); font-size: 1.6rem; line-height: 1; font-style: italic; }
.trofeo-tappe b small { font-size: .55em; color: var(--nebbia); }
.trofeo-tappe li[data-pos="1"] b { color: var(--oro); }
.trofeo-tappe li[data-pos="2"] b { color: var(--argento); }
.trofeo-tappe li[data-pos="3"] b { color: var(--bronzo); }
.trofeo-tappe .finale::before { background: var(--m2); border-color: var(--m1); box-shadow: 0 0 0 0 var(--m2); animation: trofeo-pulsa 2.4s ease-out infinite; }
.trofeo-tappe .finale b { background: linear-gradient(180deg, var(--m1), var(--m2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trofeo-tappe .finale b small { color: inherit; }
@keyframes trofeo-pulsa { 0% { box-shadow: 0 0 0 0 var(--m-luce), 0 0 0 0 var(--m2); } 70% { box-shadow: 0 0 0 14px transparent, 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.trofeo-foto { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; margin: 0; z-index: -1; overflow: hidden; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.trofeo-foto img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 20%; }
.trofeo-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--asfalto-2), transparent 45%), linear-gradient(0deg, rgba(11, 15, 21, .55), transparent 40%); }
.trofeo-coriandoli { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
@media (max-width: 860px) {
  .ultima.trofeo { grid-template-columns: auto minmax(0, 1fr); min-height: 0; }
  .trofeo-foto { width: 40%; opacity: .55; }
}
@media (max-width: 600px) {
  .ultima.trofeo { grid-template-columns: minmax(0, 1fr); padding: 0 20px 26px; gap: 0; }
  .trofeo-foto { position: relative; width: auto; margin: 0 -20px; height: 300px; opacity: 1; z-index: 0; clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); }
  .trofeo-foto::after { background: linear-gradient(0deg, var(--asfalto-2) 2%, transparent 55%); }
  .trofeo-foto img { height: 115%; }
  .trofeo-medaglia { order: -1; width: 168px; margin: 0 0 -6px -8px; }
  .trofeo-foto { order: -2; }
  .ultima.trofeo:has(.trofeo-foto) .trofeo-medaglia { margin-top: -96px; z-index: 2; }
  .trofeo-raggi { left: -170px; top: 300px; width: 500px; translate: 0 -40%; }
  .trofeo-numero { font-size: 6.4rem; }
  .trofeo-testo { margin-top: 14px; }
  .trofeo-tappe { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .trofeo-raggi, .trofeo-numero, .trofeo-tappe .finale::before { animation: none; } }
/* podi nell'elenco: numero metallico */
.riga[data-pos="1"] .pos, .riga[data-pos="2"] .pos, .riga[data-pos="3"] .pos { -webkit-background-clip: text; background-clip: text; color: transparent; }
.riga[data-pos="1"] .pos { background-image: linear-gradient(170deg, #fff4c4, var(--oro) 50%, #8f6406); }
.riga[data-pos="2"] .pos { background-image: linear-gradient(170deg, #fff, var(--argento) 50%, #5f6b7c); }
.riga[data-pos="3"] .pos { background-image: linear-gradient(170deg, #ffe0c2, var(--bronzo) 50%, #74401a); }
.riga .pos small { -webkit-text-fill-color: var(--nebbia); }

.testa-sezione > .filtri, .filtri { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--linea); }
.filtri button {
  font: 600 .74rem/1 var(--f-crono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  padding: 10px 14px; background: transparent; color: var(--nebbia); border: 0; transition: background .25s, color .25s;
}
.filtri button:hover { color: var(--gesso); }
.filtri button[aria-pressed="true"] { background: var(--gesso); color: var(--asfalto); }
@media (max-width: 600px) { .testa-sezione > .filtri, .filtri { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .filtri::-webkit-scrollbar { display: none; } .filtri button { flex: none; padding-inline: 12px; } }

.torre { display: grid; gap: 4px; perspective: 1400px; }
.riga {
  display: grid; grid-template-columns: 92px 84px minmax(0, 1fr) auto; gap: 0 24px; align-items: center;
  padding: 20px 22px; background: var(--asfalto-2); position: relative; overflow: hidden; transform-origin: 50% 0;
  transition: background .3s;
}
.riga::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--linea); }
.riga::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, -100%) var(--my, 50%), rgba(58, 130, 255, .13), transparent 60%); }
.riga:hover { background: var(--asfalto-3); }
.riga[data-pos="1"]::before { background: var(--oro); }
.riga[data-pos="2"]::before { background: var(--argento); }
.riga[data-pos="3"]::before { background: var(--bronzo); }
.pos { font-family: var(--f-display); font-weight: 900; font-size: 2.9rem; line-height: 1; transform: skewX(-8deg); font-variant-numeric: tabular-nums; }
.pos small { font-size: .5em; color: var(--nebbia); }
.riga[data-pos="1"] .pos { color: var(--oro); }
.riga[data-pos="2"] .pos { color: var(--argento); }
.riga[data-pos="3"] .pos { color: var(--bronzo); }
.data { font-family: var(--f-crono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nebbia); font-variant-numeric: tabular-nums; }
.corpo { min-width: 0; }
.corpo h3 { font-size: 1.55rem; line-height: 1; }
.corpo .luogo { font-size: .95rem; color: var(--argento); margin-top: 5px; }
.corpo p { margin: 8px 0 0; font-size: .95rem; color: var(--nebbia); max-width: 70ch; }
.corpo .fonti { margin-top: 8px; font-family: var(--f-crono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nebbia); }
.corpo .fonti a { color: var(--azzurro); text-decoration: none; }
.corpo .fonti a:hover { text-decoration: underline; }
.badge { font-family: var(--f-crono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--linea); color: var(--argento); white-space: nowrap; align-self: start; }
.cat { display: inline-block; margin-left: 8px; vertical-align: middle; font-family: var(--f-crono); font-size: .66rem; letter-spacing: .12em; padding: 3px 7px; background: var(--azzurro-tenue); color: var(--azzurro); transform: translateY(-3px); }
@media (max-width: 720px) {
  .riga { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 16px; }
  .riga .data { grid-column: 2; grid-row: 1; }
  .riga .pos { grid-row: 1 / span 2; align-self: start; }
  .riga .corpo { grid-column: 2; }
  .riga .badge { grid-column: 2; justify-self: start; }
  .riga { padding: 16px 16px 16px 14px; }
  .corpo p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Bio */
.bio-sez { border-top: 1px solid var(--linea); }
.bio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.citazione { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: .98; text-transform: uppercase; }
.citazione em { font-style: normal; color: var(--azzurro); }
.citazione .pr { transition: color .3s; }
.citazione.colora .pr { color: var(--gesso); }
.bio .testi { display: grid; gap: 18px; color: var(--argento); font-size: 1.12rem; }
.bio .testi p { margin: 0; max-width: 60ch; }
@media (max-width: 860px) { .bio { grid-template-columns: minmax(0, 1fr); } }

/* Carriera orizzontale */
.carriera { border-block: 1px solid var(--linea); background: linear-gradient(180deg, var(--asfalto), var(--asfalto-2)); overflow: hidden; }
.carriera-pin { padding-block: clamp(72px, 9vw, 110px); }
.carriera-testa { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); }
.pista-oriz { position: relative; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); width: max-content; min-width: 100%; }
.tracciato { position: relative; height: 40px; margin-bottom: 28px; transform: translateZ(0); }
.tracciato::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 4px; background: repeating-linear-gradient(90deg, var(--linea) 0 18px, transparent 18px 30px); }
.riempi { position: absolute; left: 0; top: 18px; height: 4px; width: 100%; background: linear-gradient(90deg, var(--azzurro-2), var(--azzurro)); transform: scaleX(var(--prog, 1)); transform-origin: left; }
/* il kart ha un suo livello grafico e niente filtri: così scorrendo avanti e indietro non lascia scie sullo schermo */
.kart { position: absolute; top: -6px; left: 0; width: 106px; height: 51px; overflow: visible; transform: translate3d(calc(var(--prog, 1) * (var(--lungh, 0px) - 106px)), 0, 0); will-change: transform; backface-visibility: hidden; }
.tappe { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 380px); gap: 20px; }
.tappa { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; background: var(--asfalto-3); border: 1px solid var(--linea); min-height: 230px; }
.tappa::before { content: ""; position: absolute; top: -37px; left: 22px; width: 12px; height: 12px; background: var(--asfalto); border: 3px solid var(--azzurro); transform: rotate(45deg); }
.tappa .anno { font-family: var(--f-display); font-weight: 900; font-size: 3.2rem; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--azzurro); }
.tappa h3 { font-size: 1.65rem; line-height: 1; }
.tappa p { margin: 0; color: var(--nebbia); font-size: .97rem; }
@media (max-width: 860px) {
  .pista-oriz { width: auto; padding-inline: var(--gutter); }
  .tracciato { display: none; }
  .tappe { grid-auto-flow: row; grid-auto-columns: auto; }
  .tappa { min-height: 0; }
  .tappa::before { display: none; }
}

.carriera.senza-pin .pista-oriz { width: auto; overflow-x: auto; padding-bottom: 12px; }

/* Cinema: foto a tutto schermo che si apre */
.cinema { position: relative; height: clamp(380px, 70vh, 720px); overflow: hidden; display: grid; align-items: end; isolation: isolate; }
.cinema-img { position: absolute; inset: 0; z-index: -1; clip-path: polygon(calc(var(--clip, 8%) + 6%) var(--clip, 8%), calc(100% - var(--clip, 8%)) var(--clip, 8%), calc(100% - var(--clip, 8%) - 6%) calc(100% - var(--clip, 8%)), var(--clip, 8%) calc(100% - var(--clip, 8%))); }
.cinema-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.15)); }
.cinema-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 15, 21, .1) 30%, rgba(11, 15, 21, .85)); }
.cinema .mira-strato { transform: scale(var(--zoom, 1.15)); }
@media (max-width: 760px) { .cinema-img img { object-position: 100% 50%; } }
.cinema-testo { padding-block: 0 clamp(36px, 6vw, 72px); display: grid; gap: 14px; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.cinema-frase { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .92; text-transform: uppercase; }
.cinema-frase em { font-style: normal; color: var(--azzurro); }

/* Galleria: carosello orizzontale */
.carosello { position: relative; }
.car-traccia {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scrollbar-width: none; cursor: grab; perspective: 1200px; padding-block: 6px;
}
.car-traccia::-webkit-scrollbar { display: none; }
.car-traccia.trascina { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.car-traccia figure { position: relative; flex: 0 0 auto; height: clamp(300px, 58vh, 540px); aspect-ratio: 2 / 3; margin: 0; overflow: hidden; scroll-snap-align: start; background: var(--asfalto-2); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .45s var(--ease); }
.car-traccia figure.o { aspect-ratio: 3 / 2; }
.car-traccia img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: saturate(.9); pointer-events: none; user-select: none; }
.car-traccia figure:hover img { transform: scale(1.06); filter: saturate(1.15); }
.car-traccia figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 14px; background: linear-gradient(180deg, transparent, rgba(11, 15, 21, .92)); font-family: var(--f-crono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--argento); }
.car-traccia figcaption b { display: block; font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .02em; color: var(--gesso); }
.car-traccia figure .num { position: absolute; top: 12px; left: 14px; font-family: var(--f-crono); font-size: .72rem; letter-spacing: .14em; color: var(--gesso); background: rgba(11, 15, 21, .6); padding: 4px 8px; }
.car-controlli { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; margin-top: 22px; }
.car-controlli button { width: 52px; height: 52px; border: 1px solid var(--linea); background: transparent; color: var(--gesso); font-size: 1.1rem; cursor: pointer; transition: background .25s, border-color .25s; }
.car-controlli button:hover { background: var(--azzurro); border-color: var(--azzurro); }
.car-barra { height: 3px; background: var(--linea); position: relative; overflow: hidden; }
.car-barra i { position: absolute; inset: 0; background: var(--azzurro); transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform .2s; }
.car-num { font-family: var(--f-crono); font-size: .8rem; letter-spacing: .14em; color: var(--nebbia); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .car-controlli { grid-template-columns: auto minmax(0, 1fr) auto; } .car-num { display: none; } .car-traccia figure { height: 420px; } }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6, 9, 13, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 24px 16px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; min-width: 0; }
.lightbox img { max-height: 82vh; width: auto; max-width: 100%; box-shadow: 0 40px 80px -30px #000; }
.lightbox figcaption { font-family: var(--f-crono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--argento); text-align: center; }
.lightbox button { background: transparent; border: 1px solid var(--linea); color: var(--gesso); width: 48px; height: 48px; font-size: 1.1rem; cursor: pointer; transition: background .25s; }
.lightbox button:hover { background: var(--azzurro); border-color: var(--azzurro); }
.lb-chiudi { position: absolute; top: 16px; right: 16px; }

/* Box: team e partner */
.box { border-top: 1px solid var(--linea); }
.box-blocco + .box-blocco { margin-top: clamp(56px, 8vw, 96px); }
.box-sotto { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; font-family: var(--f-crono); font-weight: 600; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--argento); }
.box-sotto span { color: var(--azzurro); }
.box-sotto::after { content: ""; flex: 1; height: 1px; background: var(--linea); align-self: center; }

/* Scheda team: righe tipo monitor dei tempi */
.scheda-team { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.scheda-team li { position: relative; display: grid; grid-template-columns: 44px 150px minmax(0, 1fr) minmax(0, auto); gap: 20px; align-items: center; padding: 20px 8px; border-bottom: 1px solid var(--linea); overflow: hidden; }
.scheda-team li::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--azzurro-tenue), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.scheda-team li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--azzurro); transform: scaleY(0); transition: transform .4s var(--ease); }
.scheda-team li:hover::before { transform: none; }
.scheda-team li:hover::after { transform: none; }
.scheda-team li > * { position: relative; }
.scheda-team .pos { font-family: var(--f-crono); font-size: .8rem; color: var(--nebbia); }
.scheda-team .ruolo { font-family: var(--f-crono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--azzurro); }
.scheda-team .nome { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; text-transform: uppercase; transition: transform .4s var(--ease); }
.scheda-team li:hover .nome { transform: translateX(8px); }
.scheda-team .nota { font-size: .92rem; color: var(--nebbia); text-align: right; }
@media (max-width: 720px) {
  .scheda-team li { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 16px 4px; }
  .scheda-team .pos { grid-row: span 3; align-self: start; padding-top: 2px; }
  .scheda-team .nota { text-align: left; }
  .scheda-team .nota:empty { display: none; }
}

/* Loghi dei partner (compaiono solo quando ci sono sponsor in dati.js) */
.loghi-partner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-bottom: 20px; }
.loghi-partner[hidden] { display: none; }
.loghi-partner > * { display: grid; place-items: center; gap: 8px; min-height: 120px; padding: 22px; background: var(--asfalto); text-decoration: none; transition: background .3s; }
.loghi-partner > *:hover { background: var(--asfalto-2); }
.loghi-partner img { max-height: 54px; width: auto; filter: grayscale(1) brightness(1.6); opacity: .8; transition: filter .3s, opacity .3s; }
.loghi-partner > *:hover img { filter: none; opacity: 1; }
.loghi-partner b { font-family: var(--f-display); font-size: 1.5rem; text-transform: uppercase; }
.loghi-partner span { font-family: var(--f-crono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--nebbia); }

/* Pannello partnership */
.partnership { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: linear-gradient(120deg, var(--asfalto-3), var(--asfalto-2) 55%); border: 1px solid var(--linea); overflow: hidden; }
.partnership::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 85%) var(--my, 10%), var(--azzurro-tenue), transparent 60%); }
.pship-foto { position: relative; min-height: 100%; clip-path: polygon(0 0, 100% 0, calc(86% - var(--taglio, 0%) * .86) 100%, 0 100%); }
.pship-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.pship-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(11, 15, 21, .55)); }
.pship-testo { position: relative; z-index: 1; display: grid; gap: 20px; align-content: center; padding: clamp(28px, 4.5vw, 60px) clamp(24px, 4.5vw, 60px) clamp(28px, 4.5vw, 60px) clamp(8px, 2vw, 24px); }
.pship-titolo { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 5.4vw, 4.2rem); line-height: .92; text-transform: uppercase; }
.pship-titolo em { font-style: normal; color: var(--azzurro); }
.pship-intro { margin: 0; color: var(--nebbia); max-width: 52ch; }
.spazi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.spazi li { display: grid; gap: 6px; align-content: start; padding: 16px 16px 18px; background: var(--asfalto-2); }
.spazi b { font-family: var(--f-crono); font-weight: 600; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gesso); }
.spazi b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--azzurro); transform: skewX(-20deg); }
.spazi span { font-size: .9rem; line-height: 1.45; color: var(--nebbia); }
.pship-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.pship-info { font-family: var(--f-crono); font-size: .88rem; line-height: 1.7; color: var(--argento); }
.pship-info a { text-decoration: none; }
@media (max-width: 860px) {
  .partnership { grid-template-columns: minmax(0, 1fr); }
  .pship-foto { min-height: 0; height: clamp(220px, 52vw, 340px); clip-path: polygon(0 0, 100% 0, 100% calc(88% - var(--taglio, 0%) * .88), 0 100%); }
  .pship-foto img { object-position: 50% 66%; }
  .pship-foto::after { background: linear-gradient(180deg, transparent 50%, rgba(11, 15, 21, .55)); }
  .pship-testo { padding: 8px 22px 28px; }
}
@media (max-width: 600px) { .spazi { grid-template-columns: minmax(0, 1fr); } }

/* Stampa */
.stampa { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linea); }
.stampa a { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px 6px; border-bottom: 1px solid var(--linea); text-decoration: none; transition: padding .4s var(--ease), background .3s; }
.stampa a:hover { padding-inline: 18px; background: var(--asfalto-2); }
.stampa .testata { font-family: var(--f-crono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--azzurro); }
.stampa .titolo { font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; text-transform: uppercase; line-height: 1.05; min-width: 0; }
.stampa .freccia { font-family: var(--f-crono); color: var(--nebbia); transition: transform .4s var(--ease), color .3s; }
.stampa a:hover .freccia { transform: translate(4px, -4px); color: var(--gesso); }
@media (max-width: 600px) { .stampa a { grid-template-columns: minmax(0, 1fr) auto; } .stampa .testata { grid-column: 1 / -1; } }

/* Footer */
footer { border-top: 1px solid var(--linea); padding-block: 56px 40px; position: relative; overflow: hidden; }
footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: conic-gradient(var(--gesso) 25%, var(--asfalto) 0 50%, var(--gesso) 0 75%, var(--asfalto) 0) 0 0 / 14px 14px; opacity: .8; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: end; padding-top: 18px; }
footer .grande { font-family: var(--f-display); font-weight: 900; font-size: clamp(4rem, 14vw, 10rem); line-height: .82; text-transform: uppercase; transform: skewX(-8deg); }
footer .meta { font-family: var(--f-crono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nebbia); display: grid; gap: 6px; text-align: right; }
footer .meta a { color: var(--azzurro); text-decoration: none; }
footer .grande .punto { color: var(--azzurro); }
footer .diritti { margin-top: 34px; padding-top: 18px; background: linear-gradient(var(--linea), var(--linea)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; align-items: center; font-family: var(--f-crono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nebbia); gap: 8px 24px; }
footer .diritti a { color: var(--argento); text-decoration: none; }
footer .diritti a:hover { color: var(--gesso); }
footer .meta .ita { justify-content: flex-end; }
@media (max-width: 600px) { footer .meta { text-align: left; } footer .meta .ita { justify-content: flex-start; } footer .diritti { display: grid; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Bio: link alla storia */
#bio { display: grid; gap: 18px; }
.bio .testi .bottone { justify-self: start; margin-top: 8px; }

/* Sempre accanto */
.accanto { position: relative; padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--linea); background: radial-gradient(900px 500px at 20% 50%, rgba(229, 57, 44, .07), transparent 70%); overflow: hidden; }
.accanto-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.accanto-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.accanto-foto img { width: 100%; height: 115%; object-fit: cover; object-position: 30% 40%; transform: translateY(var(--sp, 0%)); }
.accanto-foto::after { content: ""; position: absolute; left: 0; right: 8%; bottom: 0; height: 6px; background: repeating-linear-gradient(-60deg, var(--cordolo) 0 10px, var(--gesso) 10px 20px); }
.accanto-testo { display: grid; gap: 20px; }
.accanto-titolo { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 7vw, 5.6rem); line-height: .88; text-transform: uppercase; }
#accanto-testo { display: grid; gap: 14px; color: var(--argento); font-size: 1.12rem; }
#accanto-testo p { margin: 0; max-width: 46ch; }
@media (max-width: 860px) { .accanto-griglia { grid-template-columns: minmax(0, 1fr); } .accanto-foto { aspect-ratio: 4 / 4.4; clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); } .accanto-foto::after { display: none; } }

/* Galleria in home: filtri + link alla pagina completa */
.galleria-azioni { display: grid; gap: 14px; justify-items: end; }
.link-galleria { font-family: var(--f-crono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gesso); text-decoration: none; border-bottom: 1px solid var(--azzurro); padding-bottom: 4px; }
.link-galleria:hover { color: var(--azzurro); }
.car-tutte { flex: none; display: grid; align-content: center; justify-items: start; gap: 8px; width: clamp(220px, 26vw, 320px); height: clamp(300px, 58vh, 540px); padding: 28px; scroll-snap-align: start; text-decoration: none; background: linear-gradient(140deg, var(--azzurro-2), var(--asfalto-3)); border: 1px solid var(--linea); transition: transform .4s var(--ease); }
.car-tutte:hover { transform: translateY(-6px); }
.car-tutte b { font-family: var(--f-display); font-weight: 900; font-size: clamp(4rem, 8vw, 6rem); line-height: .85; }
.car-tutte span { font-family: var(--f-crono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--argento); }
.car-tutte i { font-style: normal; margin-top: 18px; font-family: var(--f-crono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gesso); border-bottom: 1px solid var(--gesso); padding-bottom: 4px; }
@media (max-width: 720px) { .galleria-azioni { justify-items: start; width: 100%; } }

/* ---------- Pagine secondarie: storia e galleria ---------- */
.titolo-pagina { font-size: clamp(3.4rem, 10vw, 8rem); line-height: .86; }
.titolo-pagina em { font-style: normal; color: var(--azzurro); }
/* H1 in due parti (etichetta con il nome + slogan): il contenitore non crea un box, i due pezzi restano impaginati come prima */
.h1-doppio { display: contents; }
.h1-doppio .titolo-pagina { display: block; }
.h1-doppio .etichetta { line-height: 1.6; text-wrap: wrap; justify-self: start; }
.testa-pagina { padding-block: clamp(130px, 18vw, 200px) clamp(20px, 4vw, 40px); background: radial-gradient(900px 420px at 80% 0%, var(--azzurro-tenue), transparent 70%); }
.testa-pagina .wrap { display: grid; gap: 22px; }
.sotto-pagina { margin: 0; color: var(--nebbia); font-size: 1.12rem; max-width: 52ch; }

/* Galleria: mosaico a colonne */
.mosaico { columns: 3 300px; column-gap: 14px; }
.mosaico figure { position: relative; margin: 0 0 14px; break-inside: avoid; overflow: hidden; cursor: zoom-in; background: var(--asfalto-2); }
.mosaico img { width: 100%; height: auto; transition: transform .7s var(--ease), filter .4s; }
.mosaico figure:hover img { transform: scale(1.05); filter: saturate(1.15); }
.mosaico figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; display: grid; gap: 2px; font-family: var(--f-crono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--argento); background: linear-gradient(transparent, rgba(6, 9, 13, .9)); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--ease); }
.mosaico figcaption b { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: .02em; color: var(--gesso); }
.mosaico figure:hover figcaption, .mosaico figure:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) { .mosaico figcaption { opacity: 1; transform: none; } }
@media (max-width: 600px) { .mosaico { columns: 2; column-gap: 8px; } .mosaico figure { margin-bottom: 8px; } .mosaico figcaption { display: none; } }

.video-sez[hidden] { display: none; }
.video-sez { padding-bottom: 0; }
.video-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 14px; }
.video-card { margin: 0; display: grid; gap: 10px; }
.video-card video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; border: 1px solid var(--linea); }
.video-card figcaption { display: grid; gap: 2px; font-family: var(--f-crono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nebbia); }
.video-card figcaption b { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: .02em; color: var(--gesso); }
@media (max-width: 600px) { .video-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* Storia */
.storia-hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; padding-block: 140px clamp(48px, 7vw, 90px); overflow: hidden; }
.storia-hero-foto { position: absolute; inset: 0; z-index: -1; }
.storia-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: .55; }
.storia-hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--asfalto) 15%, rgba(11, 15, 21, .55) 60%, rgba(11, 15, 21, .2)), linear-gradient(0deg, var(--asfalto), transparent 45%); }
.storia-hero .wrap { display: grid; gap: 22px; }
.storia-fatti { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.storia-fatti li { font-family: var(--f-crono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--linea); background: rgba(18, 24, 33, .7); color: var(--argento); }
.storia-intro { border-top: 1px solid var(--linea); }
.intro-testo { display: grid; gap: 20px; max-width: 900px; }
.intro-testo p { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--argento); }
.intro-testo p:first-child { color: var(--gesso); }

.capitolo { padding-block: clamp(48px, 7vw, 100px); border-top: 1px solid var(--linea); }
.capitolo-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.capitolo.pari .cap-foto { order: 2; }
.cap-foto { position: sticky; top: 100px; aspect-ratio: 4 / 5; overflow: hidden; }
.cap-foto img { width: 100%; height: 112%; object-fit: cover; margin-top: -6%; }
.cap-num { position: absolute; left: 14px; bottom: 6px; font-family: var(--f-display); font-weight: 900; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--gesso); opacity: .85; }
.cap-testo { display: grid; gap: 18px; }
.cap-testo h2 { margin-bottom: 6px; }
.cap-testo p { margin: 0; color: var(--argento); font-size: 1.12rem; max-width: 56ch; }
.cap-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin-top: 10px; background: var(--linea); border: 1px solid var(--linea); }
.cap-numeri div { display: grid; gap: 6px; padding: 18px 16px; background: var(--asfalto-2); }
.cap-numeri b { font-family: var(--f-display); font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--gesso); }
.cap-numeri span { font-family: var(--f-crono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azzurro); }
.storia-fine { border-top: 1px solid var(--linea); }
.storia-fine .wrap { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 860px) {
  .capitolo-griglia { grid-template-columns: minmax(0, 1fr); }
  .capitolo.pari .cap-foto { order: 0; }
  .cap-foto { position: relative; top: 0; aspect-ratio: 4 / 3.4; }
}
.testa-griglia { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.testa-testo { display: grid; gap: 22px; }
.testa-pagina { padding-block: clamp(110px, 14vw, 150px) clamp(20px, 4vw, 40px); overflow: hidden; }
.collage { position: relative; height: clamp(360px, 46vw, 520px); }
.collage img { position: absolute; width: 52%; aspect-ratio: 2 / 3; object-fit: cover; border: 4px solid var(--asfalto-3); box-shadow: 0 30px 60px -20px #000; }
.collage img:nth-child(1) { left: 0; top: 8%; transform: rotate(-7deg); z-index: 1; }
.collage img:nth-child(2) { left: 26%; top: 0; transform: rotate(3deg); z-index: 3; }
.collage img:nth-child(3) { right: 0; top: 14%; transform: rotate(9deg); z-index: 2; }
@media (max-width: 860px) { .testa-griglia { grid-template-columns: minmax(0, 1fr); } .collage { height: 300px; max-width: 420px; } }
.cap-testo h2 { font-size: clamp(2.1rem, 6.4vw, 4.6rem); overflow-wrap: anywhere; }

/* ---------- Team attuale: KGT Motorsport ---------- */
.kgt { position: relative; padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--linea); overflow: hidden; background: linear-gradient(160deg, #150d10 0%, var(--asfalto) 45%, var(--asfalto) 100%); }
.kgt::before { content: ""; position: absolute; top: 0; left: -10%; width: 55%; height: 10px; background: var(--cordolo); transform: skewX(-30deg); }
.kgt-sfondo { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-start; overflow: hidden; }
.kgt-sfondo span { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: clamp(14rem, 42vw, 40rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(229, 57, 44, .22); white-space: nowrap; margin-top: -2vw; }
.kgt-testa { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.kgt-intro { display: grid; gap: 18px; }
.kgt-intro .etichetta { color: var(--cordolo); }
#kgt-testo { display: grid; gap: 14px; color: var(--argento); font-size: 1.1rem; }
#kgt-testo p { margin: 0; max-width: 58ch; }
.kgt-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--linea); border: 1px solid var(--linea); }
.kgt-dati div { padding: 18px; background: rgba(18, 24, 33, .85); display: grid; gap: 6px; }
.kgt-dati dt { font-family: var(--f-crono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cordolo); }
.kgt-dati dd { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.kgt-bento { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(170px, 20vw, 285px)) clamp(240px, 27vw, 370px); grid-template-areas: "a a a b" "a a a b" "c d e f"; gap: 12px; margin-bottom: 28px; }
.kgt-bento figure { position: relative; margin: 0; overflow: hidden; background: var(--asfalto-2); }
.kgt-bento figure:nth-child(1) { grid-area: a; } .kgt-bento figure:nth-child(2) { grid-area: b; } .kgt-bento figure:nth-child(3) { grid-area: c; }
.kgt-bento figure:nth-child(4) { grid-area: d; } .kgt-bento figure:nth-child(5) { grid-area: e; } .kgt-bento figure:nth-child(6) { grid-area: f; } .kgt-bento figure:nth-child(n+7) { display: none; }
.kgt-bento figure:first-child figcaption { opacity: 1; font-size: .78rem; padding: 50px 20px 16px; }
.kgt-bento img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; }
.kgt-bento figure:hover img { transform: scale(1.06); filter: saturate(1.2); }
.kgt-bento figure::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--cordolo); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.kgt-bento figure:hover::after { transform: none; }
.kgt-bento figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-family: var(--f-crono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gesso); background: linear-gradient(transparent, rgba(6, 9, 13, .85)); opacity: 0; transition: opacity .35s; }
.kgt-bento figure:hover figcaption { opacity: 1; }
.kgt .link-galleria { border-color: var(--cordolo); }
@media (max-width: 860px) {
  .kgt-testa { grid-template-columns: minmax(0, 1fr); }
  .kgt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(2, clamp(220px, 62vw, 320px)); grid-template-areas: "a a" "b c" "d e"; gap: 8px; }
  .kgt-bento figure:first-child { aspect-ratio: 3 / 2; }
  .kgt-bento figure:nth-child(6) { display: none; }
}

/* ---------- Tocco italiano ---------- */
.bandierina { display: inline-block; flex: none; width: 21px; height: 14px; background: linear-gradient(90deg, var(--verde) 33.3%, var(--bianco-it) 0 66.6%, var(--cordolo) 0); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); transform: skewX(-12deg); }
.ita { display: inline-flex; align-items: center; gap: 10px; }
.numero-fondo { letter-spacing: .02em; }

/* ---------- Home: invito al curriculum ---------- */
.cv-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 22px; padding: clamp(26px, 4vw, 44px); text-decoration: none; color: var(--gesso); overflow: hidden; isolation: isolate;
  background: linear-gradient(115deg, var(--azzurro-2), #123a8c 55%, var(--asfalto-3)); border: 1px solid color-mix(in srgb, var(--azzurro) 50%, var(--linea)); }
.cv-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(255, 255, 255, .05) 22px 24px); transition: transform .9s var(--ease); }
.cv-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--verde) 33.3%, var(--bianco-it) 0 66.6%, var(--cordolo) 0); transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--ease); }
.cv-cta:hover::before { transform: translateX(48px); }
.cv-cta:hover::after { transform: scaleX(1); }
.cv-cta-fondo { position: absolute; right: -2%; top: 50%; z-index: -1; transform: translateY(-50%) skewX(-8deg); font-family: var(--f-display); font-weight: 900; font-size: clamp(5rem, 16vw, 13rem); line-height: .8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); white-space: nowrap; transition: transform .9s var(--ease); }
.cv-cta:hover .cv-cta-fondo { transform: translateY(-50%) translateX(-40px) skewX(-8deg); }
.cv-cta-testo { display: grid; gap: 10px; }
.cv-cta .etichetta { color: rgba(255, 255, 255, .8); }
.cv-cta b { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 5vw, 3.6rem); line-height: .92; text-transform: uppercase; }
.cv-cta-meta { font-family: var(--f-crono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.cv-cta-freccia { display: grid; place-items: center; width: clamp(56px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%; background: var(--gesso); color: var(--asfalto); font-size: clamp(1.4rem, 2.4vw, 2rem); transition: transform .5s var(--ease); }
.cv-cta:hover .cv-cta-freccia { transform: translateX(6px) rotate(-12deg); }
.tappa-tutte { text-decoration: none; color: var(--gesso); background: linear-gradient(140deg, var(--azzurro-2), var(--asfalto-3)); }
.tappa-tutte i { font-style: normal; font-size: 2rem; transition: transform .4s var(--ease); }
.tappa-tutte:hover i { transform: translateX(8px); }
.tappa-tutte .anno { -webkit-text-stroke-color: var(--gesso); }

/* ---------- Pagina Carriera ---------- */
.cv-hero { position: relative; padding-block: clamp(120px, 15vw, 180px) clamp(40px, 6vw, 70px); overflow: hidden; background: radial-gradient(900px 480px at 85% 0%, var(--azzurro-tenue), transparent 70%); }
.cv-hero .wrap { position: relative; display: grid; gap: 22px; }
.cv-scritta { position: absolute; left: 0; top: clamp(70px, 9vw, 110px); font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: clamp(8rem, 26vw, 24rem); line-height: .8; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(58, 130, 255, .16); pointer-events: none; }
.cv-intro { margin: 0; max-width: 52ch; color: var(--argento); font-size: 1.15rem; }
.cv-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 18px 0 0; background: var(--linea); border: 1px solid var(--linea); }
.cv-numeri div { display: grid; gap: 8px; padding: 20px 18px; background: color-mix(in srgb, var(--asfalto-2) 88%, transparent); }
.cv-numeri dt { order: 2; font-family: var(--f-crono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azzurro); }
.cv-numeri dd { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .9; }
.cv-linea { padding-block: 20px clamp(60px, 8vw, 110px); }
.cv-comandi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: clamp(30px, 5vw, 60px); }
.cv-anni { position: relative; --col: clamp(150px, 22vw, 290px); }
.cv-tracciato { position: absolute; top: 0; bottom: 0; left: var(--col); width: 2px; background: var(--linea); }
.cv-tracciato span { position: absolute; inset: 0; background: linear-gradient(var(--verde), var(--bianco-it), var(--cordolo)); transform: scaleY(var(--prog, 0)); transform-origin: top; box-shadow: 0 0 14px rgba(255, 255, 255, .25); }
.cv-anno { position: relative; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); padding-bottom: clamp(40px, 6vw, 80px); }
.cv-anno[hidden] { display: none; }
.cv-anno-testa { position: sticky; top: 96px; align-self: start; display: grid; gap: 8px; padding-right: 28px; }
.cv-anno-n { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(3.4rem, 8vw, 7rem); line-height: .82; transform: skewX(-8deg); transform-origin: left; color: transparent; -webkit-text-stroke: 1.5px var(--nebbia); transition: color .5s, -webkit-text-stroke-color .5s; }
.cv-anno-n.lungo { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.cv-anno.attivo .cv-anno-n { color: var(--gesso); -webkit-text-stroke-color: var(--gesso); }
.cv-anno-meta { font-family: var(--f-crono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nebbia); }
.cv-voci { display: grid; gap: 12px; padding-left: clamp(26px, 4vw, 50px); }
.cv-voce { position: relative; }
.cv-voce::before { content: ""; position: absolute; left: calc(-1 * clamp(26px, 4vw, 50px) - 6px); top: 30px; width: 10px; height: 10px; background: var(--asfalto); border: 2px solid var(--linea); transform: rotate(45deg); transition: background .4s, border-color .4s; }
.cv-voce.passata::before { background: var(--gesso); border-color: var(--gesso); }
.cv-voce.passata[data-pos="1"]::before { background: var(--oro); border-color: var(--oro); }
.cv-gara { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px clamp(18px, 3vw, 34px); align-items: start; padding: clamp(20px, 3vw, 30px); background: var(--asfalto-2); border: 1px solid var(--linea); transition: background .3s, border-color .3s; }
.cv-gara:hover { background: var(--asfalto-3); border-color: color-mix(in srgb, var(--azzurro) 40%, var(--linea)); }
.cv-gara::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, -100%) var(--my, 50%), rgba(58, 130, 255, .12), transparent 60%); }
.cv-pos { font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 6vw, 4.6rem); line-height: .8; min-width: 2ch; transform: skewX(-8deg); color: var(--argento); }
.cv-pos small { font-size: .4em; color: var(--azzurro); margin-right: 1px; }
.cv-gara[data-pos="1"] .cv-pos { color: var(--oro); }
.cv-gara[data-pos="2"] .cv-pos { color: var(--argento); }
.cv-gara[data-pos="3"] .cv-pos { color: var(--bronzo); }
.cv-gara[data-pos="1"] { box-shadow: inset 3px 0 0 var(--oro); }
.cv-gara[data-pos="2"] { box-shadow: inset 3px 0 0 var(--argento); }
.cv-gara[data-pos="3"] { box-shadow: inset 3px 0 0 var(--bronzo); }
.cv-gara[data-pos=""] .cv-pos, .cv-gara:not([data-pos="1"]):not([data-pos="2"]):not([data-pos="3"]) .cv-pos { color: var(--nebbia); }
.cv-corpo { display: grid; gap: 6px; min-width: 0; }
.cv-sopra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--f-crono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nebbia); }
.cv-corpo h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; }
.cv-luogo { color: var(--argento); font-size: .98rem; }
.cv-corpo p { margin: 4px 0 0; color: var(--nebbia); max-width: 62ch; }
.cv-corpo .fonti { margin-top: 6px; font-size: .82rem; color: var(--nebbia); }
.cv-corpo .fonti a { color: var(--azzurro); text-decoration: none; }
.cv-gara .cat { margin-left: 0; transform: none; }
.paese { display: inline-flex; align-items: center; gap: 7px; }
.paese .bandierina[data-p="BE"] { background: linear-gradient(90deg, #111 33.3%, #f2c230 0 66.6%, #e5392c 0); }
.paese .bandierina[data-p="FR"] { background: linear-gradient(90deg, #1f4fbf 33.3%, #f4f5f7 0 66.6%, #e5392c 0); }
.paese .bandierina[data-p="DE"] { background: linear-gradient(#111 33.3%, #e5392c 0 66.6%, #f2c230 0); }
.paese .bandierina[data-p="ES"] { background: linear-gradient(#c8102e 25%, #f2c230 0 75%, #c8102e 0); }
.paese .bandierina[data-p="NL"] { background: linear-gradient(#c8102e 33.3%, #f4f5f7 0 66.6%, #1f4fbf 0); }
.paese .bandierina[data-p="PT"] { background: linear-gradient(90deg, #046a38 40%, #da291c 0); }
.cv-tappa { display: grid; gap: 6px; padding: clamp(18px, 2.6vw, 26px); border: 1px dashed color-mix(in srgb, var(--azzurro) 55%, var(--linea)); background: linear-gradient(115deg, var(--azzurro-tenue), transparent 70%); }
.cv-tappa .etichetta { font-size: .66rem; }
.cv-tappa h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1; }
.cv-tappa p { margin: 0; color: var(--argento); max-width: 62ch; }
@media (max-width: 760px) {
  .cv-anni { --col: 0px; }
  .cv-tracciato { left: 5px; }
  .cv-anno { grid-template-columns: minmax(0, 1fr); }
  .cv-anno-testa { position: relative; top: 0; padding: 0 0 16px 28px; }
  .cv-voci { padding-left: 28px; }
  .cv-voce::before { left: -27px; }
  .cv-gara { grid-template-columns: auto minmax(0, 1fr); }
  .cv-gara .badge { grid-column: 2; justify-self: start; }
  .cv-pos { grid-row: 1 / span 2; }
}

/* ---------- Domande frequenti ---------- */
/* faq.html: contenuto scritto da strumenti/seo.js con i testi di dati/seo.js */
.faq-sez { padding-top: clamp(24px, 4vw, 48px); }
.faq-griglia { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-lista { border-top: 1px solid var(--linea); }
.faq-voce { border-bottom: 1px solid var(--linea); interpolate-size: allow-keywords; }
.faq-voce summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 22px 0; }
.faq-voce summary::-webkit-details-marker { display: none; }
.faq-voce summary h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.1; transition: color .3s; }
.faq-voce summary:hover h2 { color: var(--azzurro); }
.faq-voce summary i { position: relative; width: 28px; height: 28px; border: 1px solid var(--linea); transition: transform .4s var(--ease), border-color .3s; }
.faq-voce summary i::before, .faq-voce summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--gesso); transition: transform .4s var(--ease); }
.faq-voce summary i::after { transform: rotate(90deg); }
.faq-voce[open] summary i { transform: rotate(180deg); border-color: var(--azzurro); }
.faq-voce[open] summary i::after { transform: rotate(0deg); }
.faq-voce::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq-voce[open]::details-content { block-size: auto; }
.faq-risposta p { margin: 0 0 24px; max-width: 64ch; color: var(--argento); }
.faq-risposta a, .faq-dati a { color: var(--azzurro); }
.faq-scheda { position: sticky; top: 100px; padding: clamp(22px, 3vw, 32px); background: linear-gradient(160deg, var(--asfalto-3), var(--asfalto-2)); border: 1px solid var(--linea); }
.faq-scheda-titolo { margin: 0 0 14px; font-size: 1.1rem; letter-spacing: .06em; color: var(--nebbia); }
.faq-dati + .faq-scheda-titolo { margin-top: 28px; }
.faq-dati { margin: 0; display: grid; gap: 10px; }
.faq-dati div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; font-size: .95rem; }
.faq-dati dt { font-family: var(--f-crono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nebbia); padding-top: 3px; }
.faq-dati dd { margin: 0; }
.faq-podi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.faq-podi li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; font-size: .92rem; line-height: 1.25; }
.faq-podi b { font-family: var(--f-display); font-size: 1.5rem; font-style: italic; }
.faq-podi li[data-pos="1"] b { color: var(--oro); }
.faq-podi li[data-pos="2"] b { color: var(--argento); }
.faq-podi li[data-pos="3"] b { color: var(--bronzo); }
.faq-podi small { display: block; color: var(--nebbia); font-size: .8rem; }
.faq-tutte { display: inline-block; margin-top: 20px; font-family: var(--f-crono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azzurro); text-decoration: none; }
@media (max-width: 860px) {
  .faq-griglia { grid-template-columns: minmax(0, 1fr); }
  .faq-scheda { position: static; }
  .faq-dati div { grid-template-columns: 8em minmax(0, 1fr); }
}

/* ---------- Pagine gara e inglese ---------- */
/* gare/<id>.html ed en.html: create da strumenti/seo.js, usano anche gli stili delle FAQ (scheda, dati, podi) */
.gara-hero { position: relative; overflow: hidden; padding: clamp(110px, 14vw, 170px) 0 clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--linea); }
.gara-hero .cv-scritta { font-size: clamp(14rem, 34vw, 30rem); }
.briciole { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-crono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nebbia); margin-bottom: 28px; }
.briciole a { color: var(--argento); text-decoration: none; }
.briciole a:hover { color: var(--azzurro); }
.gara-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.gara-pos { font-family: var(--f-display); font-weight: 900; font-size: clamp(6rem, 16vw, 12rem); line-height: .8; transform: skewX(-8deg); color: var(--gesso); }
.gara-pos small { font-size: .38em; color: var(--azzurro); -webkit-text-fill-color: var(--azzurro); }
.gara-hero[data-pos="1"] .gara-pos, .gara-hero[data-pos="2"] .gara-pos, .gara-hero[data-pos="3"] .gara-pos { -webkit-background-clip: text; background-clip: text; color: transparent; animation: trofeo-luccica 5s var(--ease) infinite; background-size: 300% 100%; }
.gara-hero[data-pos="1"] .gara-pos { background-image: linear-gradient(105deg, #8f6406, #e2ac1c 28%, #fff4c4 42%, #fff 48%, #ffe07a 54%, #e2ac1c 70%, #8f6406); }
.gara-hero[data-pos="2"] .gara-pos { background-image: linear-gradient(105deg, #5f6b7c, #a3aebd 28%, #f6f8fb 42%, #fff 48%, #e3e8ef 54%, #a3aebd 70%, #5f6b7c); }
.gara-hero[data-pos="3"] .gara-pos { background-image: linear-gradient(105deg, #74401a, #c27436 28%, #ffe0c2 42%, #fff 48%, #f2b583 54%, #c27436 70%, #74401a); }
.gara-h1 { margin: 10px 0 0; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: .95; text-transform: uppercase; }
.gara-h1 em { display: block; font-style: normal; color: var(--azzurro); font-size: .62em; margin-top: 8px; }
.gara-luogo { margin: 12px 0 14px; color: var(--argento); }
.gara-sez { padding-top: clamp(32px, 5vw, 64px); }
.gara-lead { margin: 0; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; color: var(--gesso); max-width: 60ch; }
.gara-fonti { margin-top: 18px; font-family: var(--f-crono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nebbia); }
.gara-fonti a, .en-testo a, .faq-podi a { color: var(--azzurro); text-decoration: none; }
.faq-podi a { color: var(--gesso); }
.faq-podi a:hover, .gara-fonti a:hover { color: var(--azzurro); }
.gara-foto { margin-top: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gara-foto figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--asfalto-2); }
.gara-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gara-foto figure:hover img { transform: scale(1.06); }
.gara-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-size: .82rem; background: linear-gradient(0deg, rgba(11, 15, 21, .85), transparent); }
.cv-scheda { display: inline-block; margin-top: 10px; font-family: var(--f-crono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azzurro); text-decoration: none; }
.cv-scheda:hover { text-decoration: underline; }
.ultima.trofeo h3 a { color: inherit; text-decoration: none; }
.ultima.trofeo h3 a:hover { color: var(--azzurro); }
.gara-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.en-testo p { margin: 0 0 18px; max-width: 64ch; color: var(--argento); }
.en-testo h2 { margin: 36px 0 16px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.en-risultati { margin-bottom: 26px; }
@media (max-width: 700px) {
  .gara-testa { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gara-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gara-nav { justify-content: flex-start; }
}

/* ---------- Privacy ---------- */
.testo-legale .wrap { max-width: 820px; display: grid; gap: 12px; }
.testo-legale h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 22px; }
.testo-legale p { margin: 0; color: var(--argento); }
.testo-legale a { color: var(--azzurro); }
.nota-legale { margin-top: 26px !important; font-family: var(--f-crono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nebbia) !important; }

@media (max-width: 600px) {
  .cv-cta { grid-template-columns: minmax(0, 1fr); }
  .cv-cta-freccia { justify-self: start; width: 48px; font-size: 1.2rem; }
  .cv-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-numeri div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Home: il film di Viterbo ---------- */
.film { position: relative; padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--linea); overflow: hidden; background: radial-gradient(800px 500px at 15% 50%, var(--azzurro-tenue), transparent 70%); }
.film[hidden] { display: none; }
.film-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.film-schermo { position: relative; aspect-ratio: 9 / 16; max-height: 82vh; justify-self: center; width: min(100%, 460px); overflow: hidden; border: 1px solid var(--linea); background: #000; box-shadow: 0 50px 90px -30px #000; }
.film-schermo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--verde) 33.3%, var(--bianco-it) 0 66.6%, var(--cordolo) 0); }
.film-schermo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-pausa { position: absolute; right: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(11, 15, 21, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; }
.film-pausa i { width: 12px; height: 14px; border-inline: 4px solid var(--gesso); }
.film-pausa.ferma i { width: 0; height: 0; border: 0; border-left: 13px solid var(--gesso); border-block: 8px solid transparent; margin-left: 4px; }
.film-testo { display: grid; gap: 20px; }
#film-paragrafi { display: grid; gap: 14px; color: var(--argento); font-size: 1.12rem; }
#film-paragrafi p { margin: 0; max-width: 54ch; }
.film-dettagli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.film-dettagli figure { margin: 0; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--linea); }
.film-dettagli img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.film-dettagli figure:hover img { transform: scale(1.06); }
.film-dettagli figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; font-family: var(--f-crono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gesso); background: linear-gradient(transparent, rgba(6, 9, 13, .85)); }
@media (max-width: 860px) {
  .film-griglia { grid-template-columns: minmax(0, 1fr); }
  .film-schermo { width: min(100%, 360px); }
}

.cv-scarica { display: flex; flex-wrap: wrap; gap: 10px; }

/* Pop-up curriculum PDF */
.cv-dialogo {
  width: min(760px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0; overflow: auto;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); color: var(--gesso);
  background: linear-gradient(160deg, var(--asfalto-3), var(--asfalto) 70%); box-shadow: 0 40px 120px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--linea);
  opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .22s ease, transform .4s var(--ease);
}
.cv-dialogo:not([open]) { display: none; }
.cv-dialogo.aperto { opacity: 1; transform: none; }
.cv-dialogo::backdrop { background: rgba(6, 9, 13, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cv-dialogo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--verde) 33.3%, var(--bianco-it) 0 66.6%, var(--cordolo) 0); }
.cv-d-chiudi { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; background: none; color: var(--nebbia); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: color .2s, transform .3s var(--ease); }
.cv-d-chiudi:hover { color: var(--gesso); transform: rotate(90deg); }
.cv-d-anteprima { position: relative; padding: 34px 0 34px 34px; perspective: 900px; }
.cv-d-foglio { position: absolute; top: 34px; left: 34px; width: 168px; height: auto; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .6s var(--ease), opacity .45s ease; transform-origin: 50% 100%; }
.cv-d-completo { transform: rotateY(-8deg) rotate(-2deg); }
.cv-d-essenziale { opacity: 0; transform: translate(26px, 10px) rotateY(-8deg) rotate(3deg); }
.cv-dialogo.essenziale .cv-d-completo { opacity: .35; transform: translate(-14px, 8px) rotateY(-8deg) rotate(-5deg) scale(.94); }
.cv-dialogo.essenziale .cv-d-essenziale { opacity: 1; transform: rotateY(-8deg) rotate(-1deg); }
.cv-d-testo { padding: 40px 40px 38px 28px; }
.cv-d-etichetta { margin: 0 0 10px; font-family: var(--f-crono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--azzurro); }
.cv-d-testo h2 { margin: 0 0 10px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: .95; text-transform: uppercase; }
.cv-d-testo > p { margin: 0 0 22px; color: var(--argento); line-height: 1.5; }
.cv-d-scelta { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 24px; cursor: pointer; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--linea); transition: box-shadow .25s, background .25s; }
.cv-d-scelta:hover { background: rgba(255, 255, 255, .05); }
.cv-d-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cv-d-spunta { flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px; box-shadow: inset 0 0 0 1.5px var(--nebbia); transition: background .2s, box-shadow .2s; }
.cv-d-spunta::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 5px; height: 10px; border: solid var(--asfalto); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
.cv-d-scelta input:checked + .cv-d-spunta { background: var(--azzurro); box-shadow: none; }
.cv-d-scelta input:checked + .cv-d-spunta::after { transform: rotate(45deg) scale(1); border-color: #fff; }
.cv-d-scelta input:focus-visible + .cv-d-spunta { outline: 2px solid var(--azzurro); outline-offset: 3px; }
.cv-dialogo.essenziale .cv-d-scelta { box-shadow: inset 0 0 0 1px var(--azzurro); }
.cv-d-scelta b { display: block; font-weight: 600; }
.cv-d-scelta small { display: block; margin-top: 3px; font-size: .86rem; color: var(--nebbia); line-height: 1.4; }
.cv-d-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .cv-dialogo { grid-template-columns: minmax(0, 1fr); }
  .cv-d-anteprima { height: 168px; padding: 0; overflow: hidden; }
  .cv-d-foglio { top: 26px; left: 50%; width: 120px; margin-left: -60px; }
  .cv-d-testo { padding: 18px 22px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-dialogo, .cv-d-foglio { transition: none; }
}

/* Cursore (comune.js): solo con mouse; il cursore normale torna se il mouse esce dalla pagina */
.cursore-attivo, .cursore-attivo * { cursor: none !important; }
.cursore { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.cursore-punto, .cursore-anello { position: fixed; left: 0; top: 0; display: grid; place-items: center; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.cursore-attivo .cursore-punto, .cursore-attivo .cursore-anello { opacity: 1; }
.cursore-punto { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--azzurro); }
.cursore-anello { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cursore-anello::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(238, 241, 245, .55); }

/* Passaggio tra pagine: la nuova pagina entra con un taglio diagonale, la barra in alto resta ferma (browser recenti) */
@view-transition { navigation: auto; }
.nav { view-transition-name: barra; }
::view-transition-old(root) { animation: vt-esce .5s var(--ease) both; }
::view-transition-new(root) { animation: vt-entra .65s var(--ease) both; }
@keyframes vt-esce { to { opacity: .2; transform: translateX(-4%) scale(.98); } }
@keyframes vt-entra { from { clip-path: polygon(100% 0, 130% 0, 100% 100%, 70% 100%); } to { clip-path: polygon(-30% 0, 100% 0, 100% 100%, 0 100%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Mirino ---------- */
/* Riquadro che "aggancia" Domenico in una foto (data-mira, comune.js): angoli azzurri che si stringono ed etichetta */
.mira-strato { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mira { position: absolute; }
.mira i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--azzurro); transition: transform .9s var(--ease), opacity .4s; opacity: 0; }
.mira i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; transform: translate(-40px, -40px); }
.mira i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; transform: translate(40px, -40px); }
.mira i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; transform: translate(-40px, 40px); }
.mira i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; transform: translate(40px, 40px); }
.mira b { position: absolute; right: 0; bottom: calc(100% + 10px); white-space: nowrap; padding: 5px 9px; font-family: var(--f-crono); font-weight: 600; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--asfalto); background: var(--gesso); clip-path: inset(0 0 0 100%); transition: clip-path .6s var(--ease) .5s; }
.mira-vista .mira i { opacity: 1; transform: none; }
.mira-vista .mira b { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .mira i, .mira b { transition: none; } }


/* ---------- Impaginato delle testate ---------- */
/* Le testate delle altre pagine riprendono la copertina della home: griglia a 12 colonne appena visibile e segni di taglio */
.storia-hero, .cv-hero, .testa-pagina, .gara-hero { position: relative; isolation: isolate; }
.storia-hero::before, .cv-hero::before, .testa-pagina::before, .gara-hero::before {
  content: ""; position: absolute; inset: 0 var(--gutter); z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(238, 241, 245, .045) 0 1px, transparent 1px calc(100% / 12));
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 40%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent 10%, #000 40%, #000 75%, transparent); }
.storia-hero::after, .cv-hero::after, .testa-pagina::after, .gara-hero::after {
  content: ""; position: absolute; left: calc(var(--gutter) * .5); right: calc(var(--gutter) * .5); top: 84px; bottom: 18px; pointer-events: none;
  background:
    linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 0 0 / 18px 1px, linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 0 0 / 1px 18px,
    linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 100% 0 / 18px 1px, linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 100% 0 / 1px 18px,
    linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 0 100% / 18px 1px, linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 0 100% / 1px 18px,
    linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 100% 100% / 18px 1px, linear-gradient(rgba(238, 241, 245, .35), rgba(238, 241, 245, .35)) 100% 100% / 1px 18px;
  background-repeat: no-repeat; }
@media (max-width: 760px) { .storia-hero::after, .cv-hero::after, .testa-pagina::after, .gara-hero::after { display: none; } }
/* schermi bassi (portatili piccoli, finestre ridotte): testi dell'hero più compatti, così "Coco" ha più spazio */
@media (max-height: 760px) and (min-width: 761px) {
  .hero .semaforo, .hero .sottotitolo > span:last-child { display: none; }
  .hero .sottotitolo { margin-top: 12px; }
  .hero .cta { margin-top: 18px; }
}
@media (max-width: 1100px) { .hero #social-hero { display: none !important; } }

/* ---------- Firma 700Project ---------- */
/* In fondo al footer la firma "A 700Project build", uguale su tutti i progetti 700Project.
   "A" e "build" sono disegnate con i tratti del logo (assets/img/firma-a.svg, firma-build.svg); tutte e tre le parti sono maschere, così si colorano via CSS.
   Argento a riposo; al passaggio solo 700Project si accende di smeraldo. Link: https://700project.vercel.app */
footer .firma { display: flex; justify-content: flex-end; margin-top: 18px; }
.firma-700 { --h: 19px; position: relative; display: inline-flex; align-items: flex-end; gap: calc(var(--h) * .34); padding: 10px 0 12px 18px; text-decoration: none; }
.firma-700::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-radius: 50%; background: #00b85c; animation: firma-luce 3.2s ease-in-out infinite; }
.firma-700 i { display: block; height: var(--h); background: #e8eae5; }
.firma-a { aspect-ratio: 236 / 316; -webkit-mask: url("../img/firma-a.svg") center / contain no-repeat; mask: url("../img/firma-a.svg") center / contain no-repeat; }
.firma-build { aspect-ratio: 721 / 316; -webkit-mask: url("../img/firma-build.svg") center / contain no-repeat; mask: url("../img/firma-build.svg") center / contain no-repeat; }
.firma-nome { position: relative; display: block; }
.firma-nome::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: linear-gradient(90deg, #39f58a, transparent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.firma-700 .firma-segno { aspect-ratio: 1510 / 316;
  background: linear-gradient(100deg, #00b85c 0 28%, #39f58a 40%, #e8eae5 54% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url("../img/700project.svg") center / contain no-repeat; mask: url("../img/700project.svg") center / contain no-repeat;
  transition: background-position 1s var(--ease); }
.firma-700:hover .firma-segno, .firma-700:focus-visible .firma-segno { background-position: 0 0; }
.firma-700:hover .firma-nome::after, .firma-700:focus-visible .firma-nome::after { transform: scaleX(1); }
@keyframes firma-luce { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 184, 92, .55); } 60% { box-shadow: 0 0 0 7px rgba(0, 184, 92, 0); } }
@media (max-width: 600px) { footer .firma { justify-content: flex-start; } .firma-700 { --h: 17px; } }
@media (prefers-reduced-motion: reduce) { .firma-700::before { animation: none; } .firma-segno, .firma-nome::after { transition: none; } }

/* ---------- Telefono: pagine più corte ---------- */
/* Fino a 760 px: le liste lunghe diventano file da sfogliare col dito (CORTO.fila in comune.js) o mostrano i primi elementi
   con un pulsante per il resto (CORTO.raccogli). Su computer non cambia nulla. */
.fila-barra { position: relative; height: 2px; margin-top: 14px; background: var(--linea); overflow: hidden; }
.fila-barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--azzurro); transition: width .2s; }
.in-piu { display: none !important; }
.mostra-tutto { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 20px; background: transparent; color: var(--gesso); border: 1px solid var(--linea);
  font-family: var(--f-crono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .3s, border-color .3s; }
.mostra-tutto:hover, .mostra-tutto:focus-visible { background: var(--asfalto-2); border-color: var(--azzurro); }
.mostra-tutto i { font-style: normal; color: var(--azzurro); }
.cv-anno-testa[role="button"] { cursor: pointer; }
@media (max-width: 760px) {
  .fila { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 2px; scroll-padding-inline: var(--gutter); perspective: none; }
  .fila::-webkit-scrollbar { display: none; }
  .fila > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
  .fila + .fila-barra { margin-inline: 0; }
  /* risultati recenti in home: schede compatte, fonti e scheda gara restano nelle pagine dedicate */
  .torre.fila .riga { align-content: start; }
  .torre.fila .corpo .fonti { display: none; }
  .torre.fila .corpo p { -webkit-line-clamp: 4; }
  /* tappe della carriera in home */
  .carriera .pista-oriz { padding-inline: var(--gutter); }
  .tappe.fila > * { flex-basis: min(78%, 300px); }
  .carriera-pin { padding-block: 56px; }
  /* cinema fermo (senza l'effetto legato allo scorrimento) */
  .cinema { --clip: 0%; --zoom: 1; height: clamp(320px, 62vh, 520px); }
  /* foto del team: una fila da sfogliare */
  .kgt-bento.fila { display: flex; margin-bottom: 0; }
  .kgt-bento.fila figure { display: block; height: clamp(260px, 74vw, 340px); aspect-ratio: auto !important; }
  .kgt-bento.fila figure:nth-child(-n+6) { display: block; }
  .kgt-bento.fila figcaption { opacity: 1; }
  .kgt-bento.fila + .fila-barra { margin-bottom: 22px; }
  /* video di Viterbo e foto col papà meno alti */
  .film-schermo { aspect-ratio: 4 / 5; width: 100%; }
  .film-schermo video { width: 100%; height: 100%; object-fit: cover; }
  .accanto-foto { aspect-ratio: 4 / 3.3; }
  /* pagina Carriera: anni chiusi tranne il più recente */
  .cv-anno.chiuso { padding-bottom: 14px; }
  .cv-anno.chiuso .cv-voci { display: none; }
  .cv-anno-testa[role="button"]::after { content: "Chiudi ↑"; font-family: var(--f-crono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azzurro); }
  .cv-anno.chiuso .cv-anno-testa::after { content: "Apri ↓"; }
  .cv-anno.chiuso .cv-anno-n { -webkit-text-stroke-color: var(--argento); }
  /* pagina Storia: foto dei capitoli più basse */
  .cap-foto { aspect-ratio: 16 / 11; }
  .capitolo { padding-block: 40px; }
}