/* ==========================================================================
   Marana Tech — metodo.html (Come lavoriamo)
   Oggetto della pagina: il treno di ingranaggi, una ruota per fase. Le ruote hanno
   profilo a evolvente e ingranano davvero; lo scorrimento le fa girare con i rapporti
   dei denti e accende la fase attiva.
   Stato base = stato finale: fasi 01–04 fatte (LED blu), 05 «Il tagliando» in corso
   (ambra). Con html.js-motion comandano le classi st-done/st-now messe da metodo.js;
   senza, vale quello che dice l'HTML (is-done/is-now).
   ========================================================================== */

/* ---------- Testata e fasi: griglia con il palco del treno ---------- */
.met-hero {
  --train-h: min(calc(100svh - var(--header-h) - 200px), 660px);
  padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px));
}
.met-hero h1 { font-size: var(--fs-hero); }
.met-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.met-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro stage" "phases stage";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 80px);
}
.met-intro { grid-area: intro; min-height: calc(var(--train-h) + 96px); align-content: center; }
.met-run__stage { grid-area: stage; }
.met-phases { grid-area: phases; }

/* il palco resta in vista mentre scorrono le fasi */
.met-stage {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: grid;
  justify-items: center;
  gap: 14px;
}
.met-stage__head, .met-legend {
  width: min(100%, calc(var(--train-h) * 433.26 / 574.74));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.met-stage__cap {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Il treno ---------- */
.met-train {
  position: relative;
  width: min(100%, calc(var(--train-h) * 433.26 / 574.74));
  aspect-ratio: 433.26 / 574.74;
  container-type: inline-size;
  isolation: isolate;
}
.met-train > * { position: absolute; }

/* piastra: acciaio scuro ribassato, reticolo da tavola tecnica appena inciso */
.met-train__plate {
  inset: 0;
  border-radius: var(--radius-l);
  background:
    radial-gradient(90% 60% at calc(20% + var(--lx, .4) * 40%) 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%),
    linear-gradient(90deg, rgba(195, 202, 208, .045) 1px, transparent 1px) 0 0 / 5.2cqi 5.2cqi,
    linear-gradient(rgba(195, 202, 208, .045) 1px, transparent 1px) 0 0 / 5.2cqi 5.2cqi,
    linear-gradient(180deg, #14181B, #0E1113);
  box-shadow:
    inset 0 3px 14px rgba(0, 0, 0, .75),
    inset 0 0 0 1px rgba(195, 202, 208, .09),
    0 1px 0 rgba(255, 255, 255, .05);
}

/* ombre: dischi sfumati fermi, tutti sotto le ruote (stesso piano) */
.met-train__shadows { inset: 0; }
.met-train__shadows > span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1;
  translate: 1cqi 2.2cqi;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(0, 0, 0, .7) calc(var(--sr) - 12%), rgba(0, 0, 0, 0) var(--sr));
}

.met-gear {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1;
}
.met-gear > * { position: absolute; }
/* contain: paint ritaglia la ruota al suo quadrato (il disegno ci sta tutto): a ogni grado di
   rotazione Chrome non ricalcola più il contorno visibile e non ridisegna la ruota */
.met-gear__rot { inset: 0; transform: rotate(var(--r0)); contain: paint; }
.met-gear__rot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.met-train.is-live .met-gear__rot { will-change: transform; }
/* WebKit (Safari): le ruote restano sempre su un livello proprio. Accendere e spegnere il livello
   a ogni entrata in vista costringe a ridisegnarle (e il genitore) proprio mentre girano */
html.is-webkit.js-motion .met-gear__rot { will-change: transform; }

/* tornitura: la luce sulla corona e sul mozzo resta ferma mentre la ruota gira
   (così si comporta una superficie lavorata al tornio) e segue il puntatore */
.met-gear__lathe {
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from calc(150deg + var(--lx, .45) * 60deg),
    rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .32) 28deg, rgba(255, 255, 255, 0) 62deg,
    rgba(0, 0, 0, .16) 110deg, rgba(0, 0, 0, 0) 150deg,
    rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .2) 208deg, rgba(255, 255, 255, 0) 242deg,
    rgba(0, 0, 0, .16) 290deg, rgba(0, 0, 0, 0) 330deg);
  -webkit-mask:
    radial-gradient(circle closest-side, transparent calc(var(--rim) + 1%), #000 calc(var(--rim) + 1.6%), #000 calc(var(--rf) - .6%), transparent var(--rf)),
    radial-gradient(circle closest-side, transparent var(--pin), #000 calc(var(--pin) + .6%), #000 calc(var(--hub) - 1.2%), transparent calc(var(--hub) - .6%));
  mask:
    radial-gradient(circle closest-side, transparent calc(var(--rim) + 1%), #000 calc(var(--rim) + 1.6%), #000 calc(var(--rf) - .6%), transparent var(--rf)),
    radial-gradient(circle closest-side, transparent var(--pin), #000 calc(var(--pin) + .6%), #000 calc(var(--hub) - 1.2%), transparent calc(var(--hub) - .6%));
}

/* perno fisso: la ruota gira intorno; sul cappello, il numero della fase e l'anello luminoso */
.met-gear__pin {
  left: 50%;
  top: 50%;
  width: var(--pin);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #E6EAED 20%, #AAB3B9 60%, #5F686E 100%);
  box-shadow: 0 .6cqi 1.2cqi rgba(0, 0, 0, .65), inset 0 -1px 1px rgba(0, 0, 0, .35);
  transition: scale var(--t-ui) var(--ease-clack);
}
/* anello sul cappello (guida di luce): blu = fatto, ambra = in corso, tratteggio = da fare.
   Il tratteggio inciso sta sempre sotto; i due anelli accesi sono già disegnati, ognuno con la sua
   ombra ferma, e si alternano in opacità: al cambio di fase non si ridisegna niente. */
.met-gear__pin::before, .met-gear__ring {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
}
.met-gear__pin::before { border: .45cqi dashed rgba(21, 24, 26, .62); }
.met-gear__ring::before, .met-gear__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: .55cqi solid var(--blu);
  box-shadow: 0 0 1.6cqi rgba(140, 192, 230, .85), inset 0 0 .8cqi rgba(140, 192, 230, .55);
  transition: opacity var(--t-ui) var(--ease-out);
}
.met-gear__ring::after {
  border-color: var(--scintilla);
  box-shadow: 0 0 1.8cqi rgba(224, 160, 80, .9), inset 0 0 .8cqi rgba(224, 160, 80, .55);
  opacity: 0;
}
.met-gear__n {
  position: relative;
  font-family: var(--font-mono);
  font-size: 2.6cqi;
  font-weight: 600;
  letter-spacing: .02em;
  color: #262C30;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.met-gear__sonar {
  left: 50%;
  top: 50%;
  width: calc(var(--pin) * 1.25);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: .4cqi solid rgba(224, 160, 80, .9);
  opacity: 0;
  pointer-events: none;
}

/* stati — base (HTML) */
.met-gear.is-now .met-gear__ring::before { opacity: 0; }
.met-gear.is-now .met-gear__ring::after { opacity: 1; }
/* stati — con movimento comanda metodo.js; senza classi la fase è «da fare» (resta il tratteggio) */
.js-motion .met-gear .met-gear__ring::before, .js-motion .met-gear .met-gear__ring::after { opacity: 0; }
.js-motion .met-gear.st-done .met-gear__ring::before, .js-motion .met-gear.st-now .met-gear__ring::after { opacity: 1; }
.js-motion .met-gear.st-now .met-gear__pin { scale: 1.06; }

/* legenda della grammatica a tre stati */
.met-legend {
  list-style: none;
  justify-content: flex-start;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.met-legend li { display: inline-flex; align-items: center; gap: 8px; }
.met-legend .is-done .led, .met-legend .is-now .led { --led-lit: 1; --led-blur: 10px; --led-halo: rgba(140, 192, 230, .8); }
.met-legend .is-now .led { --led-color: var(--scintilla); --led-ring: rgba(224, 160, 80, .16); --led-halo: rgba(224, 160, 80, .8); }
.met-legend .is-todo .led { background: transparent; box-shadow: none; border: 1px dashed rgba(195, 202, 208, .6); }

/* ---------- Le cinque fasi ---------- */
.met-phases { padding-top: clamp(72px, 14vh, 160px); }
.met-phases h2 { margin-top: 18px; max-width: 14em; }
.met-steps { list-style: none; margin-top: clamp(28px, 4vw, 48px); }
.met-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
  padding-block: clamp(44px, 12vh, 120px);
  border-top: 1px solid var(--line);
}
.met-step:last-child { border-bottom: 1px solid var(--line); }
.met-step__badge { position: relative; width: 64px; aspect-ratio: 1; margin-top: 4px; }
.met-step__badge svg { display: block; width: 100%; height: 100%; opacity: .92; transition: opacity var(--t-ui) var(--ease-out); }
.met-step__led {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #15181A;
  box-shadow: 0 0 0 2px rgba(21, 24, 26, .8);
}
/* la luce: blu (fatto) e ambra (in corso), già disegnate con il loro alone; cambia solo l'opacità */
.met-step__led::before, .met-step__led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blu);
  box-shadow: 0 0 0 2px rgba(21, 24, 26, .8), 0 0 10px rgba(140, 192, 230, .85);
  transition: opacity var(--t-ui) var(--ease-out);
}
.met-step__led::after {
  background: var(--scintilla);
  box-shadow: 0 0 0 2px rgba(21, 24, 26, .8), 0 0 12px rgba(224, 160, 80, .95);
  opacity: 0;
}
.met-step__st {
  display: grid;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.met-step__st .st { grid-area: 1 / 1; opacity: 0; transition: opacity var(--t-ui) var(--ease-out); }
.met-step__st .st--done { color: var(--blu); }
.met-step__st .st--now { color: var(--scintilla); }
.met-step__st .st--todo { color: var(--fg-3); }
.met-step h3 { margin-top: 10px; font-size: var(--fs-h3); color: var(--fg); }
.met-step__n { font-family: var(--font-mono); font-size: .62em; font-weight: 500; letter-spacing: .04em; color: var(--fg-3); margin-right: .35em; vertical-align: .12em; }
.met-step p:not(.met-step__st) { margin-top: 10px; color: var(--fg-2); max-width: 34em; }
.met-step .link-arrow { margin-top: 16px; }

/* stati — base */
.met-step.is-done .st--done, .met-step.is-now .st--now { opacity: 1; }
.met-step.is-now .met-step__led::before { opacity: 0; }
.met-step.is-now .met-step__led::after { opacity: 1; }
.met-step.is-now .met-step__n { color: var(--scintilla); }
/* stati — con movimento */
.js-motion .met-step .st, .js-motion .met-step .met-step__led::before, .js-motion .met-step .met-step__led::after { opacity: 0; }
.js-motion .met-step:not(.st-done):not(.st-now) .st--todo,
.js-motion .met-step.st-done .st--done,
.js-motion .met-step.st-now .st--now,
.js-motion .met-step.st-done .met-step__led::before,
.js-motion .met-step.st-now .met-step__led::after { opacity: 1; }
.js-motion .met-step:not(.st-done):not(.st-now) .met-step__led { outline: 1.5px dashed rgba(195, 202, 208, .75); outline-offset: -1.5px; }
.js-motion .met-step:not(.st-done):not(.st-now) .met-step__badge svg { opacity: .45; }
.js-motion .met-step:not(.st-done):not(.st-now) h3 { color: var(--fg-2); }
.js-motion .met-step.st-done .met-step__n { color: var(--fg-3); }
.js-motion .met-step.st-now .met-step__n { color: var(--scintilla); }

/* ---------- Sotto i 960 px: il treno si sdraia sotto la testata e non resta fermo ---------- */
@media (max-width: 959px) {
  .met-hero { --train-h: auto; }
  .met-run { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "stage" "phases"; grid-template-rows: auto; }
  .met-intro { min-height: 0; }
  .met-run__stage { margin-top: clamp(36px, 7vw, 56px); }
  .met-stage { position: static; }
  .met-stage__head, .met-legend { width: 100%; }
  .met-train { width: 100%; aspect-ratio: 567.13 / 411.68; }
  .met-train__shadows > span, .met-gear { left: var(--xm); top: var(--ym); width: var(--wm); }
  .met-gear__rot { transform: rotate(var(--r0m)); }
  .met-gear__pin { width: calc(var(--pin) * 1.3); }
  .met-gear__n { font-size: 2.7cqi; }
  .met-phases { padding-top: clamp(56px, 10vw, 88px); }
  .met-step { padding-block: 30px; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  .met-step__badge { width: 52px; }
}
@media (max-width: 520px) {
  .met-legend { gap: 14px; }
  .met-stage__cap { display: none; }
}

/* ---------- Cosa ricevete: il preventivo e il documento di fine lavori ---------- */
/* il timbro sollevato proietta l'ombra oltre il bordo del tavolo: sui telefoni resta nella sezione */
.met-get { overflow-x: clip; }
.met-get__split { align-items: center; }
.met-get__text { display: grid; gap: 18px; align-content: center; }
.met-get__list { list-style: none; margin-top: clamp(8px, 1.6vw, 22px); display: grid; gap: 18px; }
.met-get__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 16px; align-items: start; }
.met-get__list .led { margin-top: .5em; }
.met-get__list p { margin-top: 4px; color: var(--fg-2); font-size: var(--fs-small); }

.met-desk-wrap { display: grid; gap: 16px; justify-items: start; }
.met-desk {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1.12;
  container-type: inline-size;
}
.met-sheet {
  position: absolute;
  width: 58cqi;
  aspect-ratio: 1 / 1.3;
  padding: 5.5cqi 5cqi;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 30%),
    #F7F8F9;
  box-shadow:
    0 1px 1px rgba(21, 24, 26, .12),
    0 18px 30px -18px rgba(21, 24, 26, .45),
    0 42px 60px -40px rgba(21, 24, 26, .35);
  color: #15181A;
}
.met-sheet--quote { left: 0; top: 4cqi; rotate: -4deg; }
.met-sheet--doc { right: 0; top: 11cqi; rotate: 2.5deg; }
.met-sheet__code {
  font-family: var(--font-mono);
  font-size: 1.9cqi;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5B656C;
}
.met-sheet__title {
  margin-top: 1.4cqi;
  padding-bottom: 2.6cqi;
  border-bottom: 1px solid rgba(21, 24, 26, .14);
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 4cqi;
  line-height: 1.1;
}
.met-sheet__sec { display: grid; gap: 1.5cqi; margin-top: 3.4cqi; }
.met-sheet__lbl {
  font-family: var(--font-mono);
  font-size: 1.8cqi;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3A4247;
}
.met-line { display: block; height: 1.3cqi; border-radius: 1cqi; background: #DDE2E5; }
.met-line--s { width: 62%; }
.met-line--ck { position: relative; margin-left: 3.6cqi; }
.met-line--ck::before {
  content: "";
  position: absolute;
  left: -3.6cqi;
  top: 50%;
  width: 2cqi;
  height: 2cqi;
  margin-top: -1cqi;
  border-radius: .4cqi;
  box-shadow: inset 0 0 0 1px rgba(21, 24, 26, .35);
}
.met-line--ck.is-on::before { background: var(--blu-scuro); box-shadow: none; }
.met-sheet__box {
  display: block;
  height: 6cqi;
  border-radius: .6cqi;
  background: repeating-linear-gradient(135deg, rgba(21, 24, 26, .07) 0 .8cqi, rgba(21, 24, 26, 0) .8cqi 1.6cqi);
  box-shadow: inset 0 0 0 1px rgba(21, 24, 26, .16);
}
.met-flow { display: flex; align-items: center; gap: 3cqi; }
.met-flow b { position: relative; width: 9cqi; height: 5.4cqi; border-radius: .6cqi; box-shadow: inset 0 0 0 1px rgba(21, 24, 26, .4); }
.met-flow b + b::before { content: ""; position: absolute; right: 100%; top: 50%; width: 3cqi; height: 1px; background: rgba(21, 24, 26, .4); }
.met-flow b:last-child { background: rgba(47, 110, 158, .12); box-shadow: inset 0 0 0 1px var(--blu-scuro); }

/* il timbro: inchiostro blu (fatto), leggermente irregolare */
.met-ink {
  position: absolute;
  right: 3.5cqi;
  bottom: 6cqi;
  display: grid;
  place-items: center;
  padding: 1.3cqi;
  rotate: -9deg;
  border: .55cqi solid rgba(47, 110, 158, .88);
  border-radius: .8cqi;
  color: rgba(47, 110, 158, .9);
  -webkit-mask: repeating-linear-gradient(118deg, #000 0 .9cqi, rgba(0, 0, 0, .72) .9cqi 1.4cqi);
  mask: repeating-linear-gradient(118deg, #000 0 .9cqi, rgba(0, 0, 0, .72) .9cqi 1.4cqi);
}
.met-ink span {
  padding: 1.1cqi 2.2cqi;
  border: .25cqi solid currentColor;
  border-radius: .4cqi;
  font-family: var(--font-mono);
  font-size: 2.9cqi;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* il timbro visto dall'alto: arriva, scende (si rimpicciolisce e l'ombra si stringe), preme, risale */
.met-stamp {
  right: 1.5cqi;
  bottom: 3.5cqi;
  position: absolute;
  width: 31cqi;
  height: 16cqi;
  opacity: 0;
  pointer-events: none;
  rotate: -9deg;
  translate: 8cqi -6cqi; /* a riposo è fuori scena, in alto a destra: arriva e se ne va da lì */
}
.met-stamp__body, .met-stamp__shadow { position: absolute; inset: 0; border-radius: 1.2cqi; }
/* a riposo il timbro è sollevato (e invisibile): più vicino a chi guarda, ombra larga e spostata.
   L'ombra è morbida senza filter: la modalità leggera del core spegne i filtri. */
.met-stamp__shadow { background: rgba(21, 24, 26, .26); box-shadow: 0 0 1.8cqi 1.1cqi rgba(21, 24, 26, .26); scale: 1.2; translate: 9cqi 3cqi; opacity: .35; }
.met-stamp__body {
  scale: 1.32;
  translate: 4cqi -7cqi;
  background:
    radial-gradient(circle at 50% 50%, #F4F6F7 0 9%, #9AA4AA 16%, #3E464B 24%, transparent 25%),
    radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #C3CAD0, #7A848B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(0, 0, 0, .35);
}
/* scena una tantum (MT.arm): armata, sul foglio manca l'inchiostro; le transizioni valgono solo
   mentre gira (.is-played). Poi metodo.js mette is-over (il timbro arriva sopra il foglio),
   is-press (preme), is-inked (resta l'inchiostro), toglie is-press (risale) e is-over (se ne va). */
.js-motion .met-desk.is-played .met-stamp__body, .js-motion .met-desk.is-played .met-stamp__shadow {
  transition: scale 480ms var(--ease-press), translate 480ms var(--ease-press), opacity 480ms var(--ease-press);
}
.js-motion .met-desk.is-played .met-stamp { transition: opacity 420ms var(--ease-out), translate 640ms var(--ease-in-out); }
.js-motion .met-desk.is-played .met-ink { transition: opacity 90ms linear, scale 420ms var(--ease-clack); }
.js-motion .met-desk.is-played .met-sheet--doc { transition: translate 180ms var(--ease-out); }

.js-motion .met-desk.is-armed:not(.is-inked) .met-ink { opacity: 0; scale: 1.05; }
.js-motion .met-desk.is-over .met-stamp { opacity: 1; translate: 0 0; }
.js-motion .met-desk.is-press .met-stamp__body { scale: 1; translate: 0 0; }
.js-motion .met-desk.is-press .met-stamp__shadow { scale: 1; translate: .4cqi .8cqi; opacity: 1; }
.js-motion .met-desk.is-press .met-sheet--doc { translate: 0 .25cqi; }

@media (max-width: 900px) {
  .met-desk-wrap { justify-items: center; }
  .met-desk-wrap .example-tag { justify-self: start; }
}

/* ---------- Principi ---------- */
.met-princ__grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.met-pr { display: grid; align-content: start; gap: 12px; }
.met-pr__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-s);
  background: linear-gradient(180deg, #2A3136, #1B2024);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(195, 202, 208, .1);
}
.met-pr__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--argento); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.met-pr__t { margin-top: 6px; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
.met-pr p { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
@media (max-width: 1199px) { .met-princ__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .met-princ__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .met-princ__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Domande ---------- */
.met-faq__list { margin-top: 0; }

/* ---------- Stampa ---------- */
@media print {
  .met-stage { position: static; }
  .met-gear__sonar, .met-stamp { display: none; }
}