/* =========================================================================
   MARCA_83403_INVIA_PAGINE — il vestito di «invia.regiapro.it»
   Consegna 83403, 28 settembre 2026.

   UN FOGLIO SOLO, e NESSUN COLORE SCRITTO A MANO.
   ---------------------------------------------------------------------
   Qui dentro non c'e' un solo #qualcosa e non c'e' un solo rgb(...):
   ogni colore e' un var(--nome) che arriva da `temi.css`, cioe' dal
   foglio dei colori DEL SITO (il rame). E' la regola del sito e vale
   anche qui: il giorno che Giovanni cambia il rame, cambia in un posto
   solo e cambia dappertutto, anche in questa pagina.

   Dove serve una trasparenza si usa `color-mix(... , transparent)`:
   e' quello che fa gia' `temi.css` per il velo della barra. Non e' un
   colore nuovo, e' lo stesso colore con meno corpo.

   I POCHI NOMI NOSTRI (--iv-...) sono scritti tre volte, come chiede
   `temi.css`: tema chiaro, tema scuro automatico, tema scuro scelto a
   mano. Una variabile che manca in un tema NON ricade su niente: sparisce,
   e con lei sparisce quello che colorava.

   IL TEMA SCURO E' VERO. Sono scritti tutti e due:
     :root[data-theme="dark"]                        (scelto col tasto)
     @media (prefers-color-scheme:dark) :root:not([data-theme="light"])
                                                     (il computer e' scuro)

   OGNI BERSAGLIO DA TOCCARE E' ALMENO 44x44 PUNTI. Non e' gusto: sotto i
   44 punti un dito grosso sbaglia, e chi sbaglia su un tasto «Ferma il
   caricamento» perde l'invio.
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────
   I NOSTRI POCHI NOMI, NEI TRE BLOCCHI
   ───────────────────────────────────────────────────────────────────── */
:root{
  /* il fondo profondo dell'apertura di 4 secondi: e' lo stesso telo
     scuro che il sito usa dietro le foto ingrandite, e sta gia' in
     temi.css uguale nei due temi. */
  --iv-velo-fondo:var(--velo-ingranditore);
  --iv-velo-testo:var(--su-velo);
  /* il fondo della fascia dello strumento */
  --iv-strumento-fondo:var(--surface);
  /* il bordo tratteggiato della zona di trascinamento */
  --iv-zona-filo:var(--line-strong);
  --iv-zona-fondo:color-mix(in srgb,var(--accent) 5%,var(--surface));
  --iv-zona-fondo-su:color-mix(in srgb,var(--accent) 12%,var(--surface));
  /* la riga sottile sotto la voce spenta della vetrina */
  --iv-vetrina-spenta:var(--ink-3);
  --iv-ombra-dolce:var(--shadow);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --iv-velo-fondo:var(--velo-ingranditore);
  --iv-velo-testo:var(--su-velo);
  --iv-strumento-fondo:var(--surface);
  --iv-zona-filo:var(--line-strong);
  --iv-zona-fondo:color-mix(in srgb,var(--accent) 7%,var(--surface));
  --iv-zona-fondo-su:color-mix(in srgb,var(--accent) 16%,var(--surface));
  --iv-vetrina-spenta:var(--ink-3);
  --iv-ombra-dolce:var(--shadow);
}}
:root[data-theme="dark"]{
  --iv-velo-fondo:var(--velo-ingranditore);
  --iv-velo-testo:var(--su-velo);
  --iv-strumento-fondo:var(--surface);
  --iv-zona-filo:var(--line-strong);
  --iv-zona-fondo:color-mix(in srgb,var(--accent) 7%,var(--surface));
  --iv-zona-fondo-su:color-mix(in srgb,var(--accent) 16%,var(--surface));
  --iv-vetrina-spenta:var(--ink-3);
  --iv-ombra-dolce:var(--shadow);
}

/* ─────────────────────────────────────────────────────────────────────
   LE COSE DI BASE
   ───────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body.iv-corpo{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.55;
  /* Niente scorrimento in orizzontale, mai. Una pagina che scivola di
     lato sul telefono sembra rotta anche quando non lo e'. */
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--link)}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-s);
}

.iv-pagina{
  max-width:var(--larghezza);
  margin:0 auto;
  padding:0 24px 72px;
}

/* ─────────────────────────────────────────────────────────────────────
   LA STRISCIA IN CIMA
   ───────────────────────────────────────────────────────────────────── */
.iv-testata{
  max-width:var(--larghezza);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.iv-marchio{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink-strong);
  min-height:44px;
}
.iv-marchio-segno{
  width:26px;height:26px;border-radius:var(--r-s);
  background:var(--logo-gradient);
  flex:0 0 auto;
}
.iv-marchio-nome{font-weight:800;letter-spacing:-.01em}
.iv-marchio-dove{color:var(--ink-3);font-size:14px}
.iv-testata-tasti{display:flex;align-items:center;gap:10px}

.iv-tema{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--r-gg);
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:15px;cursor:pointer;
}
.iv-tema-segno{
  width:14px;height:14px;border-radius:var(--r-gg);
  background:var(--accent);flex:0 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────
   I BOTTONI — tutti alti almeno 44
   ───────────────────────────────────────────────────────────────────── */
.iv-bottone{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:10px 20px;
  border-radius:var(--r-gg);border:1px solid transparent;
  font:inherit;font-weight:700;font-size:16px;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color var(--tr),color var(--tr),border-color var(--tr);
}
.iv-bottone-pieno{background:var(--pieno);color:var(--su-accento)}
.iv-bottone-pieno:hover{background:var(--pieno-sotto)}
.iv-bottone-filo{
  background:var(--surface);color:var(--ink-strong);
  border-color:var(--line-strong);
}
.iv-bottone-filo:hover{background:var(--surface-2)}
.iv-bottone-nudo{
  background:transparent;color:var(--link);
  text-decoration:underline;
}
.iv-bottone-grande{min-height:52px;font-size:18px;padding:12px 28px}
.iv-bottone[disabled]{opacity:.5;cursor:not-allowed}

/* ─────────────────────────────────────────────────────────────────────
   IL TITOLO GRANDE
   ───────────────────────────────────────────────────────────────────── */
.iv-testa{padding:36px 0 26px;text-align:center}
.iv-titolone{
  font-family:var(--font-display);
  font-size:clamp(32px,5.4vw,60px);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:800;
  color:var(--ink-strong);
  margin:0 0 12px;
  text-wrap:balance;
}
.iv-titolone-medio{font-size:clamp(26px,3.4vw,38px)}
/* la parola chiave in rame: e' il modo di scrivere i titoli del sito */
.iv-titolone em,.iv-fetta-titolo em,.iv-passo-titolo em,
.iv-fatto-titolo em,.iv-chiuso-titolo em{
  font-style:normal;color:var(--accent);
}
.iv-sottotitolo{
  margin:0 auto;max-width:var(--larghezza-testo);
  color:var(--ink-2);font-size:clamp(17px,1.5vw,20px);
}

/* ─────────────────────────────────────────────────────────────────────
   LO STRUMENTO
   ───────────────────────────────────────────────────────────────────── */
.iv-strumento,.iv-passo,.iv-chiuso,.iv-fatto,.iv-corso{
  background:var(--iv-strumento-fondo);
  border:1px solid var(--line);
  border-radius:var(--r-x);
  box-shadow:var(--iv-ombra-dolce);
}
.iv-strumento{padding:24px;margin-bottom:20px}
.iv-passo{padding:22px;box-shadow:none;border-radius:var(--r-l)}

/* Il passo del codice: sta NELLA COLONNA DEL PANNELLO, non largo quanto
   la pagina. Misurato il 28/9: da solo, largo 1.392 punti a 1440, usava
   il 27 % della sua larghezza e ne lasciava 980 vuoti a destra. Qui sta
   largo quanto gli serve, e accanto c'e' la zona di trascinamento.
   Non e' un cancello: la zona di trascinamento e' viva lo stesso. */
#iv-passo-codice{
  margin:0 0 18px;
  padding:22px;
  background:var(--sunken);
  border:1px solid var(--line);
}
#iv-passo-codice[data-saltato="si"]{display:none}
/* MARCA_85401_IL_GRATIS_FUNZIONA_DAVVERO: il posto del controllo di
   Cloudflare, tenuto prima che arrivi (la pagina non salta). */
.iv-turnstile{min-height:65px;margin:4px 0 14px}
.iv-avviso .iv-butta-rimasti{margin-top:10px}
/* MARCA_85401_IL_GRATIS_FUNZIONA_DAVVERO: quello che la pagina nasconde
   (hidden) resta nascosto. Il cruscotto «Sto mandando i file 0 %» ha
   display:grid e si vedeva appena si arrivava, prima di scegliere niente. */
#iv-radice [hidden]{display:none !important}

.iv-passo-titolo{
  display:flex;align-items:center;gap:12px;
  margin:0 0 6px;font-size:22px;font-weight:800;color:var(--ink-strong);
}
.iv-passo-numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-gg);
  background:var(--accent-soft);color:var(--accent);
  font-size:16px;font-weight:800;
}
.iv-passo-riga{margin:0 0 16px;color:var(--ink-2);max-width:var(--larghezza-testo)}

/* La griglia dello strumento: DUE COLONNE su schermo grande.
   E' il punto su cui Giovanni torna da settimane: «fai tutto incolonnato
   e non sfrutti gli spazi liberi». Su un portatile la zona di
   trascinamento e il pannello stanno affiancati e riempiono la riga; il
   telefono torna a una colonna, perche' li' non c'e' spazio da sfruttare. */
.iv-griglia{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}  /* MARCA_85401_IL_GRATIS_FUNZIONA_DAVVERO: sul telefono la colonna non si allarga oltre lo schermo (misurato: 20 punti fuori a 375) */
@media (min-width:900px){
  .iv-griglia{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}

/* ── la zona di trascinamento ── */
.iv-zona{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;
  min-height:290px;padding:28px 20px;
  border:2px dashed var(--iv-zona-filo);
  border-radius:var(--r-l);
  background:var(--iv-zona-fondo);
  cursor:pointer;
  transition:background-color var(--tr),border-color var(--tr),transform var(--tr);
}
.iv-zona.iv-zona-sopra{
  border-color:var(--accent);
  background:var(--iv-zona-fondo-su);
  transform:translateY(-2px);
}
.iv-zona-freccia{
  width:46px;height:46px;border-radius:var(--r-gg);
  background:var(--accent-soft);
  position:relative;flex:0 0 auto;
}
/* la freccia in su, disegnata con due bordi: nessuna immagine da caricare */
.iv-zona-freccia::before{
  content:"";position:absolute;left:50%;top:15px;
  width:13px;height:13px;
  border-left:3px solid var(--accent);border-top:3px solid var(--accent);
  transform:translateX(-50%) rotate(45deg);
}
.iv-zona-freccia::after{
  content:"";position:absolute;left:50%;top:17px;
  width:3px;height:17px;background:var(--accent);
  transform:translateX(-50%);
}
.iv-zona-titolo{margin:0;font-size:22px;font-weight:800;color:var(--ink-strong)}
.iv-zona-oppure{margin:0;color:var(--ink-3);font-size:15px}
.iv-zona-tasti{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.iv-zona-limiti{margin:6px 0 0;color:var(--ink-3);font-size:15px}

/* ── l'elenco dei file scelti ── */
.iv-elenco{list-style:none;margin:16px 0 0;padding:0}
.iv-elenco:empty{margin:0}
.iv-elenco li{
  display:flex;align-items:center;gap:12px;
  padding:8px 4px;border-bottom:1px solid var(--line-soft);
  min-height:44px;
}
.iv-riga-nome{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.iv-riga-peso{color:var(--ink-3);font-size:15px;flex:0 0 auto}
.iv-riga-stato{font-size:14px;color:var(--ink-3);flex:0 0 auto}
.iv-riga-stato.iv-ok{color:var(--ok)}
.iv-riga-stato.iv-ko{color:var(--bad)}
.iv-riga-via{
  flex:0 0 auto;min-width:44px;min-height:44px;
  border:0;background:transparent;color:var(--ink-2);
  font:inherit;font-size:20px;cursor:pointer;border-radius:var(--r-gg);
}
.iv-riga-via:hover{background:var(--surface-2);color:var(--bad)}
.iv-riga-no{text-decoration:line-through;color:var(--ink-3)}
.iv-conto{margin:12px 0 0;font-weight:700;color:var(--ink-strong)}

/* ── i campi ── */
.iv-campo{margin:0 0 16px}
.iv-etichetta{display:block;margin:0 0 6px;font-weight:700;font-size:15px;
  color:var(--ink-strong)}
.iv-facoltativo{font-weight:400;color:var(--ink-3)}
.iv-input{
  width:100%;min-height:46px;padding:10px 14px;
  border:1px solid var(--line-strong);border-radius:var(--r-m);
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:16px;  /* mai sotto 16: sotto, iPhone ingrandisce da solo */
}
.iv-input:focus{border-color:var(--accent)}
.iv-area{min-height:84px;resize:vertical;line-height:1.5}
.iv-nota{margin:8px 0 0;color:var(--ink-3);font-size:14px;
  max-width:var(--larghezza-testo)}
.iv-scelta{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.iv-scelta input{width:22px;height:22px;accent-color:var(--accent)}

/* ── i bottoni della durata ── */
.iv-durate{display:flex;gap:10px;flex-wrap:wrap}
.iv-durata{
  min-width:56px;min-height:46px;padding:10px 18px;
  border:1px solid var(--line-strong);border-radius:var(--r-gg);
  background:var(--surface);color:var(--ink-strong);
  font:inherit;font-weight:700;font-size:16px;cursor:pointer;
  transition:background-color var(--tr),color var(--tr),border-color var(--tr);
}
.iv-durata[aria-pressed="true"]{
  background:var(--pieno);color:var(--su-accento);border-color:var(--pieno);
}

/* ── le sei caselle del codice ── */
.iv-cifre-blocco{margin-top:18px}
.iv-cifre{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.iv-cifra{
  width:52px;height:60px;padding:0;text-align:center;
  border:1px solid var(--line-strong);border-radius:var(--r-m);
  background:var(--surface);color:var(--ink-strong);
  font:inherit;font-size:26px;font-weight:800;
}
.iv-cifra:focus{border-color:var(--accent)}
#iv-rimanda{margin-left:10px}

/* --- MARCA_85405_FOTO_E_VIDEO_NELLA_PAGINA --------------------------------
   Il riquadro della pubblicita' con filmato e foto. Solo richiami ai colori
   del sito, come tutto il resto del foglio. */
.iv-vr{
  margin:28px 0 0;padding:22px;
  background:var(--iv-strumento-fondo);border:1px solid var(--line);
  border-radius:var(--r-x);box-shadow:var(--iv-ombra-dolce);
}
.iv-vendita > .iv-vr{margin:0 0 28px}
.iv-pagina-scarico .iv-vr{max-width:840px;margin-left:auto;margin-right:auto}
.iv-vr-alto{display:grid;gap:20px;align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .iv-vr-alto{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
.iv-vr-filmato{border-radius:var(--r-l);overflow:hidden;background:var(--sunken);aspect-ratio:16/9}
.iv-vr-video{display:block;width:100%;height:100%;object-fit:cover}
.iv-vr-occhiello{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--accent)}
.iv-vr-testo p{color:var(--ink-2);margin:0 0 16px}
.iv-vr-testo .iv-fetta-titolo{margin:0 0 10px}
.iv-vr-schede{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.iv-vr-scheda figure{margin:0}
.iv-vr-scheda img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-m);background:var(--sunken)}
.iv-vr-scheda figcaption{margin-top:8px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.iv-vr-scheda b{display:block;color:var(--ink-strong)}
@media (max-width:640px){
  .iv-vr{padding:14px}
  .iv-vr-schede{grid-template-columns:minmax(0,1fr)}
  .iv-vr-scheda figure{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center}
  .iv-vr-scheda img{aspect-ratio:1/1}
  .iv-vr-scheda figcaption{margin:0}
}
/* --- fine MARCA_85405_FOTO_E_VIDEO_NELLA_PAGINA --------------------------- */
/* Su schermo stretto le sei caselle vanno a capo su due righe di tre.
   NON si stringono sotto i 44 punti: una casella troppo piccola si sbaglia
   col dito, e sbagliare una cifra vuol dire rifare tutto il passo. */
@media (max-width:460px){
  .iv-cifra{width:46px;height:56px;font-size:23px}
  .iv-cifre{gap:8px}
}
/* --- MARCA_85401_IL_GRATIS_FUNZIONA_DAVVERO (telefono) ----------------
   Misurato il 30/9 a 375 punti: tre cornici una dentro l'altra (24+24+22
   punti per lato) lasciavano al passo del codice 231 punti. Il controllo
   di Cloudflare (almeno 300) usciva dal riquadro, e le sei caselle del
   codice andavano a capo 4+2. Qui le cornici si stringono, le caselle
   stanno su una riga senza scendere sotto i 44 punti, e sotto i 380
   tornano su due righe di tre (come diceva gia' il commento qui sopra). */
@media (max-width:460px){
  .iv-pagina{padding-left:16px;padding-right:16px}
  .iv-strumento{padding:12px}
  #iv-passo-codice,.iv-passo{padding:14px}
  .iv-cifre{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:4px}
  .iv-cifra{width:auto}
  /* il nome del file si legge intero, su due righe se serve (prima:
     «foto di prov…» a 375 punti) */
  .iv-file-riga .iv-file-nome{white-space:normal;overflow-wrap:anywhere}
}
@media (max-width:379px){
  .iv-cifre{grid-template-columns:repeat(3,56px);gap:8px}
}
/* --- fine MARCA_85401_IL_GRATIS_FUNZIONA_DAVVERO (telefono) ---------- */

/* ── la riga degli avvisi: qui, in pagina. Mai un popup del browser ── */
.iv-avviso{
  margin:0 0 16px;padding:12px 16px;
  border-radius:var(--r-m);
  background:var(--info-bg);color:var(--info);
  border:1px solid var(--info);
  font-weight:600;
}
.iv-avviso-brutto{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.iv-avviso-bene{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}

/* ─────────────────────────────────────────────────────────────────────
   IL CRUSCOTTO DEL CARICAMENTO, E LA VETRINA CHE GLI STA ACCANTO
   ---------------------------------------------------------------------
   La vetrina e' il VICINO del cruscotto, non un pannello che lo copre.
   A 1440 due colonne, e il cruscotto e' la piu' larga: la percentuale, la
   velocita' e «Ferma il caricamento» restano la cosa piu' visibile della
   pagina. A 375 la vetrina va SOTTO, e si riduce a UNA VOCE SOLA che
   cambia, perche' sei nomi in colonna stretta non si leggono.
   ───────────────────────────────────────────────────────────────────── */
.iv-corso{display:grid;gap:22px;padding:24px;margin-top:20px}
@media (min-width:900px){
  .iv-corso{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
}
.iv-corso-titolo{margin:0 0 16px;font-size:22px;font-weight:800;
  color:var(--ink-strong)}

.iv-anello-scatola{position:relative;width:220px;max-width:100%;margin:0 auto}
@media (max-width:640px){.iv-anello-scatola{width:150px}}
.iv-anello{width:100%;height:auto;display:block;transform:rotate(-90deg)}
.iv-anello-traccia{fill:none;stroke:var(--line);stroke-width:9}
.iv-anello-arco{
  fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;
  /* si muove SOLO il tratteggio: niente riflusso della pagina */
  transition:stroke-dashoffset .25s linear;
}
.iv-corso-finito .iv-anello-arco{stroke:var(--ok)}
.iv-anello-dentro{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;text-align:center;pointer-events:none;
}
.iv-percento{font-size:clamp(26px,3vw,36px);font-weight:800;
  color:var(--ink-strong);line-height:1}
.iv-anello-sotto{font-size:13px;color:var(--ink-3)}

.iv-numeri{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin:20px 0 0;
}
.iv-numeri dt{font-size:13px;color:var(--ink-3);margin:0}
.iv-numeri dd{margin:2px 0 0;font-size:17px;font-weight:700;
  color:var(--ink-strong)}
.iv-corso-avviso{
  margin:18px 0 0;padding:12px 16px;border-radius:var(--r-m);
  background:var(--warn-bg);color:var(--warn);font-weight:600;font-size:15px;
}
.iv-corso-tasti{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ── la vetrina ── */
.iv-vetrina{
  border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--sunken);padding:18px;
}
.iv-vetrina-riga{
  margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.iv-vetrina-corpo{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 116px}
.iv-vetrina-voci{list-style:none;margin:0;padding:0}
.iv-vetrina-voce{
  padding:5px 0;
  font-size:clamp(15px,1.25vw,19px);
  font-weight:800;letter-spacing:-.01em;line-height:1.15;
  text-transform:uppercase;
  color:var(--iv-vetrina-spenta);   /* SPENTA, ma leggibile: --ink-3 sta sopra 4,5:1 */
  /* si muove solo l'opacita' e il colore: niente altezze che cambiano */
  transition:color .32s ease,opacity .32s ease;
  opacity:.72;
  cursor:pointer;
}
.iv-vetrina-voce[aria-current="true"]{color:var(--accent);opacity:1}
.iv-vetrina-sotto{
  display:block;margin-top:3px;
  font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--ink-2);
  /* la riga sotto c'e' solo quando la voce e' attiva: si apre con
     l'opacita', non con l'altezza, cosi' l'elenco non balla */
  opacity:0;height:0;overflow:hidden;
  transition:opacity .32s ease;
}
.iv-vetrina-voce[aria-current="true"] .iv-vetrina-sotto{opacity:1;height:auto}
.iv-vetrina-figura{
  position:relative;aspect-ratio:3/4;border-radius:var(--r-m);
  overflow:hidden;background:var(--surface-2);border:1px solid var(--line);
}
.iv-vetrina-figura img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;
  opacity:0;transition:opacity .4s ease;
  will-change:opacity;
}
.iv-vetrina-figura img.iv-figura-viva{opacity:1}
.iv-vetrina-tasto{margin-top:16px;width:100%}

/* A 375: la vetrina va sotto (la griglia e' gia' a una colonna) e si
   riduce a UNA VOCE SOLA. Le altre non si stringono: spariscono. */
@media (max-width:899px){
  .iv-vetrina-voce{display:none}
  .iv-vetrina-voce[aria-current="true"]{display:block;font-size:20px}
  .iv-vetrina-corpo{grid-template-columns:minmax(0,1fr) 96px;align-items:center}
  .iv-vetrina-figura{aspect-ratio:1/1}
}

/* ─────────────────────────────────────────────────────────────────────
   LA CONFERMA
   ───────────────────────────────────────────────────────────────────── */
.iv-fatto{padding:26px;margin-top:20px;text-align:center}
.iv-spunta{
  width:56px;height:56px;margin:0 auto 12px;border-radius:var(--r-gg);
  background:var(--ok-bg);position:relative;
}
.iv-spunta::after{
  content:"";position:absolute;left:19px;top:15px;
  width:12px;height:22px;
  border-right:4px solid var(--ok);border-bottom:4px solid var(--ok);
  transform:rotate(42deg);
}
.iv-fatto-titolo{margin:0 0 8px;font-size:28px;font-weight:800;
  color:var(--ink-strong)}
.iv-fatto-conto{margin:0 0 18px;color:var(--ink-2)}
.iv-fatto-riga{margin:12px 0 0;color:var(--ink-2)}
.iv-link-riga{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:640px;margin:0 auto}
.iv-link{flex:1 1 260px;min-width:0;font-size:15px}

/* ─────────────────────────────────────────────────────────────────────
   IL RACCONTO SOTTO: CHI ARRIVA QUI NON CI CONOSCE
   ---------------------------------------------------------------------
   Due colonne vere: il testo da una parte, la schermata dall'altra, e si
   alternano. Su schermo grande il blocco riempie tutta la riga; sul
   telefono torna una colonna, con la schermata sopra.
   ───────────────────────────────────────────────────────────────────── */
.iv-vendita{margin-top:var(--passo)}
.iv-fetta{
  display:grid;gap:26px;align-items:center;
  padding:var(--passo) 0;
  border-top:1px solid var(--line-soft);
}
@media (min-width:860px){
  .iv-fetta{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px}
  .iv-fetta-girata .iv-fetta-testo{order:2}
  .iv-fetta-girata .iv-fetta-figura{order:1}
}
.iv-fetta-titolo{
  margin:0 0 12px;font-family:var(--font-display);
  font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
  font-weight:800;color:var(--ink-strong);text-wrap:balance;
}
.iv-fetta-testo p{margin:0;color:var(--ink-2);font-size:18px;
  max-width:var(--larghezza-testo)}
.iv-fetta-figura{margin:0}
.iv-fetta-figura img{
  width:100%;border-radius:var(--r-l);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.iv-fetta-figura figcaption{
  margin-top:10px;font-size:14px;color:var(--ink-3);text-align:center;
}

.iv-confronto{padding:var(--passo) 0;border-top:1px solid var(--line-soft)}
.iv-confronto-due{display:grid;gap:20px;margin-top:22px}
@media (min-width:760px){
  .iv-confronto-due{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.iv-confronto-scheda{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:24px;
}
.iv-confronto-scheda-rame{border-color:var(--accent);background:var(--accent-soft)}
.iv-confronto-scheda h3{margin:0 0 14px;font-size:19px;color:var(--ink-strong)}
.iv-confronto-scheda ul{margin:0 0 18px;padding-left:22px;color:var(--ink-2)}
.iv-confronto-scheda li{margin:6px 0}

.iv-chiusura{
  padding:var(--passo) 0;text-align:center;
  border-top:1px solid var(--line-soft);
}
.iv-chiusura p{margin:0 auto 22px;max-width:var(--larghezza-testo);
  color:var(--ink-2);font-size:18px}

/* ─────────────────────────────────────────────────────────────────────
   LA PAGINA DI CHI RICEVE, E LA PAGINA CHIUSA
   ───────────────────────────────────────────────────────────────────── */
.iv-pagina-scarico,.iv-pagina-chiusa{padding-top:20px}
.iv-scheda{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-x);box-shadow:var(--shadow);
  padding:30px;max-width:840px;margin:0 auto;
}
.iv-scheda-stretta{max-width:620px;text-align:center}
.iv-da{margin:0 0 8px;color:var(--ink-3);font-size:15px}
.iv-messaggio{
  margin:16px 0;padding:14px 18px;border-left:3px solid var(--accent);
  background:var(--sunken);color:var(--ink-2);border-radius:var(--r-s);
  white-space:pre-wrap;
}
.iv-pillole{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 22px}
.iv-pillola{
  display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;
  border-radius:var(--r-gg);background:var(--sunken);color:var(--ink-2);
  font-size:15px;font-weight:600;
}
.iv-pillola-attenta{background:var(--warn-bg);color:var(--warn)}
.iv-file-elenco{list-style:none;margin:24px 0 0;padding:0}
.iv-file-riga{
  display:flex;align-items:center;gap:12px;min-height:56px;
  padding:8px 0;border-top:1px solid var(--line-soft);
}
.iv-file-nome{flex:1 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.iv-file-peso{color:var(--ink-3);font-size:15px;flex:0 0 auto}
.iv-file-tasto{flex:0 0 auto;padding:8px 16px}
.iv-scheda-nota{margin:24px 0 0;color:var(--ink-3);font-size:14px}
.iv-scheda-riga{margin:0 0 24px;color:var(--ink-2);
  max-width:var(--larghezza-testo);margin-left:auto;margin-right:auto}
.iv-segnala{margin:10px 0 0}

.iv-segno{
  width:58px;height:58px;margin:0 auto 16px;border-radius:var(--r-gg);
  background:var(--sunken);position:relative;
}
.iv-segno-orologio::before{
  content:"";position:absolute;left:28px;top:16px;width:2px;height:14px;
  background:var(--ink-2);
}
.iv-segno-orologio::after{
  content:"";position:absolute;left:28px;top:28px;width:12px;height:2px;
  background:var(--ink-2);
}
.iv-segno-cestino::before{
  content:"";position:absolute;left:19px;top:22px;width:20px;height:20px;
  border:2px solid var(--ink-2);border-radius:0 0 var(--r-s) var(--r-s);
}
.iv-segno-cestino::after{
  content:"";position:absolute;left:15px;top:17px;width:28px;height:2px;
  background:var(--ink-2);
}
.iv-segno-punto::before{
  content:"";position:absolute;left:27px;top:15px;width:4px;height:18px;
  border-radius:var(--r-gg);background:var(--ink-2);
}
.iv-segno-punto::after{
  content:"";position:absolute;left:27px;top:38px;width:4px;height:4px;
  border-radius:var(--r-gg);background:var(--ink-2);
}

.iv-fascia{
  max-width:840px;margin:26px auto 0;padding:22px 24px;
  border-radius:var(--r-l);background:var(--accent-soft);
  border:1px solid var(--accent);
  display:flex;gap:18px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
}
.iv-fascia-riga{margin:0;color:var(--ink);flex:1 1 320px}

.iv-chiuso{padding:34px;text-align:center;max-width:720px;margin:0 auto}
.iv-chiuso-segno{
  width:58px;height:58px;margin:0 auto 14px;border-radius:var(--r-gg);
  background:var(--warn-bg);
}
.iv-chiuso-titolo{margin:0 0 10px;font-size:28px;font-weight:800;
  color:var(--ink-strong)}
.iv-chiuso-riga{margin:0 auto 22px;max-width:var(--larghezza-testo);
  color:var(--ink-2)}

/* ─────────────────────────────────────────────────────────────────────
   IL FONDO PAGINA
   ───────────────────────────────────────────────────────────────────── */
.iv-piede{
  max-width:var(--larghezza);margin:0 auto;padding:30px 24px 48px;
  border-top:1px solid var(--line-soft);text-align:center;
}
.iv-piede-riga{margin:0 0 6px;color:var(--ink-2)}
.iv-piede-nota{margin:0;color:var(--ink-3);font-size:14px}

/* =========================================================================
   L'APERTURA DI QUATTRO SECONDI
   -------------------------------------------------------------------------
   I QUATTRO VINCOLI, e dove stanno scritti:

   1. NON E' UN CANCELLO — `pointer-events:none` qui sotto, SEMPRE, e
      nessuna eccezione piu' avanti nel foglio. Il velo sta sopra con gli
      occhi e non esiste con le dita: si puo' trascinare un file
      ATTRAVERSO il velo, cliccare i tasti sotto, scrivere.
   2. SOLO LA PRIMA VOLTA — lo decide il programma (localStorage), qui il
      velo nasce `hidden`.
   3. MENO MOVIMENTO — l'ultimo blocco di questo foglio lo spegne del
      tutto e accende al suo posto le cinque parole ferme.
   4. NON RITARDA NIENTE — non c'e' niente, qui dentro, che l'altra parte
      della pagina debba aspettare: sono due proprieta' sole, `transform`
      e `opacity`, che il browser fa girare sulla scheda video senza mai
      ricalcolare l'impaginazione.
   ========================================================================= */
.iv-velo{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  background:var(--iv-velo-fondo);
  color:var(--iv-velo-testo);
  /* IL VINCOLO NUMERO UNO. Non si toglie per nessun motivo. */
  pointer-events:none;
  /* sparisce in fretta: al massimo 120 ms, non una dissolvenza lunga */
  transition:opacity .12s linear;
  overflow:hidden;
}
.iv-velo[hidden]{display:none}
.iv-velo.iv-velo-via{opacity:0}

.iv-velo-tempo{
  grid-area:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  opacity:0;
  will-change:transform,opacity;
}
.iv-velo-parola{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(38px,9vw,104px);
  line-height:1;letter-spacing:-.03em;font-weight:800;
  color:var(--iv-velo-testo);
}
.iv-velo-riga{
  margin:14px 0 0;font-size:clamp(15px,2vw,22px);
  color:var(--iv-velo-testo);opacity:.82;
}
.iv-velo-figura{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.22;
  will-change:transform;
  z-index:-1;
}

/* I CINQUE TEMPI. 0,90 + 0,90 + 0,90 + 0,90 + 0,40 = 4,00 secondi esatti.
   La parola entra ingrandendosi (320 ms), sta ferma, ed esce ingrandendo
   ancora (260 ms). Dentro 900 ms: 320/900 = 35,6 %, e l'uscita comincia a
   (900-260)/900 = 71,1 %. */
@keyframes iv-parola{
  0%   {opacity:0;transform:scale(.72) translateY(14px)}
  35.6%{opacity:1;transform:scale(1) translateY(0)}
  71.1%{opacity:1;transform:scale(1) translateY(0)}
  100% {opacity:0;transform:scale(1.12) translateY(0)}
}
/* l'ultimo tempo dura 400 ms e non esce: se ne va col velo */
@keyframes iv-parola-ultima{
  0%  {opacity:0;transform:scale(.72) translateY(14px)}
  80% {opacity:1;transform:scale(1) translateY(0)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes iv-schermata{
  0%  {transform:scale(1.06)}
  100%{transform:scale(1.14)}
}

.iv-velo-acceso .iv-velo-tempo{
  animation:iv-parola .9s cubic-bezier(.2,.7,.3,1) both;
}
.iv-velo-acceso .iv-velo-figura{
  animation:iv-schermata .9s linear both;
}
.iv-velo-acceso .iv-velo-tempo[data-tempo="0"],
.iv-velo-acceso .iv-velo-tempo[data-tempo="0"] .iv-velo-figura{animation-delay:0s}
.iv-velo-acceso .iv-velo-tempo[data-tempo="1"],
.iv-velo-acceso .iv-velo-tempo[data-tempo="1"] .iv-velo-figura{animation-delay:.9s}
.iv-velo-acceso .iv-velo-tempo[data-tempo="2"],
.iv-velo-acceso .iv-velo-tempo[data-tempo="2"] .iv-velo-figura{animation-delay:1.8s}
.iv-velo-acceso .iv-velo-tempo[data-tempo="3"],
.iv-velo-acceso .iv-velo-tempo[data-tempo="3"] .iv-velo-figura{animation-delay:2.7s}
.iv-velo-acceso .iv-velo-tempo[data-tempo="4"]{
  animation:iv-parola-ultima .4s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:3.6s;
}

/* Le cinque parole FERME: si vedono solo con «meno movimento» (in fondo
   al foglio). Di solito non ci sono. */
.iv-parole-ferme{display:none}

/* --- MARCA_87991_GRATIS_ITALIANO_E_A_SINISTRA -------------------------------
   Regola D684 di Giovanni (4/10): «tutte le pagine ... devono avere i
   pulsanti allineati a sinistra, che sono piu' comodi da raggiungere».
   Misurato il 5/10 a 1440 (vuoto a sinistra del pulsante dentro la sua
   scheda): «Manda altri file» 568 punti, «Torna ai file» 215, «Manda tu
   un file, gratis» 173, «Guarda RegiaPro» 596, «Provalo 14 giorni» nella
   fascia del link chiuso 624, «Scegli file» centrato nella zona di
   trascinamento. Adesso: 0. Le schede di esito (Fatto,
   segnalazione, link chiuso o scaduto) vanno a sinistra tutte intere:
   il segno, il titolo, la frase e il pulsante in colonna. */
.iv-zona{align-items:flex-start;text-align:left}
.iv-zona-tasti{justify-content:flex-start}
.iv-fatto{text-align:left}
.iv-spunta{margin:0 0 12px}
.iv-link-riga{justify-content:flex-start;margin:0}
.iv-chiusura{text-align:left}
.iv-chiusura p{margin:0 0 22px}
.iv-scheda-stretta{text-align:left}
.iv-scheda-stretta .iv-scheda-riga{margin-left:0;margin-right:0}
.iv-segno{margin:0 0 16px}
.iv-chiuso{text-align:left}
.iv-chiuso-segno{margin:0 0 14px}
.iv-chiuso-riga{margin:0 0 22px}
.iv-fascia{flex-direction:column;align-items:flex-start}
.iv-fascia-riga{flex:0 0 auto}
/* --- fine MARCA_87991_GRATIS_ITALIANO_E_A_SINISTRA -------------------------- */

/* =========================================================================
   «MENO MOVIMENTO» — quello che il computer chiede, si fa
   -------------------------------------------------------------------------
   Chi ha acceso «riduci il movimento» sul Mac o su Windows lo ha fatto per
   un motivo suo (mal di testa, vertigini, o solo fastidio). Qui:
   - l'apertura di 4 secondi NON esiste affatto, e al suo posto restano le
     stesse cinque parole, ferme, sopra la zona di trascinamento;
   - la vetrina resta FERMA sulla prima voce, leggibile, senza girare e
     senza dissolvenze.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .iv-velo{display:none !important}
  .iv-parole-ferme{
    display:flex;flex-wrap:wrap;gap:8px;list-style:none;
    margin:0 0 14px;padding:0;justify-content:center;
  }
  .iv-parole-ferme li{
    padding:5px 14px;border-radius:var(--r-gg);
    background:var(--accent-soft);color:var(--accent);
    font-size:14px;font-weight:700;
  }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}