/* ==========================================================================
   Piattaforma prodotto — v3
   Due sezioni nuove, nate dalla correzione di merito: il PRODOTTO e' la
   piattaforma di gestione del debito; Twenty, Stripe e il provider di firme
   sono i mattoni su cui sta in piedi, non il prodotto.

   Perche' un foglio separato invece di accodare a piattaforma-v2.css:
   quel file e' generato da scripts/build-piattaforme-v2.py a partire dai
   prototipi in design/prototipi/. Se ne scrivessi dentro, la prossima build
   cancellerebbe tutto. Questo file e' sorgente di prima classe e non viene
   toccato dalla build.

   Palette: riusa i token scuri gia' presenti in v2 (--p-canvas, --p-s1,
   --p-s2, --p-hair, --p-ink, --p-mut) cosi' le due sezioni parlano la
   stessa lingua delle schermate vere, che sono in gran parte scure.
   ========================================================================== */

/* ------------------------------------------------------------------ Ombra
   La mascotte. SVG inline (non <img>, non sprite) perche' GSAP deve poter
   animare gli organi: galleggio, sbatto d'occhi, braccio che regge la
   documentazione. Ogni parte ha una classe .om-*, nessun id: cosi' le due
   occorrenze sulla pagina sono indipendenti. */
.ombra {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}
.om-shadow {
  fill: #000;
  opacity: 0.16;
  transform-box: fill-box;
  transform-origin: center;
}
.om-shape { stroke: rgba(11, 18, 32, 0.1); stroke-width: 1.5; }
.om-eye {
  fill: #0B1220;
  transform-box: fill-box;
  transform-origin: center;
}
.om-glint { fill: #fff; }
.om-blush { fill: #F3A6B8; opacity: 0.5; }
.om-mouth { fill: none; stroke: #0B1220; stroke-width: 3; stroke-linecap: round; }
.om-arm { transform-box: fill-box; transform-origin: 12% 20%; }
.om-pad {
  fill: var(--brand, #5E6AD2);
  transition: fill 0.25s ease;
}

/* ------------------------------------------------- sezione: IL PRODOTTO */
.vsec {
  position: relative;
  background: var(--p-canvas);
  color: var(--p-ink);
  padding: 96px 0 104px;
  overflow: hidden;
  /* le sezioni vicine sono text-align:center: si segue la convenzione della
     pagina invece di introdurre un terzo stile a contendersi la scena */
  text-align: center;
}
.vsec::before {
  /* alone dietro il mazzo di schermate: da' profondita' al nero piatto */
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 720px;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 34%, rgba(94, 106, 210, 0.16) 0%, rgba(94, 106, 210, 0) 72%);
}
.vwrap {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.vkicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-mut);
  margin: 0 0 20px;
}
.vsec h2 {
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 auto 20px;
  /* i <br> dei titoli sono espliciti: affidare l'interruzione alla larghezza
     dava spezzature diverse a 1024 e a 1440 px */
  max-width: 34ch;
  color: var(--p-ink);
}
.vsec h2 em { font-style: normal; color: #8A93E8; }
.vlede {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--p-mut);
  max-width: 58ch;
  margin: 0 auto 30px;
}

/* precisazione white label: va detta PRIMA delle schermate, non in fondo.
   Il riquadro resta centrato ma il testo torna a sinistra: e' un paragrafo
   da leggere, non un titolo. */
.vnote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  background: var(--p-s2);
  border: 1px solid var(--p-hair);
  border-left: 3px solid var(--brand, #5E6AD2);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 auto 54px;
  max-width: 92ch;
  text-align: left;
}
.vnote b {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-ink);
  white-space: nowrap;
  padding-top: 2px;
}
.vnote span {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--p-mut);
}
.vnote i { font-style: normal; color: var(--p-ink); font-weight: 600; }
.vnote a { color: #8A93E8; text-decoration: none; border-bottom: 1px solid rgba(138, 147, 232, 0.4); }
.vnote a:hover { border-bottom-color: #8A93E8; }

/* --- i cinque atti: immagine e testo si scambiano di lato ----------
   Griglia a due colonne; il `order` dell'immagine si inverte a ogni atto
   pari/dispari, cosi' l'occhio zigzaga invece di leggere due colonne
   parallele. La cornice ha un rapporto fisso: le schermate hanno altezze
   diverse e senza questo la sezione si allungherebbe di tre metri. */
.vacts {
  display: flex;
  flex-direction: column;
  gap: 88px;
  margin: 0 0 60px;
  text-align: left;
}
.ved {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.ved:nth-child(even) .ved__fig { order: 2; }
.ved:nth-child(even) .ved__txt { order: 1; }

.ved__fig {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--p-hair);
  background: var(--p-s1);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.ved__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  /* il parallasse di scorrimento lo gestisce il contenitore, non l'<img>:
     spostare l'immagine la deformerebbe */
  will-change: transform;
}
.ved__fig figcaption {
  font-size: 12.5px;
  color: var(--p-mut);
  padding: 12px 16px 13px;
  border-top: 1px solid var(--p-hair);
  background: var(--p-s1);
}

.ved__n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-mut);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ved__n span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand, #5E6AD2) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #5E6AD2) 40%, transparent);
  color: var(--p-ink);
  font-size: 12px;
  flex: none;
}
.ved h3 {
  font-size: clamp(1.28rem, 2.2vw, 1.75rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--p-ink);
  margin: 0 0 14px;
}
.ved__p {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--p-mut);
  margin: 0 0 18px;
  max-width: 46ch;
}
.ved__l { margin: 0; padding: 0; list-style: none; max-width: 46ch; }
.ved__l li {
  position: relative;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #C3C8D0;
  padding: 7px 0 7px 24px;
  border-top: 1px solid var(--p-hair);
}
.ved__l li:last-child { border-bottom: 1px solid var(--p-hair); }
.ved__l li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand, #5E6AD2) 75%, #fff);
}

/* chiusura del racconto */
.voutro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  border: 1px solid var(--p-hair);
  border-radius: 14px;
  background: var(--p-s1);
  padding: 26px 30px;
  margin: 0 0 34px;
  text-align: left;
}
.voutro__om { width: 88px; flex: none; }
.voutro__t {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--p-ink);
  margin: 0 0 7px;
}
.voutro p { font-size: 0.95rem; line-height: 1.58; color: var(--p-mut); margin: 0; max-width: 66ch; }
.voutro b { color: #C3C8D0; font-weight: 600; }

/* indice delle altre schermate: una riga, non un secondo racconto */
.vrest {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  opacity: 0.72;
}
.vrest figure { margin: 0; }
.vrest img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--p-hair);
  border-radius: 8px;
  background: #0A0B0C;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.vrest figure:hover img {
  opacity: 1;
  border-color: color-mix(in srgb, var(--brand, #5E6AD2) 50%, var(--p-hair));
}
.vrest figcaption {
  font-size: 11px;
  color: var(--p-mut);
  margin: 7px 2px 0;
  line-height: 1.3;
}

/* ------------------------------------------------- sezione: INTEGRAZIONI
   Il prodotto in alto, i mattoni in basso. La verticalita' e' il messaggio:
   le terze parti reggono il sistema, non lo sostituiscono. */
.isec {
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: 96px 0 104px;
  text-align: center;
}
.iwrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}
.ikicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}
.isec h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 auto 20px;
  max-width: 30ch;
  color: var(--ink);
}
.isec h2 em { font-style: normal; color: var(--nexo); }
.ilede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0 auto 46px;
}

/* la pila e i suoi pezzi sono l'unica cosa allineata a sinistra: sono
   contenuto da leggere, non titoli di sezione */
.istack { margin: 0 0 40px; text-align: left; }

/* --- strato superiore: il prodotto ----------------------------------- */
.itop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  background: var(--ink);
  color: #F7F8F8;
  border-radius: 16px;
  padding: 30px 34px;
  box-shadow: 0 26px 56px -28px rgba(11, 18, 32, 0.7);
}
.itop__k {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A8F98;
  margin: 0 0 8px;
}
.itop h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: #fff;
}
.itop p { font-size: 0.95rem; line-height: 1.55; color: #A8AEB8; margin: 0; max-width: 60ch; }
.itop__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}
.itop__areas li {
  font-size: 11.5px;
  color: #C8CDD4;
  background: #171A1F;
  border: 1px solid #23252A;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.itop__om { width: 104px; flex: none; }

/* --- la giunzione: le linee che scendono ai mattoni ------------------ */
.ijoin {
  position: relative;
  height: 72px;
  display: grid;
  place-items: center;
}
.ijoin__lab {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: #fff;
  padding: 0 14px;
  position: relative;
  z-index: 1;
}
.ijoin svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ijoin path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}
.ijoin .ij-dot { fill: var(--brand, #5E6AD2); }

/* --- strato inferiore: i componenti di terze parti ------------------- */
.ibase {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 28px 30px 30px;
  background: #FBFBFD;
}
.ibase__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  text-align: left;
}
.ibase__t {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.ibase__s { font-size: 12.5px; color: var(--muted); margin: 0; }

.itiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.itile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.itile:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -22px rgba(11, 18, 32, 0.35);
}
.itile__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.itile__ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  background: var(--brand, #5E6AD2);
}
.itile__r {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.itile__r b { color: var(--ink-2); font-weight: 600; }
.itile h4 { font-size: 1rem; font-weight: 600; margin: 0 0 7px; color: var(--ink); letter-spacing: -0.01em; }
.itile p { font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; }
.itile__w {
  margin: auto 0 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.itile__w::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.istrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin: 0;
  text-align: left;
}
.istrip div { font-size: 0.93rem; line-height: 1.55; color: var(--ink-2); }
.istrip b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 5px; }

/* ==========================================================================
   FASE 3 — HERO: la schermata vera dentro la cornice
   Prima qui' c'era un'interfaccia interamente disegnata in CSS, con dentro la
   voce "CRM commerciale" e un pannello che imitava Twenty: era la prima cosa
   che si vedeva e raccontava il prodotto sbagliato. Ora dentro la cornice del
   browser c'e' il cruscotto reale, e i quattro punti sono quattro pulsanti che
   coprono una regione della schermata vera.
   Le coordinate sono in percentuale perche' i punti restino dove devono
   qualunque sia la larghezza del riquadro o il formato servito (WebP/JPEG).
   ========================================================================== */
.hshot {
  position: relative;
  background: #0A0B0C;
  line-height: 0;
}
.hshot__img { display: block; width: 100%; height: auto; }

.hshot .hhs--k {
  font-size: 0;                 /* il numero e' il pseudo-elemento, non il testo */
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 7px;
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, 0.32);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.hshot .hhs--k:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}
.hshot .hhs--k:focus-visible { outline: 2px solid #8A93E8; outline-offset: 2px; }
.hshot .hhs--k[aria-pressed="true"] {
  border: 1.5px solid var(--brand, #5E6AD2);
  border-style: solid;
  background: color-mix(in srgb, var(--brand, #5E6AD2) 12%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* il pallino numerato: piccolo, all'angolo della regione */
.hshot .hhs--k::after {
  content: "";
  position: absolute;
  right: -9px;
  top: -9px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--brand, #5E6AD2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
}
.hshot .hhs--k:nth-of-type(1)::after { content: "1"; }
.hshot .hhs--k:nth-of-type(2)::after { content: "2"; }
.hshot .hhs--k:nth-of-type(3)::after { content: "3"; }
.hshot .hhs--k:nth-of-type(4)::after { content: "4"; }
.hshot .hhs--k[aria-pressed="true"]::after { transform: scale(1.14); }

/* chip del cliente nella barra del browser: senza la sidebar disegnata il
   marchio deve comunque restare visibile, e cambiare col selettore */
.hbrand {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  background: var(--p-s2);
  border: 1px solid var(--p-hair);
}
.hbrand .hmark { width: 19px; height: 19px; border-radius: 5px; font-size: 9px; }
.hbrand b { font-size: 11.5px; font-weight: 600; color: var(--p-ink); white-space: nowrap; }

@media (max-width: 620px) {
  /* su schermo stretto i punti diventerebbero troppo piccoli per essere
     premibili: si nascondono e resta la schermata, che parla da sola */
  .hshot .hhs--k { display: none; }
  .hbrand b { display: none; }
}
/* ==========================================================================
   INFOGRAFICHE NEI PREZZI — vedi fondo sezione
   Nota: le regole .pfig/.pring che stavano qui sono state spostate in
   piattaforma-v4.css, che le rifà con misure esatte. V3 le aveva lasciate
   qui perche' al momento andavano bene; quando sono cambiate le misure
   della corona, due file che si sovrapongono con la stessa specificità
   diventano una lotta silenziosa in cui l'ordine di caricamento decide chi
   vince. Meglio una sola regola, in un posto solo.
   ========================================================================== */
.pfig {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #FBFBFD 0%, #FFFFFF 100%);
  padding: 30px 32px 32px;
  margin: 44px 0 0;
  text-align: left;
}
.pfig__h { margin: 0 0 26px; }
.pfig__t {
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.pfig__d {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 62ch;
}
.pfig__n {
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--ink-2);
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 72ch;
}
.pfig__n b { color: var(--ink); font-weight: 600; }

.pbars { display: flex; flex-direction: column; gap: 16px; }
.pbar {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(150px, auto);
  gap: 18px;
  align-items: center;
}
.pbar__k { font-size: 0.94rem; color: var(--ink-2); }
.pbar__t {
  position: relative;
  height: 26px;
  border-radius: 6px;
  background: #EDEFF5;
  overflow: hidden;
}
.pbar__f {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 6px;
  background: var(--nexo);
  transform-origin: 0% 50%;
}
.pbar:nth-child(2) .pbar__f { background: var(--nexo-2); }
.pbar:nth-child(3) .pbar__f { background: #C7B9F5; }
.pbar__v {
  font-size: 1rem;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pbar__v b { font-weight: 700; font-size: 1.12rem; }
.pbar__v s { text-decoration: none; color: var(--muted); font-size: 0.85rem; }

.pinc-wrap {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
/* .pring, .pring__key e i loro figli sono definiti in piattaforma-v4.css */

.plvfig {
  display: grid;
  /* due piani, due colonne: la griglia segue il numero di scelte che la
     pagina propone, non un numero fisso scolpito nel css. */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: end;
}
.plvf {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px 12px 8px 8px;
  background: #fff;
  padding: 18px 20px 20px;
  /* l'altezza cresce con il livello: la scala si vede prima di leggere.
     --h e' un numero e non una percentuale: dentro una griglia di altezza
     indefinita una percentuale non si risolve e i blocchi uscirebbero
     tutti uguali, cioe' l'esatto contrario di quello che la figura deve
     comunicare. */
  min-height: calc(198px + var(--h) * 1px);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.plvf::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line);
}
.plvf--on {
  border-color: color-mix(in srgb, var(--brand, #5E6AD2) 45%, var(--line));
  box-shadow: 0 18px 40px -24px rgba(11, 18, 32, 0.45);
}
.plvf--on::before { background: var(--brand, #5E6AD2); }
.plvf__n {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.plvf--on .plvf__n { color: var(--brand, #5E6AD2); }
.plvf__s { font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.plvf__r { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: auto 0 0; }
.plvf__t {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 6px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

@media (max-width: 900px) {
  .pfig { padding: 24px 20px 26px; }
  .pbar { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .pbar__t { grid-column: 1 / -1; order: 3; }
  .plvfig { grid-template-columns: 1fr; align-items: stretch; }
  .plvf { min-height: 0; }
}
@media (max-width: 1080px) {
  .ved { gap: 40px; }
  .vrest { grid-template-columns: repeat(3, 1fr); }
  .itiles { grid-template-columns: repeat(2, 1fr); }
  .istrip { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 860px) {
  /* sotto questa larghezza le due colonne non reggono: ogni atto diventa un
     blocco unico, immagine sopra e testo sotto. L'alternanza si perde, ma a
     questa scala l'occhio legge in verticale comunque. */
  .ved, .ved:nth-child(even) { grid-template-columns: 1fr; gap: 26px; }
  .ved:nth-child(even) .ved__fig, .ved:nth-child(even) .ved__txt { order: 0; }
  .vacts { gap: 56px; }
}
@media (max-width: 760px) {
  .vsec, .isec { padding: 68px 0 72px; }
  .vrest { grid-template-columns: repeat(2, 1fr); }
  .voutro { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .voutro__om { width: 62px; }
  .vnote { grid-template-columns: 1fr; gap: 10px; }
  .vnote b { white-space: normal; }
  .itop { grid-template-columns: 1fr; padding: 24px; }
  .itop__om { display: none; }
  .itiles { grid-template-columns: 1fr; }
  .ibase { padding: 20px; }
}

/* =================================================== movimento ========== */
/* Il fallback statico e' la condizione di partenza: tutto qui dentro e'
   un extra. Se GSAP non carica, la pagina resta leggibile e completa. */
@media (prefers-reduced-motion: reduce) {
  .itile, .vrest img, .ved__fig img { transition: none !important; }
  .itile:hover { transform: none !important; }
}