/* Tema della proposta 2 · Materica (cartella C). Il metallo da vicino: nero, grana, titoli enormi con la parola forte in arancio,
   etichette in maiuscolo, blocchi arancio pieni, schede come targhette di metallo. */
:root{
  --p-sfondo:var(--grafite); --p-sfondo-alt:var(--nero); --p-sfondo-testa:var(--nero); --p-sfondo-passi:var(--grafite);
  --p-testo:var(--bianco); --p-tenue:var(--alluminio); --p-tenue-2:#8C949D;
  --p-filetto:rgba(201,206,212,.16); --p-filetto-forte:rgba(201,206,212,.4);
  --p-accento:var(--arancio); --p-accento-testo:var(--arancio); --p-su-accento:var(--nero);
  --p-chiaro:var(--chiaro); --p-su-chiaro:var(--nero); --p-su-chiaro-tenue:#3A4048;
  --p-h1-peso:300; --p-h1-max:150px; --p-h1-spazio:-.045em;
  --p-h2-peso:300; --p-h2-spazio:-.04em; --p-h2-maiuscolo:none;
  --p-forte-peso:800; --p-forte-colore:var(--arancio); --p-forte-colore-h2:var(--arancio);
  --p-h3-font:800 clamp(22px,1.9vw,28px) var(--disp); --p-h3-maiuscolo:uppercase;
  --p-num-font:800 40px var(--disp);
  --p-cifra-font:800 clamp(52px,5.6vw,92px) var(--disp);
  --p-elenco-font:700 22px var(--disp);
  --p-link-font:700 13px var(--disp); --p-link-stretch:125%; --p-link-spazio:.04em; --p-link-maiuscolo:uppercase;
  --p-scheda:linear-gradient(160deg,#2A2F35,#1A1D21 70%); --p-scheda-bordo:1px solid rgba(201,206,212,.22); --p-schede-gap:18px;
  --p-figura-filtro:grayscale(.2) brightness(.6);
  --p-menu-qui:var(--arancio); --p-raggio:0; --p-fondo:var(--nero);
  --p-quota-sfondo:var(--arancio); --p-quota-testo:var(--nero); --p-quota-tenue:#24282D; --p-quota-forte:var(--nero);
}
/* Titoli in Anybody (03/11, D-053; Riccardo: la «g» presa da Unbounded «si vede che è una sostituzione solo di quella G… l'alternativa più
   pulita possibile»; tra quattro strade ha scelto «Sì, Anybody»). Un carattere intero per tutto ciò che usava il carattere dei titoli
   (--disp: titoli, numeri, pulsanti, menu), nessuna lettera presa da un altro; testi ed etichette restano in Archivo (--txt, --mono).
   Larghezza 114: con Anybody occupa lo stesso spazio di Archivo al 125% (misurato su «Due sedi, una linea tecnologica.»), così i titoli
   non cambiano misura. File sul nostro server (latino e latino esteso, per il tedesco), licenza SIL OFL 1.1 in font/OFL-Anybody.txt.
   Prima: solo la g da Unbounded (font/argo-g.woff2, scelta del 30/10), che resta solo per la proposta 1, archiviata. */
@font-face{font-family:"Anybody";src:url("font/anybody-latin.woff2") format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anybody";src:url("font/anybody-latin-ext.woff2") format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* 05/11 (regola 2.4, D-044 punto 5, Riccardo: «scarica pure»): anche Archivo, il carattere di testi ed etichette, è sul nostro server
   e non più su Google Fonts, così le visite non mandano l'indirizzo IP a Google. Gli stessi file variabili che dava Google (versione 25,
   larghezza 62–125%, peso 100–900, scaricati il 05/11 alle 09:18), latino e latino esteso; licenza SIL OFL 1.1 in font/OFL-Archivo.txt. */
@font-face{font-family:"Archivo";src:url("font/archivo-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("font/archivo-latin-ext.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--disp:"Anybody",Archivo,sans-serif;--disp-w:114%}
.p-testa h1{text-transform:none}
.p-scheda{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.p-scheda .sopra::before{content:"";display:inline-block;width:8px;height:8px;background:var(--arancio);margin-right:10px;vertical-align:1px}
.p-quota .p-mat a{border-color:rgba(17,19,22,.4)}
.p-quota .contatti a{border-color:var(--nero)}
.p-numeri strong small{font-weight:300}

/* etichetta sopra i titoli (nella home della proposta non c'era) */
.eti{font:700 12px/1 var(--disp);font-stretch:var(--disp-w);letter-spacing:.1em;text-transform:uppercase;color:var(--alluminio);display:flex;align-items:center;gap:12px}
.eti::before{content:"";width:10px;height:10px;background:var(--arancio);flex:none}
/* 03/11: ogni pagina ha la sua foto di testata (prima il macinato era in testa a tutte); senza foto la testata resta scura.
   La foto è un <img> sotto la sfumatura scura, con srcset (genera_staging.py) e un movimento leggero: si assesta all'apertura
   e scorre più lenta della pagina («lente», in fondo a questo blocco). Con «riduci movimento» resta ferma.
   overflow:clip e non hidden: un riquadro con hidden è un «contenitore che scorre» e il movimento si legherebbe a lui, non alla pagina. */
.p-testa{position:relative;isolation:isolate;overflow:clip;background:var(--nero);border-bottom:0}
.p-testa.con-foto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,19,22,.94) 0%,rgba(17,19,22,.74) 42%,rgba(17,19,22,.18) 100%)}
.p-testa-foto{position:absolute;left:0;top:-9%;z-index:-2;width:100%;height:118%;object-fit:cover;object-position:center 45%;animation:respiro 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes respiro{from{scale:1.07;opacity:0}to{scale:1;opacity:1}}
@media (max-width:700px){.p-testa.con-foto::before{background:linear-gradient(180deg,rgba(17,19,22,.42) 0%,rgba(17,19,22,.72) 50%,rgba(17,19,22,.92) 100%)}
  .p-testa-foto{object-position:82% 50%}}   /* le foto di testata hanno il soggetto nel terzo destro: sul telefono si vede quello */
/* 03/11: foto tenue sotto alcune sezioni (le più spente). Sfuma in alto e in basso, così le sezioni restano diverse tra loro senza stacchi.
   La sfumatura è sulla foto stessa, non sul riquadro: così si sposta insieme alla foto senza essere ridisegnata a ogni fotogramma.
   La foto è alta il 120% della sezione e si sposta al massimo di ±6%: le soglie lasciano sempre trasparenti i bordi della sezione. */
.con-sfondo{position:relative;isolation:isolate;overflow:clip}
.c-cert .cert.con-sfondo{overflow:clip}   /* componenti.css arriva dopo e le dava hidden («.c-cert .cert») */
.p-sfondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.p-sfondo img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;opacity:var(--sfondo-forza,.2);
  -webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 32%,#000 68%,transparent 86%);mask-image:linear-gradient(180deg,transparent 14%,#000 32%,#000 68%,transparent 86%)}
.chiaro .p-sfondo img,.p-sez.chiara .p-sfondo img{--sfondo-forza:.32}   /* niente «multiply»: sul fondo chiaro cambia meno del 2% e pesa a ogni fotogramma */
/* Progetto UE: pagina chiara, la testata è larga 1180 px; il cielo riflesso va a tutta larghezza e sfuma verso il basso */
.c-ue{overflow-x:clip}
.ue-testa.con-sfondo{overflow:visible}
.ue-testa .p-sfondo{right:auto;width:100vw}
.p-sfondo img[src*="34_sfondo_end_of_waste"]{--sfondo-forza:.12}   /* 05/11: titolo arancio leggibile sopra la foto (contrasto 3,6:1) */
.ue-testa .p-sfondo img{--sfondo-forza:.42;-webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 30%,#000 50%,transparent 86%);mask-image:linear-gradient(180deg,transparent 14%,#000 30%,#000 50%,transparent 86%)}
/* Materiali: la foto di testata è uno sfondo (la testata della pagina è quella della proposta), più forte e sfumata solo in basso */
.p-testa-materiali .p-sfondo img{--sfondo-forza:.6;object-position:right center;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 86%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 86%)}
/* «lente», 03/11 pomeriggio (Riccardo, dal telefono: «troppo scattoso»): prima il movimento lo calcolava sito.js a ogni scorrimento e
   arrivava sempre un attimo dopo il dito. Ora lo fa il browser legando l'animazione alla posizione nella pagina (animation-timeline:
   view()): gira sul motore grafico, separato dallo script (Chrome; Safari dalla 26.4, blog di WebKit «WebKit Features for Safari 26.4»).
   La classe lente-viva la mette sito.js solo dove il browser lo sa fare così; altrove le foto restano ferme. */
@keyframes lente{from{transform:translate3d(0,-6%,0)}to{transform:translate3d(0,6%,0)}}
@media (prefers-reduced-motion:no-preference){
  .lente-viva [data-parallax]{will-change:transform;animation:lente linear both;animation-timeline:view()}
  .lente-viva .p-testa-foto{animation:respiro 2.4s cubic-bezier(.2,.7,.2,1) both,lente linear both;animation-timeline:auto,view()}
}
@media (prefers-reduced-motion:reduce){.p-testa-foto{animation:none}}
.p-testa .lead{color:var(--chiaro)}
/* i numeri su blocco arancio pieno, come in home */
.p-sez-numeri{background:var(--arancio);color:var(--nero)}
.p-sez-numeri .p-h2 b{color:var(--nero)}
.p-sez-numeri .p-numeri{border-color:var(--nero)}
.p-sez-numeri .p-numeri div{border-color:rgba(17,19,22,.25)}
.p-sez-numeri .p-numeri span{color:var(--nero);font-weight:500}

/* 03/11 (Riccardo, pagina Azienda: «nell'angolo in basso a destra di quella sezione scura una A… sfumata che si intravede, del logo»):
   il simbolo del logo in filigrana, come nella tavola del payoff del sito (03_Logo_definitivo/sorgente/payoff_sito.py, simbolo al 5%).
   Tagliato dal bordo della sezione, sfuma verso l'alto a sinistra, sotto i testi */
.p-sez-argo{position:relative;overflow:hidden;isolation:isolate}
.p-sez-argo::after{content:"";position:absolute;z-index:-1;right:-7%;bottom:-14%;width:clamp(260px,40vw,620px);aspect-ratio:1010/1000;background:url("img/simbolo_negativo.svg") right bottom/contain no-repeat;opacity:.07;pointer-events:none;-webkit-mask-image:linear-gradient(to top left,#000 30%,transparent 78%);mask-image:linear-gradient(to top left,#000 30%,transparent 78%)}

/* 03/11 (Riccardo: i numeri «entrino con un'animazione degna… semplice e fluida… fluidissima»): ogni cifra sale da sotto la sua riga
   (la riga resta ferma, si muove solo il testo: solo spostamento e trasparenza, che il telefono fa con la scheda grafica, senza
   ricalcolare la pagina), poi la didascalia. Parte quando il numero entra nello schermo (sito.js, classe «visto»); sul computer i quattro
   numeri partono uno dopo l'altro, sul telefono ognuno quando arriva. Niente conteggio delle cifre: cambia il testo a ogni fotogramma */
.p-numeri>.sale{opacity:1;transform:none;transition:none}
.p-numeri strong{overflow:hidden;padding:.06em .14em .1em 0;margin:-.06em -.14em -.1em 0}
.p-numeri .su{display:inline-block;font-style:normal;transform:translate3d(0,112%,0);transition:transform 1.05s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * 130ms)}
.p-numeri>div>span{opacity:0;transform:translate3d(0,14px,0);transition:opacity .8s ease calc(var(--i,0) * 130ms + 300ms),transform 1s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * 130ms + 300ms)}
.p-numeri>.visto .su,.p-numeri>.visto>span{opacity:1;transform:none}
@media (max-width:640px){.p-numeri>div{--i:0!important}}
@media (prefers-reduced-motion:reduce){.p-numeri .su,.p-numeri>div>span{opacity:1;transform:none;transition:none}}

/* 03/11 (Riccardo, dal telefono: «rimuovi un po' di margine vuoto tra la top bar e l'inizio del primo titolo»): sul telefono il primo
   elemento della pagina sta a 36 px dalla barra (prima: pagine interne 70 px, Qualità 76, Progetto UE 60; Materiali nella sua pagina) */
@media (max-width:640px){
  .p-testa{padding-top:calc(var(--h-barra) + 36px)}
  body .c-cert .cert{padding-top:calc(var(--h-barra) + 36px)}      /* a fine animazione l'etichetta sta a 36 px (prima 20: la misura era a metà comparsa) */
  body .c-ue .ue-pagina{padding-top:calc(var(--h-barra) + 24px)}   /* + 12 px di margini interni: loghi a 36 px (misurato) */
}

/* 03/11 (revisione sul telefono): link alti 19–23 px. Un margine invisibile attorno ai link piccoli li rende facili da toccare senza
   spostare niente; nel menu aperto voci più alte (stesso spazio tra l'una e l'altra) e lingue da 44 px */
@media (max-width:700px){
  .p-link,.p-elenco a,.f-link a,.contatti a,.hero .tel,.hero .ue a,#qualita a.link,.p-testa .eti a,.f3-tel{position:relative}
  .p-link::before,.p-elenco a::before,.f-link a::before,.contatti a::before,.hero .tel::before,.hero .ue a::before,#qualita a.link::before,.p-testa .eti a::before,.f3-tel::before{content:"";position:absolute;inset:-14px -4px}
  .p-testa .eti a::before{inset:-16px -6px}
  .barra .apri{position:relative}.barra .apri::after{content:"";position:absolute;inset:-5px 0}   /* 05/11: area da toccare di almeno 44 px */
  .barra .logo{position:relative}.barra .logo::after{content:"";position:absolute;inset:-8px 0}
}
/* 05/11 (revisione degli agenti): il menu a schermo pieno vale fino a 1365 px, anche sul tablet: voci e lingue grandi da toccare */
.menu.aperto{gap:2px}
.menu.aperto .voce{padding:11px 0}
.menu.aperto .lingue a,.menu.aperto .lingue b{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* pallini dei passaggi sul telefono: senza la linea restavano sospesi tra un passo e l'altro, ora stanno accanto al titolo */
@media (max-width:1080px){
  .p-passi{padding-top:0}
  .p-passi li{padding-left:28px}
  .p-passi li::before{top:.35em;width:12px;height:12px;box-shadow:none}
}

/* Barra in alto su telefono e tablet: «targa con la scritta» (03/11, D-054; Riccardo: «con la barra a mezz'aria… mi convince ma fino a una
   certa… qualche animazione figa nello scorrimento»; tra le prove: «mi piace la B, però comunque lascerei la scritta argo metal… un mix
   figo»; poi «Sì, mettila»). La barra è una targa di acciaio brunito staccata di 10 px dai bordi, con le quattro viti come le targhe delle
   certificazioni e un'ombra sulla pagina. Nella home in cima è trasparente sopra la foto e la targa si posa scorrendo (da un po' più grande
   alla sua misura); nelle pagine interne c'è da subito. Mentre si posa un riflesso di luce la attraversa una volta (la linea arancio di
   lettura della prova A tolta il 03/11, Riccardo: «rimuovi lo scorrimento arancione dalla barra»). Il logo con la scritta resta intero a
   28 px (misura minima del manuale). Targa, viti e riflesso sono livelli dietro i pulsanti (::before, ::after, .tb-luce): la barra stessa non si
   trasforma mai, perché dentro c'è il menu fisso. Solo transform e opacity legati allo scorrimento della pagina (scroll(root), regola 3.16);
   dove il browser non lo sa fare la targa compare quando la barra diventa piena, senza riflesso. Il computer resta com'era. */
.tb-luce{display:none}
@keyframes tb-posa{from{opacity:0;scale:1.04 1.25}to{opacity:1;scale:1 1}}
@keyframes tb-riflesso{from{translate:-120% 0}to{translate:120% 0}}
@media (max-width:1000px){
  .barra{padding:18px calc(var(--gutter) + 6px)}
  .barra.piena{background:none}
  .barra::before,.barra::after,.tb-luce{content:"";position:absolute;inset:8px 10px 6px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s}
  .barra::before{background:linear-gradient(100deg,#1A1E22 0%,#2B3137 30%,#1F2429 55%,#30363C 80%,#1C2025 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.7),0 0 0 1px rgba(201,206,212,.16),0 16px 30px -12px rgba(0,0,0,.75)}
  .barra::after{background:radial-gradient(circle,#9AA2AA 0 1.4px,#3A4048 2.4px,transparent 3px) left 6px top 6px/6px 6px no-repeat,
    radial-gradient(circle,#9AA2AA 0 1.4px,#3A4048 2.4px,transparent 3px) right 6px top 6px/6px 6px no-repeat,
    radial-gradient(circle,#9AA2AA 0 1.4px,#3A4048 2.4px,transparent 3px) left 6px bottom 6px/6px 6px no-repeat,
    radial-gradient(circle,#9AA2AA 0 1.4px,#3A4048 2.4px,transparent 3px) right 6px bottom 6px/6px 6px no-repeat}
  .barra.piena::before,.barra.piena::after{opacity:1}
  .tb-luce{display:block;overflow:clip}
  .tb-luce::before{content:"";position:absolute;inset:0;translate:-120% 0;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.08) 58%,transparent 70%)}
  .lente-viva .barra:not(.interna)::before,.lente-viva .barra:not(.interna)::after{transition:none;animation:tb-posa linear both;animation-timeline:scroll(root);animation-range:0px 150px}
  .lente-viva .tb-luce{transition:none;opacity:1}
  .lente-viva .tb-luce::before{animation:tb-riflesso linear both;animation-timeline:scroll(root);animation-range:60px 260px}
  .menu-aperto .tb-luce{visibility:hidden}
}

/* 03/11, 17:41 (Riccardo, sul numero sotto «Richiedi una quotazione» nell'apertura della home: «questo numero di telefono dici è importante?
   abbiamo il bottone nella top bar»; scelta: «Sì, solo telefono»). Fino a 680 px la barra ha il pulsante di chiamata (pagine.css, .b-tel):
   lì il numero dell'apertura è un doppione e si toglie. Su tablet e computer la barra non ha il pulsante e il numero resta. Il numero resta
   comunque nella sezione della quotazione e nel piè di pagina. */
@media (max-width:680px){.hero .azioni .tel{display:none}}

/* 03/11, 17:45 (Riccardo dall'iPhone sulla pagina Servizi: «quando compare lagga un po'… è tutto quello che c'è in questa pagina… è un po'
   lento, è poco fluido»). In Chrome con il processore rallentato la pagina scorre a 60 fotogrammi al secondo: il peso è di Safari. Dove non
   c'è il mouse (telefoni e tablet):
   1. i blocchi che comparivano con una dissolvenza a tempo (.sale: script che si accorge del blocco + transizione di 0,8 s) partivano quando
      il blocco era già in vista e arrivavano dopo il dito: ora sono subito al loro posto;
   2. gli sfondi tenui, che hanno la maschera sfumata, non scorrono più più lenti della pagina: un'immagine con maschera che si muove è il
      lavoro più pesante per Safari (regola 3.16).
   Restano i movimenti legati al dito: foto di testata, lastre dei materiali, targhe incise, righe dei servizi, barra. */
@media (hover:none){
  .sale{opacity:1;transform:none;transition:none}
  .lente-viva .p-sfondo img[data-parallax]{animation:none;will-change:auto;transform:none}
}