/* ============================================================
   GB-SEZIONI.CSS — il CSS delle sezioni RIUSATE SPESSO
   ------------------------------------------------------------
   Cosa ci va: il CSS di una sezione della libreria che finisce su tante
   pagine, e che quindi non ha senso incollare ogni volta nel campo
   "Formato libero" del Modulo Testo. Una sezione che sta qui si mette in
   pagina incollando SOLO il markup.

   Cosa NON ci va:
   - il design system (token, .gb-pulsante, .gb-lista, componenti comuni):
     quello e' gb-core.css, e resta separato apposta;
   - le regole delle pagine vecchie: quelle sono gb-legacy.css;
   - il CSS di una sezione usata in una pagina sola: resta nel suo stile.css,
     altrimenti questo file diventa una discarica e ogni pagina del sito paga
     il peso di regole che non usa.

   REGOLE:
   - ogni blocco resta sotto il PREFISSO della sua sezione, esattamente come
     quando stava nel suo stile.css: qui dentro non si scrivono selettori nudi;
   - i colori restano token var(--gb-*);
   - quando si sposta una sezione qui, il suo stile.css si CANCELLA. Tenerne
     due copie e' peggio di non averlo spostato: si correggerebbe una sola
     delle due, e l'altra vincerebbe a seconda dell'ordine di caricamento.

   Caricato dal functions.php con dipendenza da 'gb-core' (cosi' l'ordine e'
   dichiarato, non affidato al caso) e versione filemtime.

   ============================================================
   INDICE
     1. sezione-video-riquadro
     2. sezione-sottoprodotti-revisione
     3. sezione-info-preventivi-immagine  (+ la variante -revisione, stesso blocco:
        cambia solo il testo e la leva --senza-fondo)
   ============================================================ */


/* ============================================================
   1. SEZIONE-VIDEO-RIQUADRO  ·  prefisso: video-riquadro-
   Un video largo che parte da se' muto e in loop come anteprima; al clic si
   apre nel lightbox del sito (featherlight). Zero JS.
   Spostata qui il 7 agosto 2026: e' un blocco che ricorre su molte pagine, e
   se ne possono mettere piu' d'uno nella stessa pagina — con il CSS in
   sezione sarebbe stato incollato N volte.
   ============================================================ */
.video-riquadro-sezione{
  --video-riquadro-larghezza: 950px;   /* come nell'originale */
  --video-riquadro-raggio:    25px;    /* come nell'originale */
  /* PROPORZIONE del riquadro. 16/9 e' il video normale; 9/16 il verticale da
     telefono, 1/1 il quadrato dei social. Si gira da qui o in linea sulla
     <section>, non si tocca la regola: e' l'unica misura che cambia da un
     video all'altro. */
  --video-riquadro-proporzione: 16 / 9;

  font-family:var(--gb-font);
  background:transparent;
}

/* aspect-ratio 16/9 + larghezza al 100%: lo spazio e' riservato prima che il
   video arrivi, quindi la pagina non salta. L'originale fissava width:950px
   in linea, che sotto i 950px di finestra usciva dallo schermo. */
.video-riquadro-schermo{
  display:block; position:relative; text-decoration:none;
  width:100%; max-width:var(--video-riquadro-larghezza); margin:0 auto;
  aspect-ratio:var(--video-riquadro-proporzione);
  border-radius:var(--video-riquadro-raggio); overflow:hidden;
  border:1px solid var(--gb-linea);
  background:var(--gb-blu-tenue);
  box-shadow:var(--gb-ombra);
}
.video-riquadro-schermo:focus-visible{ outline:3px solid var(--gb-arancio); outline-offset:4px; }

/* pointer-events:none: senza, il clic finisce sul <video> invece che sul
   link, e il lightbox non si apre mai. tabindex="-1" nel markup fa lo stesso
   per la tastiera: si tabula sul link, non sul video. */
.video-riquadro-anteprima{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}

/* ---------- pulsante play + onda ----------
   Stesso componente delle altre sezioni video della libreria: cerchio arancio
   e onda che si allarga. L'originale era rosso con due pseudo-elementi fissi
   (160px e 130px) che a video piccolo sbordavano; qui l'onda e' un solo
   elemento in scala, quindi resta proporzionata a qualunque misura. */
.video-riquadro-play{
  position:absolute; inset:0; margin:auto;
  width:clamp(64px, 7vw, 100px); aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gb-arancio); color:var(--gb-sfondo);
  transition:transform .3s var(--gb-molla);
}
.video-riquadro-play svg{ width:42%; height:42%; fill:currentColor; margin-left:8%; position:relative; z-index:1; }
.video-riquadro-schermo:hover .video-riquadro-play{ transform:scale(1.1); }
.video-riquadro-onda{
  position:absolute; inset:0; border-radius:50%; display:block;
  background:var(--gb-arancio); opacity:.55;
  animation:video-riquadro-onda 2s var(--gb-ease-out) infinite;
}
@keyframes video-riquadro-onda{ to{ transform:scale(1.9); opacity:0; } }

/* BREAKPOINT = quelli di Divi, 980 tablet e 767 telefono */
@media (max-width:767px){
  .video-riquadro-sezione{ --video-riquadro-raggio:16px; }
}


/* ============================================================
   SOTTOPRODOTTI — hero delle pagine sotto un prodotto
   prefisso: sottoprodotti-
   ------------------------------------------------------------
   STA QUI E NON IN UN stile.css PERCHE' LE SEZIONI SARANNO TANTE:
   una per prodotto (Revisione, Paghe, Fatture...) e quasi identiche
   fra loro. Con un stile.css a testa lo stesso identico CSS finirebbe
   copiato cinque volte, e cinque copie si allineano male: si corregge
   un esagono e restano sbagliati gli altri quattro.
   Cosi' invece ogni sezione e' SOLO un testo.html col suo contenuto.

   Copiato da sezione-hero-prodotto-video-esagoni: stessi valori, non
   "simili" — 480px, sfocatura 70px, arancio 7%, blu 6%, parolone 5%
   con filo 1,5px, tutti color-mix sui token.

   LA DIFFERENZA dalla sorella: a destra, al posto dello schermo video
   incorniciato, c'e' .gb-slider del design system SENZA CORNICE.
   ⚠ Del carosello qui ci sono solo le righe che gli tolgono la
   cornice: tutto il resto vive in gb-core.css e non si duplica.
   ============================================================ */

.sottoprodotti-sezione{
  /* ---------------- KNOB: sfondo ---------------- */
  --sottoprodotti-forma:      polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  --sottoprodotti-fondo:      transparent;   /* lo sfondo lo mette Divi */
  --sottoprodotti-esa-misura: 480px;
  --sottoprodotti-esa-sfoca:  70px;
  --sottoprodotti-esa-1-col:  color-mix(in srgb, var(--gb-arancio) 7%, transparent);
  --sottoprodotti-esa-1-x:    -5%;
  --sottoprodotti-esa-1-y:    -20%;
  --sottoprodotti-esa-2-col:  color-mix(in srgb, var(--gb-blu) 6%, transparent);
  --sottoprodotti-esa-2-x:    -5%;
  --sottoprodotti-esa-2-y:    -10%;
  --sottoprodotti-parolone-col:   color-mix(in srgb, var(--gb-blu) 5%, transparent);
  --sottoprodotti-parolone-spess: 1.5px;
  --sottoprodotti-parolone-max:   170px;
  /* KNOB: la cornice del carosello. 0 = senza, ed e' come nasce questa
     sezione. Se un giorno la rivuoi tonda basta alzarlo. */
  --sottoprodotti-media-raggio: 0px;
  /* -------------------------------------------- */

  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gb-eroe-spazio) clamp(20px,5vw,72px);
  font-family:var(--gb-font);
  color:var(--gb-testo);
  background:var(--sottoprodotti-fondo);
}
/* Spazi uguali per tutte le sezioni eroe (17/09/2026): li decidono --gb-eroe-spazio,
   --gb-eroe-bordo-sopra e --gb-eroe-bordo-sotto in gb-core.css. Se la sezione Divi ha il bordo obliquo
   in alto o in fondo, da quel lato si aggiunge la sua altezza, cosi' il bordo non copre testo, video e
   pulsanti. La riga Divi che la contiene resta con spazio 0. */
.et_pb_top_divider .sottoprodotti-sezione{ padding-top:calc(var(--gb-eroe-spazio) + var(--gb-eroe-bordo-sopra)); }
.et_pb_bottom_divider .sottoprodotti-sezione{ padding-bottom:calc(var(--gb-eroe-spazio) + var(--gb-eroe-bordo-sotto)); }
.sottoprodotti-sezione *{ box-sizing:border-box; }

/* ---------- esagoni sfumati verso gli angoli ----------
   pointer-events:none o rubano il clic al carosello. */
.sottoprodotti-esa{
  position:absolute; z-index:0; pointer-events:none;
  width:var(--sottoprodotti-esa-misura);
  height:var(--sottoprodotti-esa-misura);
  -webkit-clip-path:var(--sottoprodotti-forma);
          clip-path:var(--sottoprodotti-forma);
  filter:blur(var(--sottoprodotti-esa-sfoca));
}
.sottoprodotti-esa--1{
  right:var(--sottoprodotti-esa-1-x);
  top:var(--sottoprodotti-esa-1-y);
  background:var(--sottoprodotti-esa-1-col);
}
.sottoprodotti-esa--2{
  left:var(--sottoprodotti-esa-2-x);
  bottom:var(--sottoprodotti-esa-2-y);
  background:var(--sottoprodotti-esa-2-col);
}

/* ---------- scritta gigante quasi invisibile ----------
   Statica, visibile anche senza JS. Deborda dai lati ed e' voluto: la taglia
   l'overflow:hidden della sezione. */
.sottoprodotti-parolone{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:0; user-select:none; pointer-events:none;
  text-align:center; line-height:.82; font-weight:900; letter-spacing:-0.01em;
  color:transparent;
  -webkit-text-stroke:var(--sottoprodotti-parolone-spess) var(--sottoprodotti-parolone-col);
}
.sottoprodotti-parola-riga{
  display:block; white-space:nowrap;
  font-size:clamp(78px,13vw,var(--sottoprodotti-parolone-max));
}

/* ---------- griglia a due colonne ----------
   minmax(0,…) e min-width:0: senza, la cella non scende sotto la larghezza
   del suo contenuto e le due colonne non si dividono davvero lo spazio. */
.sottoprodotti-griglia{
  position:relative; z-index:1;
  width:100%; max-width:1440px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px); align-items:center;
}
.sottoprodotti-testo,
.sottoprodotti-media{ min-width:0; }

/* LEVA: inverte i lati senza toccare l'ordine del markup (lettura con screen
   reader e tabulazione restano corrette). Gli aloni si scambiano con lei,
   altrimenti l'arancio resterebbe dal lato sbagliato. */
.sottoprodotti-specchiata .sottoprodotti-testo{ order:2; }
.sottoprodotti-specchiata .sottoprodotti-media{ order:1; }
.sottoprodotti-specchiata .sottoprodotti-esa--1{ right:auto; left:var(--sottoprodotti-esa-1-x); }
.sottoprodotti-specchiata .sottoprodotti-esa--2{ left:auto; right:var(--sottoprodotti-esa-2-x); }

/* ---------- colonna testo ---------- */
.sottoprodotti-briciole{
  margin:0 0 var(--gb-sp-2);
  color:var(--gb-grigio); line-height:var(--gb-il-media);
}
.sottoprodotti-briciole a{ color:var(--gb-blu); text-decoration:none; }
.sottoprodotti-briciole a:hover{ text-decoration:underline; }

.sottoprodotti-titolo{
  margin:0 0 var(--gb-sp-2);
  color:var(--gb-titolo);
  font-size:clamp(34px,4.2vw,52px); font-weight:900;
  line-height:var(--gb-il-eroe); letter-spacing:-0.01em;
  text-wrap:balance;
}
.sottoprodotti-titolo b{ color:var(--gb-arancio-testo); font-weight:900; }

.sottoprodotti-sommario{ max-width:52ch; margin-bottom:var(--gb-sp-3); }
.sottoprodotti-sottolineato{ text-decoration:underline; }

/* I COLORI-FIRMA DEI MODULI STANNO INLINE, ed e' voluto: non sono colori di
   marca ma il segno con cui si riconosce ogni prodotto, e cambiano da riga a
   riga. Inline restano dove si leggono; qui dentro diventerebbero una lista
   di classi da inventare ogni volta che si nomina un modulo nuovo. */
.sottoprodotti-integrato{
  margin:0 0 var(--gb-sp-2);
  color:var(--gb-testo); line-height:var(--gb-il-corpo);
}
.sottoprodotti-firma{ color:var(--sottoprodotti-firma, var(--gb-blu)); font-weight:700; }
.sottoprodotti-ia{ color:var(--gb-blu); font-weight:700; text-decoration:underline; }

.sottoprodotti-azioni{ margin-top:var(--gb-sp-3); }
.sottoprodotti-nota{
  margin:var(--gb-sp-2) 0 0;
  color:var(--gb-grigio); font-size:var(--gb-micro); line-height:var(--gb-il-media);
}

/* ---------- colonna carosello ----------
   SENZA CORNICE: il carosello nasce con gli angoli tondi come una scheda,
   qui li perde. Tre righe, e sono le UNICHE che questa sezione dice sul
   carosello: il resto (frecce, pallini, swipe, tastiera, impilamento) sta
   nel child e non si duplica. */
.sottoprodotti-media{ position:relative; }
.sottoprodotti-media .gb-slider-media img{
  border-radius:var(--sottoprodotti-media-raggio);
  width:100%; height:auto;
}
.sottoprodotti-media .gb-slider-freccia{ box-shadow:0 6px 18px rgba(25,62,93,.14); }

/* ---------- BREAKPOINT = quelli di Divi, 980 tablet e 767 telefono ---------- */
@media (max-width:980px){
  /* Impilata, il carosello va DOPO il sommario e PRIMA della riga
     "Integrato con": prima si legge di cosa si tratta, poi lo si vede, poi si
     scende nei dettagli. Per infilarlo in mezzo non basta riordinare i due
     blocchi: il carosello e la colonna testo sono due celle diverse, e la
     riga "Integrato con" sta dentro il testo. `display:contents` scioglie la
     cella della colonna testo e fa diventare i suoi figli celle della
     griglia: a quel punto si ordinano uno per uno.
     La leva "specchiata" qui non vale: a una colonna non ci sono lati. */
  .sottoprodotti-griglia{ grid-template-columns:1fr; row-gap:0; }
  .sottoprodotti-testo{ display:contents; }

  .sottoprodotti-briciole { order:1; }
  .sottoprodotti-titolo   { order:2; }
  .sottoprodotti-sommario { order:3; }
  .sottoprodotti-media    { order:4; margin:var(--gb-sp-1) 0 var(--gb-sp-3); }
  .sottoprodotti-integrato{ order:5; }
  .sottoprodotti-azioni   { order:6; }
  .sottoprodotti-nota     { order:7; }

  .sottoprodotti-briciole,
  .sottoprodotti-titolo,
  .sottoprodotti-sommario,
  .sottoprodotti-integrato{ text-align:center; margin-left:auto; margin-right:auto; }
  .sottoprodotti-azioni{ justify-content:center; }
  .sottoprodotti-nota{ text-align:center; }
}
@media (max-width:767px){
  .sottoprodotti-azioni .gb-pulsante{ width:100%; }
}


/* ============================================================
   INFO-PREVENTIVI-IMMAGINE — la CTA del piede delle pagine prodotto
   prefisso: info-preventivi-immagine-
   ------------------------------------------------------------
   STA QUI E NON IN UN stile.css PERCHE' LE VARIANTI SARANNO SEI:
   una per prodotto (Revisione, Paghe, Fatture, Contabile...) e uguali
   tranne che nei testi. Con un stile.css a testa lo stesso CSS
   finirebbe copiato sei volte, e sei copie si allineano male: si
   corregge il distintivo dei 15 giorni e restano sbagliate le altre
   cinque. Ogni variante e' SOLO un testo.html col suo contenuto.

   ⚠ MIGRATO DA sezione-info-preventivi-immagine/stile.css il 12/08/2026.
   Quella sezione e' gia' in pagina sul sito, e li' il CSS viaggia nel
   campo "Formato libero" del suo Modulo Testo. Adesso arriva anche da
   qui: finche' il modulo non viene ripulito le regole ci sono DUE volte,
   identiche — innocuo, ma da sistemare quando si tocca quella pagina.
   ============================================================ */

.info-preventivi-immagine-sezione{
  /* ---- LA FOTO: QUESTO E. SOLO IL RIPIEGO ----
     ⚠ NON cambiare la foto qui dentro: questo CSS e. condiviso dalle sei
     varianti, quindi la cambieresti a tutte insieme. La foto vera si mette
     con uno style inline sulla <section> della singola variante:
         style="--info-preventivi-immagine-img:url(...)"
     Questo valore serve solo a chi non lo mette.
     La sfumatura di marca resta sotto come fondo: se l.immagine non carica
     (o mentre arriva) il riquadro non e. mai bianco. */
  --info-preventivi-immagine-img: url("https://www.softwaregb.it/wp-content/uploads/video-aziendale.jpg");

  --info-preventivi-immagine-altezza: clamp(320px,40vw,460px);

  font-family:var(--gb-font);
  background:var(--gb-tenue);
  padding:clamp(40px,6vw,76px) 22px;
}

/* LEVA --senza-fondo · la sezione non porta piu. il suo grigino: lo sfondo lo
   decide la sezione Divi in cui la metti. Serve dove la CTA sta su una pagina
   che grigia non e., e stampare una fascia in mezzo si vedrebbe.
   E. una LEVA e non un secondo file: fra le sei varianti cambia questo e i
   testi, e duplicare centodieci righe di CSS per una riga sarebbe il modo
   sicuro di ritrovarsele diverse fra sei mesi. */
.info-preventivi-immagine-sezione--senza-fondo{ background:transparent; }

/* due colonne: il testo prende piu' spazio, la foto resta compatta */
.info-preventivi-immagine-griglia{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:clamp(24px,4vw,52px); align-items:center;
}
/* LEVA: inverte i lati senza toccare l'ordine del markup, quindi la lettura
   con screen reader e la tabulazione restano quelle giuste. */
.info-preventivi-immagine-specchiata .info-preventivi-immagine-testo{ order:2; }
.info-preventivi-immagine-specchiata .info-preventivi-immagine-media{ order:1; }

.info-preventivi-immagine-testo{ min-width:0; }
.info-preventivi-immagine-testo .gb-titolo{ text-align:left; }
.info-preventivi-immagine-testo .gb-sommario{ max-width:52ch; }

.info-preventivi-immagine-guida{
  margin:var(--gb-sp-3) 0 var(--gb-sp-2);
  color:var(--gb-testo); font-size:var(--gb-corpo); font-weight:700;
}
.info-preventivi-immagine-lista{ margin-bottom:0 !important; }
.info-preventivi-immagine-lista li{ font-size:var(--gb-corpo); }
.info-preventivi-immagine-lista b{ color:var(--gb-titolo); font-weight:700; }

.info-preventivi-immagine-azioni{ margin-top:var(--gb-sp-3); }
.info-preventivi-immagine-nota{
  margin:var(--gb-sp-2) 0 0;
  color:var(--gb-grigio); font-size:var(--gb-micro); line-height:var(--gb-il-media);
}

/* ---------- colonna media ---------- */
.info-preventivi-immagine-media{ position:relative; min-width:0; }

/* L'altezza e' fissata da una variabile, quindi lo spazio e' riservato prima che
   la foto arrivi: la pagina non si muove al caricamento. */
.info-preventivi-immagine-foto{
  position:relative;
  width:100%; height:var(--info-preventivi-immagine-altezza);
  border-radius:var(--gb-raggio-card); overflow:hidden;
  box-shadow:var(--gb-ombra);
  background:
    var(--info-preventivi-immagine-img, none) center/cover no-repeat,
    linear-gradient(140deg, var(--gb-blu), var(--gb-titolo));
}

/* distintivo dei 15 giorni, appoggiato sull'angolo della foto */
.info-preventivi-immagine-distintivo{
  position:absolute; right:-10px; bottom:56px; z-index:2;
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:var(--gb-raggio-card);
  background:var(--gb-sfondo); box-shadow:var(--gb-ombra-hover);
  border:1px solid var(--gb-bordo-tenue);
}
.info-preventivi-immagine-numero{
  color:var(--gb-arancio-testo);
  font-size:var(--gb-h2); font-weight:900; line-height:1; letter-spacing:-.02em;
}
.info-preventivi-immagine-giorni{
  color:var(--gb-grigio); font-size:var(--gb-micro); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; line-height:var(--gb-il-media);
}

.info-preventivi-immagine-forte{
  margin:var(--gb-sp-3) 0 0;
  color:var(--gb-titolo); font-size:var(--gb-piccolo); font-weight:400;
  line-height:var(--gb-il-media); text-align:center;
}
.info-preventivi-immagine-forte b{ color:var(--gb-arancio-testo); font-weight:800; }

/* ---------- SU FONDO SCURO ----------
   Si aggiunge .gb-su-scuro alla <section>, com'e' scritto in sezione-organismo:
   il chiaro resta il predefinito e lo sfondo scuro lo dà la sezione Divi (o si
   tiene --senza-fondo e lo mette Divi). QUI NON SI DIPINGE NESSUN FONDO: il
   gancio del design system vale per "l'elemento che HA il fondo scuro", e
   deciderlo qui vorrebbe dire deciderlo per tutte e sei le varianti.

   .gb-su-scuro (gb-core) ribalta da solo --gb-titolo-col, --gb-sommario-col,
   --gb-etichetta-col e --gb-arancio-testo: quindi .gb-titolo, .gb-sommario e
   .gb-occhiello si sistemano senza che qui si scriva niente. Restano i pezzi
   PROPRI di questa sezione, che puntano ai token del fondo chiaro. Si rimandano
   ai token di contesto invece che a #fff scritto a mano, cosi' il giorno che
   cambia il bianco del tema scuro cambia in un punto solo.

   ⚠ IL DISTINTIVO DEI 15 GIORNI NON E' QUI, ED E' VOLUTO. E' una scheda BIANCA
   appoggiata sulla foto, e bianca resta anche col fondo scuro: se si schiarisse
   .info-preventivi-immagine-giorni si otterrebbe testo chiaro su fondo bianco,
   cioe' il numero leggibile e la scritta "giorni di prova" sparita. */
.info-preventivi-immagine-sezione.gb-su-scuro .info-preventivi-immagine-guida,
.info-preventivi-immagine-sezione.gb-su-scuro .info-preventivi-immagine-forte,
.info-preventivi-immagine-sezione.gb-su-scuro .info-preventivi-immagine-lista b{
  color:var(--gb-titolo-col);
}
.info-preventivi-immagine-sezione.gb-su-scuro .info-preventivi-immagine-lista li{
  color:var(--gb-sommario-col);
}
.info-preventivi-immagine-sezione.gb-su-scuro .info-preventivi-immagine-nota{
  color:var(--gb-etichetta-col);
}

/* ---------- BREAKPOINT = quelli di Divi, 980 tablet e 767 telefono ---------- */
@media (max-width:980px){
  .info-preventivi-immagine-griglia{ grid-template-columns:1fr; }
  /* impilata, la foto va sopra al testo in ogni caso: e' l'immagine che apre
     la sezione. La leva "specchiata" vale solo dove ci sono due colonne vere. */
  .info-preventivi-immagine-testo{ order:2; }
  .info-preventivi-immagine-media{ order:1; }
  .info-preventivi-immagine-specchiata .info-preventivi-immagine-testo{ order:2; }
  .info-preventivi-immagine-specchiata .info-preventivi-immagine-media{ order:1; }
  .info-preventivi-immagine-testo .gb-titolo,
  .info-preventivi-immagine-testo .gb-sommario,
  .info-preventivi-immagine-guida{ text-align:center; margin-left:auto; margin-right:auto; }
  .info-preventivi-immagine-testo .gb-occhiello{ margin-left:auto; margin-right:auto; display:flex; }
  .info-preventivi-immagine-lista{ max-width:34rem; margin-left:auto !important; margin-right:auto !important; }
  .info-preventivi-immagine-azioni{ justify-content:center; }
  .info-preventivi-immagine-nota{ text-align:center; }
  .info-preventivi-immagine-distintivo{ right:12px; bottom:64px; }
}
@media (max-width:767px){
  .info-preventivi-immagine-azioni .gb-pulsante{ width:100%; }
  /* il distintivo scende sotto la foto: sovrapposto coprirebbe mezza immagine */
  .info-preventivi-immagine-distintivo{
    position:static; margin:14px auto 0; width:fit-content; justify-content:center;
  }
}