/* ================================================================
   Siliconature — landing page.

   La pagina fa un viaggio: si entra nel buio, dove il globo può
   brillare, e si esce nella luce, dove si legge. Il giallo del marchio
   non fa da fondo da nessuna parte — fa da luce: archi, cifre, un
   filo sotto ai titoli. Serve pochissimo giallo perché si veda, e
   tanto giallo lo spegnerebbe.
   ================================================================ */

@font-face{ font-family:Metropolis; src:url(../assets/font/Metropolis-Light.woff2) format("woff2");   font-weight:300; font-display:swap; }
@font-face{ font-family:Metropolis; src:url(../assets/font/Metropolis-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:Metropolis; src:url(../assets/font/Metropolis-Medium.woff2) format("woff2");  font-weight:500; font-display:swap; }
@font-face{ font-family:Metropolis; src:url(../assets/font/Metropolis-Bold.woff2) format("woff2");    font-weight:700; font-display:swap; }

:root{
  /* i due colori del marchio, come stanno nel logo */
  --marchio-giallo: #FFCC00;
  --marchio-grigio: #575756;

  /* il giallo ammorbidito: stessa tinta, un grado di luce in meno e un
     filo di calore in più. Sul nero resta squillante, senza gridare. */
  --giallo:    #F5C63C;
  --giallo-op: #E9B426;   /* per superfici piene */
  --giallo-sc: #A87B08;   /* su fondo chiaro, dove il giallo non ha contrasto */

  --nero:    #0D0E0B;
  --notte:   #131410;
  --notte-2: #1C1E18;
  --notte-3: #262822;

  /* I bianchi, dal più freddo al più impastato. Sono cinque e non uno
     perché una pagina chiara fatta di un solo bianco resta piatta: la
     profondità qui non la danno le ombre, la dà il fatto che ogni
     piano ha la sua tinta. Il verso è sempre lo stesso — più un
     elemento è "sopra", più è chiaro. */
  --bianco:  #FFFDF9;   /* le carte: il piano più alto */
  --avorio:  #FAF8F2;   /* il fondo di lettura */
  --sabbia:  #F3F0E6;   /* le fasce che devono staccarsi */
  --carta:   #EBE7D9;   /* il piano più basso, e i riquadri spenti */
  --bordo:   #E0DBCA;
  --bordo-2: #CFC9B4;   /* il bordo che si accende al passaggio */

  --chiaro:   #F2F1EA;
  --chiaro-2: #A5A49B;
  --scuro:    #1E1F1A;
  --scuro-2:  #6C6D63;

  /* letti da js/globo.js: il canvas non deve poter divergere da qui */
  --globo-terra: 236,235,228;
  --globo-arco:  245,198,60;

  /* La grana. Un fondo chiaro grande e uniforme legge come schermo;
     con un velo di rumore legge come carta — che per un'azienda di
     film e liner è la materia giusta. È un SVG di 120×120 ripetuto,
     poche centinaia di byte, e non costa una richiesta. */
  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

  --font: Metropolis, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 5.5vw, 96px);
  --largo: 1320px;
}

*{ box-sizing:border-box; }

/* la barra è fissa: chi arriva da un'ancora deve atterrare sotto,
   non sotto la barra */
section[id]{ scroll-margin-top:78px; }

/* Lo scorrimento lo governa js/scroll.js — il motore a capitoli, copia
   conforme di ~/websites/scroll-capitoli-template. Niente
   `scroll-behavior:smooth` e niente scroll-snap: il primo farebbe
   ri-animare dal browser ogni spostamento del motore, il secondo ne
   interromperebbe il momentum. Lo dice già css/capitoli.css; qui si
   ricorda perché è la trappola che si rimette da sola. */
html{ scrollbar-gutter:stable; }

body{
  margin:0; background:var(--notte); color:var(--chiaro);
  font-family:var(--font); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:500; letter-spacing:-0.025em; line-height:1.06; }
h1{ font-size:clamp(38px, 5.4vw, 76px); }
h2{ font-size:clamp(29px, 3.5vw, 50px); }
h3{ font-size:clamp(19px, 1.5vw, 23px); letter-spacing:-0.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
address{ font-style:normal; }

.salta{
  position:fixed; top:-100px; left:14px; z-index:200;
  background:var(--giallo); color:#000; padding:11px 18px; border-radius:8px;
  font-weight:500; transition:top .18s;
}
.salta:focus{ top:14px; }

:focus-visible{ outline:2px solid var(--giallo); outline-offset:3px; border-radius:4px; }

/* L'occhiello: maiuscoletto spaziato, il registro tecnico del marchio. */
.occhiello{
  font-size:11.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; color:var(--chiaro-2);
}
.chiaro .occhiello{ color:var(--scuro-2); }

.testo{ color:var(--chiaro-2); max-width:56ch; }
.chiaro .testo{ color:var(--scuro-2); }
b{ font-weight:500; }
em{ font-style:normal; color:var(--giallo); }

/* ---------------- BARRA ---------------- */

.testata{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--pad);
  transition:background .35s, backdrop-filter .35s, box-shadow .35s, padding .35s;
}
.testata--posata{
  padding-block:11px;
  background:rgba(19,20,16,.82); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
/* dalla metà chiara della pagina la barra si inverte */
.testata--chiara.testata--posata{
  background:rgba(250,249,245,.86);
  box-shadow:0 1px 0 rgba(0,0,0,.09);
}
.testata__marchio{ display:block; }
.testata__logo{ height:38px; width:auto; transition:height .35s; }
.testata--posata .testata__logo{ height:32px; }
/* il marchio giusto per il fondo che c'è sotto */
.testata__logo--pos{ display:none; }
.testata--chiara .testata__logo--neg{ display:none; }
.testata--chiara .testata__logo--pos{ display:block; }
/* col menu del telefono aperto il fondo è scuro comunque */
.testata--aperta .testata__logo--pos{ display:none; }
.testata--aperta .testata__logo--neg{ display:block; }

.testata__voci{ display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); }
.testata__voci a{
  font-size:14.5px; color:var(--chiaro-2); font-weight:400;
  transition:color .2s;
}
.testata__voci a:hover{ color:var(--chiaro); }
.testata--chiara .testata__voci a{ color:var(--scuro-2); }
.testata--chiara .testata__voci a:hover{ color:var(--scuro); }

.testata__cta{
  padding:9px 19px; border-radius:100px;
  border:1px solid rgba(245,198,60,.45); color:var(--giallo) !important;
  transition:background .2s, border-color .2s, color .2s;
}
.testata__cta:hover{ background:var(--giallo); color:#171712 !important; border-color:var(--giallo); }
.testata--chiara .testata__cta{ border-color:rgba(0,0,0,.22); color:var(--scuro) !important; }
.testata--chiara .testata__cta:hover{ background:var(--giallo); color:#171712 !important; border-color:var(--giallo); }

.testata__hb{ display:none; width:42px; height:42px; position:relative; }
.testata__hb i, .testata__hb::before, .testata__hb::after{
  content:""; position:absolute; left:10px; right:10px; height:1.5px;
  background:currentColor; transition:transform .28s, opacity .2s;
}
.testata__hb::before{ top:15px; } .testata__hb i{ top:20.5px; } .testata__hb::after{ top:26px; }
.testata--aperta .testata__hb::before{ transform:translateY(5.5px) rotate(45deg); }
.testata--aperta .testata__hb i{ opacity:0; }
.testata--aperta .testata__hb::after{ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------------- APERTURA ---------------- */

/* L'ESORDIO È UNA SCHERMATA, NON PIÙ UNA CORSA. Era una `data-corsa`
   di quattro battute: tre schermate di scorrimento che non facevano
   altro che girare il globo. Il mondo si prendeva un peso che non gli
   spetta — è il contesto dell'azienda, non il prodotto — e chi arriva
   pagava tre gesti per superarlo. Ora l'altezza è una sola schermata e
   il giro se lo racconta il tempo (js/giro.js).

   Restano due avanzamenti, e li scrive sempre js/giro.js:
     · `--apri` da 0 a 1 apre la scena — dal marchio al centro ai testi
       a sinistra e al globo nella sua colonna;
     · `--fine` da 0 a 1 accende il "continua" quando il giro è finito. */
.esordio{
  --apri:0;
  --fine:0;
  position:relative;
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(245,198,60,.035), transparent 62%),
    var(--nero);
}
/* senza JavaScript non c'è nessuno ad aprire la scena: i testi e il
   "continua" ci sono già, e il marchio d'ingresso non copre niente */
html:not(.js) .esordio{ --apri:1; --fine:1; }

.esordio__fermo{
  min-height:100svh;
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  grid-template-areas:"testo scena" "cifre cifre";
  grid-template-rows:1fr auto;
  padding:100px var(--pad) 0;
}
/* le animazioni spente: nessun giro, la scena è già aperta */
@media (prefers-reduced-motion: reduce){
  .esordio{ --apri:1; --fine:1; }
}

/* Il marchio e il globo si accendono da soli all'arrivo; i testi no,
   arrivano con `--apri`, cioè col primo gesto.

   L'animazione va sui figli, non sul contenitore: un `animation` con
   `fill-mode: both` tiene il valore finale e batte qualsiasi `opacity`
   scritta a mano, quindi sul contenitore avrebbe scavalcato quella
   legata a `--apri` — e il marchio non se ne sarebbe più andato. */
@keyframes accende{ from{ opacity:0 } to{ opacity:1 } }
.js .esordio__marchio > *{ animation:accende 1.4s ease .2s both; }

.esordio__testo{
  grid-area:testo; max-width:610px; padding-bottom:40px;
  opacity:var(--apri);
  transform:translateX(calc((1 - var(--apri)) * -28px));
}
.esordio__cifre{ opacity:var(--apri); }
.esordio__testo h1{ margin:20px 0 26px; }
.esordio__sub{ color:var(--chiaro-2); max-width:47ch; font-size:clamp(16px,1.15vw,18.5px); }
.esordio__sub b{ color:var(--chiaro); }

/* Il payoff prende l'inclinazione del marchio: nel logo la coda "URE"
   si stacca in diagonale, ed è la stessa idea del prodotto. */
.esordio__payoff{
  margin-top:34px; display:inline-block;
  font-size:12px; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:var(--giallo); transform:skewX(-11deg);
  padding:9px 16px 8px; border:1px solid rgba(245,198,60,.3);
}

/* ---- il primo fotogramma: marchio e globo, al centro ---- */
.esordio__marchio{
  grid-area:1 / 1 / 2 / 3; align-self:center; justify-self:center;
  z-index:3; text-align:center; pointer-events:none;
  /* sale e sfuma nella prima metà della battuta: deve essersi tolto di
     mezzo prima che i testi arrivino, o per un istante si leggono
     sovrapposti */
  transform:translateY(calc(var(--apri) * -40px - 252px));
  opacity:calc(1 - var(--apri) * 2.1);
}
.esordio__marchio img{ width:min(34vw, 292px); height:auto; }
.esordio__marchio span{
  display:block; margin-top:18px;
  font-size:12px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--giallo); transform:skewX(-11deg);
}

/* ---- la scena del globo ----
   Allo stato chiuso sta al centro dello schermo; aprendosi scivola
   nella sua colonna. Solo traslazione, mai `scale`: il globo è un
   canvas, e ingrandirlo lo sgrana. */
.esordio__destra{
  grid-area:scena; display:flex; flex-direction:column; gap:16px;
  align-items:center; justify-content:center;
  transform:translateX(calc((1 - var(--apri)) * -50%))
            translateY(calc((1 - var(--apri)) * 62px));
}
.esordio__destra .tappa{ opacity:var(--apri); }
/* IL "CONTINUA" SI VEDE ALLA FINE, MA FUNZIONA DA SUBITO: `opacity` lo
   accende col giro che si chiude, e `pointer-events` resta acceso —
   chi vuole saltare non deve aspettare di vederlo per poterlo premere,
   e comunque basta un gesto qualsiasi. */
.esordio__destra .esordio__gesto{ opacity:calc(var(--fine) * .9 + var(--apri) * .1); }
.esordio__scena{ position:relative; width:100%; height:min(56svh, 500px); }
.globo-scena{ touch-action:pan-y; cursor:grab; }
.globo-scena.is-drag{ cursor:grabbing; }
.globo-scena canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* Nessun lampeggio: compare in fondo alla sequenza d'ingresso, e già
   il comparire è il richiamo. Un elemento che pulsa per sempre in un
   angolo si fa guardare una volta e dà fastidio tutte le altre. */
.esordio__gesto{
  display:inline-flex; align-items:center; gap:11px; margin-top:26px;
  padding:11px 20px 11px 22px; border:1px solid rgba(255,255,255,.16);
  border-radius:999px; background:transparent; cursor:pointer;
  font:inherit; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--chiaro-2); white-space:nowrap;
  transition:border-color .25s, color .25s;
}
.esordio__gesto:hover{ border-color:rgba(245,198,60,.55); color:var(--chiaro); }
/* la freccia scende piano: due secondi, e il moto è quello del gesto
   che si chiede — non un lampeggio che dopo la prima volta dà solo
   fastidio */
.esordio__gesto i{
  width:9px; height:9px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,-1px);
  animation:scendi 2.1s ease-in-out infinite;
}
@keyframes scendi{ 0%,68%,100%{ transform:rotate(45deg) translate(-1px,-1px) } 82%{ transform:rotate(45deg) translate(2px,2px) } }
@media (prefers-reduced-motion: reduce){ .esordio__gesto i{ animation:none } }

/* ---- i marker ----
   Il <button> è ancorato al punto esatto (top-left = la coordinata);
   pallino ed etichetta si dispongono attorno con margini negativi.
   js/globo.js scrive solo transform e opacity. */
.pin{
  position:absolute; top:0; left:0; width:0; height:0;
  opacity:0; will-change:transform, opacity;
}
.pin i{
  position:absolute; left:-4px; top:-4px; width:8px; height:8px;
  border-radius:50%; background:var(--giallo);
  box-shadow:0 0 0 3px rgba(245,198,60,.18), 0 0 12px 2px rgba(245,198,60,.5);
}
.pin--hq i{
  left:-5.5px; top:-5.5px; width:11px; height:11px; background:#fff;
  box-shadow:0 0 0 4px rgba(245,198,60,.3), 0 0 16px 3px rgba(245,198,60,.65);
}
/* l'anello che si allarga: solo sull'HQ, altrimenti è un albero di Natale */
.pin--hq::after{
  content:""; position:absolute; left:-5.5px; top:-5.5px; width:11px; height:11px;
  border-radius:50%; border:1px solid var(--giallo);
  animation:onda 2.8s ease-out infinite;
}
@keyframes onda{
  0%{ transform:scale(1); opacity:.75 }
  70%{ transform:scale(3.6); opacity:0 }
  100%{ transform:scale(3.6); opacity:0 }
}
.pin span{
  position:absolute; left:14px; top:-13px; white-space:nowrap;
  font-size:12.5px; font-weight:500; line-height:1.25; color:var(--chiaro);
  text-shadow:0 1px 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8);
  transition:color .2s, opacity .22s;
}
/* la targhetta che ha perso il posto (vedi js/globo.js): resta il
   punto, il nome torna quando ci si passa sopra — o con un tocco, che
   sul telefono è l'unico modo, visto che lì non esiste il passaggio */
.pin--muto span{ opacity:0; }
.pin--muto:hover span, .pin--muto:focus-visible span{ opacity:1; }

/* aperto con un tocco: il nome resta, e si stacca dal fondo perché
   sotto ci può essere di tutto */
.pin--aperto span{
  opacity:1 !important;
  background:rgba(13,14,11,.86); backdrop-filter:blur(6px);
  padding:7px 11px; border-radius:7px; margin:-7px 0 0 -4px;
  border:1px solid rgba(245,198,60,.28);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.8);
}
.pin--aperto.pin--sx span{ margin:-7px -4px 0 0; }
.pin--aperto span em{ color:var(--giallo); opacity:.85; }

/* ---- il marker di chi guarda ----
   Bianco e senza alone giallo: non è uno stabilimento, e non deve
   sembrarlo. */
.pin--tu i{
  background:#fff; width:9px; height:9px; left:-4.5px; top:-4.5px;
  box-shadow:0 0 0 3px rgba(255,255,255,.16), 0 0 14px 2px rgba(255,255,255,.45);
}
.pin--tu span{ color:#fff; }
.pin--tu span em{ color:#8E8F85; }
.pin--tu::after{
  content:""; position:absolute; left:-4.5px; top:-4.5px; width:9px; height:9px;
  border-radius:50%; border:1px solid rgba(255,255,255,.75);
  animation:onda 2.8s ease-out infinite;
}
.pin span em{ display:block; font-size:10.5px; font-weight:400; color:#8E8F85; letter-spacing:.04em; }
.pin:hover span, .pin:focus-visible span{ color:var(--giallo); }
.pin:hover span em{ color:var(--giallo); opacity:.8; }
/* i marker nell'emisfero destro ribaltano l'etichetta a sinistra */
.pin.pin--sx span{ left:auto; right:14px; text-align:right; }

/* ---- la targhetta della tappa ----
   Sta sotto il globo e dice dove si è arrivati. Cambia da sola mentre
   si scende: le due righe si scambiano con una dissolvenza corta,
   perché a leggerle mentre scorrono si perde il segno. */
.tappa{
  text-align:center; pointer-events:none;
  display:flex; flex-direction:column; gap:2px;
}
.tappa b{
  font-size:14px; font-weight:500; color:var(--chiaro);
  animation:cambio .45s ease;
}
.tappa span{
  font-size:12px; color:var(--chiaro-2);
  animation:cambio .45s ease .04s both;
}
@keyframes cambio{ from{ opacity:0; translate:0 6px; } to{ opacity:1; translate:0 0; } }

/* ---- le cifre ---- */
.esordio__cifre{
  grid-area:cifre;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:rgba(255,255,255,.09);
  border-top:1px solid rgba(255,255,255,.09);
  margin:0 calc(var(--pad) * -1);
}
.esordio__cifre li{
  background:var(--nero); padding:26px var(--pad) 30px;
  display:flex; flex-direction:column; gap:5px;
}
.esordio__cifre b{
  font-size:clamp(30px, 3.4vw, 47px); font-weight:500; line-height:1;
  color:var(--giallo); letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
}
.esordio__cifre span{ font-size:13px; color:var(--chiaro-2); }

/* ---------------- IL MULTISTRATO ----------------

   L'ultimo capitolo al buio, e l'unico posto della pagina in cui si
   racconta da dove viene la pila. Sta qui perché prepara quello dopo:
   uno che ha appena letto che il film è fatto di strati capisce al
   volo perché il liner si stacca e l'etichetta no. */

.strati{
  background:var(--notte); padding:clamp(70px,9vw,130px) var(--pad);
  display:grid; gap:clamp(40px,5vw,80px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
}
.strati__testo h2{ margin:16px 0 20px; }
.strati__testo .testo{ max-width:52ch; }
.strati__testo .testo + .testo{ margin-top:15px; }
.strati__chiusa{
  margin-top:24px; font-size:clamp(17px,1.5vw,21px); font-weight:500;
  color:var(--giallo); letter-spacing:-0.015em; line-height:1.35;
  padding-left:18px; border-left:2px solid var(--giallo-op);
}

/* ---- la pila, in scala vera ----

   `--u` sono i pixel che vale un micron, e da lì esce tutto: le fasce,
   la graffa, le quote. Cambiando quel numero la figura si ridimensiona
   restando in scala — che è il solo motivo per cui vale la pena
   disegnarla. La pila mostrata è alta 60 µm: 16 di facciale (tagliato,
   perché continua oltre), 20 di adesivo, e i 24 del liner. */
.pila{
  --u:clamp(3.4px, .46vw, 5.8px);    /* i pixel che vale un micron */
  --colw:min(58%, 320px);            /* la larghezza della colonna in sezione */
  margin:0; display:flex; flex-direction:column; gap:26px;
}
.pila__scena{ position:relative; padding-left:58px; }

.pila__col{
  width:var(--colw); display:flex; flex-direction:column;
  border-radius:2px; overflow:hidden;
}
.strato{ display:block; position:relative; }
.strato b{
  position:absolute; left:13px; top:50%; translate:0 -50%;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:400;
}

/* il facciale continua oltre il riquadro: sfuma invece di finire, o
   sembrerebbe che l'etichetta sia spessa quanto la si vede */
.strato--facciale{
  height:calc(var(--u) * 16);
  background:linear-gradient(180deg, rgba(242,241,234,.14), rgba(242,241,234,.88));
}
.strato--facciale b{ color:rgba(19,20,16,.6); }
/* l'adesivo si vede che è colla: un tratteggio finissimo, non una tinta */
.strato--adesivo{
  height:calc(var(--u) * 20);
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 6px),
    rgba(245,198,60,.10);
  border-top:1px solid rgba(19,20,16,.3);
}
.strato--adesivo b{ color:rgba(242,241,234,.8); }

/* IL PUNTO DELLA FIGURA. Un micron: a `--u` di quattro pixel è una
   riga di quattro, e in scala è giusto così. Il velo d'oro sopra e
   sotto la fa trovare senza ingrandirla — un millesimo di millimetro
   disegnato più grosso del vero sarebbe una figura che mente. */
.strato--sil{
  height:calc(var(--u) * 1); min-height:2px;
  background:var(--giallo); box-shadow:0 0 9px 1px rgba(245,198,60,.55);
  z-index:1;
}
/* Le due pelli e il cuore sono la coestrusione: si devono distinguere
   a colpo d'occhio, o il capitolo racconta una cosa che la figura non
   mostra. Pelli chiare (PET vergine), cuore più scuro e appena verde —
   il verde del riciclato, lo stesso di R-Silphan. */
.strato--pelle{ height:calc(var(--u) * 4); background:#8C9385; }
.strato--cuore{
  height:calc(var(--u) * 15);
  background:
    repeating-linear-gradient(-45deg, rgba(185,215,126,.11) 0 5px, transparent 5px 11px),
    #333E30;
  border-block:1px solid rgba(185,215,126,.42);
}
.strato--cuore b{ color:#B9D77E; }

/* la graffa: quel che si stacca e si butta, cioè il prodotto */
.pila__graffa{
  position:absolute; left:0; top:calc(var(--u) * 36); height:calc(var(--u) * 24);
  width:44px; border:1px solid rgba(245,198,60,.34); border-right:none;
  border-radius:3px 0 0 3px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  writing-mode:vertical-rl; rotate:180deg; white-space:nowrap;
}
.pila__graffa span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--chiaro-2); }
.pila__graffa b{ font-size:12.5px; font-weight:500; color:var(--giallo); font-variant-numeric:tabular-nums; }

/* le quote stanno a destra della colonna e si appendono alla loro
   fascia con un filo tratteggiato. Sono due sole: gli strati che
   qualcuno compra. Il resto lo dicono le scritte dentro le fasce. */
.pila__quote{
  position:absolute; top:0; left:calc(58px + var(--colw)); padding-left:36px;
  width:max(38%, 180px);
}
.quota{ position:absolute; }
.quota b{ display:block; font-size:14.5px; font-weight:500; }
.quota span{ font-size:12.5px; color:var(--chiaro-2); }
.quota::before{
  content:""; position:absolute; right:100%; width:36px;
  border-top:1px dashed rgba(255,255,255,.3);
}
.quota--sil{ top:calc(var(--u) * 36.5); translate:0 -100%; }
.quota--sil b{ color:var(--giallo); }
.quota--sil::before{ bottom:0; border-color:rgba(245,198,60,.55); }
.quota--pet{ top:calc(var(--u) * 48.5); translate:0 -50%; }
.quota--pet::before{ top:50%; }

/* ---- il paragone: il liner sta tre volte dentro un capello ----
   Una scala sola non dice niente finché non la si appoggia a qualcosa
   che si conosce. `--q` è la frazione della barra piena. */
.pila__paragone{ display:flex; flex-direction:column; gap:9px; max-width:340px; }
.pila__paragone p{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--chiaro-2); }
/* le due barre corrono sullo stesso binario, o le cifre non si
   incolonnano e il paragone perde la sola cosa che deve dire */
.pila__paragone i{
  height:5px; width:154px; flex:none; border-radius:3px;
  background:linear-gradient(90deg, rgba(242,241,234,.5) 0 calc(var(--q) * 100%), transparent 0);
}
.pila__paragone p:first-child i{
  background:linear-gradient(90deg, var(--giallo) 0 calc(var(--q) * 100%), transparent 0);
}
.pila__paragone b{ font-weight:500; color:var(--chiaro); font-variant-numeric:tabular-nums; min-width:52px; }

.pila figcaption{ font-size:13px; color:var(--chiaro-2); max-width:44ch; }

/* ---- i sei tasti delle sedi, e "da dove ci guardate" ----
   Vivono in Impianti, su fondo chiaro: erano nati sul notte e i colori
   sono passati di conseguenza. */
.sedi__lato{
  max-width:var(--largo); margin:0 auto clamp(16px,2vw,24px);
  display:flex; flex-direction:column; gap:14px;
}
.mondo__scelta{ display:flex; flex-wrap:wrap; gap:10px; }
.scelta{
  padding:11px 17px; border-radius:100px; border:1px solid var(--bordo);
  background:var(--avorio); font-size:14px; color:var(--scuro);
  display:flex; align-items:baseline; gap:8px;
  transition:border-color .2s, background .2s, transform .2s;
}
.scelta em{ font-size:11.5px; color:var(--scuro-2); }
.scelta:hover{ border-color:var(--bordo-2); background:var(--bianco); }
.scelta.is-attiva{ border-color:var(--marchio-giallo); background:rgba(255,204,0,.15); }
.scelta.is-attiva em{ color:var(--giallo-sc); }

/* ---- da dove ci guardate ---- */
.dove{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; font-size:13.5px; }
.dove__via{
  color:var(--scuro-2); border-bottom:1px dashed var(--bordo-2);
  padding-bottom:2px; transition:color .2s, border-color .2s;
}
.dove__via:hover{ color:var(--giallo-sc); border-color:var(--giallo-sc); }
.dove__via[disabled]{ opacity:.5; cursor:default; }
.dove__esito{ color:var(--scuro-2); }
.dove__esito b{ color:var(--scuro); }
.dove__esito a{ color:var(--giallo-sc); border-bottom:1px solid rgba(168,123,8,.4); }

/* ---------------- IL DISTACCO, E IL MARCHIO ----------------

   È qui che la pagina passa dal buio alla luce, e non di colpo: il
   trapasso è una fascia alta mezza schermata, così scendendo il fondo
   si schiarisce sotto gli occhi invece di cambiare a scatto fra una
   sezione e l'altra. */

/* QUI NON SI AGGANCIA NIENTE. Il distacco è stato una corsa di due
   battute, per dare al peel spazio di scorrimento; ma tre fermate in
   una sezione di lettura si sentono tutte, e ci si passa a scatti. Ora
   è una sezione normale, con una sola fermata sul bordo alto per
   poterci arrivare dalla navigazione, e il peel non dipende più dallo
   scorrimento: parte da sé quando la figura entra in scena
   (js/marchio.js). Lo si attraversa liscio. */
.distacco__fermo{
  min-height:100svh;
  /* IL PADDING È UNA MISURA DEL MOTORE, non un gusto: la sezione ha una
     fermata sola, quindi da qui alla prossima non si deve superare una
     schermata e un sesto, o si scavalca contenuto. Vedi il criterio nel
     README, e rimisurare dopo ogni modifica. */
  padding:clamp(72px,9vw,130px) var(--pad) clamp(48px,5.5vw,84px);
  display:grid; gap:clamp(44px,5vw,90px); align-content:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.distacco::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:42vh;
  background:linear-gradient(to bottom, var(--notte), var(--avorio) 86%);
  pointer-events:none;
}
.distacco__fermo > *{ position:relative; }   /* sopra la fascia del trapasso */

/* IL SEGNAPOSTO DELLA SECONDA FERMATA NON C'È PIÙ. Stava una schermata
   sopra il fondo della sezione e serviva a due cose insieme: dare una
   fermata in più a una sezione lunga, e far scattare il congedo del
   liner. Faceva male tutt'e due — cadeva a un quarto di schermata dalla
   fermata precedente, cioè un gesto intero per uno scatto di niente, e
   legava un'animazione a una soglia di scorrimento invece che a un
   gesto. Ora il congedo se lo prende il gesto (`Capitoli.claim` in
   js/marchio.js) e la sezione sta in una schermata sola. */
.distacco__testo h2{ margin:16px 0 14px; }
.distacco__claim{
  font-size:clamp(18px,1.7vw,23px); color:var(--giallo-sc); font-weight:500;
  letter-spacing:-0.015em; margin-bottom:22px;
}
.distacco__testo .testo + .testo{ margin-top:16px; }
.distacco__punti{ margin-top:36px; display:grid; gap:1px; background:var(--bordo); }
.distacco__punti li{ background:var(--avorio); padding:17px 0 17px 20px; border-left:2px solid var(--marchio-giallo); }
.distacco__punti b{ display:block; font-weight:500; }
.distacco__punti span{ font-size:14.5px; color:var(--scuro-2); }

/* ---- il marchio che si stacca ----

   NON È UNA PIEGA, È UNO STRATO CHE SI ALZA. C'era prima un triangolo
   rigido ribaltato di 180° attorno alla diagonale, con due `clip-path`
   complementari: geometricamente esatto, e sbagliato da vedere. Un
   foglio piegato in due ha una cresta netta e due facce piane, e quello
   che si legge non è un liner che si stacca — è un tovagliolo. Il liner
   vero non si piega: si **solleva**, e nel sollevarsi si arriccia. La
   carta non ha spigoli, ha un ventre.

   Da qui la carta è in SVG e la disegna js/marchio.js, un tracciato per
   fotogramma. Non è un capriccio: la forma che serve — un fronte di
   distacco che avanza in diagonale, e dietro un lembo che si alza,
   rimpicciolisce di scorcio e sale sullo schermo — non si scrive con
   nessuna combinazione di `clip-path` e `rotate3d`. Il CSS qui tiene i
   colori, il posto e le due corse; la forma la fa il conto.

   TUTTO ESCE DA UNA RETTA SOLA, il fronte di distacco, perpendicolare
   alla diagonale in cui nel marchio scende la coda "URE". Il pezzo
   ancora aderente è il rettangolo tagliato da quella retta; il pezzo
   sollevato è l'altro mezzo rettangolo, ribaltato oltre la retta e
   accorciato di scorcio. Sono complementari per costruzione, e non
   possono scollarsi l'uno dall'altro nemmeno sbagliando i numeri.

   DUE AVANZAMENTI, NON UNO, perché le battute sono due e succedono a
   distanza di un gesto. `--t` è il distacco, da 0 a 1: il fronte
   attraversa il foglio e la carta si alza. `--s` è il congedo, da 0 a
   1: la carta ormai staccata se ne va e svanisce, e resta l'etichetta.
   Li scrive tutt'e due js/marchio.js. */
.peel{
  margin:0; --t:0; --s:0; display:flex; flex-direction:column; align-items:center; gap:30px;
  /* la larghezza vera della scena, una volta sola: la usano sia la sua
     `width` sia il margine di testa, e le due devono uscire dallo
     stesso numero o l'aria sopra non corrisponde allo sbordo */
  --w:min(100%, 440px);
}
.peel__scena{
  position:relative; width:var(--w); aspect-ratio:1/.54;
  /* L'ARIA PER LA CARTA ALZATA. Sollevandosi il lembo esce dal foglio
     dal lato alto-sinistro — è quel che fa la carta vera, e toglierlo
     vorrebbe dire non farla alzare. Al massimo del distacco la punta
     arriva a 0,42 volte la larghezza sopra il bordo, ombra compresa:
     quello è il margine di testa, e va tenuto d'accordo con `SMAX` e
     `SCORCIO` in js/marchio.js. Senza, la carta finisce sopra la fascia
     scura del trapasso e — in colonna sola — sopra i punti elenco. */
  margin-top:calc(var(--w) * .26);
  margin-bottom:clamp(20px,4vw,44px);
}

/* l'etichetta: quel che resta quando la carta se n'è andata. Il marchio
   sta al centro e ci resta — sollevandosi il lembo copre solo la parte
   NON ancora staccata, quindi il centro si scopre presto e non c'è più
   ragione di spostarlo in un angolo. */
.peel__etichetta{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:11px;
  background:#fff; border-radius:3px; transform:skewX(-11deg);
  box-shadow:0 16px 38px -24px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.05);
}
.peel__etichetta img{ width:52%; height:auto; transform:skewX(11deg); }

/* LA CARTA. `overflow:visible` non è una svista: il lembo alzato deve
   poter uscire dal viewBox, ed è l'unica cosa che glielo permette. */
.peel__carta{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; transform:skewX(-11deg);
  opacity:calc(1 - var(--s));
  translate:calc(var(--s) * -19%) calc(var(--s) * -64%);
}
.peel__fermo { fill:url(#pl-faccia); stroke:rgba(0,0,0,.07); stroke-width:1.5; }
.peel__alzato{ fill:url(#pl-retro);  stroke:rgba(0,0,0,.09); stroke-width:1.5; }
/* L'incavo: la fascia in ombra subito dopo il colmo, dove il foglio
   gira e la luce non entra più. Senza, il ricciolo resta una linguetta
   sfumata — è questo, più del gradiente, a dire che è arrotolato. */
.peel__incavo{ fill:rgba(56,49,30,.3); }
/* il filo del bordo tagliato: la carta lì è di taglio, e la luce la
   riprende. Due pixel, e la forma smette di essere un ritaglio */
.peel__taglio{ fill:none; stroke:rgba(255,253,244,.5); stroke-width:2; stroke-linecap:round; }
/* l'ombra si allontana e si carica man mano che il ricciolo si alza:
   ferma, diceva che il lembo scorre sul foglio invece di staccarsene */
.peel__ombra {
  fill:rgba(48,44,30,.5);
  translate:calc(5px + var(--t) * 15px) calc(9px + var(--t) * 27px);
  opacity:calc(.3 + var(--t) * .5);
}
/* il filo di luce sul colmo della curva: è dove il foglio gira, ed è la
   cosa che dice «qui si sta alzando» prima di qualunque sfumatura. Si
   spegne ai due capi — a stroke pieno tocca i bordi del foglio e lì
   legge come un graffio, non come luce */
.peel__colmo { fill:none; stroke:url(#pl-filo); stroke-width:2.6; stroke-linecap:round; }

.peel__voce{
  position:absolute; font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; transform:skewX(11deg); white-space:nowrap;
}
/* le due voci si danno il cambio: nominano strati che non sono mai
   scoperti insieme */
.peel__voce--su {
  left:50%; bottom:22%; translate:-50% 0;
  color:var(--scuro-2); opacity:calc(var(--t) * 2.6 - 1.5);
}
.peel__voce--giu{
  left:16px; bottom:12px;
  color:#8C8974; opacity:calc(1 - var(--t) * 2.2);
}

.peel figcaption{ font-size:13px; color:var(--scuro-2); text-align:center; max-width:40ch; }

/* ---------------- la metà chiara ---------------- */

.chiaro{
  background:var(--avorio); color:var(--scuro); position:relative;
  isolation:isolate;
}
/* la grana sta sopra il fondo e sotto tutto il resto */
.chiaro::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grana); mix-blend-mode:multiply; opacity:.5;
}
/* niente `overflow:hidden` qui: su un antenato può rompere il
   `position:sticky` del blocco fermo, e il lembo del peel che esce dal
   riquadro non dà comunque fastidio a nessuno */
.chiaro h2, .chiaro h3{ color:var(--scuro); }
.chiaro em{ color:var(--giallo-sc); }

/* il trapasso dal buio alla luce, e ritorno */
/* e il ritorno al buio, prima dei contatti */
.contatti::before{
  content:""; position:absolute; left:0; right:0; top:-150px; height:150px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(250,249,245,0), var(--nero));
}

.sezione__testa{ max-width:var(--largo); margin:0 auto clamp(32px,4vw,52px); }
.sezione__testa h2{ margin:16px 0 20px; }
.sezione__testa--stretta h2{ margin-bottom:0; }

.griglia{ max-width:var(--largo); margin:0 auto; display:grid; gap:clamp(14px,1.6vw,22px); }
.griglia--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.griglia--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* ---------------- PRODOTTI ---------------- */

.prodotti{
  padding:clamp(70px,8vw,120px) var(--pad);
  background:linear-gradient(180deg, var(--avorio), var(--sabbia) 92%);
}

.carta{
  /* il piano più alto della pila, con un filo di luce dall'alto */
  background:linear-gradient(180deg, var(--bianco), var(--avorio));
  border:1px solid var(--bordo); border-radius:6px;
  padding:clamp(22px,2.2vw,30px); display:flex; flex-direction:column; gap:12px;
  /* due ombre: una corta e stretta che appoggia l'oggetto sul piano, e
     una lunga e larghissima che gli dà peso. Una sola non basta mai */
  box-shadow:0 1px 2px rgba(60,52,28,.05), 0 10px 26px -20px rgba(60,52,28,.4);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.carta:hover{
  border-color:var(--bordo-2); transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(60,52,28,.06), 0 22px 44px -24px rgba(60,52,28,.5);
}
.carta__sigla{
  align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.13em;
  color:#171712; background:var(--marchio-giallo); padding:5px 11px 4px;
  transform:skewX(-11deg);        /* di nuovo il taglio del marchio */
}
.carta--verde .carta__sigla{ background:#B9D77E; }
.carta__cifra{
  font-size:clamp(24px,2.4vw,32px); font-weight:500; letter-spacing:-0.03em;
  color:var(--scuro); line-height:1;
}
.carta__testo{ color:var(--scuro-2); font-size:15px; flex:1; }
.carta ul{ display:grid; gap:7px; margin-top:4px; padding-top:16px; border-top:1px solid var(--bordo); }
.carta ul li{ font-size:14px; color:var(--scuro-2); padding-left:15px; position:relative; }
.carta ul li::before{
  content:""; position:absolute; left:0; top:9px; width:6px; height:6px;
  background:var(--marchio-giallo); transform:skewX(-11deg);
}
.carta--verde ul li::before{ background:#B9D77E; }

/* ---- IL SEGNAPOSTO DI UNA FERMATA INTERNA ----

   Il motore ferma la pagina sul bordo alto di quel che gli marchi, e
   sul bordo alto della finestra c'è la barra: marcando direttamente
   una griglia, la sua prima riga si ferma sotto la barra e si legge
   tagliata. Questo elemento non occupa spazio — altezza zero — ma è
   spostato in su di un'altezza di barra, e `getBoundingClientRect` lo
   segue: la fermata cade lì, e il blocco resta tutto sotto la barra e
   dentro lo schermo. Va messo SUBITO PRIMA del blocco da marcare, e
   dentro un contenitore normale (non una griglia, o diventa una cella
   vuota). */
.fermata{
  display:block; height:0; position:relative; top:-76px;
  pointer-events:none;
}

/* ---------------- APPLICAZIONI ----------------
   Aprono la metà chiara, subito dopo la spiegazione del prodotto: è la
   domanda che si fa chi arriva — "a me serve per cosa?" — e viene prima
   di quale substrato useremo per dargliela. Fondo carta e riquadri
   staccati, per non farle sembrare l'ennesimo elenco. */

/* la testa qui ha un margine suo: la fermata interna sta 76px più su
   (`.fermata`), e senza questo respiro le due fermate della sezione
   finivano a un terzo di schermata l'una dall'altra — un gesto intero
   per spostarsi di niente */
.applicazioni .sezione__testa{ margin-bottom:clamp(46px,5.4vw,76px); }
.applicazioni{
  padding:clamp(80px,10vw,150px) var(--pad);
  background:linear-gradient(180deg, var(--sabbia), var(--carta));
}
.usi{
  max-width:var(--largo); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.usi li{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--bianco), var(--avorio));
  border:1px solid var(--bordo); border-radius:6px;
  padding:clamp(26px,2.8vw,38px); display:flex; flex-direction:column; gap:13px;
  box-shadow:0 1px 2px rgba(60,52,28,.05), 0 10px 26px -20px rgba(60,52,28,.4);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
/* un quarto di sole nell'angolo alto a destra: si accende al passaggio
   e basta a togliere il riquadro dal piatto */
.usi li::before{
  content:""; position:absolute; right:-40%; top:-70%; width:100%; height:150%;
  background:radial-gradient(closest-side, rgba(255,204,0,.20), transparent);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
.usi li:hover{
  border-color:var(--bordo-2); transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(60,52,28,.06), 0 22px 44px -24px rgba(60,52,28,.5);
}
.usi li:hover::before{ opacity:1; }
/* l'icona dentro un tondo giallo appena accennato: il marchio si sente,
   ma resta un fondo e non una macchia */
/* L'icona non è un contorno e basta: ha un tratto scuro e **un pezzo
   giallo pieno** — l'etichetta che si stacca dalla striscia, la coda
   del nastro, i fori del cerotto. È il solo dettaglio a colori di
   tutta la griglia, e serve a far riconoscere il mestiere di ciascuna
   invece di sei disegnini intercambiabili. */
.usi li > svg{
  width:62px; height:62px; padding:12px; box-sizing:border-box;
  border-radius:14px; background:var(--sabbia);
  border:1px solid var(--bordo);
  transition:background .3s, border-color .3s;
}
.usi .ico__tratto{
  fill:none; stroke:var(--scuro); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.usi .ico__pieno{ fill:var(--marchio-giallo); stroke:none; }
.usi li:hover > svg{ background:var(--bianco); border-color:var(--bordo-2); }
.usi b{ font-size:clamp(19px,1.6vw,22px); font-weight:500; letter-spacing:-0.015em; }
.usi span{ font-size:14.5px; color:var(--scuro-2); }

/* ---------------- IMPIANTI ---------------- */

.impianti{
  padding:clamp(60px,6.5vw,100px) var(--pad) clamp(80px,10vw,150px);
  background:linear-gradient(180deg, var(--carta), var(--sabbia));
}
.sedi{
  max-width:var(--largo); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--bordo); border:1px solid var(--bordo);
}
.sede{ background:var(--avorio); padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:9px;
       transition:background .3s, box-shadow .3s; }
.sede--hq{ background:#fff; }
.sede:target, .sede.is-mirata{ background:#fff; box-shadow:inset 3px 0 0 var(--marchio-giallo); }
.sede__paese{ font-size:11.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--scuro-2); }
.sede h3 span{ color:var(--scuro-2); font-weight:400; }
.sede__dal{ font-size:13px; color:var(--giallo-sc); font-weight:500; }
.sede__testo{ font-size:14.5px; color:var(--scuro-2); flex:1; }
.sede ul{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.sede ul li{
  font-size:12px; color:var(--scuro-2); padding:4px 10px;
  border:1px solid var(--bordo); border-radius:100px; background:var(--carta);
}

/* ---------------- SOSTENIBILITÀ ---------------- */

.sosten{
  padding:clamp(80px,10vw,150px) var(--pad);
  background:linear-gradient(180deg, var(--sabbia), var(--avorio) 60%);
}
.riciclo{
  max-width:var(--largo); margin:clamp(20px,2.4vw,32px) auto 0;
  border:1px solid var(--bordo); border-radius:5px; background:#fff;
  padding:clamp(24px,2.6vw,34px);
}
.riciclo h3{ margin-bottom:18px; }
.riciclo ul{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.riciclo li{ padding-left:16px; border-left:2px solid #B9D77E; }
.riciclo b{ display:block; font-weight:500; }
.riciclo span{ font-size:14px; color:var(--scuro-2); }

/* ---------------- CERTIFICAZIONI ---------------- */

.certif{ padding:0 var(--pad) clamp(90px,11vw,160px); }
.bolli{
  max-width:var(--largo); margin:0 auto;
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1px;
  background:var(--bordo); border:1px solid var(--bordo);
}
.bolli li{ background:var(--avorio); padding:24px 18px; display:flex; flex-direction:column; gap:4px; }
.bolli b{ font-size:16px; font-weight:500; }
.bolli span{ font-size:12.5px; color:var(--scuro-2); }

/* ---------------- LE FOTOGRAFIE ----------------
   Una lastra larga, con la stessa ombra a due strati delle carte, e un
   velo caldo sopra che le riporta tutte sulla stessa temperatura —
   fotografie diverse su una pagina sola stonano più di quanto si
   creda. */
.lastra{
  max-width:var(--largo); margin:0 auto clamp(30px,3.4vw,44px);
  position:relative; overflow:hidden; border-radius:6px;
  box-shadow:0 1px 2px rgba(60,52,28,.06), 0 24px 50px -30px rgba(60,52,28,.55);
}
.lastra--larga{ margin-bottom:clamp(34px,4vw,54px); }
/* Le lastre sono panoramiche anche per una ragione che non è di gusto:
   ogni fotografia sta fra due fermate del motore, e una lastra alta le
   allontana finché un gesto non basta più a coprirle. Il rapporto è
   sceso a 16:5,6 per rimettere in riga i due salti che le fotografie
   avevano portato oltre la schermata e un sesto. */
.lastra img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/5.6; object-fit:cover;
}
.lastra::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,204,0,.05), rgba(30,26,12,.14));
}

/* ---------------- CONTATTI ---------------- */

.contatti__sfondo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* la fotografia è il fondo, non il soggetto: scura, desaturata e
     senza contrasto, o il testo sopra non si legge più */
  opacity:.55; filter:grayscale(.3) brightness(.82);
}
.contatti{
  position:relative; background:var(--nero); color:var(--chiaro);
  isolation:isolate; overflow:hidden;
  padding:clamp(90px,11vw,160px) var(--pad) clamp(60px,7vw,100px);
  display:grid; gap:clamp(40px,5vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
}
.contatti > *:not(.contatti__sfondo){ position:relative; z-index:1; }
/* un velo, o la fotografia si mangia il testo */
.contatti::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, var(--nero) 14%, rgba(13,14,11,.82) 48%, rgba(13,14,11,.42));
}
.contatti h2{ margin:16px 0 20px; }
.contatti__mail{ margin-top:30px; }
.contatti__mail a{
  font-size:clamp(19px,1.9vw,26px); font-weight:500; color:var(--giallo);
  border-bottom:1px solid rgba(245,198,60,.35); padding-bottom:3px;
  transition:border-color .2s;
}
.contatti__mail a:hover{ border-color:var(--giallo); }

.recapiti{ display:grid; gap:1px; background:rgba(255,255,255,.12); align-self:start; }
.recapiti li{ background:rgba(13,14,11,.62); backdrop-filter:blur(3px);
              padding:22px 0 22px 22px; border-left:1px solid rgba(255,255,255,.1); }
.recapiti__paese{ font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--giallo); }
.recapiti__nome{ font-weight:500; margin-top:7px; }
.recapiti address{ color:var(--chiaro-2); font-size:14.5px; margin-top:3px; }
.recapiti a{ display:inline-block; margin-top:9px; font-size:14.5px; color:var(--chiaro-2); border-bottom:1px solid rgba(255,255,255,.2); }
.recapiti a:hover{ color:var(--chiaro); }

/* ---------------- PIÈ ---------------- */

.pie{
  background:var(--nero); padding:clamp(30px,4vw,50px) var(--pad) 46px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px;
}
.pie__marchio{ height:34px; width:auto; opacity:.85; }
.pie__legale{ font-size:13px; color:var(--chiaro-2); }
.pie__nota{ font-size:12px; color:#5C5D55; flex-basis:100%; }

/* col banco `?solo=…` la sezione superstite parte in cima e finirebbe
   sotto la barra fissa: qui lo spazio glielo fa nessun altro */
body.in-solo main{ padding-top:86px; }

/* ---------------- comparse ----------------

   Nascoste solo sotto `.js`, che lo script in <head> appende al
   documento: se il JavaScript non parte, non c'è nulla che possa
   rimettere in piedi questi blocchi, e la pagina resterebbe bianca.

   ATTENZIONE: questo elenco è gemello di quello in js/ui.js
   (`daRivelare`). Chi tocca l'uno tocca l'altro. */

/* `:where()` non pesa nulla nel conto della specificità, e serve: senza,
   `.js .usi li` (una classe più un tipo) batterebbe `.js .is-su` e le
   liste non tornerebbero mai visibili — restano nascoste per sempre
   proprio quelle che hanno l'elenco puntato. */
.js :where(.sezione__testa, .carta, .usi li, .sede, .bolli li, .riciclo,
           .strati__testo, .pila, .sedi__lato, .distacco__testo, .peel,
           .contatti__testa, .recapiti li, .distacco__punti li){
  opacity:0; transform:translateY(18px);
}
.js .is-su{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){
  .js :where(.sezione__testa, .carta, .usi li, .sede, .bolli li, .riciclo,
             .strati__testo, .pila, .sedi__lato, .distacco__testo, .peel,
             .contatti__testa, .recapiti li, .distacco__punti li){
    opacity:1; transform:none;
  }
}

/* ================================================================
   ADATTAMENTI
   ================================================================ */

/* ---- FINESTRE BASSE ----
   Le due sezioni a due colonne — il multistrato e il liner — sono le
   più alte della pagina, e su una finestra bassa (un portatile con la
   finestra non a tutto schermo) superano la schermata e un sesto: il
   motore, che ha una fermata per sezione, comincia a scavalcare righe.
   Qui i padding verticali si stringono, e i salti tornano in riga.
   Misurato a 1280×713: 1,26 → 1,10. */
@media (max-height: 820px){
  .strati{ padding-block:clamp(52px,6.5vw,92px); }
  .distacco__fermo{ padding-top:clamp(58px,7vw,100px); padding-bottom:clamp(38px,4.5vw,64px); }
  .applicazioni, .prodotti{ padding-block:clamp(56px,6.5vw,96px); }
  /* i tre punti del liner sono la parte che allunga di più quella
     colonna: qui respirano un po' meno */
  .distacco__punti{ margin-top:22px; }
  .distacco__punti li{ padding-block:13px; }
  .peel__scena{ margin-top:calc(var(--w) * .2); margin-bottom:clamp(14px,2.5vw,28px); }
}

@media (max-width: 1180px){
  .griglia--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .usi, .sedi{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bolli{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width: 980px){
  body{ font-size:16px; }
  .testata__voci{
    position:fixed; inset:0 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; padding:86px var(--pad) 26px;
    background:rgba(13,14,11,.97); backdrop-filter:blur(16px);
    transform:translateY(-101%); transition:transform .38s cubic-bezier(.22,1,.36,1);
  }
  .testata--aperta .testata__voci{ transform:none; }
  .testata__voci a{ font-size:19px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); color:var(--chiaro); }
  .testata--chiara .testata__voci a{ color:var(--chiaro); }
  .testata__cta{ margin-top:18px; align-self:flex-start; border:0; padding:12px 24px; background:var(--giallo); color:#171712 !important; }
  .testata--chiara .testata__cta{ background:var(--giallo); color:#171712 !important; }
  .testata__hb{ display:block; z-index:2; }
  .testata--chiara:not(.testata--aperta) .testata__hb{ color:var(--scuro); }

  /* LA GRIGLIA STA SU `__fermo`, NON SU `.esordio`. Qui c'era scritto
     `.esordio`, che griglia non è: la colonna singola del telefono non
     è mai entrata in vigore, e l'apertura restava a due colonne
     schiacciate col globo addosso al titolo. Si vedeva solo sotto i
     500px veri — e in headless il viewport non ci scende. */
  .esordio__fermo{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"scena" "testo" "cifre";
    grid-template-rows:auto auto auto;
    padding-top:84px; align-content:start;
  }
  /* il margine sotto è per il suggerimento, che sta appeso fuori dalla
     scena: senza, finisce addosso all'occhiello della riga dopo */
  .esordio__scena{ height:min(46svh, 360px); margin:6px 0 0; }
  .esordio__testo{ padding-bottom:30px; max-width:none; }
  .pin span{ font-size:11.5px; }
  .pin span em{ display:none; }

  .strati, .distacco__fermo, .contatti{ grid-template-columns:minmax(0,1fr); }
  .distacco__fermo{ gap:44px; padding-top:clamp(90px,20vw,150px); }
  /* il trapasso al chiaro, su una colonna, deve finire prima: sotto
     c'è subito il testo, e leggerlo a metà gradiente è faticoso */
  .distacco::before{ height:34vh; }
  .riciclo ul{ grid-template-columns:minmax(0,1fr); gap:14px; }
}

@media (max-width: 720px){
  /* LA PILA SU UNO SCHERMO STRETTO. Restano tre colonne — graffa,
     sezione, quote — ma tutte più magre: la graffa perde la parola e
     tiene solo la misura (a schermo stretto la scritta verticale era
     più lunga della graffa e le usciva dal fondo), e le quote si
     stringono su quel che avanza invece di sbordare. */
  .pila{ --colw:50%; }
  .pila__scena{ padding-left:34px; }
  .pila__graffa{ width:26px; gap:0; }
  .pila__graffa span{ display:none; }
  .pila__quote{
    left:calc(34px + var(--colw)); padding-left:20px;
    width:calc(100% - 34px - var(--colw) - 20px);
  }
  .quota::before{ width:20px; }
  .quota b{ font-size:13px; }
  .quota span{ font-size:11.5px; }
  .strato b{ left:9px; font-size:9.5px; letter-spacing:.1em; }

  .esordio__cifre{ grid-template-columns:repeat(2, 1fr); }
  .esordio__cifre li{ padding:20px var(--pad); }
  .griglia--4, .griglia--3, .usi, .sedi{ grid-template-columns:minmax(0,1fr); }
  .bolli{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .esordio__scena{ height:min(40svh, 300px); }
  /* sul telefono le etichette dei marker si accavallano: resta l'HQ */
  .pin:not(.pin--hq) span{ display:none; }
  .recapiti li{ padding-left:18px; }
}