/* =====================================================================
   h2.css - sistema di stile della home 2026 (slave homepage2)
   UNICO file di stile della home: ogni sezione usa SOLO queste classi
   e queste variabili. Niente stili una tantum, niente style="" inline.
   Font: Barlow / Barlow Condensed, gia' caricati dal tema divesystem2026.
   Effetti scritti da zero (ispirazione generica freefrontend.com):
   nessun codice copiato, nessuna licenza da citare.
   ===================================================================== */

:root{
  /* --- font --- */
  --h2-f-tit:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --h2-f-txt:'Barlow',Arial,Helvetica,sans-serif;

  /* --- scala dei testi (si adatta allo schermo, mai sotto il minimo) --- */
  --h2-t-over:clamp(13px,1.05vw,17px);    /* sopratitolo */
  --h2-t-hero:clamp(46px,5.4vw,96px);     /* titolo dell'apertura */
  --h2-t-tit:clamp(36px,4.2vw,72px);      /* titolo di sezione */
  --h2-t-tit2:clamp(24px,2vw,32px);       /* titolo di card / blocco piccolo */
  --h2-t-claim:clamp(18px,1.5vw,26px);    /* frase sotto il titolo */
  --h2-t-txt:clamp(16px,1.05vw,18px);     /* testo */
  --h2-t-pic:14px;                        /* note, didascalie */

  /* --- colori (gli stessi del tema) --- */
  --h2-blu:#09f;          /* bottoni, accenti */
  --h2-blu2:#06f;         /* bottone al passaggio; sopratitolo su chiaro (contrasto 4.9:1) */
  --h2-giallo:#fc0;       /* sopratitolo SOLO su scuro */
  --h2-inchiostro:#111;   /* testo su chiaro */
  --h2-grigio:#5c6670;    /* testo secondario su chiaro (contrasto 6:1) */
  --h2-chiaro:#f4f4f4;    /* fondo chiaro (come il tema) */
  --h2-linea:#e3e3e3;
  --h2-notte:#0b1015;     /* fondo scuro */
  --h2-nebbia:#c9d2da;    /* testo secondario su scuro */
  --h2-bianco:#fff;

  /* --- spaziature --- */
  --h2-sez:clamp(56px,7vw,120px);   /* aria fra una sezione e l'altra */
  --h2-dentro:clamp(20px,2.2vw,36px); /* aria dentro una sezione (fra titolo e contenuto, fra card) */
  --h2-lato:clamp(16px,4vw,48px);   /* margine laterale del testo */
  --h2-col:1320px;                  /* colonna massima (= --wrap del tema) */
  --h2-riga:60ch;                   /* righe di testo al massimo ~60 caratteri */

  /* --- angoli e ombre --- */
  --h2-r:8px;       /* card, foto, riquadri */
  --h2-r-btn:4px;   /* bottoni (= --raggio del tema) */
  --h2-ombra:0 1px 3px rgba(0,0,0,.08),0 14px 30px -16px rgba(0,0,0,.35);
  --h2-ombra-su:0 2px 6px rgba(0,0,0,.10),0 22px 44px -18px rgba(0,0,0,.45);

  /* --- movimento --- */
  --h2-curva:cubic-bezier(.2,.8,.2,1);
  --h2-curva2:cubic-bezier(.65,0,.35,1);
}

/* ---------- contenitori ---------- */
.h2{font-family:var(--h2-f-txt);color:var(--h2-inchiostro);float:left;clear:both;width:100%}
.h2 *,.h2 *:before,.h2 *:after{box-sizing:border-box}
.h2-sez{float:left;clear:both;width:100%;padding:var(--h2-sez) 0}
/* due sezioni chiare di fila: l'aria fra loro e' una sola --h2-sez */
.h2-sez:not(.h2-chiaro):not(.h2-scuro)+.h2-sez:not(.h2-chiaro):not(.h2-scuro){padding-top:0}
.h2-col{max-width:var(--h2-col);margin:0 auto;padding:0 var(--h2-lato)}
.h2-chiaro{background:var(--h2-chiaro)}
.h2-scuro{background:var(--h2-notte);color:var(--h2-bianco)}
/* fascia a tutta larghezza dello schermo (esce dalla colonna del tema) */
.h2-pieno{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
/* dentro una fascia piena la colonna recupera i 5 px di bordo di #columns del tema, cosi' si allinea alle altre */
.h2-pieno>.h2-col{padding-left:calc(var(--h2-lato) + 5px);padding-right:calc(var(--h2-lato) + 5px)}

/* ---------- testi ---------- */
.h2-over{display:block;font-family:var(--h2-f-tit);font-weight:700;font-size:var(--h2-t-over);letter-spacing:.2em;text-transform:uppercase;color:var(--h2-blu2);margin:0 0 .7em}
.h2-scuro .h2-over,.h2-su-foto .h2-over{color:var(--h2-giallo)}
.h2-tit,.h2-hero-tit{display:block;font-family:var(--h2-f-tit);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em;margin:0 0 .3em;color:inherit}
.h2-tit{font-size:var(--h2-t-tit)}
.h2-hero-tit{font-size:var(--h2-t-hero);line-height:.88}
.h2-su-foto .h2-tit,.h2-su-foto .h2-hero-tit{text-shadow:0 4px 30px rgba(0,0,0,.45)}
.h2-tit2{display:block;font-family:var(--h2-f-tit);font-weight:800;font-size:var(--h2-t-tit2);line-height:1;text-transform:uppercase;margin:0 0 .35em}
.h2-claim{display:block;font-family:var(--h2-f-txt);font-weight:500;font-size:var(--h2-t-claim);line-height:1.25;margin:0 0 1em;max-width:var(--h2-riga)}
.h2-txt{font-size:var(--h2-t-txt);line-height:1.55;color:var(--h2-grigio);margin:0 0 1.2em;max-width:var(--h2-riga)}
.h2-scuro .h2-txt,.h2-su-foto .h2-txt{color:var(--h2-nebbia)}
.h2-pic{font-size:var(--h2-t-pic);line-height:1.45;color:var(--h2-grigio)}
.h2-centro{text-align:center}.h2-centro .h2-claim,.h2-centro .h2-txt{margin-left:auto;margin-right:auto}
/* righe con parola chiave (quelle dell'apertura: "LEGGERA come un Trilaminato") */
.h2-righe{list-style:none;margin:0 0 1.4em;padding:0}
.h2-righe li{font-size:var(--h2-t-claim);line-height:1.2;margin:0 0 .5em;color:inherit}
.h2-righe b{position:relative;display:inline-block;font-family:var(--h2-f-tit);font-weight:800;font-size:1.45em;letter-spacing:.03em;text-transform:uppercase;margin-right:.35em}
.h2-righe b:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:2px;background:var(--h2-blu);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--h2-curva2) .9s}
.h2-visto .h2-righe b:after,.h2-senza-js .h2-righe b:after{transform:scaleX(1)}

/* ---------- bottone (uno solo: normale + grande) ---------- */
.h2-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 26px;border:0;border-radius:var(--h2-r-btn);background:var(--h2-blu);color:#fff;font-family:var(--h2-f-tit);font-weight:700;font-size:18px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,102,255,.9);transition:background .25s,box-shadow .25s,transform .25s}
.h2-btn i{font-style:normal;transition:transform .25s var(--h2-curva)}
/* riflesso che attraversa il bottone al passaggio del mouse */
.h2-btn:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(110deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .6s ease}
.h2-btn:hover,.h2-btn:focus-visible{background:var(--h2-blu2);color:#fff;text-decoration:none;box-shadow:0 14px 30px -12px rgba(0,102,255,.9);transform:translateY(-2px)}
.h2-btn:hover i,.h2-btn:focus-visible i{transform:translateX(5px)}
.h2-btn:hover:before{left:120%}
.h2-btn:focus-visible{outline:2px solid var(--h2-giallo);outline-offset:3px}
.h2-btn-grande{min-height:62px;padding:0 38px;font-size:clamp(17px,1.3vw,21px);gap:16px}
.h2-btn-grande i{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2)}
@media (max-width:480px){.h2-btn-grande{width:100%;padding:0 18px;white-space:normal;text-align:center}}
/* link testuale con freccia (dentro le card, non e' un bottone) */
.h2-link{font-family:var(--h2-f-txt);font-weight:600;font-size:var(--h2-t-txt);color:var(--h2-blu2);text-decoration:none}
.h2-link i{font-style:normal;display:inline-block;transition:transform .25s var(--h2-curva)}
.h2-link:hover{color:var(--h2-blu2);text-decoration:none}.h2-link:hover i{transform:translateX(4px)}

/* ---------- card (una sola: foto intera sopra, testo sotto) ---------- */
.h2-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--h2-dentro)}
.h2-griglia.h2-due{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:767px){.h2-griglia,.h2-griglia.h2-due{grid-template-columns:1fr}}
.h2-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--h2-r);background:#fff;box-shadow:var(--h2-ombra);color:var(--h2-inchiostro);text-decoration:none;transition:transform .35s var(--h2-curva),box-shadow .35s ease}
a.h2-card:hover{transform:translateY(-6px);box-shadow:var(--h2-ombra-su);color:var(--h2-inchiostro);text-decoration:none}
/* foto: SEMPRE intera, mai tagliata ne' ingrandita */
.h2-card-foto{display:block;background:var(--h2-chiaro);overflow:hidden}
.h2-card-foto img{display:block;width:100%;height:auto;transition:transform .6s var(--h2-curva)}
a.h2-card:hover .h2-card-foto img{transform:scale(1.03)}
.h2-card-corpo{display:flex;flex-direction:column;flex:1 1 auto;padding:clamp(18px,1.8vw,26px)}
.h2-card-corpo .h2-txt{font-size:16px;margin-bottom:1em}
.h2-card-corpo .h2-link{margin-top:auto}
a.h2-card:hover .h2-link i{transform:translateX(4px)}

/* ---------- comparsa del testo (una sola, per tutta la home) ----------
   Il JS mette .h2-js su <html> e .h2-visto quando il blocco entra nello schermo.
   Senza JS o con "riduci movimento" il testo e' subito visibile. */
.h2-js .h2-appare .h2-over{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--h2-curva2)}
.h2-js .h2-appare .h2-tit,.h2-js .h2-appare .h2-hero-tit,.h2-js .h2-appare .h2-tit2,
.h2-js .h2-appare .h2-claim,.h2-js .h2-appare .h2-txt,.h2-js .h2-appare .h2-righe li,.h2-js .h2-appare .h2-btn{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s var(--h2-curva)}
.h2-js .h2-appare.h2-visto .h2-over{clip-path:inset(0 0 0 0)}
.h2-js .h2-appare.h2-visto .h2-tit,.h2-js .h2-appare.h2-visto .h2-hero-tit,.h2-js .h2-appare.h2-visto .h2-tit2,
.h2-js .h2-appare.h2-visto .h2-claim,.h2-js .h2-appare.h2-visto .h2-txt,.h2-js .h2-appare.h2-visto .h2-righe li,.h2-js .h2-appare.h2-visto .h2-btn{opacity:1;transform:none}
.h2-js .h2-appare.h2-visto .h2-tit,.h2-js .h2-appare.h2-visto .h2-hero-tit,.h2-js .h2-appare.h2-visto .h2-tit2{transition-delay:.15s}
.h2-js .h2-appare.h2-visto .h2-claim,.h2-js .h2-appare.h2-visto .h2-righe li:nth-child(1){transition-delay:.35s}
.h2-js .h2-appare.h2-visto .h2-txt,.h2-js .h2-appare.h2-visto .h2-righe li:nth-child(2){transition-delay:.5s}
.h2-js .h2-appare.h2-visto .h2-righe li:nth-child(3){transition-delay:.65s}
.h2-js .h2-appare.h2-visto .h2-btn{transition-delay:.7s}

/* =====================================================================
   SISTEMA IMMAGINI
   Regole fisse: foto MAI ingrandite oltre la misura naturale, soggetto MAI tagliato.
   Ogni formato dice quali foto accetta (rapporto) e cosa succede sul telefono.
   Inventario completo: progetti/homepage2/lavoro/inventario_immagini.md
   ===================================================================== */
:root{
  --h2-testata:62px;                 /* testata del tema quando si scorre (128 -> 62 px) */
  --h2-bordo:clamp(12px,1.5vw,28px); /* margine e spazio dei formati larghi (coppia, mosaico, split) */
  --h2-largo:1558px;                 /* larghezza massima dei formati larghi = 2 x 765 px (foto "tall") + 28 px di spazio: le tall restano a misura naturale */
  --h2-striscia-h:clamp(170px,14vw,260px); /* altezza delle foto della striscia: bassa, cosi' i banner molto larghi (gift card 5.49) non riempiono da soli lo schermo */
}

/* --- base: una foto con eventuale testo sopra --- */
.h2-foto{display:block;position:relative;overflow:hidden;border-radius:var(--h2-r);background:var(--h2-notte)}
.h2-foto picture,.h2-foto img{display:block;width:100%;height:auto}  /* proporzioni originali */
a.h2-foto,a .h2-foto{color:#fff;text-decoration:none}
.h2-velo{position:absolute;inset:0;z-index:1;pointer-events:none}
/* sfumature: almeno 45% di scuro sotto il testo bianco */
.h2-velo-basso{background:linear-gradient(0deg,rgba(5,8,12,.85) 0%,rgba(5,8,12,.55) 28%,rgba(5,8,12,0) 58%)}
.h2-velo-sx{background:linear-gradient(90deg,rgba(5,8,12,.82) 0%,rgba(5,8,12,.5) 28%,rgba(5,8,12,0) 52%),linear-gradient(0deg,rgba(5,8,12,.45) 0%,rgba(5,8,12,0) 35%)}
.h2-velo-dx{background:linear-gradient(270deg,rgba(5,8,12,.82) 0%,rgba(5,8,12,.5) 28%,rgba(5,8,12,0) 52%),linear-gradient(0deg,rgba(5,8,12,.45) 0%,rgba(5,8,12,0) 35%)}
.h2-su-foto{position:absolute;z-index:2;color:#fff;left:var(--h2-lato);bottom:clamp(20px,7%,96px);width:min(560px,calc(100% - 2 * var(--h2-lato)))}
.h2-su-foto.h2-a-dx{left:auto;right:var(--h2-lato)}
.h2-su-foto .h2-txt{margin-bottom:1.2em}
.h2-su-foto span.h2-txt{display:block}
/* link "Scopri di piu'" su scuro: bianco (il blu su notte non si legge), giallo al passaggio */
.h2-su-foto .h2-link,.h2-scuro .h2-link{display:inline-block;color:#fff}
a:hover .h2-su-foto .h2-link,.h2-su-foto .h2-link:hover{color:var(--h2-giallo)}
a:hover .h2-su-foto .h2-link i{transform:translateX(4px)}

/* --- formato 1: TUTTO SCHERMO, da bordo a bordo ---
   Foto 2560x1080 (rapporto 2.37). Alta quanto lo schermo sotto la testata; per arrivarci si perde al massimo
   il 10% di sfondo per lato (soggetti sempre nel 20-80% centrale: vedi inventario). Mai tagliata sopra/sotto:
   se lo schermo e' piu' largo della foto, la cornice si allunga (altezza minima = altezza naturale della foto). */
.h2-schermo{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:var(--h2-notte);border-radius:0;
  --r:2.37;--rmin:1.9;
  height:max(calc(100vw / var(--r)),min(calc(100vh - var(--h2-testata)),calc(100vw / var(--rmin))));
  height:max(calc(100vw / var(--r)),min(calc(100svh - var(--h2-testata)),calc(100vw / var(--rmin))))}
.h2-schermo.h2-intera{--rmin:2.37}   /* foto con soggetto da bordo a bordo (pinne, azienda): nessun taglio */
.h2-schermo picture,.h2-schermo picture img,.h2-schermo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.h2-schermo .h2-su-foto{left:max(var(--h2-lato),calc((100vw - var(--h2-col)) / 2 + var(--h2-lato)));bottom:clamp(28px,10%,120px)}
.h2-schermo .h2-su-foto.h2-a-dx{left:auto;right:max(var(--h2-lato),calc((100vw - var(--h2-col)) / 2 + var(--h2-lato)))}
/* schermo verticale (telefono, tablet in piedi): versione "tall" della foto (765x724), intera, testo sotto */
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .h2-schermo{height:auto}
  .h2-schermo picture,.h2-schermo picture img,.h2-schermo>img{position:static;height:auto;object-fit:fill}
  .h2-schermo .h2-velo{display:none}
  .h2-schermo .h2-su-foto,.h2-schermo .h2-su-foto.h2-a-dx{position:static;width:auto;max-width:none;padding:24px var(--h2-lato) 30px;background:var(--h2-notte)}
}

/* --- contenitore dei formati larghi: quasi bordo a bordo, margini piccoli --- */
.h2-largo{position:relative;width:min(calc(100vw - 2 * var(--h2-bordo)),var(--h2-largo));margin-left:calc(50% - min(50vw - var(--h2-bordo),var(--h2-largo) / 2))}

/* --- formato 2: COPPIA - due foto dello stesso rapporto, affiancate ---
   Foto "tall" 765x724 (1.06) o 1006x667 (1.51). Telefono: una sotto l'altra. */
.h2-coppia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--h2-bordo)}
@media (max-width:767px){.h2-coppia{grid-template-columns:1fr}}

/* --- formato 3: SPLIT - meta' foto, meta' testo --- foto "tall" 765x724 a misura naturale */
.h2-split{display:grid;grid-template-columns:fit-content(765px) minmax(0,1fr);align-items:center;overflow:hidden;border-radius:var(--h2-r);background:var(--h2-notte);color:#fff}
.h2-split.h2-inverti{grid-template-columns:minmax(0,1fr) fit-content(765px)}
/* la colonna foto e' larga quanto la foto (mai oltre la misura naturale), al massimo 765 px */
.h2-split.h2-inverti>.h2-foto{order:2}
/* split invertito (testo a sinistra): a specchio dello split normale. Il blocco testo e' largo quanto il suo contenuto
   (paragrafo max 60 caratteri) e sta vicino alla foto, alla stessa distanza (il padding) dell'altro lato */
.h2-split.h2-inverti>.h2-split-testo{justify-self:end;width:fit-content;max-width:100%}
.h2-split>.h2-foto{border-radius:0}
.h2-split-testo{padding:clamp(28px,4.5vw,84px)}
@media (max-width:991px){.h2-split.h2-inverti>.h2-split-testo{justify-self:stretch;width:auto}.h2-split,.h2-split.h2-inverti{grid-template-columns:1fr}.h2-split.h2-inverti>.h2-foto{order:0}.h2-split>.h2-foto img{max-width:100%;width:auto;margin:0 auto}}

/* --- formato 4: MOSAICO - una foto "tall" (1.06) a sinistra, due 1200x540 (2.22) impilate a destra ---
   La colonna sinistra e' calcolata perche' le due altezze coincidano: nessun taglio. Telefono: in colonna. */
.h2-mosaico{display:grid;grid-template-columns:calc((100% - var(--h2-bordo)) * .4875 + var(--h2-bordo) * .5416) minmax(0,1fr);gap:var(--h2-bordo);align-items:start}
.h2-mosaico>:first-child{grid-row:span 2}
@media (max-width:767px){.h2-mosaico{grid-template-columns:1fr}.h2-mosaico>:first-child{grid-row:auto}}

/* --- formato 5: FILA DI CARD - .h2-griglia + .h2-card, foto tutte dello stesso rapporto (1200x540 = 2.22) --- */

/* --- formato 6: STRISCIA A SCORRIMENTO - foto di rapporti diversi alla STESSA altezza, larghezza naturale ---
   (gift card 5.49, istruttori 3.84, outlet 3.56, retail 2.22, a casa tua 1.78): nessuna foto tagliata.
   Si scorre col dito o con le frecce; "Scorri" e la sfumatura dicono che continua. */
.h2-striscia{position:relative;--h2-inizio:max(var(--h2-lato),calc((100% - var(--h2-col)) / 2 + var(--h2-lato)))}  /* la prima card parte dove parte la colonna (titoli e blocchi) */
.h2-binario{display:flex;gap:var(--h2-bordo);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px var(--h2-inizio) 14px;scroll-padding:0 var(--h2-inizio);-webkit-overflow-scrolling:touch}
.h2-binario::-webkit-scrollbar{display:none}
.h2-voce{display:block;flex:0 0 auto;width:min-content;scroll-snap-align:start;color:var(--h2-inchiostro);text-decoration:none;-webkit-user-drag:none}
.h2-voce .h2-foto{display:block;height:var(--h2-striscia-h)}
.h2-voce .h2-foto picture,.h2-voce .h2-foto img{height:100%;width:auto;max-width:none;-webkit-user-drag:none;user-select:none}
.h2-voce .h2-tit2{display:block;margin:.6em 0 0}
/* striscia a card UGUALI (home, 2026-10-16): stessa larghezza per tutte; cornice di rapporto fisso, la foto riempie
   con un taglio leggero (soggetto sempre visibile: data-soggetto / data-soggetto-y, controllato da qa_h2.py).
   .h2-voci-222 = cornice 2.22 (Servizi), .h2-voci-150 = cornice 1.5 (News). Inquadratura: .h2-pos-sx / -dx / -57 */
.h2-voci-222{--h2-vr:2.22}.h2-voci-150{--h2-vr:1.5}
.h2-voci-222 .h2-voce,.h2-voci-150 .h2-voce{width:calc(var(--h2-striscia-h) * var(--h2-vr))}
.h2-voci-222 .h2-voce .h2-foto img,.h2-voci-150 .h2-voce .h2-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.h2-voce .h2-foto img.h2-pos-sx{object-position:0 50%}.h2-voce .h2-foto img.h2-pos-dx{object-position:100% 50%}.h2-voce .h2-foto img.h2-pos-57{object-position:57% 50%}
/* sottotesto facoltativo: va a capo alla larghezza della foto */
.h2-voce .h2-txt{display:block;font-size:15px;line-height:1.45;margin:.35em 0 0}
.h2-voce:hover{color:var(--h2-inchiostro);text-decoration:none}
/* trascinamento col mouse: niente aggancio mentre si trascina, cursore a mano */
@media (hover:hover) and (pointer:fine){.h2-binario{cursor:grab}}
.h2-binario.h2-trascina{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.h2-binario.h2-trascina .h2-voce{pointer-events:none}
.h2-striscia:before,.h2-striscia:after{content:"";position:absolute;top:0;bottom:0;width:clamp(30px,6vw,90px);z-index:2;pointer-events:none;transition:opacity .3s}
.h2-striscia:before{left:0;background:linear-gradient(90deg,var(--h2-chiaro),rgba(244,244,244,0));opacity:0}
.h2-striscia:after{right:0;background:linear-gradient(270deg,var(--h2-chiaro),rgba(244,244,244,0))}
.h2-striscia.h2-mezzo:before{opacity:1}.h2-striscia.h2-fine:after{opacity:0}
/* frecce: cerchio blu pieno come il bottone, freccia bianca spessa, anello bianco: si vedono su chiaro e su foto */
.h2-freccia{position:absolute;top:calc(4px + var(--h2-striscia-h) / 2);z-index:3;display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin-top:-30px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--h2-blu);color:#fff;cursor:pointer;box-shadow:0 10px 26px -8px rgba(0,60,140,.65),0 0 0 1px rgba(0,0,0,.06);transition:opacity .3s,background .2s,transform .25s var(--h2-curva)}
.h2-freccia svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--h2-curva)}
.h2-freccia:hover,.h2-freccia:focus-visible{background:var(--h2-blu2);transform:scale(1.08)}
.h2-freccia-sx:hover svg{transform:translateX(-3px)}.h2-freccia-dx:hover svg{transform:translateX(3px)}
.h2-freccia:focus-visible{outline:2px solid var(--h2-giallo);outline-offset:3px}
.h2-freccia-sx{left:max(10px,calc(var(--h2-inizio) - 30px))}.h2-freccia-dx{right:max(10px,calc(var(--h2-inizio) - 30px))}
.h2-striscia:not(.h2-mezzo) .h2-freccia-sx,.h2-striscia.h2-fine .h2-freccia-dx{opacity:0;pointer-events:none}
@media (max-width:767px){.h2-freccia{width:48px;height:48px;margin-top:-24px;border-width:2px}.h2-freccia svg{width:22px;height:22px}}
.h2-scorri{display:inline-flex;align-items:center;gap:10px;font-family:var(--h2-f-tit);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--h2-grigio)}
.h2-scorri i{display:block;width:34px;height:2px;background:var(--h2-blu);position:relative;animation:h2-spingi 1.6s ease-in-out infinite}
.h2-scorri i:after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--h2-blu);border-right:2px solid var(--h2-blu);transform:rotate(45deg)}
@keyframes h2-spingi{0%,100%{transform:none}50%{transform:translateX(8px)}}

/* --- trattamenti delle foto (uguali in tutta la home) ---
   comparsa con maschera: la foto si apre dal centro e si assesta (parte al 106% e torna al 100%, misura naturale)
   passaggio del mouse: solo sulle foto cliccabili, avvicinamento 3%
   parallasse leggera: si muove il TESTO sulla foto, non la foto (che resterebbe tagliata o ingrandita) */
.h2-js .h2-rivela img{clip-path:inset(10% 14% 10% 14%);transform:scale(1.06);transition:clip-path 1.3s var(--h2-curva2),transform 2s var(--h2-curva)}
.h2-js .h2-rivela.h2-visto img{clip-path:inset(0 0 0 0);transform:none}
a.h2-foto img,a .h2-foto img{transition:transform .7s var(--h2-curva),clip-path 1.3s var(--h2-curva2)}
a.h2-foto:hover img,a:hover .h2-foto img{transform:scale(1.03)}
.h2-parallasse .h2-su-foto{transform:translate3d(0,var(--h2-p,0px),0)}

/* =====================================================================
   SEZIONE 1 - APERTURA (la prima immagine della home: Solo N Dyneema + Quickly MoBi, da alt7)
   Direttiva 1: immagine un po' piu' alta di alt7, ma le due promo sotto si devono intravedere
   sopra la piega in tutte le visualizzazioni.
   Desktop (>=992): alta quanto lo schermo meno la testata piena (128 px) e meno --h2-sbircia
   (la parte di promo che deve restare visibile); mai tagliata sopra/sotto (altezza minima = altezza
   naturale della foto 2.37), ai lati al massimo il 10% di sfondo. alt7: 1920 858 / 1440 678 / 1366 546 px.
   Tablet e telefono: foto sopra (piena, senza testo), sotto il testo della Dyneema su fondo notte
   (il Quickly MoBi e' nella foto; il suo testo si legge da 992 px in su, come in alt7).
   ===================================================================== */
:root{--h2-testata-piena:128px;--h2-sbircia:64px;--h2-stacco-promo:16px}
.h2-apertura{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:var(--h2-notte);color:#fff;
  --r:2.37;--rmin:1.9;
  height:max(calc(100vw / var(--r)),min(calc(100vh - var(--h2-testata-piena) - var(--h2-sbircia) - var(--h2-stacco-promo)),calc(100vw / var(--rmin))));
  height:max(calc(100vw / var(--r)),min(calc(100svh - var(--h2-testata-piena) - var(--h2-sbircia) - var(--h2-stacco-promo)),calc(100vw / var(--rmin))))}
.h2-apertura picture,.h2-apertura picture img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* velo su entrambi i lati (i testi stanno ai lati del soggetto) + un filo dal basso; >=45% sotto il testo */
.h2-velo-lati{background:linear-gradient(90deg,rgba(5,8,12,.82) 0%,rgba(5,8,12,.55) 24%,rgba(5,8,12,0) 38%,rgba(5,8,12,0) 62%,rgba(5,8,12,.55) 76%,rgba(5,8,12,.82) 100%),linear-gradient(0deg,rgba(5,8,12,.5) 0%,rgba(5,8,12,0) 32%)}
/* i due testi, verso il centro, a ridosso del soggetto (alt7: right/left 65%, larghi max 25%) */
.h2-apertura .h2-su-foto{bottom:10%;width:auto;max-width:25%}
.h2-apertura .h2-ap-sx{left:auto;right:65%;text-align:right}
.h2-apertura .h2-ap-dx{left:65%;right:auto;text-align:left}
.h2-apertura .h2-hero-tit{white-space:nowrap}
.h2-apertura .h2-righe{display:table;text-align:left;margin-bottom:1.3em}
.h2-apertura .h2-ap-sx .h2-righe{margin-left:auto}
.h2-apertura .h2-righe li{font-size:clamp(15px,1.2vw,23px);white-space:nowrap;color:var(--h2-nebbia)}
.h2-apertura .h2-righe b{color:#fff}
/* parole chiave in colonna, allineate a destra: stesso spazio fra parola e frase su ogni riga */
.h2-righe.h2-colonna b{min-width:4.3em;text-align:right}
/* lato destro dell'apertura (Quickly MoBi): a specchio, parole chiave allineate a SINISTRA sul filo del titolo, sottolineatura dallo stesso filo */
.h2-apertura .h2-ap-dx .h2-righe.h2-colonna b{min-width:0;text-align:left}   /* niente colonna: la frase segue subito la parola (stesso spazio del lato Dyneema), sottolineatura solo sotto la parola */
/* frase che continua il sopratitolo ("Il GAV perfetto non esiste, / Quickly MoBi / ma lui ci va molto vicino."): stesso giallo */
.h2-claim.h2-segue{color:var(--h2-giallo);font-size:clamp(17px,1.4vw,27px);margin:-.1em 0 .8em}
/* ingresso: la foto si apre dal centro (come alt7), poi i testi (comparsa standard .h2-appare) e i due blocchi scivolano verso il centro */
.h2-js .h2-apertura picture{clip-path:inset(0 31% 0 31% round 14px);transform:scale(1.04);transition:clip-path 1.6s var(--h2-curva2) .2s,transform 2.4s var(--h2-curva) .2s}
.h2-js .h2-apertura.h2-aperta picture{clip-path:inset(0 0 0 0 round 0);transform:none}
.h2-js .h2-apertura .h2-velo{opacity:0;transition:opacity 1s ease 1.2s}.h2-js .h2-apertura.h2-aperta .h2-velo{opacity:1}
.h2-js .h2-apertura .h2-ap-sx,.h2-js .h2-apertura .h2-ap-dx{transition:transform 1.2s var(--h2-curva)}
.h2-js .h2-apertura:not(.h2-visto) .h2-ap-sx{transform:translateX(-30px)}.h2-js .h2-apertura:not(.h2-visto) .h2-ap-dx{transform:translateX(30px)}

/* invito a scorrere: in basso al centro; su tablet/telefono fisso in basso finche' non si scorre */
.h2-giu{position:absolute;z-index:8;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:var(--h2-f-txt);font-weight:500;font-size:13px;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .8s ease}
.h2-js .h2-apertura:not(.h2-visto) .h2-giu{opacity:0}
.h2-giu:hover,.h2-giu:focus{color:var(--h2-giallo);text-decoration:none}
.h2-giu i{position:relative;display:block;width:2px;height:56px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.h2-giu i:before{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:linear-gradient(180deg,rgba(255,204,0,0),var(--h2-giallo));animation:h2-giu 1.9s cubic-bezier(.6,0,.4,1) infinite}
.h2-giu:after{content:"";width:9px;height:9px;margin-top:-16px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);opacity:.85}
@keyframes h2-giu{0%{top:-40%}70%,100%{top:100%}}
.h2-giu.h2-via-su{opacity:0!important;pointer-events:none;transition:opacity .4s}

/* le due promo subito sotto: coppia di banner 1920x540 (3.56), interi, quasi bordo a bordo */
.h2-promo{margin-top:var(--h2-stacco-promo)}
.h2-largo.h2-tutto{width:calc(100vw - 2 * var(--h2-bordo));margin-left:calc(50% - 50vw + var(--h2-bordo))}

@media (max-width:991px){
  :root{--h2-testata-piena:128px}
  .h2-apertura{height:auto;display:flex;flex-direction:column}
  .h2-apertura picture{position:relative;inset:auto;height:min(62vw,520px)}
  .h2-apertura picture img{position:absolute}
  .h2-apertura .h2-velo{bottom:auto;height:min(62vw,520px);background:linear-gradient(0deg,var(--h2-notte) 0%,rgba(11,16,21,0) 28%)}
  .h2-apertura .h2-ap-dx{display:none}
  .h2-apertura .h2-hero-tit br{display:none}   /* su una riga sola, come alt7 */
  .h2-apertura .h2-ap-sx{position:static;max-width:none;text-align:left;padding:6px var(--h2-lato) 26px;transform:none!important}
  .h2-apertura .h2-righe,.h2-apertura .h2-ap-sx .h2-righe{display:block;margin-left:0}
  .h2-righe.h2-colonna b{min-width:0;text-align:left}
  .h2-apertura .h2-righe li{display:inline-block;margin-right:18px}
  .h2-js .h2-apertura picture{clip-path:inset(0 18% 0 18% round 14px)}
  .h2-giu{position:fixed;bottom:16px;z-index:1000;gap:9px;font-size:12px;padding:12px 22px 10px;border-radius:30px;background:rgba(11,16,21,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:1}
  .h2-giu i{height:30px}.h2-giu:after{width:7px;height:7px;margin-top:-13px}
}
@media (max-width:767px){
  .h2-apertura picture{height:100vw}
  .h2-apertura .h2-velo{height:100vw}
  .h2-apertura .h2-ap-sx{padding:2px var(--h2-lato) 20px}
  .h2-apertura .h2-hero-tit{font-size:44px;margin-bottom:.2em}
  .h2-apertura .h2-righe{margin-bottom:16px}
  .h2-apertura .h2-righe li{display:block;font-size:15px;margin:0 0 6px}
  .h2-apertura .h2-btn{min-height:44px;font-size:16px;padding:0 20px}
  .h2-js .h2-apertura picture{clip-path:inset(0 12% 0 12% round 14px)}
}
@media (prefers-reduced-motion:reduce){.h2-js .h2-apertura picture{clip-path:none!important;transform:none!important}.h2-giu i:before{animation:none;top:60%}}

/* due promo sotto l'apertura: alte come in alt7 (500 px; 300 sotto 992). Qui, e SOLO qui, Giacomo permette il taglio
   ai lati (2026-10-16): banner 1920x540 a riempire, contenuto del banner nel 36-64% centrale, sempre visibile. */
.h2-promo .h2-foto{height:500px}
.h2-promo .h2-foto img{height:100%;object-fit:cover;object-position:50% 50%}
@media (max-width:991px){.h2-promo .h2-foto{height:300px}}
/* box extra delle offerte sotto le due promo (Giacomo 16/10): riga intera, quasi a tutta larghezza, foto intera (1920x250; telefono 600x248) */
.h2-promo .h2-foto.h2-promo-largo{grid-column:1 / -1;justify-self:center;width:calc(100% - 4 * var(--h2-bordo));max-width:1920px;height:auto}
.h2-promo .h2-foto.h2-promo-largo img{height:auto;object-fit:fill}

/* =====================================================================
   COMPONENTI DELLE SEZIONI
   ===================================================================== */
/* testata di sezione: lo stacco fra le sezioni = spazio (--h2-sez) + questo titolo (niente separatori) */
.h2-testa{max-width:var(--h2-col);margin:0 auto var(--h2-dentro);padding:0 var(--h2-lato)}
.h2-testa .h2-tit{margin-bottom:.15em}
.h2-testa .h2-claim{margin-bottom:0;color:var(--h2-grigio)}
/* un blocco che segue un altro nella stessa sezione: stacco piccolo, uguale ai margini dei formati larghi */
.h2-poi{margin-top:var(--h2-bordo)}
/* foto cliccabili intere (link a tutta superficie) */
a.h2-schermo,a.h2-seq-scena{display:block;color:#fff;text-decoration:none}
a.h2-schermo:hover,a.h2-seq-scena:hover{color:#fff;text-decoration:none}
a.h2-schermo:hover .h2-btn,a.h2-seq-scena:hover .h2-btn{background:var(--h2-blu2)}
/* bottone di chiusura di un gruppo (mute, computer, GAV): centrato */
.h2-chiudi{display:flex;justify-content:center;padding:var(--h2-dentro) var(--h2-lato) 0}

/* AFFIANCA: foto (o card) di rapporti diversi sulla stessa riga, STESSA altezza, nessun taglio.
   Ogni elemento prende una larghezza proporzionale al suo rapporto: classe .h2-r<rapporto x100>.
   Telefono: una sotto l'altra. */
.h2-affianca{display:flex;gap:var(--h2-bordo);align-items:stretch}
.h2-affianca>*{flex:1 1 0;min-width:0}
.h2-affianca>.h2-r106{flex-grow:1.06}.h2-affianca>.h2-r151{flex-grow:1.51}.h2-affianca>.h2-r160{flex-grow:1.6}.h2-affianca>.h2-r173{flex-grow:1.73}
.h2-affianca>.h2-r222{flex-grow:2.22}.h2-affianca>.h2-r356{flex-grow:3.56}
/* larghezze massime perche' nessuna foto superi la sua misura naturale */
/* nella home tutti i blocchi non tutto schermo usano lo stesso contenitore .h2-riquadro (= colonna del sito, come i titoli) */
@media (max-width:767px){.h2-affianca{flex-direction:column}.h2-affianca>*{flex:none}}
/* card dentro "affianca": la foto ha la stessa altezza per tutte, i testi sotto si allineano */
.h2-affianca>.h2-card .h2-card-foto img{width:100%;height:auto}

/* riquadro = IL contenitore dei blocchi della home: stessa larghezza e stessi margini dei titoli di sezione,
   a tutti i formati (max 1320 px, margine --h2-lato). Nessuna foto supera la sua misura naturale. */
.h2-riquadro{max-width:var(--h2-col);margin-left:auto;margin-right:auto;padding:0 var(--h2-lato)}
/* testo SOTTO la foto, su fondo notte, a tutte le larghezze: per le foto basse con testo lungo (Su misura, 4.27) */
.h2-foto .h2-su-foto.h2-sotto{position:static;width:auto;max-width:none;padding:clamp(18px,2.2vw,32px) clamp(18px,2.6vw,40px);background:var(--h2-notte)}
.h2-foto:has(.h2-sotto) .h2-velo{display:none}
.h2-foto .h2-sotto .h2-txt{max-width:none}
@media (max-width:767px){
  .h2-foto .h2-su-foto.h2-sotto-tel{position:static;width:auto;max-width:none;padding:18px var(--h2-lato) 22px;background:var(--h2-notte)}
  .h2-foto:has(.h2-sotto-tel) .h2-velo{display:none}
}

/* banner con la scritta dentro (Semistagna 1920x540): sotto 992 px inquadratura piu' alta e piu' stretta, come le promo,
   cosi' la scritta resta leggibile; il contenuto del banner (33-67% della larghezza) resta tutto visibile */
@media (max-width:991px){.h2-banner .h2-foto{height:300px}.h2-banner .h2-foto img{height:100%;object-fit:cover;object-position:50% 50%}}
@media (max-width:767px){.h2-banner .h2-foto{height:auto}}
@media (max-width:767px){.h2-banner .h2-foto{height:auto;aspect-ratio:1}}
/* sul telefono inquadratura quadrata sul centro del banner (36-64%): la scritta del banner diventa leggibile */

/* riga video: video (circa 62%) + testo a fianco, nello stesso contenitore dei blocchi; sotto 992 px il testo va sotto */
.h2-video-riga{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.h2-video-riga .h2-video{max-width:none}
@media (max-width:991px){.h2-video-riga{grid-template-columns:1fr}}
/* VIDEO al clic: anteprima con pulsante; al clic diventa il video (youtube-nocookie) e parte */
.h2-video{position:relative;display:block;width:100%;max-width:1320px;margin:0 auto;aspect-ratio:16/9;border:0;padding:0;border-radius:var(--h2-r);overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--h2-ombra)}
.h2-video img,.h2-video iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}
.h2-video img{object-fit:cover;transition:transform .7s var(--h2-curva),filter .4s}
.h2-video:hover img{transform:scale(1.02);filter:brightness(.9)}
.h2-play{position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:clamp(72px,7vw,104px);height:clamp(72px,7vw,104px);margin:calc(clamp(72px,7vw,104px) / -2) 0 0 calc(clamp(72px,7vw,104px) / -2);border:3px solid #fff;border-radius:50%;background:var(--h2-blu);box-shadow:0 14px 34px -10px rgba(0,60,140,.8);transition:transform .3s var(--h2-curva),background .2s}
.h2-play:before{content:"";margin-left:8%;border-style:solid;border-width:clamp(13px,1.3vw,19px) 0 clamp(13px,1.3vw,19px) clamp(22px,2.1vw,31px);border-color:transparent transparent transparent #fff}
@media (max-width:767px){.h2-video-tit{display:none}}   /* sul telefono la didascalia coprirebbe la scritta dell'anteprima */
.h2-video:hover .h2-play{transform:scale(1.08);background:var(--h2-blu2)}
.h2-video-tit{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px clamp(18px,2.4vw,36px) clamp(16px,2vw,28px);background:linear-gradient(0deg,rgba(5,8,12,.82),rgba(5,8,12,0));color:#fff;text-align:left;font-family:var(--h2-f-tit);font-weight:700;font-size:var(--h2-t-over);letter-spacing:.2em;text-transform:uppercase}
.h2-video-tit b{color:var(--h2-giallo)}

/* SEQUENZA Militari -> Azienda (direttiva 14). Senza JS, sul telefono e con "riduci movimento": due foto una sotto l'altra.
   Con .h2-seq-attiva (lo mette h2.js su schermi orizzontali da 768 px): sezione alta 400vh e palco fisso:
   la scheda Militari entra piccola, si allarga a tutto schermo e compare il testo; UN gesto di rotellina porta alla
   scheda Azienda (testo animato parola per parola); continuando, la scheda si rimpicciolisce come era entrata. */
.h2-sequenza{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
.h2-seq-palco{display:grid;gap:var(--h2-bordo)}
.h2-seq-scena{position:relative;overflow:hidden;background:var(--h2-notte)}
.h2-sequenza.h2-seq-attiva{height:400vh}
/* palco: alto quanto lo schermo, ma non oltre 100vw/1.9 (cosi' ai lati si perde al massimo il 10% di sfondo);
   se lo schermo e' piu' alto, il palco resta centrato in verticale */
.h2-seq-attiva .h2-seq-palco{display:block;position:sticky;overflow:hidden;background:var(--h2-chiaro);
  --alto:min(calc(100vh - var(--h2-testata)),calc(100vw / 1.9));
  height:var(--alto);top:calc(var(--h2-testata) + (100vh - var(--h2-testata) - var(--alto)) / 2)}
.h2-seq-attiva .h2-seq-scena{position:absolute;inset:0;will-change:transform;transform-origin:50% 50%}
.h2-seq-attiva .h2-seq-scena picture,.h2-seq-attiva .h2-seq-scena picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-seq-attiva .h2-seq-az{transform:translateY(100%)}
/* fuori dalla sequenza attiva ogni scena e' una foto "tutto schermo" normale */
.h2-sequenza:not(.h2-seq-attiva) .h2-seq-scena picture img{display:block;width:100%;height:auto}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){
  .h2-sequenza:not(.h2-seq-attiva) .h2-seq-scena .h2-velo{display:none}
  .h2-sequenza:not(.h2-seq-attiva) .h2-seq-scena .h2-su-foto{position:static;width:auto;max-width:none;padding:24px var(--h2-lato) 30px;background:var(--h2-notte)}
}
@media (min-width:768px){.h2-sequenza:not(.h2-seq-attiva) .h2-seq-scena .h2-su-foto{left:max(var(--h2-lato),calc((100vw - var(--h2-col)) / 2 + var(--h2-lato)))}}
.h2-seq-attiva .h2-seq-scena .h2-su-foto{left:max(var(--h2-lato),calc((100vw - var(--h2-col)) / 2 + var(--h2-lato)));bottom:clamp(28px,10%,120px)}
/* Azienda: il logo "30 years" della foto sta al 46-56% della larghezza: il testo non deve toccarlo.
   Il blocco testo finisce al 40% dello schermo (la foto e' larga quanto lo schermo, tagliata al massimo 10% per lato) */
.h2-seq-az .h2-su-foto{max-width:calc(40vw - max(var(--h2-lato),calc((100vw - var(--h2-col)) / 2 + var(--h2-lato))))}
@media (max-width:767px),(orientation:portrait) and (max-width:1100px){.h2-sequenza:not(.h2-seq-attiva) .h2-seq-az .h2-su-foto{max-width:none}}
/* testo animato della scheda Azienda: parola per parola */
.h2-js .h2-parole .p{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .5s ease,transform .6s var(--h2-curva)}
.h2-js .h2-visto .h2-parole .p{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.h2-js .h2-parole .p{opacity:1!important;transform:none!important}}

/* =====================================================================
   ANIMAZIONE "COME IL TXT" (online.txt, DS Restyle v2) per i blocchi h2 dentro la home di Giacomo:
   stessi tempi e curve. Box: sale di 28 px e compare (.7s). Testi: salgono di 16 px uno dopo l'altro
   (.55s; sopratitolo .05s, titolo .16s, frase/righe/testo .27s, bottone/link .38s).
   La classe .h2-anim su <html> la mette h2.js solo se il movimento e' permesso; .in-view quando entra (soglia .15, -5%).
   ===================================================================== */
.h2-anim .h2-anim-box{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.9,.32,1),transform .7s cubic-bezier(.22,.9,.32,1)}
.h2-anim .h2-anim-box.h2-da-sx{transform:translateX(-48px);transition-duration:1s}.h2-anim .h2-anim-box.h2-da-dx{transform:translateX(48px);transition-duration:1s}
.h2-anim .h2-anim-box.in-view{opacity:1;transform:none}
.h2-anim .h2-anim-txt :is(.h2-over,.h2-tit,.h2-hero-tit,.h2-tit2,.h2-claim,.h2-righe,.h2-txt,.h2-btn,.h2-link){opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.h2-anim .h2-anim-txt.in-view :is(.h2-over,.h2-tit,.h2-hero-tit,.h2-tit2,.h2-claim,.h2-righe,.h2-txt,.h2-btn,.h2-link){opacity:1;transform:none}
.h2-anim .h2-anim-txt.in-view .h2-over{transition-delay:.05s}
.h2-anim .h2-anim-txt.in-view :is(.h2-tit,.h2-hero-tit,.h2-tit2){transition-delay:.16s}
.h2-anim .h2-anim-txt.in-view :is(.h2-claim,.h2-righe,.h2-txt){transition-delay:.27s}
.h2-anim .h2-anim-txt.in-view :is(.h2-btn,.h2-link){transition-delay:.38s}
/* sottolineatura delle parole chiave (come nell'apertura): si disegna dopo le righe */
.h2-anim-txt.in-view .h2-righe b:after,html:not(.h2-anim) .h2-anim-txt .h2-righe b:after{transform:scaleX(1)}
/* testi del txt che devono animarsi quando il testo stesso e' visibile (iX3M2): finche' manca .h2-ora restano nascosti */
.h2-anim .h2-tardi:not(.h2-ora) :is(.thw_overhead,.thw_headline,.thw_subhead,.thw_links){opacity:0!important;transform:translateY(16px)!important}
/* box GAV Quickly: testo SOPRA l'immagine, nella fascia bianca in alto (il GAV comincia al 27% dell'altezza) */
.h2-foto .h2-su-foto.h2-su-chiaro{top:clamp(12px,3%,30px);bottom:auto;left:clamp(14px,4%,40px);right:clamp(14px,4%,40px);width:auto;max-width:none;color:var(--h2-inchiostro)}
.h2-su-chiaro .h2-tit2{margin-bottom:.2em}.h2-su-chiaro .h2-txt .h2-link{display:inline;font-size:inherit;white-space:nowrap}
.h2-su-chiaro .h2-over{color:var(--h2-blu2)}.h2-su-chiaro .h2-txt{color:var(--h2-grigio);font-size:clamp(14px,1vw,16px);margin-bottom:.6em}
.h2-su-chiaro .h2-link{color:var(--h2-blu2)}
.h2-foto.h2-sfondo-bianco{background:#fff}
@media (max-width:991px){.h2-foto .h2-su-foto.h2-su-chiaro{position:static;width:auto;padding:16px var(--h2-lato) 20px;background:#fff}.h2-affianca:has(.h2-su-chiaro){flex-direction:column}.h2-affianca:has(.h2-su-chiaro)>*{flex:none}}
/* News del txt a schede: Scorri sopra la striscia, sul filo della prima scheda */
.h2-scorri-riga{margin:0 0 10px;padding:0 max(var(--h2-lato),calc((100% - var(--h2-col)) / 2 + var(--h2-lato)))}

/* blocchi h2 dentro la home di Giacomo: stessa larghezza delle righe del txt (box 1x2, foto 1x1) */
/* le righe di box del txt arrivano al bordo dello schermo (oltre e' nascosto): i blocchi h2 fanno lo stesso,
   da bordo a bordo, senza tagliare niente (larghezza 100vw) */
.h2-come-txt{float:left;clear:both;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.h2-come-txt>.h2-promo.h2-largo.h2-tutto{width:100%;margin-left:0}
/* Quickly: video + testo e i due box sotto con la stessa larghezza, margine piccolo ai lati (il testo non tocca il bordo) */
.h2-come-txt>.h2-video-largo,.h2-come-txt>.h2-affianca{padding:0 var(--h2-bordo)}
/* riga video Quickly larga: video fino alla misura naturale dell'anteprima (1280 px), testo a fianco */
.h2-video-largo{display:grid;grid-template-columns:minmax(0,1280px) minmax(260px,1fr);gap:clamp(20px,2.6vw,56px);align-items:center}
@media (max-width:1199px){.h2-video-largo{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}}
@media (max-width:767px){.h2-video-largo{grid-template-columns:1fr}}
.h2-video-largo .h2-video{max-width:none}
.h2-video-testo{display:block;color:var(--h2-inchiostro);text-decoration:none}.h2-video-testo:hover{color:var(--h2-inchiostro);text-decoration:none}
a.h2-split{color:#fff;text-decoration:none}a.h2-split:hover{color:#fff;text-decoration:none}a.h2-split:hover .h2-btn,a.h2-video-testo:hover .h2-btn{background:var(--h2-blu2)}

/* SEPARATORI: nessuno (Giacomo 2026-10-16). Lo stacco fra le sezioni = spazio (--h2-sez) + titolo di sezione.
   Le proposte rifiutate sono in progetti/homepage2/lavoro/archivio_separatori/. */

/* senza movimento se il sistema lo chiede */
@media (prefers-reduced-motion:reduce){
  .h2 *,.h2 *:before,.h2 *:after{transition:none!important;animation:none!important}
  .h2-js .h2-appare .h2-over{clip-path:none}
  .h2-js .h2-appare *{opacity:1!important;transform:none!important}
  .h2-js .h2-rivela img{clip-path:none!important;transform:none!important}
  .h2-parallasse .h2-su-foto{transform:none!important}
}

/* LINGUE (DEU/ENG/FRE, Giacomo 16/10) */
/* due box sotto l'apertura con le proporzioni delle loro immagini (es. 1600x1000 e 1300x1000): stessa altezza, nessun taglio */
.h2-promo.h2-promo-misura .h2-foto{height:auto}
.h2-promo.h2-promo-misura .h2-foto img{height:auto;object-fit:fill}
/* mai piu' alti delle promo IT (500 px; 300 sotto 992; Giacomo 20/10): la riga si stringe e si centra, foto intere.
   --h2-promo-r = somma dei rapporti larghezza/altezza delle due foto (1600x1000 + 1300x1000 = 1.6 + 1.3); 3 bordi = 2 lati + spazio */
.h2-come-txt>.h2-promo.h2-largo.h2-tutto.h2-promo-misura{--h2-promo-r:2.9;box-sizing:border-box;max-width:calc(500px * var(--h2-promo-r) + 3 * var(--h2-bordo));margin-left:auto;margin-right:auto}
@media (max-width:991px){.h2-come-txt>.h2-promo.h2-largo.h2-tutto.h2-promo-misura{max-width:calc(300px * var(--h2-promo-r) + 3 * var(--h2-bordo))}}
@media (max-width:767px){.h2-come-txt>.h2-promo.h2-largo.h2-tutto.h2-promo-misura{max-width:none}.h2-promo.h2-promo-misura>.h2-foto{width:100%;max-width:300px;align-self:center}}
.h2-affianca>.h2-r130{flex-grow:1.3}
/* testi dei box affiancati del txt (Dummy Box + Made to Measure) con i font h2, sulla stessa fascia scura del txt */
.h2-box-coppia .h2-box-txt{font-family:var(--h2-f-txt);color:#fff;text-align:center;padding:clamp(16px,2vw,30px) clamp(16px,3vw,48px)!important;text-shadow:none}
.h2-box-coppia .h2-box-txt .h2-over{color:var(--h2-giallo);margin:0 0 .5em}
.h2-box-coppia .h2-box-txt .h2-tit2{color:#fff}
.h2-box-coppia .h2-box-txt .h2-txt{display:block;color:var(--h2-nebbia);margin:0 auto 1em;max-width:34em}
.h2-box-coppia .h2-box-txt .h2-link{display:inline-block;color:#fff}
.h2-box-coppia a:hover .h2-box-txt .h2-link{color:var(--h2-giallo)}
.h2-box-coppia a:hover .h2-box-txt .h2-link i{transform:translateX(4px)}
/* riga Quickly + Key Tech: il ritaglio Key Tech e' 864x540, quindi ogni box al massimo 864 px (mai ingrandito) */
.h2-come-txt>.h2-affianca.h2-max864{box-sizing:border-box;max-width:calc(1728px + 3 * var(--h2-bordo));margin-left:auto;margin-right:auto}
/* Pinne, Militari, Azienda (Giacomo 16/10): l'altezza segue la finestra; misure dei testi per lingua generate da lavoro/alto_schermo.py */
@media (min-width:992px){
  .h2-alto-schermo{--H:min(var(--hmax,1080px),calc(100vh - 62px),calc(100vw / var(--f) / 2.37037))}
  @supports (height:100svh){.h2-alto-schermo{--H:min(var(--hmax,1080px),calc(100svh - 62px),calc(100vw / var(--f) / 2.37037))}}
  .h2-alto-schermo .ghomewrapper_main{height:var(--H)!important;width:calc(var(--H) * 2.37037)!important;flex:none;container-type:size;background-size:cover!important;background-position:50% 50%!important}
  .h2-alto-schermo .thomewrapper{top:calc(47 * 1cqh / 10.8)!important}
  .h2-alto-schermo .thw_links{font-size:calc(21 * 1cqh / 10.8)!important}
}
@media (max-width:991px){
  .h2-alto-schermo{--w:min(100%,765px,calc((100vh - 440px) / .94641))}
  @supports (height:100svh){.h2-alto-schermo{--w:min(100%,765px,calc((100svh - 440px) / .94641))}}
  .h2-alto-schermo .ghomewrapper_main{width:100%!important;height:auto!important;padding-top:calc(var(--w) * .94641);background-image:var(--tall)!important;background-size:var(--w) auto!important;background-position:50% 0!important;background-repeat:no-repeat;background-color:var(--h2-notte)}
  .h2-alto-schermo>a{display:block;width:100%}
  .h2-alto-schermo .ghomewrapper_main{margin-left:auto!important;margin-right:auto!important;float:none!important}
  .h2-alto-schermo .thomewrapper{position:static!important;top:auto!important;padding:18px 16px 22px!important;background:var(--h2-notte)}
  .h2-alto-schermo .thw_overhead{color:var(--h2-giallo)!important}
}
@media (min-width:768px) and (max-width:991px){
  .h2-alto-schermo{--w:min(100%,765px,calc((100vh - 480px) / .94641))}
  @supports (height:100svh){.h2-alto-schermo{--w:min(100%,765px,calc((100svh - 480px) / .94641))}}
}
/* news con 2 sole schede (ENG/FRE): ferme, centrate, senza frecce */
.h2-news-due .h2-binario{justify-content:safe center}
.h2-news-due .h2-freccia{display:none!important}
/* tutto schermo (Dyneema) su tablet in verticale: foto tall (765x724) + testo sotto devono stare nello schermo sotto la testata (Giacomo 17/10) */
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait){
  .h2-schermo picture img{display:block;width:min(100%,765px,calc((100vh - 62px - 360px) / .94641));margin:0 auto}
  @supports (height:100svh){.h2-schermo picture img{width:min(100%,765px,calc((100svh - 62px - 360px) / .94641))}}
}