/* ============================================================
   ELECTRONICA srl — "Dentro il processo"
   Vetrina 3D. Foglio caricato solo da dentro.html: styles.css
   non si tocca, e questa pagina non cambia nulla alle altre.

   Corsia: la tavola esplosa di un manuale ricambi. Fondo chiaro.
   La profondità la fanno ombre proiettate, spessore delle lastre
   e prospettiva aerea rovesciata (ciò che è lontano schiarisce).

   Regola di riposo: senza JavaScript la pila è GIÀ APERTA e tutte
   le didascalie si leggono. GSAP parte dallo stato chiuso e
   scorrendo torna qui. Il contenuto non è mai in ostaggio.
   ============================================================ */

body[data-pagina="dentro"] {
  /* Materia — non sono colori di marca, sono proprietà di superficie */
  --piano-a:     #f5f5f3;
  --piano-b:     #eaeae7;
  --piano-bordo: #b7b7b1;
  --faccia:      #d8d8d4;
  --ombra-piano: rgba(38, 38, 37, 0.22);

  /* Camera e passo dell'esplosione */
  --tilt-x: 58deg;
  --tilt-z: -18deg;
  --passo:  clamp(70px, 8.6vh, 102px);

  --lastra-w: 300px;
  --lastra-h: 205px;
}

/* ============================================================
   Riga di stato — dove sei nel processo
   ============================================================ */
.stato {
  position: sticky;
  top: 4.75rem;
  z-index: calc(var(--z-sticky) - 1);
  background: var(--bianco);
  border-bottom: 1px solid var(--filo);
}
.stato__interno {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 2.4rem;
}
.stato__voce {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t--2);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  flex: none;
}
.stato__tacche {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.stato__tacche::-webkit-scrollbar { display: none; }

.tacca {
  position: relative;
  display: block;
  padding: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t--2);
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
  white-space: nowrap;
  transition: color 0.18s var(--uscita), border-color 0.18s var(--uscita);
}
/* Area toccabile piena anche quando il segno è minuscolo */
.tacca::before { content: ""; position: absolute; inset: -12px -6px; }
.tacca:hover { color: var(--ink); }
.tacca[aria-current="true"] { color: var(--rosso); border-bottom-color: var(--rosso); }

/* Su schermo stretto le etichette spariscono e restano otto segni */
@media (max-width: 61.99rem) {
  .stato__voce { display: none; }
  .tacca {
    width: 1.5rem;
    overflow: hidden;
    text-indent: -99em;
    border-bottom-width: 3px;
    border-bottom-color: var(--filo-2);
    padding-bottom: 0;
    height: 3px;
  }
  .tacca[aria-current="true"] { border-bottom-color: var(--rosso); }
}

/* ============================================================
   Apertura — l'anello si corica e diventa l'asse
   ============================================================ */
.avvio {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.avvio__griglia {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .avvio__griglia { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}

.avvio__titolo {
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.6rem);
  letter-spacing: -0.018em;
  max-width: 15ch;
}
/* La maschera restituisce come margine negativo il margine interno che si
   prende: taglia il movimento delle righe, non le aste e le code dei glifi. */
.avvio__titolo .riga-mask {
  display: block;
  overflow: hidden;
  padding-top: 0.18em;
  padding-bottom: 0.2em;
  margin-top: -0.18em;
  margin-bottom: -0.2em;
}
.avvio__titolo .riga { display: block; }

.avvio__guida {
  margin-top: var(--s-5);
  font-size: var(--t-1);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 50ch;
}
.avvio__cenno {
  margin-top: var(--s-6);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t--2);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.avvio__cenno::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--rosso);
}

/* La scena dell'anello */
.avvio__scena {
  perspective: 1500px;
  perspective-origin: 50% 46%;
  width: min(100%, 30rem);
  margin-inline: auto;
  aspect-ratio: 1;
  position: relative;
}
.avvio__corpo {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.avvio__anello {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.avvio__anello circle { fill: none; stroke: var(--rosso); stroke-width: 6; }
.avvio__anello line   { stroke: var(--grigio); stroke-width: 2; }

/* Il primo strato, che compare sotto l'anello quando si corica */
.avvio__lastra {
  /* La centratura sta sulla proprietà `translate`, separata da `transform`:
     così GSAP può riscrivere `transform` (z) senza scentrare la lastra. */
  position: absolute;
  left: 19%; top: 50%;
  width: 62%;
  aspect-ratio: 300 / 205;
  translate: 0 -50%;
  transform: translateZ(-58px);
  background: var(--piano-a);
  border: 1px solid var(--piano-bordo);
  box-shadow: 0 26px 44px -18px var(--ombra-piano);
}
.avvio__lastra span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: var(--faccia);
  border: 1px solid var(--piano-bordo);
  border-top: 0;
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

/* ============================================================
   La pila — l'oggetto centrale
   ============================================================ */
.scena {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1800px;
  perspective-origin: 50% 44%;
}
.pila {
  position: relative;
  width: var(--lastra-w);
  height: var(--lastra-h);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateZ(var(--tilt-z));
}

.piano {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Stato di riposo: APERTO. GSAP scrubba da 0 fin qui. */
  transform: translateZ(calc(var(--i) * var(--passo)));
}

.piano__lastra {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  background: var(--piano-a);
  border: 1px solid var(--piano-bordo);
  /* L'ombra vive nel piano della lastra: siccome tutte le lastre sono
     parallele, in proiezione cade dove sta quella sotto. Più il piano è
     alto, più l'ombra si allarga e si ammorbidisce. */
  box-shadow: 0 calc(6px + var(--i) * 7px) calc(14px + var(--i) * 12px) -10px var(--ombra-piano);
}
.piano:nth-child(even) .piano__lastra { background: var(--piano-b); }

/* Prospettiva aerea rovesciata: su fondo chiaro, ciò che è lontano schiarisce */
.piano__lastra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bianco);
  opacity: calc((5 - var(--i)) * 0.04);
  pointer-events: none;
}

/* Il fianco: senza di lui un piano è un rettangolo, non una lastra */
.piano__spessore {
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: 7px;
  background: var(--faccia);
  border: 1px solid var(--piano-bordo);
  border-top: 0;
  transform-origin: bottom center;
  transform: rotateX(90deg);
}

.piano__segni { position: absolute; inset: 0; width: 100%; height: 100%; }
.piano__segni .traccia { fill: none; stroke: var(--rosso); stroke-width: 2.2; }
.piano__segni .metallo { fill: var(--grigio); }
.piano__segni .resistore { fill: var(--rosso); opacity: 0.82; }
.piano__segni .die { fill: var(--grafite); }
.piano__segni .filo { fill: none; stroke: var(--grafite); stroke-width: 1.4; }
.piano__segni .foro { fill: var(--piano-bordo); }
.piano__segni .resina { fill: var(--blu); opacity: 0.13; }
.piano__segni .quota { stroke: var(--grigio); stroke-width: 1; stroke-dasharray: 4 4; }

/* Le didascalie stanno FUORI dalla scena 3D, su un piano piatto sopra di
   essa. Dentro la pila finirebbero dietro alle lastre più alte (che sono
   più vicine alla camera) e il testo si ammorbidirebbe. Qui restano nette
   e sempre davanti; a seguire i loro piani ci pensa GSAP, che ne misura la
   quota reale a schermo una volta sola e poi la anima con una traslazione. */
.richiami {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.richiamo {
  position: absolute;
  top: 50%;
  width: 20.5rem;
  display: grid;
  /* Una colonna, dichiarata: nome sopra, specifica sotto. Senza il
     template esplicito il nome finiva a fianco della specifica. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  /* Ripiego senza JS: passo geometrico approssimato, --passo * sin(58°) */
  transform: translateY(calc(-50% + var(--i) * -78px));
}
.richiamo--sx { right: calc(50% + 11.75rem); text-align: right; }
.richiamo--dx { left:  calc(50% + 11.75rem); }
.richiamo__spec { text-wrap: pretty; }

/* La linea di richiamo verso la pila */
.richiamo::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  width: 2.25rem;
  height: 1px;
  background: var(--rosso);
}
.richiamo--sx::after { right: -2.6rem; }
.richiamo--dx::after { left: -2.6rem; }

.richiamo__nome {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t--1);
  color: var(--ink);
  line-height: 1.18;
}
.richiamo__spec { font-size: var(--t--2); color: var(--ink-3); line-height: 1.36; }
.richiamo__spec em { font-style: normal; color: var(--rosso); }

/* ---------- La catena, sezione intera ---------- */
.tavola { background: var(--substrato); }
.tavola__pin { display: block; width: 100%; }
.tavola__testa { max-width: 34ch; }
.tavola__scena { position: relative; margin-top: var(--s-8); min-height: 44rem; }

@media (min-width: 62rem) {
  .tavola { padding-block: 0; }
  .tavola__pin {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    /* Sopra ci sono testata e riga di stato appiccicate: se non si lascia
       loro lo spazio, il titolo della sezione finisce sotto. */
    padding-top: 9rem;
    padding-bottom: var(--s-5);
  }
  /* width esplicita: sotto pin ScrollTrigger avvolge la sezione in uno
     spacer, e un `width: 100%` dentro una traccia auto collassa al contenuto. */
  .tavola__involucro { width: 100%; flex: 1; display: flex; flex-direction: column; }
  .tavola__scena { margin-top: var(--s-5); flex: 1; min-height: 26rem; }
  /* La pila cresce verso l'alto: la si tiene bassa perché l'esplosione
     resti dentro l'inquadratura sia da chiusa sia da aperta. */
  /* La pila cresce verso l'alto: la si tiene bassa perché l'esplosione
     resti dentro l'inquadratura sia da chiusa sia da aperta. */
  .tavola__scena .pila { translate: 0 clamp(3rem, 11vh, 8rem); }
}

/* ---------- Su schermo stretto: pila piccola, richiami in elenco ----------
   La pila resta un oggetto 3D — è piccola, ferma e non scrubbata, quindi
   non costa nulla. Quello che cambia è dove stanno le didascalie: sotto,
   numerate, in flusso. L'esplosione diventa una sequenza verticale, che è
   ciò che fisicamente è. */
@media (max-width: 61.99rem) {
  .scena { perspective: 1100px; }
  .pila { --lastra-w: 190px; --lastra-h: 130px; --passo: 38px; }
  .tavola__scena { min-height: 0; padding-top: 5.5rem; }

  .richiami {
    position: static;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--filo-2);
    margin-top: var(--s-7);
    counter-reset: strato;
  }
  .richiamo {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.15rem var(--s-3);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--filo-2);
    counter-increment: strato;
  }
  .richiamo--sx, .richiamo--dx { right: auto; left: auto; text-align: left; }
  .richiamo::before {
    content: counter(strato);
    grid-row: span 2;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--t--1);
    color: var(--rosso);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
  }
  .richiamo::after { display: none; }
}

/* ============================================================
   Il contrappunto — quando la catena si spezza
   ============================================================ */
.spezzata { background: var(--grafite); color: var(--su-scuro-2); }
.spezzata h2 { color: var(--su-scuro); }
.spezzata__griglia { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 62rem) {
  .spezzata__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--s-9); }
}
.spezzata__testo { max-width: 52ch; font-size: var(--t-1); font-weight: 300; line-height: 1.55; color: var(--su-scuro-2); }
.spezzata__testo + .spezzata__testo { margin-top: var(--s-5); }
.spezzata__testo strong { color: #fff; font-weight: 600; }

.spezzata .scena { --lastra-w: 240px; --lastra-h: 164px; --passo: 66px; perspective: 1500px; }
.spezzata .piano {
  transform:
    translateZ(calc(var(--i) * var(--passo)))
    translate(var(--dx, 0px), var(--dy, 0px))
    rotateZ(var(--rz, 0deg));
}
.spezzata .piano__lastra {
  background: #52524f;
  border-color: #6d6d68;
  box-shadow: 0 calc(6px + var(--i) * 4px) calc(14px + var(--i) * 8px) -10px rgba(0,0,0,0.55);
}
.spezzata .piano:nth-child(even) .piano__lastra { background: #4a4a47; }
.spezzata .piano__lastra::after { opacity: 0; }
.spezzata .piano__spessore { background: #3a3a38; border-color: #6d6d68; }
/* I tre comprati fuori: grigio spento, e non appartengono alla serie */
.spezzata .piano--fuori .piano__lastra {
  background: var(--grigio);
  border-color: #b5b5b1;
  border-style: dashed;
}
.spezzata .piano--fuori .piano__spessore { background: #868683; border-color: #b5b5b1; }

@media (max-width: 61.99rem) {
  .spezzata .scena { padding-block: var(--s-8) var(--s-6); }
  .spezzata .pila { --lastra-w: 190px; --lastra-h: 130px; --passo: 34px; }
}

/* ============================================================
   Le due divisioni — la tavola pieghevole
   ============================================================ */
.piega { perspective: 1400px; margin-top: var(--s-7); }
.piega__ante { display: grid; gap: 0; }
@media (min-width: 52rem) {
  .piega__ante { grid-template-columns: 58fr 42fr; transform-style: preserve-3d; }
}

.anta {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bianco);
  border: 1px solid var(--filo-2);
  transform: rotateY(var(--apri, 0deg)) translateZ(var(--avanti, 0px));
  transition: transform 0.32s var(--uscita), box-shadow 0.32s var(--uscita);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.anta--am { border-top: 3px solid var(--rosso); }
.anta--rd { border-top: 3px solid var(--blu); }
@media (min-width: 52rem) {
  .anta--am { --apri: 14deg;  transform-origin: right center; border-right: 0; }
  .anta--rd { --apri: -14deg; transform-origin: left center; }
}

.anta__logo { width: min(11rem, 60%); height: auto; }
.anta__nome { font-size: var(--t-2); }
.anta__testo { font-size: var(--t--1); color: var(--ink-2); max-width: 40ch; }

@media (hover: hover) and (min-width: 52rem) {
  .anta:hover, .anta:focus-within {
    --apri: 0deg;
    --avanti: 42px;
    box-shadow: 0 30px 60px -30px var(--ombra-piano);
  }
  .piega__ante:has(.anta--am:hover) .anta--rd,
  .piega__ante:has(.anta--am:focus-within) .anta--rd { --apri: -26deg; }
  .piega__ante:has(.anta--rd:hover) .anta--am,
  .piega__ante:has(.anta--rd:focus-within) .anta--am { --apri: 26deg; }
}

/* ============================================================
   I settori — il mazzo di schede
   ============================================================ */
.mazzo { background: var(--substrato); }
.mazzo__griglia { display: grid; gap: var(--s-7); align-items: center; margin-top: var(--s-7); }
@media (min-width: 56rem) {
  .mazzo__griglia { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s-8); }
}

.mazzo__comandi { display: grid; gap: 0; border-top: 1px solid var(--filo-2); margin: 0; padding: 0; list-style: none; }
.settore-btn {
  width: 100%;
  text-align: left;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-1);
  color: var(--ink-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--filo-2);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transition: color 0.18s var(--uscita);
}
.settore-btn::before {
  content: "";
  width: 14px; height: 2px;
  background: var(--filo-2);
  flex: none;
  transform-origin: left center;
  transition: background-color 0.18s var(--uscita), transform 0.18s var(--uscita);
}
.settore-btn:hover { color: var(--ink); }
.settore-btn[aria-pressed="true"] { color: var(--ink); }
.settore-btn[aria-pressed="true"]::before { background: var(--rosso); transform: scaleX(1.85); }

.mazzo__pila {
  position: relative;
  perspective: 1400px;
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
}
.scheda {
  position: absolute;
  inset: 0;
  background: var(--bianco);
  border: 1px solid var(--filo-2);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  /* Le schede dietro devono sporgere, altrimenti il mazzo legge come
     una scheda sola: si scostano di lato e verso il basso, non solo in z. */
  transform:
    translateZ(calc(var(--pos) * -55px))
    translate(calc(var(--pos) * 13px), calc(var(--pos) * 22px))
    rotateZ(calc(var(--pos) * -2.1deg));
  opacity: calc(1 - var(--pos) * 0.13);
  z-index: calc(10 - var(--pos));
  box-shadow: 0 24px 44px -26px var(--ombra-piano);
  transition: transform 0.38s var(--uscita), opacity 0.38s var(--uscita);
}
.scheda img { width: 100%; height: 100%; object-fit: cover; }
.scheda__testo { padding: var(--s-5); display: grid; gap: var(--s-2); background: var(--bianco); }
.scheda__nome { font-size: var(--t-2); }
.scheda__riga { font-size: var(--t--1); color: var(--ink-2); }
.scheda__norma { font-size: var(--t--2); color: var(--ink-3); }

@media (max-width: 55.99rem) {
  /* Su tocco: niente 3D, uno scorrimento a scatti. */
  .mazzo__pila {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    aspect-ratio: auto;
    perspective: none;
    transform-style: flat;
    padding-bottom: var(--s-3);
    scrollbar-width: thin;
  }
  .scheda {
    position: relative;
    inset: auto;
    flex: 0 0 min(78vw, 22rem);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    transform: none;
    opacity: 1;
    transition: none;
  }
  .mazzo__comandi { display: none; }
}

/* ============================================================
   Le quote — i numeri come misure di disegno
   ============================================================ */
.quote { display: grid; gap: var(--s-6) var(--s-7); margin-top: var(--s-7); }
@media (min-width: 44rem) { .quote { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 68rem) { .quote { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* La fascia legge come un foglio appoggiato al tavolo */
.quote-piano { perspective: 1400px; }
.quote-piano > .quote { transform: rotateX(6deg); transform-origin: center bottom; }

.quota { display: grid; gap: var(--s-3); }
.quota__riga {
  position: relative;
  height: 9px;
}
.quota__riga::before,
.quota__riga::after {
  content: "";
  position: absolute;
  top: 1px;
  border-block: 3.5px solid transparent;
}
.quota__riga::before { left: 0;  border-right: 6px solid var(--filo-2); }
.quota__riga::after  { right: 0; border-left:  6px solid var(--filo-2); }
.quota__tratto {
  position: absolute;
  left: 5px; right: 5px; top: 4px;
  height: 1px;
  background: var(--filo-2);
  transform-origin: left center;
}
.quota__valore {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-3);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.quota__voce { font-size: var(--t--2); color: var(--ink-3); max-width: 24ch; }

/* ============================================================
   Domande — le pieghe
   ============================================================ */
.domande { max-width: 68ch; margin-top: var(--s-7); border-top: 1px solid var(--filo-2); }

.domanda { border-bottom: 1px solid var(--filo-2); perspective: 900px; perspective-origin: 50% 0; }
.domanda > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-1);
  color: var(--ink);
  transition: color 0.18s var(--uscita);
}
.domanda > summary::-webkit-details-marker { display: none; }
.domanda > summary:hover { color: var(--rosso); }

/* Il segno di registro come comando: un + che diventa un − */
.croce {
  position: relative;
  flex: none;
  width: 15px; height: 15px;
  align-self: center;
}
.croce::before,
.croce::after {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 2px;
  background: var(--rosso);
  transition: transform 0.3s var(--uscita);
}
.croce::after { transform: rotate(90deg); }
.domanda[open] .croce::after { transform: rotate(0deg); }

.domanda__clip { overflow: hidden; }
.domanda__int {
  transform-origin: top center;
  transform: rotateX(-92deg);
  opacity: 0;
  padding-bottom: var(--s-5);
  transition: transform 0.34s var(--uscita), opacity 0.18s linear;
}
.domanda[open] .domanda__int { transform: rotateX(0deg); opacity: 1; }
.domanda__int p { font-size: var(--t--1); color: var(--ink-2); max-width: 62ch; }
.domanda__int p + p { margin-top: var(--s-3); }

@media (max-width: 47.99rem) {
  /* Su schermo stretto una piega troppo aperta deforma il testo */
  .domanda { perspective: 1000px; }
  .domanda__int { transform: rotateX(-60deg); }
  .domanda[open] .domanda__int { transform: rotateX(0deg); }
}

/* ============================================================
   Chiusura — tutto torna dentro
   ============================================================ */
.chiusura__scena { margin-block: var(--s-8); }
.chiusura .scena { --passo: 78px; }
.chiusura .pila { transform: rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -18deg)); }

.chiusura__anello {
  position: absolute;
  left: 19%; top: 50%;
  width: 62%;
  aspect-ratio: 1;
  translate: 0 -50%;
  transform: translateZ(calc(5 * var(--passo) + 2px));
  overflow: visible;
  pointer-events: none;
}
.chiusura__anello circle { fill: none; stroke: var(--rosso); stroke-width: 6; }

.chiusura__frase {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-4);
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.012em;
  max-width: 18ch;
  text-wrap: balance;
}

@media (max-width: 61.99rem) {
  .chiusura .pila { --lastra-w: 190px; --lastra-h: 130px; --passo: 32px; }
  .chiusura__scena { padding-top: 4rem; }
}

/* ---------- Il modulo: un foglio che si raddrizza per scriverci ---------- */
.foglio { perspective: 1600px; margin-top: var(--s-7); }
.foglio__int {
  transform: rotateX(var(--inclina, 4deg));
  transform-origin: center top;
  transition: transform 0.24s var(--uscita);
  background: var(--bianco);
  border: 1px solid var(--filo-2);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 26px 50px -32px var(--ombra-piano);
}
.foglio__int:focus-within { --inclina: 0deg; }

.chiusura__griglia { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62rem) {
  .chiusura__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-9); }
}

/* ============================================================
   Movimento ridotto — la pagina diventa una tavola ferma.
   Niente si nasconde, niente si muove.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .anta,
  .scheda,
  .domanda__int,
  .foglio__int,
  .croce::before,
  .croce::after,
  .quota__tratto,
  .tacca { transition: none !important; }

  .anta { --apri: 0deg !important; --avanti: 0px !important; }
  .foglio__int { --inclina: 0deg !important; }
  .domanda__int { transform: none !important; opacity: 1 !important; }
}