:root {
  --tenue: color-mix(in srgb, var(--fg) 75%, transparent);
  --sez: clamp(6rem, 16vh, 11rem);
  --rimbalzo: cubic-bezier(0.34, 1.56, 0.64, 1);
  --palco-pad: clamp(5.5rem, 12vh, 7rem) var(--pad) clamp(2rem, 6vh, 4rem);
}

.urlo {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--fg-strong);
}
.etichetta {
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- hero: il manifesto ---------- */
.poster {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
  padding: clamp(6.5rem, 15vh, 9rem) var(--pad) 0;
  overflow: clip;
  isolation: isolate;
}
.poster__disco {
  position: absolute;
  z-index: -1;
  right: 7vw; top: 50%;
  width: min(78svh, 46vw);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--accent);
  overflow: hidden;
}
.poster__gl { width: 100%; height: 100%; color: var(--bg); }
.poster__fascia {
  position: absolute;
  z-index: 3;
  left: 0; top: 0;
  padding: 0.4em 1.4em;
  background: var(--paper);
  color: var(--bg);
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
}
.poster__fascia.is-pronto { visibility: visible; }
.poster__testa { grid-column: 1; z-index: 3; }
.poster__nome {
  display: inline-block;
  padding: 0.5em 0.9em;
  background: var(--paper);
  color: var(--bg);
  rotate: -4deg;
}
.poster__frase {
  display: block;
  max-width: 16ch;
  margin-top: clamp(1.4rem, 4vh, 2.4rem);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg-strong);
}
.poster__frase strong { color: var(--accent); }
.poster__intro {
  grid-column: 1;
  z-index: 3;
  max-width: 30ch;
  margin-top: clamp(1.2rem, 3vh, 2rem);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: var(--tenue);
}
.poster__parola {
  position: absolute;
  z-index: 2;
  left: -0.04em; bottom: -0.14em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 27vw, 30rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: var(--paper);
  pointer-events: none;
}

/* ---------- manifesto: il poster dei verbi ---------- */
.serve { background: var(--accent); color: var(--bg); }
.serve__pin {
  position: relative;
  height: 100svh;
  padding: clamp(6rem, 14vh, 8rem) var(--pad) 0;
  overflow: hidden;
}
.serve__prima {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}
.serve__verbo {
  position: absolute;
  font-family: var(--font-display);
  line-height: 0.85;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.serve__verbo--capire { left: -0.04em; bottom: -0.1em; font-size: clamp(6rem, 24vw, 26rem); font-weight: 900; }
.serve__verbo--scegliere {
  right: var(--pad); top: clamp(5rem, 12vh, 8rem);
  writing-mode: vertical-rl;
  font-size: clamp(3rem, 8vw, 9rem);
  font-weight: 200;
  color: var(--paper);
}
.serve__verbo--navigare {
  right: 20vw; top: 36%;
  rotate: -12deg;
  font-size: clamp(2.6rem, 6.5vw, 7.5rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px var(--bg);
}
.serve__verbo--ricordare {
  left: 42vw; top: 18%;
  padding: 0.12em 0.3em 0.18em;
  rotate: 3deg;
  font-size: clamp(1.8rem, 3.6vw, 4rem);
  font-weight: 800;
  color: var(--paper);
  background: var(--bg);
}
.serve__testo {
  max-width: 44ch;
  margin: 0 var(--pad) 0 auto;
  padding: clamp(3rem, 8vh, 5rem) 0 var(--sez);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
}

/* ---------- cosa comprende: sei manifesti ---------- */
.tavole { padding: var(--sez) var(--pad); overflow-x: clip; }
.tavole__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 8vh, 6rem);
  list-style: none;
}
.tavola { margin-top: var(--scende, 0); }
.tavola--grafica, .tavola--ui { --foglio: var(--paper); --inchiostro: var(--bg); }
.tavola--art, .tavola--proto { --foglio: var(--accent); --inchiostro: var(--paper); --segno: var(--paper); }
.tavola--ux, .tavola--sistema { --foglio: var(--bg-block); --inchiostro: var(--paper); }
.tavola__foglio {
  position: relative;
  container-type: inline-size;
  display: grid;
  align-content: end;
  aspect-ratio: 4 / 5;
  padding: 9%;
  border-radius: 2px;
  background: var(--foglio);
  color: var(--inchiostro);
  rotate: var(--ruota, 0deg);
  transition: rotate 0.8s var(--ease);
}
.tavola.is-on .tavola__foglio { rotate: 0deg; }
.tavola__foglio::before {
  content: attr(data-segno);
  position: absolute;
  left: 6%; top: -2%;
  font-family: var(--font-display);
  font-size: 58cqi;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.07em;
  color: color-mix(in srgb, var(--inchiostro) 10%, transparent);
  transition: color 0.8s var(--ease), translate 0.8s var(--ease);
}
.tavola.is-on .tavola__foglio::before { color: color-mix(in srgb, var(--inchiostro) 18%, transparent); translate: 0 4%; }
.tavola__nome {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.tavola__testo { max-width: 30ch; margin-top: 1.2rem; font-size: 0.98rem; line-height: 1.55; color: var(--tenue); }
.tavola__parola {
  position: relative;
  display: inline-block;
  transition: color 0.6s var(--ease), font-weight 0.6s var(--ease), transform 0.6s var(--ease);
}
.tavola__deco { position: absolute; inset: 0; pointer-events: none; }

.tavola--grafica .tavola__parola i {
  display: inline-block;
  font-style: normal;
  transition: font-weight 0.7s var(--ease), transform 0.7s var(--ease), color 0.7s var(--ease);
  transition-delay: calc(var(--i) * 30ms);
}
.tavola--grafica.is-on .tavola__parola i { font-weight: 900; transform: rotate(var(--r)); }
.tavola--grafica.is-on .tavola__parola i:nth-child(even) { font-weight: 100; }
.tavola--grafica.is-on .tavola__parola i:nth-child(4n + 1) { color: var(--accent); }

.gcrop {
  position: absolute;
  width: 0.28em; height: 0.28em;
  border: 0 solid var(--segno, var(--accent));
  opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}
.gcrop:nth-child(1) { top: -0.14em; left: -0.2em; border-width: 2px 0 0 2px; transform: translate(-0.3em, -0.3em); }
.gcrop:nth-child(2) { top: -0.14em; right: -0.2em; border-width: 2px 2px 0 0; transform: translate(0.3em, -0.3em); }
.gcrop:nth-child(3) { bottom: -0.1em; left: -0.2em; border-width: 0 0 2px 2px; transform: translate(-0.3em, 0.3em); }
.gcrop:nth-child(4) { bottom: -0.1em; right: -0.2em; border-width: 0 2px 2px 0; transform: translate(0.3em, 0.3em); }
.tavola--art.is-on .gcrop { opacity: 1; transform: none; }
.tavola--art.is-on .tavola__parola { font-weight: 200; transform: skewX(-9deg); }

.tavola--ux .tavola__parola { -webkit-text-stroke: 1.5px transparent; transition: color 0.6s var(--ease), -webkit-text-stroke-color 0.6s var(--ease); }
.tavola--ux.is-on .tavola__parola { color: transparent; -webkit-text-stroke-color: var(--inchiostro); }
.tavola--ux .tavola__deco::before {
  content: '';
  position: absolute; inset: -0.1em -0.18em;
  border: 1px dashed var(--accent);
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.tavola--ux.is-on .tavola__deco::before { opacity: 1; transform: none; }
.gflow {
  position: absolute; left: 3.2em; bottom: 0.3em;
  width: 1.6em; height: 0.3em;
  overflow: visible; fill: var(--foglio); stroke: var(--accent); stroke-width: 1.5;
}
.gflow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s 0.2s var(--ease); }
.gflow circle { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale 0.4s var(--ease); }
.gflow circle:first-of-type { transition-delay: 0.5s; }
.gflow circle:last-of-type { transition-delay: 0.95s; }
.tavola--ux.is-on .gflow path { stroke-dashoffset: 0; }
.tavola--ux.is-on .gflow circle { scale: 1; }

.tavola--ui .tavola__parola { isolation: isolate; padding: 0 0.18em; margin-left: -0.18em; }
.tavola--ui .tavola__parola::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: 6px;
  background: var(--accent);
  clip-path: inset(0 100% 0 0 round 6px);
  transition: clip-path 0.7s var(--ease);
}
.tavola--ui.is-on .tavola__parola { color: var(--white); }
.tavola--ui.is-on .tavola__parola::before { clip-path: inset(0 0 0 0 round 6px); }
.gtoggle {
  position: absolute; left: 0.18em; bottom: calc(100% + 0.3em);
  width: 0.9em; height: 0.5em;
  border: 2px solid var(--inchiostro); border-radius: 0.25em;
  opacity: 0.4;
  transition: opacity 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.gtoggle b {
  position: absolute; top: 50%; left: 0.07em;
  width: 0.28em; height: 0.28em; translate: 0 -50%;
  border-radius: 50%;
  background: var(--inchiostro);
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.tavola--ui.is-on .gtoggle { opacity: 1; border-color: var(--accent); background: var(--accent); }
.tavola--ui.is-on .gtoggle b { transform: translateX(0.42em); background: var(--white); }

.gpunta {
  position: absolute; left: 62%; top: 62%;
  width: 0.42em; height: 0.42em;
  fill: var(--white); stroke: var(--bg); stroke-width: 1.4;
  opacity: 0;
}
.gonda {
  position: absolute; left: 62%; top: 62%;
  width: 0.8em; height: 0.8em; margin: -0.4em 0 0 -0.4em;
  border: 2px solid var(--segno, var(--accent)); border-radius: 50%;
  opacity: 0;
}
.tavola--proto.is-on .gpunta { animation: gpunta 1.2s var(--ease) both; }
.tavola--proto.is-on .gonda { animation: gonda 0.9s 1s ease-out both; }
.tavola--proto.is-on .tavola__parola { color: var(--bg); transition-delay: 1s; animation: gpremi 0.5s 0.95s var(--ease) both; }
@keyframes gpunta {
  from { opacity: 0; transform: translate(2.4em, 1.1em); }
  25% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes gonda {
  from { opacity: 1; transform: scale(0); }
  to { opacity: 0; transform: scale(3); }
}
@keyframes gpremi { 40% { transform: scale(0.96); } }

.gguida {
  position: absolute; left: -1.2em; right: -1.2em; height: 0;
  border-top: 1px solid var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s var(--ease);
}
.gguida--cap { top: 0.11em; }
.gguida--base { bottom: 0.14em; transition-delay: 0.12s; }
.gguida em {
  position: absolute; right: 1.2em; bottom: 0.3rem;
  font-size: 0.6rem; font-style: normal; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.5s 0.6s var(--ease);
}
.tavola--sistema.is-on .gguida { transform: scaleX(1); }
.tavola--sistema.is-on .gguida em { opacity: 1; }

/* ---------- come lavoriamo: le prove di stampa ---------- */
.prove__pin {
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  padding: var(--palco-pad);
  overflow: hidden;
}
.prove__passi { grid-column: 1; grid-row: 2; align-self: end; display: grid; list-style: none; }
.prove__passo { grid-area: 1 / 1; max-width: 30rem; line-height: 1.6; color: var(--tenue); }
.prove__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--accent);
}
.prove__nome {
  margin: 0.8rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg-strong);
}
.prove__tag { display: block; margin-top: 1rem; color: var(--accent); }
.prove__pila {
  grid-column: 2; grid-row: 1 / 3;
  align-self: center; justify-self: center;
  position: relative;
  width: min(100%, 56svh);
  aspect-ratio: 4 / 5;
}
.prova {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-block);
}
.prova__disco {
  position: absolute;
  right: 10%; top: 12%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
}
.prova__parola {
  position: absolute;
  left: 4%; bottom: 3%;
  font-family: var(--font-display);
  font-size: 31cqi;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: var(--paper);
}
.prova--1 .prova__disco { background: none; border: 2px dashed color-mix(in srgb, var(--paper) 50%, transparent); }
.prova--1 .prova__parola { font-weight: 200; color: color-mix(in srgb, var(--paper) 60%, transparent); }
.prova__campione {
  position: absolute;
  left: 8%; top: calc(10% + var(--n) * 18%);
  width: 16%;
  aspect-ratio: 1;
  background: var(--c);
  rotate: calc(var(--n) * 5deg - 5deg);
}
.prova--2 {
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--paper) 14%, transparent) 0 1px, transparent 1px 16.66%),
    var(--bg-block);
}
.prova--2 .prova__disco, .prova--2 .prova__parola { background: color-mix(in srgb, var(--paper) 18%, transparent); }
.prova--2 .prova__parola { color: transparent; }
.prova--3 .prova__disco { translate: -6% 4%; }
.prova--3 .prova__parola { left: 8%; rotate: -3deg; }
.prova__fascia {
  position: absolute;
  right: 29%; top: 24%;
  width: 26%; height: 5%;
  background: var(--paper);
  rotate: -4deg;
}
.prova__crocini { position: absolute; inset: 6%; font-size: 3rem; }
.prova__crocini .gcrop { opacity: 1; transform: none; border-color: var(--paper); }

/* ---------- ti riconosci: i timbri ---------- */
.timbri { padding: var(--sez) var(--pad); overflow-x: clip; }
.timbri__lista {
  display: grid;
  row-gap: clamp(1.4rem, 3.5vh, 2.4rem);
  margin-top: clamp(3rem, 8vh, 5rem);
  list-style: none;
}
.timbri__lista li:nth-child(even) { justify-self: end; text-align: right; }
.timbri__voce {
  position: relative;
  max-width: 26ch;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: color-mix(in srgb, var(--on-block) 55%, transparent);
  transition: color 0.5s var(--ease);
}
.timbri__voce strong { font-weight: inherit; transition: color 0.5s var(--ease); }
.timbri__voce:hover { color: color-mix(in srgb, var(--on-block) 80%, transparent); }
.timbri__voce[aria-pressed="true"] { color: var(--on-block); }
.timbri__voce[aria-pressed="true"] strong { color: var(--accent); }
.timbri__voce:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.timbri__voce::after {
  content: 'Sono io';
  position: absolute;
  left: calc(100% + 1.2rem); top: 50%;
  translate: 0 -50%;
  padding: 0.45em 0.9em;
  border: 3px solid var(--accent);
  font-size: clamp(0.8rem, 1vw, 1rem);
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  rotate: -8deg;
  opacity: 0;
  scale: 1.8;
  transition: opacity 0.3s var(--ease), scale 0.45s var(--rimbalzo);
  pointer-events: none;
}
.timbri__lista li:nth-child(even) .timbri__voce::after { left: auto; right: calc(100% + 1.2rem); rotate: 6deg; }
.timbri__voce[aria-pressed="true"]::after { opacity: 1; scale: 1; }
.timbri__esito {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem 1.8rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--on-block);
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}
@starting-style { .timbri__esito { opacity: 0; translate: 0 1rem; } }
.timbri__esito[hidden] { display: none; }
.timbri__esito a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  font-weight: 700;
  transition: color 0.35s var(--ease);
}
.timbri__esito svg { width: 22px; height: 22px; transition: translate 0.4s var(--ease); }
.timbri__esito a:hover { color: var(--accent); }

/* ---------- lavori: il tunnel ---------- */
.tunnel__vista {
  --px: 0px; --py: 0px; --apri: 1;
  position: relative;
  height: 100svh;
  overflow: hidden;
  perspective: 700px;
  perspective-origin: calc(50% + var(--px)) calc(50% + var(--py));
}
.tunnel__mondo { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.portale .etichetta { font-size: clamp(0.8rem, 1.1vw, 1rem); }
.quadro, .portale {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate3d(calc(var(--x, 0vw) * var(--apri)), var(--y, 0vh), var(--z)) rotateY(var(--ry, 0deg));
}
.quadro {
  width: min(56vw, 52rem);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 5%;
  border-radius: 2px;
  overflow: hidden;
}
.quadro img { max-width: 100%; max-height: 100%; object-fit: contain; }
.quadro--foto { padding: 0; }
.quadro--foto img { width: 100%; height: 100%; object-fit: cover; }
.quadro--palette { aspect-ratio: 2 / 1; }
.portale {
  display: grid;
  justify-items: center;
  row-gap: 1.2rem;
  width: min(72vw, 60rem);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  border-radius: 2px;
  background: var(--accent);
  color: var(--bg);
  text-align: center;
}
.portale--carta { min-height: 72svh; align-content: center; background: var(--paper); }
.portale--insegna { width: min(46vw, 40rem); padding: clamp(1.5rem, 3vw, 2.5rem); }
.portale--insegna .portale__nome { font-size: clamp(2.2rem, 5vw, 5.5rem); }
.portale--carta .etichetta { color: var(--accent); }
.portale__nome {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.portale__vai {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 700;
  transition: color 0.35s var(--ease);
}
.portale__vai svg { width: 20px; height: 20px; transition: translate 0.4s var(--ease); }
.portale__vai:hover { color: var(--paper); }
.portale--carta .portale__vai:hover { color: var(--accent); }
.portale__vai:hover svg { translate: 6px 0; }
.tunnel__dove {
  position: absolute;
  z-index: 2;
  left: var(--pad); bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 2px;
  background: var(--bg);
  color: var(--fg-strong);
}
.tunnel__barra { width: 8rem; height: 2px; background: color-mix(in srgb, var(--fg) 20%, transparent); }
.tunnel__barra b { display: block; height: 100%; background: var(--accent); transform-origin: left; scale: var(--p, 0) 1; }

.gcos__dopo .swrap { display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 6vw, 5rem); }
.gcos__dopo .scaso__vai { margin-top: 0; }

@media (max-width: 900px) {
  :root { --palco-pad: 5rem var(--pad) 2rem; }

  .poster { grid-template-columns: minmax(0, 1fr); }
  .poster__disco { right: 6vw; top: 62%; width: 88vw; }
  .poster__frase { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .poster__intro { font-size: 0.95rem; }
  .poster__parola { font-size: 38vw; }

  .serve__verbo--capire { font-size: 30vw; }
  .serve__verbo--scegliere { top: auto; bottom: 34%; font-size: 13vw; }
  .serve__verbo--navigare { right: auto; left: var(--pad); top: 58%; font-size: 12vw; }
  .serve__verbo--ricordare { left: var(--pad); top: 44%; font-size: 7vw; }
  .serve__testo { margin-left: var(--pad); }

  .tavole__griglia { grid-template-columns: minmax(0, 1fr); }
  .tavola { width: 84%; margin-top: 0; }
  .tavola:nth-child(even) { justify-self: end; }
  .tavola__nome { font-size: clamp(2.2rem, 11vw, 3.2rem); }

  .prove__pin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: 1.2rem;
  }
  .prove__pila { grid-column: 1; grid-row: 2; width: min(100%, 36svh); }
  .prove__passi { grid-row: 3; }
  .prove__num { font-size: 2.6rem; }
  .tunnel__vista { --apri: 0.8; perspective: 480px; }
  .quadro { width: 70vw; aspect-ratio: 3 / 4; }
  .portale { width: 86vw; }
  .portale--insegna { width: 72vw; }
  .prove__nome { margin: 0.5rem 0 0.6rem; font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .prove__passo p { font-size: 0.95rem; }

  .timbri__lista li:nth-child(even) { justify-self: start; text-align: left; }
  .timbri__voce::after, .timbri__lista li:nth-child(even) .timbri__voce::after { left: auto; right: 0; top: -1.6rem; translate: none; }

}

@media (prefers-reduced-motion: reduce) {
  .tunnel__vista { height: auto; padding: var(--sez) var(--pad); overflow: visible; perspective: none; }
  .tunnel__mondo { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2rem; }
  .quadro, .portale { position: static; width: auto; transform: none; }
  .portale { grid-column: 1 / -1; }
  .tunnel__dove { display: none; }
  .prove__pin { height: auto; overflow: visible; }
  .prove__passi { row-gap: 3rem; }
  .prove__passo { grid-area: auto; }
  .prova:not(.prova--4) { display: none; }
}