/* Interfaccia comune a tutte le pagine: vocabolario dei colori, barra di
   navigazione, menu a tendina, pannello account e barra di avanzamento.

   Perche' un file solo invece delle solite <style> dentro alla pagina: queste
   parti sono identiche su nove pagine. Finche' erano nove copie, cambiare una
   voce di menu voleva dire nove modifiche uguali e la certezza che prima o poi
   una restasse indietro.

   NOTA sull'ordine: questo foglio viene caricato nel <head>, prima dello stile
   della pagina. A parita' di specificita' vince chi arriva dopo, quindi una
   pagina puo' ancora ritoccare quello che serve.

   Il tema chiaro e' stato messo da parte: sta in assets/tema-chiaro.css, che
   nessuna pagina carica. Il vocabolario qui sotto pero' RESTA e va usato: e'
   quello che rende possibile riaccenderlo senza rifare tutto. */

/* ==========================================================================
   1. Il vocabolario dei colori
   Le pagine devono usare queste, non i colori scritti a mano.
   ========================================================================== */
:root{
  --bg:#08080a;          /* fondo della pagina */
  --bg2:#0f0f13;         /* fondo rialzato: schede, riquadri */
  --text:#ffffff;        /* testo principale */
  --text-2:#e4e4ea;      /* testo secondario, voci di menu */
  --text-corpo:#c2c2cc;  /* paragrafi lunghi: un filo sotto al bianco pieno */
  --text-dim:#9a9aa6;    /* didascalie, etichette */
  --border:#232329;      /* bordo delle schede */
  --linea:rgba(255,255,255,0.08);  /* filetto sottile fra due righe */

  /* Superfici traslucide, dalla piu' timida alla piu' marcata. */
  --su-1:rgba(255,255,255,0.03);
  --su-2:rgba(255,255,255,0.06);
  --su-3:rgba(255,255,255,0.10);

  --ombra-1:0 8px 24px rgba(0,0,0,0.35);
  --ombra-2:0 18px 44px rgba(0,0,0,0.50);

  /* I fondi pieni delle schede. Nelle pagine erano una decina di neri diversi
     scritti a mano (#0a0a0d, #0d0d13, #14141a...) e nel tema chiaro restavano
     neri con sopra il testo scuro. Raggruppati in tre livelli: il valore del
     tema scuro e' quello di prima, cosi' l'aspetto attuale non cambia. */
  --fondo-1:#0a0a0d;     /* il piu' profondo: fasce, fondi di sezione */
  --fondo-2:#0f0f14;     /* la scheda normale */
  --fondo-3:#17171f;     /* la scheda rialzata, o in evidenza */

  --pannello:rgba(13,13,17,0.97);   /* fondo di tendine e pannelli */
  --nav-a:rgba(13,13,17,0.92);      /* la barra in alto, in cima */
  --nav-b:rgba(9,9,12,0.82);        /* ...e in fondo */

  /* L'arancio come TESTO. Il giallo --flame4 su fondo chiaro sparisce, quindi
     per le scritte non si usano mai i colori del gradiente cosi' come sono. */
  --flame-testo:#ff7a00;

  /* Verde e rosso dei segni "meglio/peggio". Scelti per il nero: sul bianco il
     verde chiaro sparisce del tutto. */
  --ok:#5fd97a;
  --ko:#ff6b6b;
  --attenzione:#ffb52e;

  --barra-h:2px;         /* spessore della barra di avanzamento */
}

/* ==========================================================================
   2. Barra di avanzamento, dentro alla barra di navigazione
   Era una riga fissa in cima alla finestra, staccata dalla barra che le stava
   sotto: due elementi orizzontali a due altezze diverse, che si leggevano come
   due cose distinte. Adesso sta appoggiata al bordo alto della barra, appena
   dentro alla riga del contorno, e le due diventano un oggetto solo.

   Niente corsia grigia dietro: quella riga spenta da bordo a bordo diceva
   quanto manca alla fine della pagina, ma restava li' sempre accesa a
   spartire in due la testa della barra. Si vede solo il pezzo percorso, che
   cresce dal nulla — quanto manca si capisce lo stesso, da quanto e' corto.

   Il contenitore non e' la barretta: e' un calco della barra intera, della
   stessa forma arrotondata, che fa da forbice. La barretta ci vive dentro
   attaccata al bordo alto, e agli angoli e' la curva stessa a tagliarla. Cosi'
   segue il contorno invece di fermarsi a un margine deciso a mano — e resta
   giusta a qualsiasi larghezza, senza una misura da correggere per il
   telefono. */
#scrollProgress{
  position:absolute; inset:0;
  border-radius:inherit;
  overflow:hidden;
  /* Invisibile finche' la pagina e' in cima: li' la barra e' trasparente e non
     c'e' ancora niente da misurare. Compare insieme al fondo della barra. */
  opacity:0; transition:opacity 0.4s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
nav.scrolled #scrollProgress{ opacity:1; }
#scrollProgress span{
  display:block; position:absolute; top:0; left:0; right:0; height:var(--barra-h);
  background:linear-gradient(90deg, var(--flame2), var(--flame3) 60%, var(--flame4));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ==========================================================================
   2b. L'etichetta "beta" accanto al logo
   Il sito e' pubblico ma non finito: sondaggi, pronostici e account funzionano
   davvero, e chi arriva non ha modo di sapere che qualcosa puo' cambiare o
   rompersi. Dirlo una volta sola, accanto al nome, e' il posto piu' onesto:
   si legge all'arrivo e poi sparisce dall'attenzione, invece di un riquadro
   che avvisa a ogni pagina e che dopo due visite si impara a saltare.
   Il testo sta nell'attributo title per chi vuole sapere cosa comporta.

   L'etichetta sta ACCANTO al lockup, non dentro. Nella home il logo della barra
   nasce a opacita' zero — al suo posto c'e' quello grande dell'apertura, che
   scorrendo vola fin dentro alla barra — e solo a volo finito il lockup si
   accende. Un'etichetta dentro al lockup si spegneva insieme a lui: sulla
   pagina piu' vista del sito, cioe' proprio dove serve dirlo, la scritta non
   c'era. Fuori dal lockup non la tocca nessuno e sta li' sempre.

   La regola sul lockup sta qui e non nelle pagine: otto pagine su dieci non
   avevano nessuna regola sul contenitore (solo sull'immagine), quindi il div
   era un blocco.
   ========================================================================== */
.nav-marchio{ display:flex; align-items:center; gap:9px; }
.logo-lockup{ display:flex; align-items:center; }
.beta-tag{
  flex-shrink:0;
  font-family:'Rajdhani', system-ui, sans-serif;
  font-size:0.62rem; font-weight:700; line-height:1;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--flame-testo);
  padding:4px 8px 3px;
  border:1px solid color-mix(in srgb, var(--flame-testo) 40%, transparent);
  border-radius:var(--r-pill, 999px);
  background:color-mix(in srgb, var(--flame-testo) 9%, transparent);
  /* Aiuta chi legge, non chi tocca: non e' un comando e non deve sembrarlo. */
  cursor:default; user-select:none; white-space:nowrap;
}
/* Sotto ai 520px accanto al logo ci stanno gia' il panino e poco altro: la
   pastiglia si stringe invece di spingere il menu contro il bordo. */
@media (max-width:520px){
  .nav-marchio{ gap:7px; }
  .beta-tag{ font-size:0.55rem; letter-spacing:0.12em; padding:3px 6px 2px; }
}

/* ==========================================================================
   3. Menu: raggruppamento a tendina
   Sette-otto voci in fila non si leggono, si scansionano una per una. Le voci
   che portano a uno strumento di analisi stanno sotto una sola etichetta.
   ========================================================================== */
.nav-menu{ list-style:none; display:flex; align-items:center; gap:32px; }

/* Le pagine hanno ancora la loro vecchia regola `nav ul a`, che fissa il colore
   a mano e nel tema chiaro darebbe grigio chiaro su bianco. Non la si cancella
   da nove file: basta un selettore con una classe dentro, che a parita' di
   tutto il resto pesa di piu' e vince comunque. */
/* inline-flex, non `inline`: le voci con la tendina sono <button> e quindi
   scatole flex, questa era una riga di testo. Una riga di testo porta con se'
   lo spazio sopra e sotto per le lettere alte e per le code — la sua casella
   veniva quindi piu' bassa (21px contro 24), e centrandola in mezzo alle altre
   la parola finiva un pixel e mezzo piu' in giu'. Stessa scatola, stesso
   allineamento, stessa quota. */
nav .nav-menu > li > a{
  display:inline-flex; align-items:center;
  color:var(--text-2); text-decoration:none;
  font-weight:600; font-size:0.9rem;
  letter-spacing:0.04em; text-transform:uppercase;
  position:relative; padding-bottom:4px;
}
nav .nav-menu > li > a.qui{ color:var(--flame-testo); }

/* Nella home il logo grande e' un clone in position:fixed con z-index 70,
   appeso al <body>: sta piu' in alto della barra, che e' a 50, e quindi si
   disegnava sopra alle tendine. Non si abbassa il clone (a fine volo finirebbe
   sotto al fondo della barra): si alza la barra, e solo finche' c'e' qualcosa
   di aperto. Stessa cura gia' adottata per il pannello a panino. */
nav.sopra{ z-index:80; }

.nav-gruppo{ position:relative; }
.nav-gruppo > .nav-gruppo-trigger{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer; padding:0 0 4px;
  font-family:inherit; font-weight:600; font-size:0.9rem;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text-2);
  position:relative;
}
.nav-gruppo-trigger .chevron{
  transition:transform 0.25s cubic-bezier(.2,.8,.2,1);
  opacity:0.65;
}
.nav-gruppo.aperto > .nav-gruppo-trigger .chevron{ transform:rotate(180deg); }
.nav-gruppo > .nav-gruppo-trigger::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--flame2), var(--flame4));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.nav-gruppo.aperto > .nav-gruppo-trigger::after,
.nav-gruppo.attivo > .nav-gruppo-trigger::after{ transform:scaleX(1); }

.nav-sub{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:290px; padding:8px;
  background:var(--pannello);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border); border-radius:var(--r-lg, 24px);
  box-shadow:var(--ombra-2);
  /* Esce dal riquadro e scende sopra al contenuto: deve stare sopra a
     qualunque cosa incontri, ma sotto al pannello del menu a panino. */
  z-index:70;
  /* Parte da poco sotto la sua etichetta e non dal centro del nulla: una
     tendina che si apre da dove e' stata chiamata si capisce senza pensarci. */
  transform-origin:top center;
  transform:translateX(-50%) translateY(-6px) scale(0.97);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.18s cubic-bezier(.2,.8,.2,1),
             transform 0.18s cubic-bezier(.2,.8,.2,1),
             visibility 0s linear 0.18s;
}
.nav-gruppo.aperto > .nav-sub{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
  transition-delay:0s;
}
/* Il triangolino che lega la tendina alla voce che l'ha aperta. */
.nav-sub::before{
  content:""; position:absolute; top:-6px; left:50%; margin-left:-6px;
  width:11px; height:11px; transform:rotate(45deg);
  background:var(--pannello);
  border-left:1px solid var(--border); border-top:1px solid var(--border);
}
/* La distanza fra etichetta e pannello e' vuota: senza questo ponte invisibile
   il puntatore che scende ci cade dentro e la tendina si richiude. */
.nav-sub::after{
  content:""; position:absolute; top:-16px; left:0; right:0; height:16px;
}
.nav-sub a{
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 13px; border-radius:var(--r-md, 18px);
  text-decoration:none; color:var(--text-2);
  transition:background-color 0.18s ease;
}
/* L'icona sta spenta e si accende sotto al puntatore e sulla pagina in cui si
   e' gia'. Sei disegni arancioni tutti insieme in un riquadro da 290 pixel
   griderebbero piu' dei nomi, che sono quello che si deve leggere. */
.nav-sub a svg{
  width:19px; height:19px; flex-shrink:0; margin-top:1px;
  color:var(--text-dim);
  transition:color 0.18s ease;
}
.nav-sub a.qui svg{ color:var(--flame3, #ff7a00); }
.nav-sub a strong{
  display:block; font-size:0.92rem; font-weight:700;
  letter-spacing:0.03em; text-transform:uppercase;
  color:var(--text);
}
.nav-sub a small{
  display:block; margin-top:2px; font-size:0.8rem; font-weight:500;
  color:var(--text-dim); text-transform:none; letter-spacing:0;
  line-height:1.35;
}
@media (hover: hover) and (pointer: fine){
  .nav-sub a:hover{ background:var(--su-2); }
  .nav-sub a:hover svg{ color:var(--flame3, #ff7a00); }
}
/* Il pallino delle menzioni non lette. Sta appoggiato in alto a destra
   sulla voce, come nelle applicazioni: e' il posto dove l'occhio lo cerca. */
.btg-pallino{
  /* Nel menu in alto la voce e' una PAROLA, non un'icona: appoggiato
     sull'angolo coprirebbe l'ultima lettera. Quindi sta in fila, dopo il
     nome. Sull'icona della barra in basso invece l'angolo e' il posto
     giusto, ed e' l'eccezione qui sotto. */
  display:inline-block; margin-left:7px; vertical-align:2px;
  min-width:17px; height:17px;
  padding:0 5px; border-radius:999px;
  background:linear-gradient(160deg, var(--flame2), var(--flame3));
  color:#fff; font-size:0.62rem; font-weight:800; line-height:17px;
  text-align:center; letter-spacing:0;
  box-shadow:0 2px 8px rgba(255,60,0,0.45);
  animation:pallinoEntra 0.34s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
@keyframes pallinoEntra{
  from{ transform:scale(0.4); opacity:0; } to{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .btg-pallino{ animation:none; } }
/* La voce che lo ospita deve fargli da riferimento, se no il pallino se ne
   va nell'angolo della pagina. */
.nav-menu > li > a, .barra-app .barra-voce{ position:relative; }
/* Nella barra in basso l'icona sta sopra la scritta: il pallino va sull'icona,
   non sull'angolo del rettangolo che le contiene entrambe. */
.barra-app .barra-voce .btg-pallino{
  position:absolute; top:1px; right:calc(50% - 24px); margin-left:0;
  /* Un filo piu' piccolo che nel menu: qui non deve reggere il confronto con
     una parola, deve stare in un angolo. */
  min-width:15px; height:15px; padding:0 4px; font-size:0.58rem; line-height:15px;
  /* L'anello scuro e' quello che fa capire che il pallino sta SOPRA l'icona e
     non e' un pezzo del disegno: senza, il tondo arancione e la testina
     arancione si fondono in una macchia sola. */
  box-shadow:0 0 0 2px #101014, 0 2px 8px rgba(255,60,0,0.45);
}

.nav-sub a.qui{ background:var(--su-1); }
.nav-sub a.qui strong{ color:var(--flame-testo); }

/* ==========================================================================
   4. Account e impostazioni
   ========================================================================== */
.account{ position:relative; }
.account-trigger{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--r-pill, 999px);
  background:var(--su-1); border:1px solid var(--border);
  color:var(--text-2); cursor:pointer;
  font-family:inherit; font-weight:600; font-size:0.82rem;
  letter-spacing:0.04em; text-transform:uppercase;
  transition:background-color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine){
  .account-trigger:hover{ background:var(--su-2); border-color:var(--text-dim); }
}
.account-trigger .avatar{
  width:22px; height:22px; border-radius:50%; object-fit:cover; display:none;
}
/* "Accedi" e' un collegamento a una pagina, non piu' l'apertura di una
   tendina: veste da pulsante come prima, ma e' un <a>, e quindi si porta
   dietro la sottolineatura da togliere. */
.account-entra{ text-decoration:none; }
.account-entra svg{ flex:none; }
.account-pannello{
  position:absolute; top:calc(100% + 14px); right:0;
  width:320px; padding:6px;
  background:var(--pannello);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border); border-radius:var(--r-lg, 24px);
  box-shadow:var(--ombra-2);
  z-index:70;
  transform-origin:top right;
  transform:translateY(-6px) scale(0.97);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.18s cubic-bezier(.2,.8,.2,1),
             transform 0.18s cubic-bezier(.2,.8,.2,1),
             visibility 0s linear 0.18s;
}
.account.aperto .account-pannello{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.account-sez{ padding:14px 15px; }
.account-sez + .account-sez{ border-top:1px solid var(--linea); }
.account-titolo{
  font-size:0.68rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:11px;
}
.account-riga{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.account-cerchio{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--su-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); overflow:hidden;
}
.account-cerchio img{ width:100%; height:100%; object-fit:cover; }
.account-email{
  font-size:0.9rem; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account-email small{
  display:block; font-size:0.72rem; font-weight:500; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.08em;
}
.account-sez label{
  display:block; font-size:0.78rem; color:var(--text-dim); margin-bottom:6px;
}
/* Qui stavano gli stili del campo email: il modulo di accesso e' passato in
   accedi.html, e questa tendina ormai la vede solo chi e' gia' dentro. */
.account-nota{
  margin-top:9px; font-size:0.76rem; color:var(--text-dim); line-height:1.45;
}
.account-nota.ok{ color:var(--flame-testo); }

/* Il selettore del tema: tre caselle affiancate, quella scelta accesa.
   E' un interruttore a tre stati e non due perche' "come il sistema" e' una
   scelta a se': chi la sceglie vuole che il sito cambi da solo la sera. */

/* ==========================================================================
   5. Da telefono: il menu a panino
   Tendine e pannello account non possono restare sospesi: nel drawer si
   aprono in linea, spingendo in giu' quello che segue.
   ========================================================================== */
@media (max-width:860px){
  .nav-menu{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav-menu > li{ border-bottom:1px solid var(--linea); }
  .nav-gruppo > .nav-gruppo-trigger{
    width:100%; justify-content:space-between; padding:14px 0;
  }
  /* Stessa storia anche qui: le voci con la tendina occupano tutta la riga e
     hanno 14px di respiro sopra e sotto, "Community" era largo quanto la
     parola. Nell'elenco in colonna si vedeva come una riga piu' bassa delle
     altre, e da toccare era un bersaglio di 22px invece di 46.
     Il selettore ripete `nav` davanti perche' la regola di sopra ce l'ha: senza,
     il suo padding-bottom di 4px resterebbe piu' forte di questo e la riga
     verrebbe schiacciata sotto. */
  nav .nav-menu > li > a{ width:100%; padding:14px 0; }
  .nav-gruppo > .nav-gruppo-trigger::after{ display:none; }
  .nav-sub{
    position:static; width:auto; transform:none; padding:0 0 10px 12px;
    background:none; backdrop-filter:none; border:none; box-shadow:none;
    /* In linea non si puo' animare l'apparizione con transform senza far
       saltare quello che sta sotto: si apre e si chiude sull'altezza. */
    display:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:none;
  }
  .nav-gruppo.aperto > .nav-sub{ display:block; transform:none; }
  .nav-sub::before, .nav-sub::after{ display:none; }
  .nav-sub a{ padding:10px 12px; }

  .account{ width:100%; margin-top:14px; }
  .account-trigger{ width:100%; justify-content:center; }
  .account-pannello{
    position:static; width:auto; margin-top:10px; padding:0;
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background:none; backdrop-filter:none; border:none; box-shadow:none;
    display:none; transition:none;
  }
  .account.aperto .account-pannello{ display:block; transform:none; }
  .account-sez{ padding:12px 2px; }
}

@media (prefers-reduced-motion: reduce){
  .nav-sub, .account-pannello, .nav-gruppo-trigger .chevron,
  #scrollProgress, #scrollProgress span{
    transition-duration:0.01ms !important;
  }
}


/* ---------------------------------------------------------------------------
   L'invito ad aggiungere il sito alla schermata Home.

   Sale dal fondo, dove sta il pollice e dove — su iPhone — c'e' davvero il
   pulsante di condivisione di cui parla: l'invito indica il posto in cui
   bisogna andare invece di stare dall'altra parte dello schermo.
   Il rientro in fondo tiene conto della barra di sistema del telefono
   (env(safe-area-inset-bottom)), se no su iPhone finisce sotto la tacca.
   Lo scrive assets/interfaccia.js.
   ------------------------------------------------------------------------- */
.installa-banner{
  position:fixed; z-index:1200;
  left:12px; right:12px;
  /* Sull'iPad di traverso, senza un tetto alla larghezza, il riquadro
     attraverserebbe tutto lo schermo per dire tre righe. Con i due lati fissati
     e una larghezza massima, margin-inline:auto lo centra. */
  max-width:440px; margin-inline:auto;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  padding:16px 44px 16px 16px;
  border-radius:var(--r-lg, 24px);
  background:var(--fondo-3, #17171f);
  border:1px solid var(--border);
  border-left:3px solid var(--flame2);
  box-shadow:0 16px 40px rgba(0,0,0,0.55);
  /* Parte da sotto e sale: e' la direzione da cui arriva un pannello
     appoggiato al bordo basso. 240ms e curva in uscita — entra deciso e si
     posa, invece di frenare all'inizio come farebbe una curva in entrata. */
  transform:translateY(calc(100% + 24px));
  opacity:0;
  transition:transform 0.24s cubic-bezier(.2,.8,.2,1), opacity 0.24s cubic-bezier(.2,.8,.2,1);
}
.installa-banner.visibile{ transform:translateY(0); opacity:1; }

.installa-testa{ display:flex; align-items:center; gap:12px; }
.installa-logo{
  width:44px; height:44px; flex:none; border-radius:11px;
  background:var(--fondo-2, #0f0f14); border:1px solid var(--border);
}
.installa-titolo{ font-size:0.95rem; font-weight:600; line-height:1.35; }
.installa-titolo b{ font-family:'Anton', sans-serif; font-weight:400; letter-spacing:0.01em; }

.installa-riga{ margin-top:10px; font-size:0.84rem; color:var(--text-dim); }
.installa-ok{ margin-top:12px; width:100%; }

.installa-passi{ list-style:none; margin:14px 0 0; padding:0; }
.installa-passo{ display:flex; align-items:flex-start; gap:10px; }
.installa-passo + .installa-passo{ margin-top:9px; }
.installa-numero{
  width:21px; height:21px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:700;
  background:var(--flame2); color:#fff;
}
.installa-testo{ font-size:0.85rem; line-height:1.5; color:var(--text); }
/* L'icona sta dentro la frase e non accanto: e' il disegno del pulsante da
   cercare, quindi va letta al posto della parola che lo nomina. */
.installa-icona{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin:0 3px; vertical-align:-8px;
  border-radius:7px; background:var(--su-3); color:var(--flame3);
}
.installa-icona svg{ width:16px; height:16px; display:block; }
/* Le due icone di iPhone e iPad restano dell'azzurro di sistema invece di
   prendere l'arancione del sito. Non e' una svista: sono la fotografia di due
   pulsanti veri, e chi li cerca li cerca di quel colore. Cambiarglielo li
   renderebbe piu' intonati alla tessera e meno riconoscibili sulla barra. */
.installa-passi.apple .installa-icona{ color:#0a84ff; }

.installa-chiudi{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer;
  background:transparent; border:none; color:var(--text-dim);
}

/* Stessa cura della X di piloti.html: 30x30 e' poco per un dito, ma
   ingrandirla sposterebbe il riquadro dell'invito. Si allarga solo la zona
   sensibile, di nove pixel per lato. */
.installa-chiudi{ position:relative; }
.installa-chiudi::after{ content:""; position:absolute; inset:-9px; }

.installa-chiudi svg{ width:16px; height:16px; }
@media (hover: hover) and (pointer: fine){
  .installa-chiudi:hover{ background:var(--su-3); color:var(--text); }
}

/* Chi ha chiesto meno movimento non lo vede salire: resta la comparsa, che e'
   quello che conta per capire che e' arrivato adesso, e sparisce lo
   spostamento. Non si toglie tutto — un pannello che appare di colpo e senza
   preavviso si nota di piu', non di meno. */
@media (prefers-reduced-motion: reduce){
  .installa-banner{ transform:none; transition:opacity 0.18s linear; }
}

/* ==========================================================================
   AVVISO PRIVACY ALLA PRIMA VISITA

   Non e' un banner cookie, perche' cookie non ce ne sono: e' un avviso che
   dice cosa il sito tiene in memoria e dove finisce quello che scrivi, con
   il rimando alla pagina che lo spiega per esteso. Per questo ha un solo
   pulsante e non la coppia accetta/rifiuta: non c'e' niente da rifiutare, e
   una scelta finta e' peggio di nessuna scelta.

   Sta in mezzo allo schermo, sopra a un velo scuro. E' l'unica finestra del
   sito che si mette davvero davanti alla pagina, e lo fa una volta sola nella
   vita di un visitatore.
   ========================================================================== */
.privacy-velo{
  position:fixed; inset:0; z-index:1400;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  background:rgba(4,4,6,0.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity 0.24s cubic-bezier(.2,.8,.2,1);
}
.privacy-velo.visibile{ opacity:1; pointer-events:auto; }

/* La pagina sotto resta ferma mentre la finestra e' aperta. */
body.privacy-bloccato{ overflow:hidden; }

.privacy-avviso{
  width:100%; max-width:440px;
  max-height:calc(100dvh - 40px); overflow-y:auto;
  background:linear-gradient(180deg, var(--nav-a), var(--nav-b));
  border:1px solid var(--border); border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,0.7);
  padding:24px 24px 20px;
  /* Da 0.96 e non da zero: un pannello che cresce dal niente sembra arrivare
     da nessun posto. Una finestra al centro parte dal centro — e' l'unico caso
     in cui l'origine giusta e' quella e non il pulsante che l'ha aperta. */
  transform:scale(0.96) translateY(8px);
  transition:transform 0.26s cubic-bezier(.2,.8,.2,1);
}
.privacy-velo.visibile .privacy-avviso{ transform:none; }

.privacy-avviso .pa-titolo{
  font-family:'Anton', sans-serif; font-size:1.06rem; letter-spacing:0.01em;
  color:var(--text); display:flex; align-items:center; gap:10px; margin-bottom:11px;
}
.privacy-avviso .pa-titolo svg{ flex:0 0 auto; color:var(--flame3); }
.privacy-avviso p{
  color:var(--text-corpo); font-size:0.9rem; line-height:1.65; margin:0;
}
.privacy-avviso p strong{ color:var(--text); }
.privacy-avviso .pa-azioni{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-top:20px;
}
.privacy-avviso .pa-leggi{
  color:var(--flame3); text-decoration:none; font-weight:700;
  font-size:0.76rem; text-transform:uppercase; letter-spacing:0.1em;
  border-bottom:1px solid transparent; transition:border-color 0.2s ease;
}
.privacy-avviso .pa-leggi:hover{ border-bottom-color:var(--flame3); }
.privacy-avviso .pa-leggi:focus-visible,
.privacy-avviso .pa-ok:focus-visible{ outline:2px solid var(--flame4); outline-offset:3px; }
.privacy-avviso .pa-ok{
  font-family:'Rajdhani', sans-serif; font-weight:700; font-size:0.82rem;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--text);
  border:none; border-radius:999px; cursor:pointer; padding:10px 26px;
  background:linear-gradient(100deg, var(--flame1), var(--flame2) 40%, var(--flame3) 75%, var(--flame4));
  background-size:200% 100%;
  transition:background-position 0.4s ease, transform 0.2s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) and (pointer: fine){
  .privacy-avviso .pa-ok:hover{ background-position:100% 0; transform:translateY(-1px); }
}
.privacy-avviso .pa-ok:active{ transform:scale(0.97); transition-duration:140ms; }

@media (max-width:520px){
  .privacy-avviso{ padding:22px 20px 18px; }
  .privacy-avviso .pa-azioni{ flex-direction:column-reverse; align-items:stretch; gap:14px; }
  .privacy-avviso .pa-ok{ width:100%; padding:13px 26px; }
  .privacy-avviso .pa-leggi{ text-align:center; }
}

@supports (corner-shape: squircle){
  .privacy-avviso{ corner-shape:squircle; }
}

/* Chi ha chiesto meno movimento vede solo l'opacita': la finestra resta,
   la crescita no. */
@media (prefers-reduced-motion: reduce){
  .privacy-avviso{ transform:none; transition:none; }
  .privacy-velo.visibile .privacy-avviso{ transform:none; }
}

/* ==========================================================================
   La barra in basso, quando il sito e' installato come app.

   Perche' solo li' e non anche nel browser: nel browser il pollice ha gia'
   una barra in fondo, quella del navigatore, e mettergliene un'altra sopra
   vuol dire due file di pulsanti nello stesso centimetro. Aperto dall'icona
   quella barra non c'e', restano due centimetri di vuoto sotto il contenuto,
   ed e' esattamente il posto dove il pollice arriva senza spostare la mano.
   E' il motivo per cui ce l'hanno tutte le applicazioni sociali.

   Si accende con la classe .app-barra sull'elemento <html>, che mette
   assets/interfaccia.js dopo aver controllato di essere davvero dentro
   un'app e su uno schermo stretto.
   ========================================================================== */
.barra-app{
  /* Sopra al foglio, non sotto: la barra e' il punto fermo, e nelle
     applicazioni sociali resta al suo posto anche mentre un pannello e'
     aperto — se sparisse, per chiuderlo bisognerebbe cercare un'altra
     strada ogni volta. Il foglio infatti lascia libera in fondo l'altezza
     della barra. */
  position:fixed; z-index:1180;
  /* top:auto messo di proposito: se una pagina ha una regola generica sui
     contenitori fissati, senza questo la barra si allunga da cima a fondo. */
  top:auto; height:auto;

  /* Staccata dai bordi, non incollata al fondo. Appoggiata allo schermo si
     legge come una parte della cornice del telefono; sollevata di dieci pixel
     si legge come una cosa del sito che galleggia sopra la pagina — ed e' il
     motivo per cui il contenuto che ci scorre sotto si intravede e da' il
     senso della profondita'. Il rientro in fondo tiene conto della barra di
     sistema: senza, su iPhone finisce sopra la linea dell'home. */
  left:10px; right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius:var(--r-barra, 26px);
  padding:7px 4px 6px;

  display:none;                     /* la accende .app-barra qui sotto */
  align-items:stretch;

  /* Il vetro. Non e' un effetto che arriva dal sistema: iPhone non lo presta
     alle pagine web, e non esiste un modo per chiederglielo. Quello che si
     vede nelle applicazioni si rifa' con tre cose messe insieme, ed e' la
     stessa ricetta che usa Apple:
       - un fondo semitrasparente, cosi' la pagina sotto si intravede;
       - backdrop-filter, che sfoca quello che passa dietro invece di
         mostrarlo nitido — e' questo che fa "vetro" e non "plastica";
       - saturate, perche' lo sfocato spegne i colori e senza questo il vetro
         viene grigio.
     Il filetto chiaro in cima e' il bordo del vetro preso di luce, e l'ombra
     sotto e' quella di un oggetto che sta staccato dal fondo. */
  background:rgba(20,20,26,0.14);
  /* Piu' trasparente vuol dire piu' sfocatura, non meno: e' lo sfocato a
     tenere leggibili le scritte quando sotto passa una foto, e senza alzarlo
     insieme all'opacita' il vetro diventa una finestra sporca. Quasi
     cinquanta di blur e la saturazione ancora piu' su, perche' con solo un
     quattordici per cento di fondo il colore che passa dietro e' quasi tutto
     quello che si vede: se lo sfocato non lo raccoglie, il vetro viene
     grigio. */
  -webkit-backdrop-filter:blur(48px) saturate(260%);
          backdrop-filter:blur(48px) saturate(260%);
  border:1px solid rgba(255,255,255,0.13);
  /* Con meno fondo il bordo di luce in cima conta di piu': e' la sola cosa
     che disegna il perimetro quando sotto passa una zona chiara. */
  box-shadow:0 10px 34px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.16);
}
/* Dove il vetro non c'e' — qualche Android vecchio, Firefox con l'opzione
   spenta — si vedrebbe la pagina passare nitida sotto le scritte, che e'
   illeggibile. Li' il fondo torna quasi pieno. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .barra-app{ background:rgba(14,14,18,0.94); }
}
html.app-barra .barra-app{ display:flex; }

/* Il contenuto della pagina deve finire sopra la barra, se no le ultime righe
   restano coperte per sempre. Sessantadue di barra piu' i dieci di stacco. */
/* Ottantasei e non settantaquattro: la barra e' alta settanta piu' i dieci di
   stacco dal fondo, quindi sotto i settantaquattro di prima le ultime righe le
   passavano ancora sotto per sei pixel. */
/* Da quando le pagine hanno viewport-fit=cover il contenuto arriva fino ai
   bordi veri dello schermo - ed e' quello che volevamo in alto, dove prima
   restava una fascia nera accanto alla tacca. In orizzontale pero' quei bordi
   sono curvi, e una riga di testo appoggiata li' viene mangiata dalla curva.
   Solo in orizzontale, e solo in modalita' app: in verticale queste due misure
   valgono zero e non cambiano niente. */
@media (orientation:landscape){
  html.app-barra body{
    padding-left:env(safe-area-inset-left, 0px);
    padding-right:env(safe-area-inset-right, 0px);
  }
}

html.app-barra body{
  padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px));
}
/* Se per un qualunque motivo l'invito a installare comparisse mentre la barra
   c'e' gia', si mette sopra invece di finirci sotto. */
html.app-barra .installa-banner{
  bottom:calc(86px + env(safe-area-inset-bottom, 0px));
}
/* E per la chat a tutta altezza di community.html. Qui il rientro sul corpo
   della pagina non serve a niente: la schermata della chat e' alta quanto lo
   schermo per conto suo, quindi il suo fondo — cioe' la riga in cui si scrive
   — finiva ottantuno pixel sotto alla barra. Misurati su uno schermo da 1278:
   la riga arrivava a 1278 e la barra cominciava a 1198.
   Le si toglie l'altezza della barra, esattamente come al vassoio qui sotto. */
html.app-barra .thread-section.open{
  height:calc(100vh - 86px - env(safe-area-inset-bottom, 0px));
  height:calc(100dvh - 86px - env(safe-area-inset-bottom, 0px));
}
/* E in cima non le si lascia lo spazio della barra ALTA, perche' in modalita'
   app quella barra non c'e' (`html.app-barra nav{display:none}`). Restava un
   vuoto nero alto ottantuno pixel fra l'orologio del telefono e la testata
   della discussione: spazio tenuto libero per una cosa che non esiste. */
html.app-barra body.thread-mode main{ padding-top:0; }

/* ...ma a quel punto la testata finiva SOTTO LA TACCA: con viewport-fit=cover
   la pagina arriva al bordo vero dello schermo, e il titolo della discussione
   si leggeva sopra l'orologio e l'isola dinamica (Pietro, 19 settembre 2026:
   «sale troppo sopra e il titolo si copre con la notch»).
   La cura e' quella di WhatsApp: non si lascia una fascia nera sopra la barra,
   e' la BARRA STESSA che si prende la fascia della tacca — il suo fondo arriva
   al bordo dello schermo e il contenuto (freccia, miniatura, titolo) scende
   sotto l'orologio. Cosi' non si spreca altezza e non c'e' nessun gradino.
   La misura passa da --sa-alto, che vale env(safe-area-inset-top) sul telefono
   vero e si puo' falsificare nelle prove, dove quel valore e' sempre zero. */
html.app-barra{ --sa-alto:env(safe-area-inset-top, 0px); }
html.app-barra .chat-topbar{
  padding-top:calc(10px + var(--sa-alto));
  border-top-left-radius:0; border-top-right-radius:0;
}
/* E in fondo la barra di sistema non si conta due volte: l'altezza della
   schermata (qui sopra) l'ha gia' sottratta, quindi il rientro che la riga di
   scrittura si mette da sola su telefono qui diventa di troppo. */
html.app-barra .chat-composer{ padding-bottom:12px; }

/* Stessa storia per il vassoio del confronto in piloti.html, che si apre dal
   bordo basso: e' l'unico altro pezzo del sito appoggiato la' sotto. */
html.app-barra .cmp-tray{
  bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  border-radius:var(--r-xl, 24px) var(--r-xl, 24px) 0 0;
}

/* In modalita' app il menu in alto non ripete quello che sta gia' in fondo.
   Restano le voci che la barra non copre — "Info" — piu' il logo e l'account:
   il resto sarebbe la stessa cosa detta due volte a due centimetri di
   distanza. */
html.app-barra .nav-menu > li[data-voce="analisi"],
html.app-barra .nav-menu > li[data-voce="community"],
html.app-barra #navLinks > .btn-flame{
  display:none;
}

.barra-voce{
  flex:1 1 0; min-width:0;
  /* Con il fondo piu' trasparente sotto le etichette puo' capitare di tutto,
     anche una foto chiara: un'ombra stretta le stacca senza che si veda. */
  text-shadow:0 1px 4px rgba(0,0,0,0.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:6px 2px 4px;
  background:none; border:0; cursor:pointer;
  color:var(--text-dim); text-decoration:none;
  font-family:inherit; font-size:0.62rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  /* Solo il colore cambia, e in fretta. Questi cinque pulsanti si toccano
     decine di volte al giorno: qualunque cosa si muova diventa, alla decima
     volta, una cosa da aspettare. */
  transition:color 0.12s ease-out;
  -webkit-tap-highlight-color:transparent;
}
.barra-voce svg{ width:22px; height:22px; display:block; }
.barra-voce span{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.barra-voce.qui,
.barra-voce.in-arrivo{ color:var(--flame3, #ff7a00); }
/* Il pallino sotto la voce aperta: a colpo d'occhio dice dove sei anche a chi
   il colore non lo distingue. Dove c'e' la pastiglia che scorre non serve —
   direbbe la stessa cosa due volte — ma resta per chi la pastiglia non ce
   l'ha, perche' il colore da solo non basta a tutti. */
.barra-voce.qui::after{
  content:''; width:4px; height:4px; border-radius:50%;
  background:currentColor; margin-top:1px;
}
.barra-app.con-cursore .barra-voce.qui::after{ display:none; }

/* ---------- la pastiglia che si sposta da un'icona all'altra ----------

   Il colore che cambia dice "adesso e' quest'altra". Un oggetto che si
   sposta dice "ci siamo mossi da li' a qui", che e' un'altra frase. Ed e'
   UNA SOLA pastiglia per tutta la barra: non ne appare una nuova, e' la
   stessa che scivola — se fossero due che si accendono a turno saremmo
   punto e a capo.

   Sta DIETRO alle icone (z-index sotto, e le voci si alzano di un gradino),
   e non ha bordo: il vetro della barra e' gia' un piano, aggiungerci un
   contorno la farebbe sembrare un bottone dentro un bottone.

   Fra due pagine il viaggio non lo fa questa transizione ma il browser, che
   grazie al nome qui sotto riconosce la pastiglia come lo stesso oggetto nei
   due documenti e la porta da sola dove deve andare, insieme alla pagina che
   scorre. Vedi assets/verso.js. */
/* Niente `position:relative` sulla barra: sta gia' a `fixed`, che fa da
   riferimento per la pastiglia esattamente allo stesso modo. Scriverlo qui la
   staccava dal fondo dello schermo e la mandava in fondo alla pagina, perche'
   questa riga viene dopo e vinceva sul `fixed`. */
.barra-app > .barra-voce{ position:relative; z-index:1; }
.barra-cursore{
  position:absolute; left:0; z-index:0;
  /* Centrata sull'icona, non sul pulsante intero: il pulsante contiene anche
     l'etichetta, e una pastiglia centrata su tutti e due finirebbe a meta'
     fra le due cose. Misurato: dentro la barra l'icona sta fra il decimo e il
     trentaduesimo pixel. */
  top:10px; height:28px;
  border-radius:var(--r-pill, 999px);
  background:rgba(255,122,0,0.16);
  opacity:0; pointer-events:none;
  /* La stessa curva del foglio e della pagina che scorre: tre movimenti
     diversi che si muovono con la stessa mano si leggono come un unico
     linguaggio. Un filo piu' lenta della pagina, perche' la pastiglia fa
     mezzo schermo di strada e va vista arrivare. */
  transition:transform 0.32s cubic-bezier(.2,.8,.2,1),
             width 0.32s cubic-bezier(.2,.8,.2,1),
             opacity 0.18s ease-out;
}
/* Il nome sta QUI e non sulla regola di sopra, ed e' voluto: su tre pagine
   (Chi sono, Contatti, Privacy) nessuna voce della barra e' quella corrente e
   la pastiglia non si mostra. Con il nome messo sempre, passando da una pagina
   della barra a una di quelle il browser cercherebbe di portare da qualche
   parte un oggetto che nella pagina nuova non c'e'. Senza nome, la pastiglia
   torna a essere un pezzo della barra, che non si muove. */
.barra-cursore.visibile{ opacity:1; view-transition-name:barra-cursore; }
/* Il viaggio della pastiglia fra due pagine lo fa il browser, non la
   transizione qui sopra: le due misure vanno pero' accordate, se no la
   pastiglia arriva prima o dopo la pagina e le due cose si scollano. Stessa
   durata e stessa curva del contenuto che scorre. */
::view-transition-group(barra-cursore){
  animation-duration:240ms;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}
/* Le due copie si lasciano sfumare l'una nell'altra come fa il browser di suo.
   Quando sono identiche non si vede niente — sono la stessa immagine — e nei
   casi in cui una delle due manca e' proprio quella dissolvenza a far comparire
   o sparire la pastiglia invece di farla scattare. */
/* Quando deve solo mettersi al suo posto — all'apertura, girando lo schermo —
   non deve fare il viaggio: partirebbe da sinistra e correrebbe fin li' ogni
   volta che si apre una pagina. */
.barra-cursore.fermo{ transition:none; }

@media (prefers-reduced-motion: reduce){
  .barra-cursore{ transition:opacity 0.18s ease-out; }
}
.barra-voce:active{ color:var(--text-2); }
.barra-voce:focus-visible{
  outline:2px solid var(--flame3, #ff7a00); outline-offset:-4px; border-radius:12px;
}

/* ---------------------------------------------------------------------------
   Il foglio degli strumenti.

   "Analisi" sono quattro pagine, e quattro voci non stanno in una barra da
   cinque. Invece di sceglierne una e nascondere le altre, il pulsante apre un
   foglio che sale dal basso: le quattro restano tutte a un dito di distanza.
   ------------------------------------------------------------------------- */
.foglio-velo{
  position:fixed; inset:0; z-index:1160;
  background:rgba(4,4,6,0.6);
  opacity:0; pointer-events:none;
  transition:opacity 0.2s ease-out;
}
.foglio-velo.aperto{ opacity:1; pointer-events:auto; }

.foglio{
  position:fixed; z-index:1170;
  top:auto;
  /* Si ferma SOPRA alla barra, non dietro. Prima era `bottom:0` con
     un'imbottitura grossa in fondo: le voci stavano sopra la barra, ma il
     pannello no — il suo fondo scuro continuava dietro e intorno alla barra
     fino al bordo dello schermo, e siccome la barra galleggia staccata di
     dieci pixel quel fondo si vedeva spuntare da sotto e ai lati. Sembrava
     che il menu' uscisse da sotto la barra invece che da lei.
     Il conto: dieci di stacco della barra dal fondo, settanta di barra, dieci
     di aria fra le due. Sotto ai novanta c'e' solo la barra. */
  left:10px; right:10px;
  bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  padding:10px 10px 12px;
  /* Un foglio piu' alto dello schermo cresce verso il basso, cioe' sotto al
     bordo: e' quello che succedeva al foglio dell'account appena gli si e'
     aggiunta una riga — "Esci" finiva fuori e non c'era modo di arrivarci.
     Con un tetto e lo scorrimento interno il foglio si ferma e il resto si
     raggiunge col dito. Il tetto lascia fuori i novanta della barra: se no il
     foglio si allunga fin sotto di lei un'altra volta. */
  max-height:calc(86vh - 90px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  background:var(--fondo-3, #17171f);
  border:1px solid var(--border);
  /* Tondo da tutte e quattro le parti: non e' piu' un foglio incollato al
     bordo dello schermo, e' un pannello che galleggia sopra la barra, con lo
     stesso raggio e lo stesso stacco dai lati che ha lei. */
  border-radius:22px;
  box-shadow:0 18px 44px rgba(0,0,0,0.55);
  /* Sale dalla barra che l'ha chiamato. La corsa parte da sotto il pannello —
     cioe' da dove sta la barra — e finisce al suo posto; il dissolversi
     insieme toglie lo scatto che si vedeva sull'ultimo pezzo di corsa.
     Curva in uscita: entra deciso e si posa, invece di frenare all'inizio.
     Una transizione e non un'animazione a fotogrammi, cosi' se lo si richiude
     a meta' corsa torna indietro da dove si trova. */
  transform:translateY(calc(100% + 10px)) scale(0.98);
  transform-origin:50% 100%;
  opacity:0;
  /* Da chiuso non deve intercettare niente. Prima non serviva dirlo: il foglio
     scendeva tutto fuori dallo schermo. Adesso che si ferma sopra la barra, un
     pannello invisibile ma ancora presente si mangerebbe i tocchi diretti alla
     barra — che gli sta esattamente sotto. */
  pointer-events:none;
  transition:transform 0.26s cubic-bezier(.2,.8,.2,1),
             opacity 0.16s ease-out;
}
.foglio.aperto{
  transform:translateY(0) scale(1); opacity:1; pointer-events:auto;
}
.foglio-maniglia{
  width:38px; height:4px; border-radius:999px;
  background:var(--su-3); margin:0 auto 10px;
}
.foglio a{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px; border-radius:var(--r-md, 14px);
  color:var(--text-2); text-decoration:none;
}
.foglio a + a{ margin-top:2px; }
.foglio a.qui{ background:var(--su-1); color:var(--text); }
.foglio a strong{ display:block; font-size:0.95rem; }
.foglio a small{ display:block; color:var(--text-dim); font-size:0.76rem; margin-top:1px; }
.foglio a svg{ width:20px; height:20px; flex-shrink:0; color:var(--flame3, #ff7a00); }

/* Chi ha chiesto meno movimento vede comparire il foglio senza il viaggio: la
   direzione da cui arriva la si capisce lo stesso da dove sta. */
@media (prefers-reduced-motion: reduce){
  .foglio{ transition:opacity 0.15s ease-out; transform:none; opacity:0; pointer-events:none; }
  .foglio.aperto{ transform:none; opacity:1; pointer-events:auto; }
}

/* "L'ho gia' aggiunto": la via d'uscita per chi il sito ce l'ha gia' ma il
   browser non lo sa — su iPhone e' l'unico modo di saperlo. Scritta piccola e
   spenta, perche' e' un'uscita di servizio e non la strada principale. */
.installa-fatto{
  display:block; width:100%; margin-top:10px;
  background:none; border:0; padding:6px 0;
  color:var(--text-dim); font-family:inherit; font-size:0.78rem;
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.installa-fatto:hover{ color:var(--text-2); }

/* ==========================================================================
   Il passaggio da una pagina all'altra.

   Il sito e' fatto di pagine vere, una per indirizzo: toccando una voce della
   barra il browser scarica un documento nuovo, e per una frazione di secondo
   lo schermo resta vuoto. Su un telefono, con la barra in fondo che somiglia a
   quella di un'applicazione, quel vuoto e' la cosa che tradisce subito che
   applicazione non e': nelle app la scheda cambia, la barra no.

   Il rimedio non e' riscrivere il sito a pagina unica — sarebbe rifare tutto —
   ma chiedere al browser di fare lui la transizione fra i due documenti. Basta
   che se lo aspettino tutte e due, ed e' il caso: questo foglio lo carica ogni
   pagina. Dove non e' supportato non succede niente di male: si torna al
   passaggio secco di prima, che e' esattamente come funzionava finora.
   ========================================================================== */
@view-transition{ navigation: auto; }

/* Il contenuto sfuma, e in fretta: 180 millisecondi. Piu' lungo di cosi', su
   un gesto che si ripete decine di volte al giorno, diventa una cosa da
   aspettare. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:180ms;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

/* La barra invece NON sfuma: ha un nome suo, quindi il browser la riconosce
   come lo stesso oggetto nelle due pagine e la lascia dov'e'. E' tutta qui la
   differenza fra "ho cambiato pagina" e "ho cambiato scheda". */
.barra-app{ view-transition-name:barra-app; }
::view-transition-old(barra-app),
::view-transition-new(barra-app){
  animation:none; mix-blend-mode:normal;
}

/* Il tocco deve rispondere subito, senza aspettare la pagina nuova: appena si
   preme, la voce si accende. E' il trucco che fa sembrare istantaneo un
   passaggio che istantaneo non e'. */
.barra-voce.in-arrivo{ color:var(--flame3, #ff7a00); }

/* ---------- il verso: da quale parte ci si sta spostando ----------

   La dissolvenza dice "e' cambiato qualcosa". Questo dice "ci siamo spostati
   di una voce, verso destra" — ed e' il motivo per cui in un'applicazione si
   sa sempre dove si e' finiti senza doverlo leggere.

   La vecchia esce da una parte, la nuova entra dall'altra: le due si muovono
   NELLO STESSO VERSO, una dietro l'altra, come un nastro che scorre. Se
   andassero l'una incontro all'altra sarebbe un incrocio, non uno spostamento.

   Il viaggio e' un quarto di schermo e non uno intero: a schermo pieno, su un
   gesto che si ripete cento volte al giorno, si aspetterebbe la fine. Un
   quarto basta all'occhio per prendere la direzione, e la dissolvenza copre
   il resto della strada.

   Chi mette il verso e' assets/interfaccia.js, sull'elemento <html>, un attimo
   prima che il disegno cominci. Senza quell'attributo restano le due regole
   qui sopra e non cambia niente. */
@keyframes btg-esce-a-sinistra{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(-25%); opacity:0; }
}
@keyframes btg-entra-da-destra{
  from{ transform:translateX(25%); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
@keyframes btg-esce-a-destra{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(25%); opacity:0; }
}
@keyframes btg-entra-da-sinistra{
  from{ transform:translateX(-25%); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}

/* Un filo piu' lunga della dissolvenza secca: un movimento ha bisogno di
   qualche fotogramma in piu' per essere letto come movimento, se no e' uno
   scatto. Duecentoquaranta, non trecento: oltre, il ritorno indietro comincia
   a farsi aspettare. */
html[data-verso]::view-transition-old(root),
html[data-verso]::view-transition-new(root){
  animation-duration:240ms;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
  animation-fill-mode:both;
}
html[data-verso="avanti"]::view-transition-old(root){ animation-name:btg-esce-a-sinistra; }
html[data-verso="avanti"]::view-transition-new(root){ animation-name:btg-entra-da-destra; }
html[data-verso="indietro"]::view-transition-old(root){ animation-name:btg-esce-a-destra; }
html[data-verso="indietro"]::view-transition-new(root){ animation-name:btg-entra-da-sinistra; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
  /* Anche col verso messo: chi ha chiesto meno movimento non deve vedere
     mezzo schermo scorrere. Il verso non glielo mette nemmeno il programma,
     ma se un giorno cambiasse, qui la porta resta chiusa. */
  html[data-verso]::view-transition-old(root),
  html[data-verso]::view-transition-new(root){ animation:none; }
}

/* ==========================================================================
   In modalita' app la barra in alto non c'e' piu'.

   Restava con dentro il logo e il pulsante a panino, e nient'altro: Analisi,
   Community e Race Hub erano gia' passate in fondo. Un pulsante che apre un
   menu di due voci, tenuto in cima dove il pollice non arriva, mentre a
   portata di dito c'e' gia' tutto il resto: e' una fila di pulsanti che
   occupa un centimetro di schermo per non dire niente. Nelle applicazioni,
   infatti, in cima non c'e' una barra di navigazione: c'e' il titolo di dove
   sei, e la navigazione sta sotto.

   Le due cose che vivevano li' — l'account e le voci "Info" — non sono state
   buttate: sono nel foglio che apre il pulsante Account.
   ========================================================================== */
html.app-barra nav{ display:none; }

/* La stessa regola anche senza passare dal codice, per sicurezza: se un
   domani quelle righe nel <head> sparissero, o fossero lente ad arrivare, il
   foglio di stile e' gia' qui e la barra in alto non lampeggia comunque.
   Questa via non conosce la chiave di prova — vale solo per l'app installata
   davvero, che e' il caso che conta. */
@media (display-mode: standalone) and (max-width: 860px){
  nav{ display:none; }
  body{ padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)); }
  #scrollProgress{
    position:fixed; top:0; left:0; right:0; z-index:60;
    opacity:1; border-radius:0;
  }
}

/* La riga di avanzamento della lettura viveva dentro alla barra, quindi
   sparirebbe con lei. Qui torna appoggiata al bordo alto dello schermo, dove
   la mettono le applicazioni che leggono articoli. Il posto glielo cambia
   assets/interfaccia.js, che in modalita' app non la infila piu' nel <nav>. */
html.app-barra #scrollProgress{
  position:fixed; top:0; left:0; right:0; z-index:60;
  opacity:1; border-radius:0;
}

/* Il pulsante scarno del pannello dell'account. Stava scritto dentro a due
   pagine su undici, e il pannello e' su tutte: sulle altre nove "Cambia foto
   profilo" ed "Esci" uscivano come pulsanti bianchi di sistema. Qui vale
   ovunque; le pagine che lo ridefiniscono vincono lo stesso, perche' il loro
   foglio viene dopo questo. */
.btn-ghost{
  display:inline-block; width:100%; margin-top:10px; padding:11px 20px;
  border-radius:var(--r-pill); background:none; border:1px solid var(--border);
  color:var(--text-2); font-family:inherit; font-weight:700; font-size:0.8rem;
  letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; text-decoration:none;
  transition:border-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) and (pointer: fine){
  .btn-ghost:hover{ border-color:var(--text-dim); color:var(--text); }
}

/* ---- il pannello dell'account dentro la pagina del profilo ----
   Il pannello non viene ricostruito: profilo.html si prende quello che c'e'
   gia' nella barra. Cosi' la foto, il cambio immagine e l'uscita continuano
   a funzionare senza toccare una riga di quel codice — sono esattamente gli
   stessi nodi, solo appesi altrove. Qui smette di essere una tendina e
   diventa contenuto: niente posizione assoluta, niente ombra, niente
   apparizione da governare. */
.foglio-riga{
  height:1px; background:var(--linea); margin:10px 12px;
}
#profiloAccountPosto .account{ position:static; }
/* Il pulsante che apriva la tendina qui non serve: siamo gia' nel profilo. */
#profiloAccountPosto #accountTrigger,
#profiloAccountPosto .account-entra{ display:none !important; }
#profiloAccountPosto .account-pannello{
  position:static; width:auto; padding:0;
  background:none; border:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transform:none; opacity:1; visibility:visible; pointer-events:auto;
  transition:none; display:block;
}
/* Il titolo "Il tuo account" lo dice gia' l'intestazione della pagina. */
#profiloAccountPosto .account-titolo{ display:none; }
#profiloAccountPosto .account-sez{ padding:0; }
/* "Cambia foto" ed "Esci" qui non si vedono: stanno nel menu' a tre linee.
   Restano pero' nel documento, perche' e' a loro che quel menu' passa il
   clic — rifarli sarebbe una seconda copia da tenere allineata. */
#profiloAccountPosto #accountFotoBtn,
#profiloAccountPosto #accountEsci{ display:none; }
/* E nemmeno la riga dei preferiti: qui sotto ci sono gia' le tre tessere
   grandi, che dicono la stessa cosa meglio. */
#profiloAccountPosto #pfRiga{ display:none; }

/* ==========================================================================
   PILOTI E SCUDERIA DEL CUORE

   La riga nel pannello dell'account e lo schermo di scelta che apre.

   Le tessere sono quelle della pagina Piloti, non un'invenzione nuova: chi
   arriva qui le ha gia' viste, quindi non deve imparare niente. Cambia solo
   cosa fa il tocco — li' apre la scheda, qui sceglie. Per questo manca il
   giro della card su se' stessa: in un menu' di scelta nasconderebbe proprio
   la faccia che stai scegliendo, e sullo stesso gesto ci sarebbero due
   significati diversi. Al suo posto il bianco e nero fa da interruttore:
   spento se non e' scelto, a colori quando lo e'.

   Tutti i nomi cominciano per pf-: nel foglio condiviso una classe .card
   finirebbe addosso alle nove pagine che ce l'hanno gia'.
   ========================================================================== */

/* ---- la riga nel pannello dell'account --------------------------------- */
.pf-riga{
  display:flex; align-items:center; gap:12px; width:100%;
  margin-bottom:8px; padding:9px 10px; border-radius:14px;
  background:var(--su-1); border:1px solid var(--border);
  color:var(--text-2); font-family:inherit; font-size:0.9rem;
  cursor:pointer; text-align:left;
  transition:background 0.16s ease-out;
}
.pf-riga:hover{ background:var(--su-2); }
.pf-facce{ display:flex; align-items:center; flex-shrink:0; }
.pf-facce img{
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  background:var(--fondo-3); border:2px solid var(--fondo-2);
}
.pf-facce img + img{ margin-left:-11px; }
.pf-facce .pf-scuderia{
  width:26px; height:26px; object-fit:contain; margin-left:6px; border:0; background:none;
}
.pf-testo{ min-width:0; }
.pf-testo strong{ display:block; font-size:0.9rem; color:var(--text); }
.pf-testo small{
  display:block; font-size:0.76rem; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pf-freccia{ margin-left:auto; color:var(--text-dim); font-size:1.15rem; }
.pf-vuoto{
  width:32px; height:32px; border-radius:50%;
  border:1px dashed var(--su-3); display:grid; place-items:center;
  color:var(--text-dim); font-size:0.85rem;
}
.pf-vuoto + .pf-vuoto{ margin-left:-11px; }

/* ---- lo schermo di scelta ---------------------------------------------- */
.pf-sce{
  position:fixed; inset:0; z-index:1300;
  display:flex; flex-direction:column;
  background:var(--bg);
  opacity:0; pointer-events:none;
  /* Da 0.98, mai da zero: una cosa che parte da zero sembra arrivata dal
     nulla; partire quasi a misura la fa sembrare gia' li'. */
  transform:scale(0.98);
  transition:opacity 0.2s ease-out, transform 0.24s cubic-bezier(.2,.8,.2,1);
}
.pf-sce.aperto{ opacity:1; transform:none; pointer-events:auto; }

.pf-testa{
  flex-shrink:0; padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 10px;
  border-bottom:1px solid var(--linea);
}
.pf-testa-riga{ display:flex; align-items:center; gap:10px; }
.pf-testa-riga h2{
  margin:0; font-family:'Anton', sans-serif; font-size:1.3rem;
  letter-spacing:0.02em; text-transform:uppercase;
}
.pf-chiudi{
  margin-left:auto; width:36px; height:36px; border-radius:50%;
  background:var(--su-2); border:0; color:var(--text-2);
  font-size:1.1rem; line-height:1; cursor:pointer;
  transition:transform 0.16s cubic-bezier(.2,.8,.2,1), background 0.16s ease-out;
}
.pf-chiudi:active{ transform:scale(0.9); }

/* i due posti: il promemoria di cosa manca, sempre in vista */
.pf-posti{ display:flex; gap:8px; margin-top:10px; }
.pf-posto{
  flex:1; min-width:0; display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:14px; min-height:52px;
  background:var(--su-1); border:1px solid var(--border);
  transition:border-color 0.24s ease-out;
}
.pf-posto img{ width:36px; height:36px; border-radius:50%; object-fit:cover;
  background:var(--fondo-3); flex-shrink:0; }
.pf-posto .pf-vuoto{ width:36px; height:36px; flex-shrink:0; }
.pf-posto b{ display:block; font-size:0.85rem; color:var(--text); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-posto span{ display:block; font-size:0.66rem; color:var(--text-dim);
  letter-spacing:0.1em; text-transform:uppercase; }
/* Chi arriva nel posto entra da sotto e si posa. */
.pf-posto .dentro{ animation:pf-posato 0.32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pf-posato{
  from{ opacity:0; transform:translateY(8px) scale(0.9); }
  to  { opacity:1; transform:none; }
}

.pf-tab{ display:flex; gap:6px; margin-top:10px; }
.pf-tab button{
  flex:1; padding:8px 0; border-radius:999px; border:0;
  background:var(--su-1); color:var(--text-dim);
  font-family:inherit; font-size:0.78rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
  transition:color 0.18s ease-out, background 0.18s ease-out;
}
.pf-tab button[aria-selected="true"]{ background:var(--su-3); color:var(--text); }

/* ---- la griglia -------------------------------------------------------- */
.pf-corpo{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pf-griglia{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:20px; padding:16px; max-width:1320px; margin:0 auto;
}
.pf-griglia[hidden]{ display:none; }

.pf-card{
  --team:#ff1500;
  position:relative; height:400px; cursor:pointer; padding:0;
  border-radius:var(--r-lg, 20px); overflow:hidden;
  background:linear-gradient(165deg, var(--fondo-3) 0%, #0b0b0f 55%, #08080a 100%);
  border:1px solid var(--border);
  color:var(--text); font-family:inherit; text-align:left;
  transition:border-color 0.3s ease, box-shadow 0.3s ease,
             transform 0.18s cubic-bezier(.2,.8,.2,1);
}
.pf-card:active{ transform:scale(0.98); }
.pf-card.scelto{
  border-color:color-mix(in srgb, var(--team) 75%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--team) 55%, transparent),
             0 26px 60px rgba(0,0,0,0.65), 0 0 44px -14px var(--team);
}

.pf-hatch{
  position:absolute; inset:-40% -10%; pointer-events:none; opacity:0.10;
  background:repeating-linear-gradient(115deg, var(--team) 0 2px, transparent 2px 15px);
  animation:pf-hatch 9s linear infinite;
  transition:opacity 0.4s ease;
}
@keyframes pf-hatch{ to{ transform:translateX(15px); } }
.pf-card.scelto .pf-hatch{ opacity:0.22; }

.pf-glow{
  position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background:radial-gradient(420px circle at 50% 40%,
             color-mix(in srgb, var(--team) 42%, transparent), transparent 62%);
  transition:opacity 0.4s ease;
}
.pf-card.scelto .pf-glow{ opacity:1; }

.pf-num{
  position:absolute; top:10px; right:10px; line-height:0.78;
  font-family:'Anton', sans-serif; font-size:8rem; color:transparent;
  -webkit-text-stroke:2px color-mix(in srgb, var(--team) 55%, transparent);
  opacity:0.55; pointer-events:none; user-select:none;
  transition:opacity 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}
.pf-card.scelto .pf-num{ opacity:0.95; -webkit-text-stroke-color:var(--team); }

.pf-shot-wrap{
  position:absolute; left:0; right:0; bottom:104px; height:250px;
  display:flex; align-items:flex-end; justify-content:center; pointer-events:none;
}
.pf-shot{
  max-height:100%; width:auto; object-fit:contain; object-position:bottom;
  filter:grayscale(0.85) contrast(1.05) drop-shadow(0 18px 26px rgba(0,0,0,0.75));
  transition:filter 0.45s ease;
}
.pf-card.scelto .pf-shot{
  filter:grayscale(0) contrast(1.08) drop-shadow(0 22px 30px rgba(0,0,0,0.8))
         drop-shadow(0 0 20px color-mix(in srgb, var(--team) 45%, transparent));
}

.pf-info{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px 20px;
  background:linear-gradient(180deg, transparent, rgba(6,6,9,0.86) 34%, rgba(6,6,9,0.97));
}
.pf-rankline{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.pf-rank{
  border-radius:var(--r-pill, 999px);
  font-family:'Anton', sans-serif; font-size:0.82rem; letter-spacing:0.05em;
  color:#08080a; background:var(--team); padding:3px 9px 2px; flex-shrink:0;
}
.pf-rank.primo{ background:linear-gradient(90deg, var(--flame3, #ff7a00), var(--flame4, #ffb52e)); }
.pf-pts{
  font-family:inherit; font-weight:700; font-size:0.76rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim);
}
.pf-sigla{
  font-family:'Anton', sans-serif; font-size:2.3rem; line-height:1;
  letter-spacing:0.02em; display:block;
  transition:color 0.4s ease;
}
.pf-card.scelto .pf-sigla{ color:var(--team); }
.pf-nome{ display:block; color:var(--text-corpo); font-weight:600;
  font-size:0.95rem; margin-top:2px; }
.pf-team{
  display:flex; align-items:center; gap:8px; margin-top:11px;
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em;
  font-weight:700; color:var(--team);
}
.pf-team img{ width:19px; height:19px; object-fit:contain; flex-shrink:0; }

.pf-bar{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--team), transparent);
  transform:scaleX(0.22); transform-origin:0 50%;
  transition:transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.pf-card.scelto .pf-bar{ transform:scaleX(1); }

.pf-segno{
  position:absolute; top:12px; left:12px; z-index:3;
  width:32px; height:32px; border-radius:50%;
  background:var(--team); color:#08080a;
  font-family:'Anton', sans-serif; font-size:1rem; line-height:32px; text-align:center;
  /* Supera la misura e torna indietro: su un gesto raro il rimbalzo ci sta.
     Sulle cose che si toccano cento volte al giorno no, ed e' per questo che
     il resto del sito non ce l'ha. */
  transform:scale(0.4); opacity:0;
  transition:transform 0.28s cubic-bezier(.2,1.5,.5,1), opacity 0.16s ease-out;
}
.pf-card.scelto .pf-segno{ transform:scale(1); opacity:1; }

/* le scuderie: stessa tessera, piu' bassa, col logo al posto del volto */
.pf-card.pf-marca{ height:220px; }
.pf-logo{
  position:absolute; left:0; right:0; top:0; bottom:74px;
  display:flex; align-items:center; justify-content:center;
}
.pf-logo img{
  width:150px; height:84px; object-fit:contain;
  filter:grayscale(0.85) drop-shadow(0 12px 22px rgba(0,0,0,0.6));
  transition:filter 0.45s ease;
}
.pf-card.pf-marca.scelto .pf-logo img{ filter:grayscale(0); }

/* ---- il fondo ---------------------------------------------------------- */
.pf-piede{
  flex-shrink:0; display:flex; align-items:center; gap:12px;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--linea);
}
.pf-stato{ font-size:0.78rem; color:var(--text-dim); }
.pf-fatto{
  margin-left:auto; padding:11px 26px; border-radius:999px; border:0;
  background:var(--flame-testo); color:#08080a;
  font-family:inherit; font-weight:700; font-size:0.9rem;
  letter-spacing:0.06em; text-transform:uppercase; cursor:pointer;
  transition:transform 0.16s cubic-bezier(.2,.8,.2,1);
}
.pf-fatto:active{ transform:scale(0.95); }

/* Su telefono una colonna sola, come nella pagina Piloti: due tessere da 290
   pixel non ci stanno, e rimpicciolirle vorrebbe dire buttare via il
   ritratto, che e' il motivo per cui la tessera esiste. */
@media (max-width:600px){
  .pf-griglia{ grid-template-columns:1fr; gap:16px; }
  .pf-card{ height:380px; }
  .pf-num{ font-size:7rem; }
}

/* L'accensione al passaggio vale solo dove c'e' un puntatore vero: su touch
   il :hover resta appiccicato dopo il tocco. */
@media (hover: hover) and (pointer: fine){
  .pf-card:hover{ border-color:color-mix(in srgb, var(--team) 45%, transparent); }
  .pf-card:hover .pf-glow{ opacity:0.8; }
  .pf-card:hover .pf-shot{
    filter:grayscale(0.25) contrast(1.06) drop-shadow(0 20px 28px rgba(0,0,0,0.78));
  }
}

/* Chi ha chiesto meno movimento: niente tratteggio che scorre, niente
   rimbalzo, niente scatto sotto al dito. Restano i colori, che sono
   l'informazione; sparisce lo spettacolo, che non lo e'. */
@media (prefers-reduced-motion: reduce){
  .pf-sce{ transition:opacity 0.15s ease-out; transform:none; }
  .pf-sce.aperto{ transform:none; }
  .pf-hatch{ animation:none; }
  .pf-card, .pf-shot, .pf-num, .pf-bar, .pf-sigla, .pf-glow, .pf-logo img{ transition:none; }
  .pf-card:active, .pf-chiudi:active, .pf-fatto:active{ transform:none; }
  .pf-segno{ transition:opacity 0.15s ease-out; transform:none; }
  .pf-card.scelto .pf-segno{ transform:none; }
  .pf-posto .dentro{ animation:none; }
}


/* ---- le tessere respirano ------------------------------------------------
   Un menu' di scelta fermo sembra una fotografia. Qui ogni tessera fa tre
   cose, tutte lente e tutte sfasate fra loro: il ritratto sale e scende, il
   numero dietro va nel verso opposto, e ogni tanto un velo di luce
   attraversa la tessera in diagonale.

   Tre regole che le tengono decenti invece di fastidiose:

   - girano SOLO sulle tessere a schermo (la classe la mette e la toglie un
     osservatore in interfaccia.js): venti animazioni accese per venti
     tessere che nessuno guarda si sentono, e si sentono mentre scorri;
   - muovono solo scala, posizione e trasparenza, cioe' le cose che il
     telefono sposta senza ridisegnare niente;
   - partono ognuna a un momento diverso, calcolato dal posto in classifica.
     All'unisono sembrerebbero un'unica cosa che respira invece di ventidue
     tessere vive.
   ------------------------------------------------------------------------- */
.pf-card.in-vista .pf-shot{
  animation:pf-galleggia 6.5s ease-in-out infinite;
  /* Il ritardo negativo fa partire ognuna gia' a meta' strada invece di
     tenerle ferme ad aspettare il proprio turno. */
  animation-delay:calc(var(--i, 0) * -0.45s);
}
@keyframes pf-galleggia{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(-9px); }
}

/* Il numero va nel verso opposto al ritratto: e' quel poco di profondita'
   che alla pagina Piloti da' il puntatore, e che su un telefono non c'e'. */
.pf-card.in-vista .pf-num{
  animation:pf-deriva 6.5s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -0.45s);
}
@keyframes pf-deriva{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(6px); }
}

/* Il velo di luce: passa una volta ogni sette secondi e per il resto del
   tempo sta fuori dalla tessera. Dura poco meno di un secondo — un riflesso,
   non un'insegna al neon. */
.pf-sheen{
  position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.13), transparent);
  transform:translateX(-140%) skewX(-14deg);
  pointer-events:none; opacity:0; z-index:2;
}
.pf-card.in-vista .pf-sheen{
  animation:pf-velo 7s cubic-bezier(.3,.6,.4,1) infinite;
  animation-delay:calc(var(--i, 0) * -0.9s);
}
@keyframes pf-velo{
  0%       { transform:translateX(-140%) skewX(-14deg); opacity:0; }
  6%       { opacity:1; }
  18%      { transform:translateX(270%)  skewX(-14deg); opacity:1; }
  24%, 100%{ transform:translateX(270%)  skewX(-14deg); opacity:0; }
}

/* I loghi non galleggiano: pulsano. Un marchio che ondeggia sembra
   appiccicato male, mentre un alone che va e viene si legge come
   illuminazione — e' la stessa cosa che fa il colore della scuderia dietro. */
.pf-card.pf-marca.in-vista .pf-logo img{
  animation:pf-respiro 5.5s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -0.6s);
}
@keyframes pf-respiro{
  0%, 100%{ transform:scale(1);    opacity:0.92; }
  50%     { transform:scale(1.06); opacity:1; }
}

/* La tessera scelta si muove piu' di quelle spente: e' l'unica su cui ha
   senso attirare l'occhio, ed e' anche l'unica a colori. */
.pf-card.scelto.in-vista .pf-shot{ animation-duration:5s; }
.pf-card.scelto.in-vista .pf-sheen{ animation-duration:5s; }

/* Niente di tutto questo per chi ha chiesto meno movimento: qui sarebbe la
   cosa piu' fastidiosa dell'intero sito, perche' non finisce mai. */
@media (prefers-reduced-motion: reduce){
  .pf-card.in-vista .pf-shot,
  .pf-card.in-vista .pf-num,
  .pf-card.in-vista .pf-sheen,
  .pf-card.pf-marca.in-vista .pf-logo img{ animation:none; }
  .pf-sheen{ display:none; }
}

/* ---- il segno nella community ------------------------------------------
   L'anello nel colore della scuderia attorno all'avatar, e la sigla del
   pilota accanto al nome. E' qui che la scelta serve a qualcosa: se si
   vedesse solo nel proprio pannello non la compilerebbe nessuno. */
.msg-avatar.pf-anello{ box-shadow:0 0 0 2px var(--tifo, transparent); }
.pf-tifo{
  font-weight:700; color:var(--tifo, var(--text-dim));
  margin-left:6px; letter-spacing:0.04em;
}

/* ==========================================================================
   9. L'apertura  —  SPENTA dal 23 agosto 2026
   Il velo che copre lo schermo mentre il marchio si forma. Nessuna pagina
   chiama piu' assets/intro.js, quindi queste regole non si accendono: si
   applicano solo sotto la classe `btg-intro`, che ora non la mette nessuno.
   Restano qui perche' riaccenderla e' una riga sola nella testa delle pagine:
   il richiamo a intro.js, che sta in assets/ insieme al resto. Il filmato e il
   suo fermo immagine stanno nella cartella assets/intro, sul computer: non
   vengono piu' caricati sul sito.
   ========================================================================== */

/* Questo colore si posa PRIMA che esista il corpo della pagina, quindi prima
   che ci sia qualcosa su cui appoggiare il velo vero. E' il pezzo che evita
   il lampo: senza, si vedrebbe mezza home e poi il logo sopra. */
html.btg-intro::before{
  content:''; position:fixed; inset:0; z-index:99998;
  background:var(--bg, #08080a);
}
/* Niente scorrimento sotto al velo: la rotellina lo chiude, non muove la
   pagina che c'e' dietro. */
html.btg-intro, html.btg-intro body{ overflow:hidden; }

.btg-apertura{
  position:fixed; inset:0; z-index:99999;
  display:grid; place-items:center;
  background:var(--bg, #08080a);
}
/* Il filmato e' quello originale, non toccato: nessun ritaglio, nessun
   filtro, nessuna ricompressione. Qualunque cosa gli si faccia qui — alzare
   il contrasto per far sparire il fondo, sommarlo al nero, sfumarne i bordi —
   e' un secondo passaggio sopra un file gia' compresso, e si paga in
   sgranatura. Quindi: si mostra e basta.
   Occupa tutta l'altezza dello schermo perche' e' verticale come lo schermo,
   e perche' su un telefono c'e' un'unica misura giusta: tutta. */
.btg-apertura-arte{
  position:relative; z-index:1;
  /* Misura esatta del filmato, non tutto il riquadro. Con `width:100%` piu'
     `object-fit:contain` l'elemento resta grande quanto lo schermo e il
     browser dipinge di NERO PIENO le due fasce che avanzano sopra e sotto:
     nero opaco, che copre il fondo sfocato messo apposta per riempirle. Con
     `max-` e basta, l'elemento e' largo e alto quanto il filmato e le fasce
     non esistono proprio — quello che sta sopra e sotto e' il fondo. */
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  /* Dentro una griglia ogni tessera ha un `min-height` automatico pari alla
     sua misura naturale, e un minimo scavalca un massimo: su uno schermo piu'
     tozzo del filmato il `max-height` qui sopra veniva ignorato e il filmato
     sbordava sotto. Questi due zeri lo rimettono in riga. Si vede solo da
     quando l'elemento sa quanto e' grande prima di avere i dati del video,
     cioe' da quando in `intro.js` ci sono `width` e `height`. */
  min-width:0; min-height:0;
  /* `contain` e non `cover`. Il filmato e' 1080x2338, cioe' esattamente le
     proporzioni di un telefono di oggi (390x844): li' riempie lo schermo da
     solo e non avanza niente. Ma non tutti i telefoni hanno quelle
     proporzioni, e su uno piu' tozzo `cover` taglierebbe i lati — che e'
     proprio dove sta il marchio: misurato sull'ultimo fotogramma, quello che
     si illumina va da 38 a 1041 su 1080, quasi da bordo a bordo. Tagliando si
     porterebbe via la B di BEYOND e la punta della fiammata. Con `contain` in
     quel caso avanzano due strisce ai lati, e le riempie il fondo sfocato. */
}

/* Quello che avanza ai bordi lo riempie il fermo immagine, allargato fino a
   coprire e sfocato. Su un telefono di oggi non si vede proprio: il filmato ha
   le stesse proporzioni dello schermo e copre tutto da solo. Serve sugli
   schermi piu' tozzi, dove `contain` lascia due strisce ai lati.
   Era un secondo filmato, e cambiava insieme a quello davanti: piu' bello, ma
   voleva dire chiedere lo stesso file due volte, dieci megabyte e mezzo, con
   le due richieste che si rubavano la banda proprio nei secondi in cui
   serviva tutta. L'apertura restava ferma sul fermo immagine. Adesso il fondo
   pesa sessanta kilobyte.
   Sfocato cosi' tanto non si legge come una seconda copia: si legge come luce.
   La scala oltre l'uno serve a non far entrare in campo il bordo sbavato che
   la sfocatura crea ai margini. */
.btg-apertura-sfondo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:blur(46px) brightness(0.55) saturate(1.15);
  transform:scale(1.25);
  pointer-events:none;
}

/* L'uscita. Il velo se ne va verso di noi — non e' un fermo immagine che
   svanisce, e' una cosa che si toglie di mezzo. Sotto, la pagina e' gia'
   disegnata da un pezzo: non c'e' niente da aspettare. */
.btg-apertura{
  transition:opacity 380ms cubic-bezier(.4, 0, .2, 1);
}
.btg-apertura-arte, .btg-apertura-sfondo{
  transition:transform 380ms cubic-bezier(.4, 0, .2, 1);
}
.btg-apertura.via{ opacity:0; pointer-events:none; }
.btg-apertura.via .btg-apertura-arte{ transform:scale(1.06); }
/* Anche il fondo si allarga uscendo, se no i due piani si staccherebbero
   proprio nel mezzo secondo in cui si guardano. */
.btg-apertura.via .btg-apertura-sfondo{ transform:scale(1.32); }

@media (prefers-reduced-motion: reduce){
  /* Resta la dissolvenza, sparisce il movimento: la richiesta e' "meno
     movimento", non "niente". */
  .btg-apertura.via .btg-apertura-arte{ transform:none; }
  .btg-apertura.via .btg-apertura-sfondo{ transform:scale(1.25); }
}

/* ==========================================================================
   10. Esplorare il modellino 3D
   I comandi e l'invito che assets/esplora3d.js appoggia sulle tre sezioni.
   ========================================================================== */

/* `touch-action: pan-y` e' la meta' della regola del dito: dice al browser che
   il movimento verticale resta suo. L'altra meta' — un dito che parte in
   verticale non gira la pista — sta nel codice, perche' qui non si puo' dire. */
.esp3d-tela{ cursor:grab; touch-action:pan-y; }
.esp3d-presa .esp3d-tela{ cursor:grabbing; }

.esp3d-zoom{
  position:absolute; right:14px; bottom:14px; z-index:4;
  display:flex; flex-direction:column; gap:8px;
}
.esp3d-zoom button{
  width:38px; height:38px; padding:0; border-radius:12px; cursor:pointer;
  font:inherit; font-size:1.15rem; font-weight:700; line-height:1;
  color:var(--text, #e8e8ee);
  background:rgba(19,19,24,0.82); border:1px solid var(--border, #232329);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
@media (hover: hover) and (pointer: fine){
  .esp3d-zoom button:hover{ border-color:var(--flame3, #ff7a00); color:#fff; }
}

/* L'invito. Non deve mai raccogliere un clic: il clic e' della pista. */
.esp3d-invito{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:0; transition:opacity 260ms cubic-bezier(.4, 0, .2, 1);
}
.esp3d-invito.acceso{ opacity:1; }
.esp3d-pillola{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  padding:9px 17px; border-radius:999px;
  background:rgba(10,10,13,0.78); border:1px solid var(--border, #232329);
  color:var(--text-2, #c3c3cc); font-weight:600; letter-spacing:0.06em;
  font-size:0.8rem;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.esp3d-pillola svg{ width:18px; height:18px; color:var(--flame3, #ff7a00); }
/* La manina e' quella che dice "trascina"; la scritta lo conferma soltanto. */
.esp3d-mano{
  position:absolute; left:50%; top:50%; width:34px; height:34px;
  margin:-17px 0 0 -17px; color:#fff; opacity:0;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,0.8));
}
.esp3d-mano svg{ width:100%; height:100%; }
.esp3d-alone{
  position:absolute; left:50%; top:50%; width:56px; height:56px;
  margin:-28px 0 0 -28px; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(255,122,0,0.42), transparent 68%);
}

@media (max-width:520px){
  .esp3d-pillola{ font-size:0.74rem; padding:8px 14px; bottom:16px; }
  .esp3d-zoom{ right:10px; bottom:10px; }
  .esp3d-zoom button{ width:34px; height:34px; }
}

/* ==========================================================================
   9. Il restyling di agosto 2026: superficie viva, tubo di luce, fondo pagina
   Approvato sulla pagina di prova (prova-restyling.html) e portato qui perche'
   vale per tutte le pagine. Riferimenti visivi principali su 21st.dev, tecniche
   CSS pure da codefronts.com — i link stanno nei commenti dei singoli blocchi.
   ========================================================================== */

/* ------------------------------------------------ 9a. la superficie viva
   La griglia di partenza che deriva piano sotto TUTTA la pagina, piu' una
   grana da pellicola. E' il fondo comune che cuce le sezioni fra loro: gli
   effetti d'ambiente delle singole pagine (la foschia del Race Hub, le righe
   di Community) restano loro, sopra questo.
   I due div li monta assets/interfaccia.js su ogni pagina.
   Riferimenti: https://21st.dev/@molecule-lab-rushil/components/vignette-grid-background
   e https://codefronts.com/motion/css-background-animations/grain-and-noise-texture-overlay/ */
/* Sta a z-index NEGATIVO: cosi' finisce sotto a tutto il contenuto, anche
   nelle pagine che non danno una posizione alle loro sezioni. Perche' si veda,
   il fondo pieno passa dal <body> all'<html>, e il body diventa trasparente:
   l'important serve a vincere sui body{background:var(--bg)} delle pagine,
   che vengono caricati dopo. */
html{ background:var(--bg); }
body{ background:transparent !important; }
/* overflow:hidden: gli strati dentro sbordano apposta (l'alba e' larga
   140vw) e su iOS un elemento fisso piu' largo dello schermo lascia
   trascinare la pagina di lato. Qui vengono ritagliati alla finestra. */
.superficie-viva{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.superficie-viva .sv-griglia{
  /* La deriva viaggia su TRANSFORM, non su background-position: la seconda
     ridisegna la pagina a ogni fotogramma, e sotto il video a scrub della
     home rubava fluidita' proprio durante lo scroll. Il riquadro sborda di
     300px per lato cosi' la traslazione non scopre mai il bordo; 280 e' il
     passo comune delle due trame (280 = 5 x 56), quindi il giro si chiude
     senza scatto. */
  position:absolute; inset:-340px;
  background-image:
    linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(rgba(255,122,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,0,.04) 1px, transparent 1px);
  background-size:56px 56px, 56px 56px, 280px 280px, 280px 280px;
  -webkit-mask-image:radial-gradient(115% 90% at 50% 38%, #000 25%, transparent 82%);
  mask-image:radial-gradient(115% 90% at 50% 38%, #000 25%, transparent 82%);
  animation:sv-deriva 120s linear infinite;
  will-change:transform;
}
@keyframes sv-deriva{ to{ transform:translate(280px, 280px); } }
/* Mentre il video a scrub della home e' nello schermo, la superficie sta
   ferma: ogni fotogramma va al video. La classe la mette index.html. */
html.fermo-sfondo .superficie-viva .sv-griglia,
html.fermo-sfondo .superficie-viva .sv-grana,
html.fermo-sfondo .superficie-viva .sv-alba{ animation-play-state:paused; }
/* L'alba dietro la testata: un velo caldo in cima a OGNI pagina, molto piu'
   timido dell'orizzonte della home. Serve alle pagine interne, che prima
   aprivano su nero piatto: e' il filo che le lega all'apertura del sito. */
.superficie-viva .sv-alba{
  position:absolute; left:50%; top:-10%; transform:translateX(-50%);
  width:140vw; height:44vh;
  background:radial-gradient(60% 100% at 50% 0%, rgba(255,122,0,.07), transparent 72%);
  animation:sv-alba 9s cubic-bezier(.22,1,.36,1) infinite alternate;
}
@keyframes sv-alba{ from{ opacity:.7; } to{ opacity:1; } }
.superficie-viva .sv-grana{
  position:absolute; inset:-80px; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:sv-grana 1s steps(6) infinite;
}
@keyframes sv-grana{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-24px,12px); }
  40%{ transform:translate(14px,-20px); } 60%{ transform:translate(-10px,-14px); }
  80%{ transform:translate(20px,18px); } 100%{ transform:translate(0,0); }
}
@media (prefers-reduced-motion:reduce){
  .superficie-viva .sv-griglia, .superficie-viva .sv-alba, .superficie-viva .sv-grana{ animation:none; }
}
/* SUL TELEFONO LA SUPERFICIE STA FERMA. Gli strati animati sbordano di
   centinaia di pixel per lato e con will-change diventano livelli GPU da
   decine di MB l'uno a densita' 3x: su pagine pesanti (Piloti, coi suoi
   ventidue ritratti) il compositore finiva la memoria e Chrome ammazzava
   la scheda dopo pochi secondi. Da ferma, la trama si dipinge con la
   pagina e non costa niente. */
@media (max-width:860px){
  .superficie-viva .sv-griglia{ inset:0; animation:none; will-change:auto; }
  /* la grana usa mix-blend-mode: su Safari iOS un livello a fusione fisso
     sopra una pagina lunga costa una fortuna — da telefono niente grana */
  .superficie-viva .sv-grana{ display:none; }
  .superficie-viva .sv-alba{ animation:none; }
}
/* Dove un fondo di sezione e' un colore PIENO la griglia non si vede, ed e'
   giusto cosi': vive nei respiri fra una sezione e l'altra. */

/* ------------------------------------------------ 9b. il tubo di luce
   La voce di menu della pagina in cui sei ha sopra una lama accesa, appoggiata
   al bordo alto della barra; a sfiorare un'altra voce la lama le si accende
   sopra. Sostituisce la sottolineatura a gradiente (che era il vecchio hover).
   Riferimento: https://21st.dev/@ayushmxxn/components/tubelight-navbar */
@media (min-width:861px){
  nav .nav-menu > li > a::after{ display:none; }   /* via la vecchia sottolineatura */
  nav .nav-menu > li{ position:relative; }
  nav .nav-menu > li > a, .nav-gruppo > .nav-gruppo-trigger{ position:relative; }
  nav .nav-menu > li > a::before,
  .nav-gruppo > .nav-gruppo-trigger::before{
    content:""; position:absolute; left:50%; top:-27px;
    width:60%; height:3px; border-radius:3px;
    transform:translateX(-50%) scaleX(.35);
    background:var(--flame-testo);
    box-shadow:0 0 12px 2px rgba(255,122,0,.7), 0 0 30px 8px rgba(255,122,0,.26);
    opacity:0;
    transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
  }
  nav .nav-menu > li > a.qui::before,
  .nav-gruppo.attivo > .nav-gruppo-trigger::before,
  nav .nav-menu > li > a:hover::before,
  .nav-gruppo > .nav-gruppo-trigger:hover::before{
    opacity:1; transform:translateX(-50%) scaleX(1);
  }
  /* la voce attiva torna bianca: il colore lo mette la lama, non il testo */
  nav .nav-menu > li > a.qui{ color:var(--text); }
  /* stessa regola per i gruppi: via la vecchia sottolineatura a gradiente
     (restava accesa INSIEME alla lama, due indicatori per la stessa cosa);
     a tendina aperta si accende la lama, come per la voce attiva */
  .nav-gruppo > .nav-gruppo-trigger::after{ display:none; }
  .nav-gruppo.attivo > .nav-gruppo-trigger{ color:var(--text); }
  .nav-gruppo.aperto > .nav-gruppo-trigger::before{ opacity:1; transform:translateX(-50%) scaleX(1); }
}

/* ------------------------------------------------ 9c. il fondo pagina
   Tre colonne: il marchio con la frase guida, le pagine del sito, le info.
   La riga finale tiene il testo che ogni pagina gia' aveva (disclaimer e
   crediti dei dati), che quindi non cambia.
   Riferimento: https://21st.dev/@easemize/components/motion-footer */
footer.piede{
  position:relative; z-index:1;
  padding:56px 24px 30px; text-align:left;
  color:var(--text-dim); font-size:0.9rem;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, rgba(255,122,0,.5), transparent) 1;
  background:linear-gradient(rgba(15,15,19,.6), rgba(8,8,10,.9));
}
footer.piede .piede-colonne{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px;
}
footer.piede .piede-marchio img{ height:40px; width:auto; margin-bottom:14px; }
footer.piede .piede-marchio p{
  color:var(--text-dim); font-weight:600; font-size:0.95rem; max-width:30ch; margin:0;
  font-family:'Rajdhani', system-ui, sans-serif;
}
footer.piede h4{
  font-family:'Rajdhani', system-ui, sans-serif;
  font-weight:700; font-size:0.74rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--flame-testo); margin:0 0 14px;
}
footer.piede ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer.piede ul a{
  color:var(--text-dim); font-weight:600; text-decoration:none; font-size:0.92rem;
  font-family:'Rajdhani', system-ui, sans-serif;
  transition:color .3s cubic-bezier(.22,1,.36,1);
}
footer.piede ul a:hover{ color:var(--text); }
footer.piede .piede-riga{
  max-width:1180px; margin:40px auto 0; padding-top:18px;
  border-top:1px solid var(--linea);
  color:#5a5a64; font-size:0.78rem; line-height:1.6;
  font-family:'Rajdhani', system-ui, sans-serif;
}
@media (max-width:760px){
  footer.piede .piede-colonne{ grid-template-columns:1fr 1fr; }
  footer.piede .piede-marchio{ grid-column:1 / -1; }
}

/* ------------------------------------------------ 9d. la barra a pastiglia
   Dal confronto con la pagina di prova: la barra piena da bordo a bordo,
   trasparente finche' non scorri, era la cosa che piu' allontanava il sito
   dalla prova approvata. Qui diventa una PASTIGLIA: larga quanto il suo
   contenuto, centrata, col vetro sempre acceso e l'ombra doppia (contatto
   stretto + alone largo). Le regole nav{} delle pagine restano nei file:
   questo blocco vince per specificita' (body nav) e viene caricato prima
   ma pesa di piu'.
   Riferimento: https://21st.dev/@ayushmxxn/components/tubelight-navbar
   e https://codefronts.com/navigation/css-glassmorphic-navbars/floating-pill-navbar/
   Solo da 861px in su: sotto, il pannello a panino ha bisogno della barra
   larga com'era. */
@media (min-width:861px){
  body nav{
    left:0; right:0; width:max-content; max-width:calc(100vw - 24px);
    margin-inline:auto;
    border-radius:999px;
    padding:8px 16px 8px 20px;
    gap:26px;
    border-color:var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.38);
  }
  body nav::before{ opacity:1; border-radius:inherit; }
  body nav.scrolled{ box-shadow:0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.38); }
}