/* shared.css: elementi comuni a tutte le pagine (menu, menu mobile, pagine hub e informative). Si carica dopo site.css, product.css e pages.css. */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{left:16px}

/* menu a due colonne e a una colonna */
.mm.m2 .box{width:616px}
.mm.m2 .cols{grid-template-columns:repeat(2,268px)}
.mm.m1 .box{width:340px}
.mm.m1 .cols{grid-template-columns:268px}
.nav .has-mm:last-of-type .mm{left:auto;right:0}

/* pulsante e pannello del menu mobile */
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.6);place-items:center;color:var(--ink-2);cursor:pointer;padding:0}
.burger svg{width:22px;height:22px}
.mnav{position:fixed;inset:0;z-index:60;background:#f6f8f8;overflow-y:auto;padding:0 0 40px;display:none}
.mnav.open{display:block}
.mnav .top{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.mnav .top .logo{width:140px;height:auto}
.mnav .x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink-2)}
.mnav .x svg{width:22px;height:22px}
.mnav .in{padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary,.mnav .one{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:56px;font-family:'Manrope',Arial,sans-serif;color:var(--ink);cursor:pointer;font-size:var(--fs-tl);line-height:var(--lh-tl);letter-spacing:var(--ls-tl);font-weight:var(--fw-tl)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:12px;height:12px;transition:transform .15s}
.mnav details[open]>summary svg{transform:rotate(180deg)}
.mnav .sub{padding:0 0 14px}
.mnav .sub .g{text-transform:uppercase;color:var(--muted);margin:12px 0 2px;font-size:var(--fs-lm);line-height:var(--lh-caps);letter-spacing:var(--ls-caps);font-weight:var(--fw-caps)}
.mnav .sub a{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm);letter-spacing:var(--ls-bm);font-weight:var(--fw-body)}
.mnav .sub a.hd{font-family:'Manrope',Arial,sans-serif;font-weight:600;color:var(--ink)}
.mnav .sub a svg{width:18px;height:18px;flex:none}
.mnav .mcta{display:flex;margin-top:24px;width:100%}
/* prodotti: ogni prodotto è un sotto-menu che si apre sotto */
.mnav details.s2{border-bottom:0}
.mnav .s2>summary{min-height:44px;font-size:var(--fs-bm);line-height:var(--lh-bm);letter-spacing:var(--ls-bm);font-weight:600}
.mnav .s2b{padding:0 0 8px 16px;border-left:1px solid var(--line);margin-left:2px}
body.navopen{overflow:hidden}
@media (max-width:1100px){
  .burger{display:grid}
  .hdr .tools{gap:12px}
  .hdr .wrap{justify-content:space-between}
  .hdr .btn{display:none}
}

/* segnaposto per screenshot reali ancora da inserire */
.shot{width:100%;aspect-ratio:16/10;border:2px dashed #7fb4b6;border-radius:var(--r-xl);background:rgba(255,255,255,.55);display:grid;place-items:center;text-align:center;padding:24px;color:#35666a;font-size:var(--fs-bs);line-height:var(--lh-bs);letter-spacing:var(--ls-bs);font-weight:var(--fw-body)}

/* pagine hub e informative */
.fhero.plain .in{padding-top:64px;align-items:flex-start;text-align:left}
.fhero.plain h1{margin-top:0;font-size:var(--fs-dm);line-height:var(--lh-dm);letter-spacing:var(--ls-dm);font-weight:var(--fw-dm)}
.fhero.plain .sub{max-width:760px;margin-top:24px}
.fhero.plain{padding-bottom:72px}
.fhero.plain .btns{margin-top:36px}
.hubs{background:#edeff2;padding:96px 0}
.hubs h2{margin-bottom:12px;font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
.hubs .lead2{margin-bottom:40px;max-width:760px}
.hubs .gr{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px}
.hubs .gr>*{min-width:0}
.hubs .gr.g2{grid-template-columns:repeat(2,1fr)}
.hubs .gr:last-child{margin-bottom:0}
.hubs .scard{height:100%}
.prose{padding:72px 0 96px;background:#edeff2}
.prose .wrap{max-width:900px}
.prose h2{margin:48px 0 12px;font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2);font-size:var(--fs-bl);line-height:var(--lh-bl);letter-spacing:var(--ls-bl);font-weight:var(--fw-body)}
.prose p{margin-top:14px}
.prose ul{margin:14px 0 0 22px;display:flex;flex-direction:column;gap:6px}
.prose .ph0,.prose .note{margin-top:14px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.cards3>*{min-width:0}
.cards3 .box{background:var(--card);border-radius:var(--r-xl);padding:32px;border:1px solid #e1e4e8}
.cards3 .box h3{font-size:var(--fs-hs);line-height:var(--lh-hs);letter-spacing:var(--ls-hs);font-weight:var(--fw-hs)}
.cards3 .box p{margin-top:12px;color:var(--muted);font-size:var(--fs-bm);line-height:var(--lh-bm);letter-spacing:var(--ls-bm);font-weight:var(--fw-body)}
.mapbox{margin-top:32px}
@media (max-width:1100px){
  .hubs .gr,.hubs .gr.g2,.cards3{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hubs{padding:64px 0}
  .hubs .gr,.hubs .gr.g2,.cards3{grid-template-columns:1fr}
  .prose{padding:48px 0 64px}
}
.crumb2 .wrap{flex-wrap:wrap;row-gap:4px}
.crumb2{pointer-events:none}.crumb2 a{pointer-events:auto}

/* navbar: sempre fissa in alto; trasparente e sfocata sopra la prima sezione, bianca semitrasparente e sfocata dopo lo scroll (classe is-fixed messa dallo script comune) */
html{scroll-padding-top:96px}
.hdr{position:fixed;transition:box-shadow .2s}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(252,252,252,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.hdr.is-fixed::before{background:rgba(252,252,252,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hdr.is-fixed{box-shadow:0 1px 0 rgba(43,48,54,.06),0 8px 24px rgba(30,50,55,.06)}
.nav{align-items:center}
.nav .has-mm{display:flex;align-items:center}
.nav>a,.nav>.has-mm>a.top{line-height:1}

/* footer */
.ft .bar .legal,.ft .bar .legal a{color:#fcd4b0}
.soc a{transition:background .15s}
.soc a:hover{background:#f39a4c}
.soc a:focus-visible{outline:3px solid #fcd4b0;outline-offset:3px}

/* voci momentaneamente nascoste (menu desktop, menu mobile, colonna Risorse del footer; in home la sezione Risorse e il pulsante dei prezzi): togliere queste regole per rimostrarle */
.nav>a[href="/risorse/"],.nav>a[href="/prezzi/"],.mnav .one[href="/risorse/"],.mnav .one[href="/prezzi/"]{display:none}
.ft .cols>div:has(a[href^="/risorse/"]){display:none}
@media (min-width:1101px){.ft .cols{grid-template-columns:repeat(4,1fr)}} /* finché Risorse è nascosta: logo e 3 colonne di link su tutta la larghezza */
[data-page="home"] .res,[data-page="home"] .cta a[href="/prezzi/"]{display:none}
/* le voci semplici del menu hanno lo stesso hover di quelle con il dropdown */
.nav>a{transition:background .15s,color .15s}
.nav>a:hover,.nav>a:focus-visible{background:rgba(48,126,130,.15);color:var(--teal-700)}

/* home, card della sezione prodotti: titolo Headline Medium, testo sopra Label Large, paragrafo Body Medium */
[data-page="home"] .pc .eyebrow{font-size:var(--fs-ll);line-height:var(--lh-ll);letter-spacing:var(--ls-ll);font-weight:var(--fw-label)}
[data-page="home"] .pc h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
[data-page="home"] .pc p.t{font-size:var(--fs-bm);line-height:var(--lh-bm);letter-spacing:var(--ls-bm);font-weight:var(--fw-body)}

/* home, loghi dei clienti: nastro orizzontale continuo a tutta larghezza, sfumato ai lati.
   I loghi sono maschere sul colore neutrals/600, così hanno tutti esattamente lo stesso grigio.
   La lista è ripetuta due volte e scorre di metà della sua lunghezza: il giro si chiude senza stacchi. */
.logos{margin:30px 0 0 calc(50% - 50vw);width:100vw;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%)}
.logos .track{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px;width:max-content;animation:logos 45s linear infinite}
.logos:hover .track{animation-play-state:paused}
.logos li{flex:none}
.logos .lg{display:block;height:60px;background:#4b5563;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
@keyframes logos{to{transform:translateX(calc(-50% - 28px))}}
@media (prefers-reduced-motion:reduce){.logos .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.logos li[aria-hidden]{display:none}}
@media (max-width:720px){.logos .track{gap:32px;animation-name:logos-m}.logos .lg{height:52px}}
@keyframes logos-m{to{transform:translateX(calc(-50% - 16px))}}

/* home */
[data-page="home"] .sol .head{align-items:end}
[data-page="home"] .sol .head .lead{margin-top:0}
[data-page="home"] .feat .ctl{justify-content:space-between}
[data-page="home"] .about .txt .plus{margin:0;color:var(--ink);font-family:'Manrope',Arial,sans-serif;font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
.tag.wo{color:#fcd4b0}
/* la chiusura finisce sul colore d'inizio del footer (#1e4b4e): un unico gradiente, senza stacco */
[data-page="home"] .cta{background:linear-gradient(180deg,#122a2d 0,#1e4b4e 100%)}
/* home, slider delle soluzioni: pallini e frecce sono pulsanti veri */
.sol-slides .solp p.li{margin-top:32px}
.sol-slides .solp>div{display:flex;flex-direction:column;align-items:flex-start}
.sol-slides .solp .btn{margin-top:auto}
.sol-slides .solp ul{margin-bottom:40px}
[data-sol-ctl] .dots button{all:unset;cursor:pointer;width:8px;height:8px;border-radius:50%;background:#c5cbd0;transition:width .2s,background .2s}
[data-sol-ctl] .dots button.on{width:32px;border-radius:4px;background:var(--teal)}
[data-sol-ctl] .dots button:focus-visible,[data-sol-ctl] .arrows button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
[data-sol-ctl] .arrows button{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff}
[data-sol-ctl] .arrows svg{width:22px;height:22px;stroke-width:2.2}
.solp ul.dsc{gap:20px}
.solp ul.dsc li{align-items:flex-start}
.solp ul.dsc li svg{margin-top:2px}
.solp ul.dsc b{display:block;font-weight:500;color:var(--ink-2)}
.solp ul.dsc small{display:block;margin-top:6px;font-size:var(--fs-bm);line-height:var(--lh-bm)}
.segs button:disabled{opacity:.45;cursor:not-allowed}
/* slider delle soluzioni: tutte le slide (di entrambi i gruppi) occupano la stessa cella della griglia,
   così il blocco ha sempre l'altezza della slide più alta e non cambia quando si scorre o si cambia gruppo */
.sol-stage,.sol-slides{display:grid}
.sol-stage>.sol-slides,.sol-slides>.solp{grid-area:1/1}
.sol-stage .solp{margin-top:0}
.sol-stage{margin-top:32px}
.sol-stage [hidden]{display:grid;visibility:hidden}
.sol-slides>.solp[hidden]{display:grid}
.solp ul.dsc+.btn,.solp ul.dsc{margin-top:28px}
.solp ul.dsc+.btn{margin-top:auto}
/* pulsanti delle tab (Per format / Per tipologia / Per settore): attivo #4AC0D4; al passaggio del mouse e alla pressione
   lo stesso colore coperto da uno state layer #FCFCFC al 60%. L'hover vale solo con il mouse, così su mobile non resta acceso dopo il tocco */
.segs button{transition:background .15s}
.segs button.on{background:#4ac0d4}
@media (hover:hover){.segs button:not(.on):not(:disabled):hover{background:linear-gradient(rgba(252,252,252,.6),rgba(252,252,252,.6)),#4ac0d4}}
.segs button:not(.on):not(:disabled):active{background:linear-gradient(rgba(252,252,252,.6),rgba(252,252,252,.6)),#4ac0d4}
.segs button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* titolo di ogni slide delle soluzioni: Headline Medium */
.sol-stage .solp h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}

/* home, transizioni morbide: le tab usano uno state layer in dissolvenza (i gradienti non si animano, l'opacità sì) */
.segs button{position:relative;isolation:isolate}
.segs button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#4ac0d4;z-index:-1;opacity:0;transition:opacity .25s ease}
.segs button::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(252,252,252,.6);z-index:-1;opacity:0;transition:opacity .25s ease}
.segs button:not(.on):not(:disabled):hover,.segs button:not(.on):not(:disabled):active{background:transparent}
@media (hover:hover){.segs button:not(.on):not(:disabled):hover::before,.segs button:not(.on):not(:disabled):hover::after{opacity:1}}
.segs button:not(.on):not(:disabled):active::before,.segs button:not(.on):not(:disabled):active::after{opacity:1}
.segs button.on{transition:background .25s ease}
.btn{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
/* frecce: disattivate al primo e all'ultimo elemento */
[data-sol-ctl] .arrows button,[data-feat-ctl] .arrows button{transition:background .25s ease}
[data-sol-ctl] .arrows button:disabled,[data-feat-ctl] .arrows button:disabled{background:#9cc5c6;cursor:default}
[data-sol-ctl] .arrows button:disabled:hover{background:#9cc5c6}

/* home, card delle funzionalità: carosello che scorre davvero */
[data-feat]{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-right:40px}
[data-feat]::-webkit-scrollbar{display:none}
[data-feat]:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:16px}
[data-feat] .fc{scroll-snap-align:start}
[data-feat] .fc img{height:auto;aspect-ratio:3/2}
[data-feat] .fc .ic{background:#348e9e}
[data-feat-ctl] .dots{display:flex;gap:7px;align-items:center}
[data-feat-ctl] .dots button{all:unset;cursor:pointer;width:8px;height:8px;border-radius:50%;background:#c5cbd0;transition:width .25s ease,background .25s ease}
[data-feat-ctl] .dots button.on{width:32px;border-radius:4px;background:var(--teal)}
[data-feat-ctl] .arrows button{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff}
[data-feat-ctl] .arrows svg{width:22px;height:22px;stroke-width:2.2}
[data-feat-ctl] button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media (max-width:1100px){[data-page="home"] .feat .ctl{display:flex}}

/* home, demo: il video di YouTube si carica solo al clic */
.demo-play{all:unset;cursor:pointer;display:block;position:relative;width:952px;max-width:100%}
.demo-play img{display:block;width:100%;transition:opacity .25s ease}
.demo-play:hover img{opacity:.85}
.demo-play:focus-visible{outline:3px solid var(--amber);outline-offset:4px;border-radius:24px}
.demo.on{padding:0;height:auto;aspect-ratio:16/9}
.demo.on iframe{width:100%;height:100%;border:0;display:block}

/* home, mobile: i testi introduttivi con larghezza fissa (640px) non devono uscire dal contenitore */
.case .lead,.feat .lead{max-width:100%}
.case .head .l,.case .head{max-width:100%;min-width:0}
/* slider delle soluzioni sotto i 1100px: stessa altezza solo tra le slide della stessa tab, contenuti allineati in alto */
@media (max-width:1100px){
  .sol-stage>.sol-slides{grid-area:auto}
  .sol-stage>.sol-slides[hidden]{display:none}
  .sol-stage .solp{align-content:start}
  .sol-slides .solp .btn{margin-top:32px}
}
/* lo slider delle soluzioni accetta lo swipe orizzontale; lo scroll verticale resta al browser */
.sol-stage{touch-action:pan-y}


/* pulsanti pieni a icona (frecce degli slider): state layer #FCFCFC al 40% all'hover e alla pressione */
[data-sol-ctl] .arrows button,[data-feat-ctl] .arrows button{transition:background .25s ease,box-shadow .25s ease}
@media (hover:hover){[data-sol-ctl] .arrows button:not(:disabled):hover,[data-feat-ctl] .arrows button:not(:disabled):hover{box-shadow:inset 0 0 0 40px rgba(252,252,252,.4)}}
[data-sol-ctl] .arrows button:not(:disabled):active,[data-feat-ctl] .arrows button:not(:disabled):active{box-shadow:inset 0 0 0 40px rgba(252,252,252,.4)}

/* telefono ed email nei box contatti: link con hover (tel: apre la chiamata su mobile, mailto: il programma di posta) */
.cinfo a.v{display:inline-flex;align-items:center;gap:8px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:2px;transition:color .25s ease,text-decoration-color .25s ease}
.cinfo a.v:hover{color:var(--teal);text-decoration-color:currentColor}
.cinfo a.v:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:6px}

/* sezione Azienda: tutte le hero hanno lo sfondo pesca chiaro di Chi siamo (gradiente e cerchi decorativi) */
[data-page^="azienda-"] .fhero,[data-page^="azienda-"] .cs-hero,[data-page^="caso-studio-"] .cs-hero,[data-page^="caso-studio-"] .cs-hero.case{background:linear-gradient(180deg,#fff 0,#fffbf7 45%,#fef1e5 100%);position:relative;overflow:hidden}
[data-page^="azienda-"] .fhero:before,[data-page^="azienda-"] .fhero:after,[data-page^="azienda-"] .cs-hero:before,[data-page^="azienda-"] .cs-hero:after,[data-page^="caso-studio-"] .cs-hero:before,[data-page^="caso-studio-"] .cs-hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none;border-style:solid;border-color:rgba(247,169,99,.08)}
[data-page^="azienda-"] .fhero:before,[data-page^="azienda-"] .cs-hero:before,[data-page^="caso-studio-"] .cs-hero:before{width:560px;height:560px;left:-380px;top:120px;border-width:110px}
[data-page^="azienda-"] .fhero:after,[data-page^="azienda-"] .cs-hero:after,[data-page^="caso-studio-"] .cs-hero:after{width:760px;height:760px;right:-200px;top:140px;border-width:80px}
[data-page^="azienda-"] .fhero>*,[data-page^="azienda-"] .cs-hero>*,[data-page^="caso-studio-"] .cs-hero>*{position:relative;z-index:1}
[data-page^="azienda-"] .fhero .crumb2,[data-page^="azienda-"] .cs-hero .crumb2{position:absolute}
@media (max-width:720px){[data-page^="azienda-"] .fhero:after,[data-page^="azienda-"] .cs-hero:after,[data-page^="caso-studio-"] .cs-hero:after{display:none}}
/* sezione Azienda: la prima fascia dopo la hero è chiara, per non passare dal pesca al grigio */
[data-page^="azienda-"] .fhero+section,[data-page^="azienda-"] .cs-hero+.cs-sec,[data-page^="caso-studio-"] .cs-hero+.cs-sec{background:var(--page)}
/* indice dei casi studio: la prima fascia dopo la hero è #F6F7F8, la seconda il colore della pagina */
[data-page="azienda-casi-studio"] .cs-hero+.cs-sec{background:#f6f7f8}
[data-page="azienda-casi-studio"] .cs-hero+.cs-sec+.cs-sec{background:var(--page)}
/* singoli casi studio: hero chiara #F6F7F8 senza cerchi, come prima; sotto le fasce tornano quelle originali */
[data-page^="caso-studio-"] .cs-hero.case{background:#f6f7f8}
[data-page^="caso-studio-"] .cs-hero.case:before,[data-page^="caso-studio-"] .cs-hero.case:after{display:none}
[data-page^="caso-studio-"] .cs-hero+.cs-sec{background:var(--page)}
/* pagine legali */
.prose.legal h2{font-size:var(--fs-hs);line-height:var(--lh-hs);letter-spacing:var(--ls-hs);font-weight:var(--fw-hs);margin-top:40px}
.prose.legal ol.lt{list-style:lower-alpha;margin:14px 0 0 22px;display:flex;flex-direction:column;gap:10px}
.prose.legal ul{gap:10px}
.prose.legal li{font-size:var(--fs-bm);line-height:var(--lh-bm)}
.prose.legal p{font-size:var(--fs-bm);line-height:var(--lh-bm)}
.prose.legal h3{margin-top:24px;font-size:var(--fs-tl);line-height:var(--lh-tl);font-weight:600}
.prose.legal b{font-weight:600;color:var(--ink)}
.prose.legal a{color:var(--teal-700);text-decoration:underline}

/* prefisso internazionale nei moduli (tel.js): select nativo trasparente sopra bandiera e freccia */
.tel .cc{position:relative;cursor:pointer;transition:background .25s ease}
.tel .cc:hover{background:rgba(43,48,54,.05)}
.tel .cc .fl{font-size:18px;line-height:1;padding:0!important;border:0!important;height:auto!important}
.tel .fl,.tel select{font-family:'Twemoji Country Flags','Inter',Arial,sans-serif}
.tel .cc svg{color:var(--ink-2)}
.tel .cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;margin:0;border:0;font-size:16px}
.tel .cc:focus-within{outline:3px solid var(--amber);outline-offset:-3px;border-radius:999px}

/* home, slider dei casi studio: slide sovrapposte (stessa altezza), pallini e frecce funzionanti */
.cs-slides{display:grid;margin-top:30px}
.cs-slides>.cs{grid-area:1/1;margin-top:0}
.cs-slides>.cs[hidden]{display:grid;visibility:hidden}
.cs .clogo{display:block;margin-top:20px;height:56px;width:auto;max-width:240px;object-fit:contain;object-position:left center}
[data-hc-ctl] .dots{display:flex;gap:7px;align-items:center}
[data-hc-ctl] .dots button{all:unset;cursor:pointer;width:8px;height:8px;border-radius:50%;background:#c5cbd0;transition:width .25s ease,background .25s ease}
[data-hc-ctl] .dots button.on{width:32px;border-radius:4px;background:var(--teal)}
[data-hc-ctl] .arrows button{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;transition:background .25s ease,box-shadow .25s ease}
[data-hc-ctl] .arrows button:disabled{background:#9cc5c6;cursor:default}
@media (hover:hover){[data-hc-ctl] .arrows button:not(:disabled):hover{box-shadow:inset 0 0 0 40px rgba(252,252,252,.4)}}
[data-hc-ctl] .arrows svg{width:22px;height:22px;stroke-width:2.2}
[data-hc-ctl] button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.cs-slides{touch-action:pan-y}

/* selettore della lingua nella navbar */
.lang{position:relative}
.lang-b{display:flex;align-items:center;gap:6px;height:44px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .25s ease}
.lang-b:hover,.lang.open .lang-b{background:rgba(48,126,130,.12);color:var(--teal-700)}
.lang-b:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.lang-b svg{width:24px;height:24px}
.lang-b svg.f{width:12px;height:12px;transition:transform .25s ease}
.lang.open .lang-b svg.f{transform:rotate(180deg)}
.lang-m{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:#fcfcfc;border-radius:12px;box-shadow:0 16px 40px -8px rgba(75,85,99,.24),0 1px 2px rgba(0,0,0,.06);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.lang.open .lang-m{opacity:1;visibility:visible;transform:none}
.lang-m a{display:block;padding:10px 16px;border-radius:8px;text-align:center;color:var(--ink-2);font-size:var(--fs-bm);transition:background .2s ease}
.lang-m a:hover{background:#eef2f3}
.lang-m a.on{background:#dfe9ea;color:var(--teal-700);border:1px solid #c9dcdd}
.lang-m a:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
@media (max-width:1100px){.lang{display:none}}
/* home, casi studio: la foto occupa tutta l'altezza della card */
.cs-slides .cs{align-items:stretch}
.cs-slides .cs>img{height:100%;min-height:560px;align-self:stretch}
@media (max-width:1100px){.cs-slides .cs>img{height:auto;min-height:0;aspect-ratio:4/3}}

/* elenchi dei vantaggi: linea grigia #A9AEB6, assente sull'ultima voce (per casi studio e agenzia la regola è nei rispettivi CSS) */
.why .it{border-bottom-color:#a9aeb6}

/* FAQ: apertura e chiusura animate */
.acc .a{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.acc details.closing summary i:after{transform:rotate(90deg)}
.acc summary i:after{transition:transform .3s ease}
.acc .a b{font-weight:600;color:var(--ink)}

/* finestra del video demo */
.vmodal{position:fixed;inset:0;z-index:90;background:rgba(15,28,31,.86);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .25s ease}
.vmodal.on{opacity:1}
.vmodal[hidden]{display:none}
.vm-box{position:relative;width:min(1100px,100%);transform:scale(.97);transition:transform .25s ease}
.vmodal.on .vm-box{transform:none}
.vm-fr{aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:#000}
.vm-fr iframe{width:100%;height:100%;border:0;display:block}
.vm-x{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .25s ease}
.vm-x:hover{background:rgba(255,255,255,.3)}
.vm-x:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.vm-x svg{width:22px;height:22px;stroke-width:2.2}

/* piattaforma evento */
[data-page="piattaforma-evento"] .phero{height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 72px}
[data-page="piattaforma-evento"] .phero .wrap{padding-top:0;align-items:center}
[data-page="piattaforma-evento"] .phero .l{margin-top:0}
[data-page="piattaforma-evento"] .phero .ph{height:auto;border-radius:0;overflow:visible}
[data-page="piattaforma-evento"] .phero .ph img{height:auto;object-fit:contain}
[data-page="piattaforma-evento"] .fcard h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
[data-page="piattaforma-evento"] .scard .lnk{display:none}
[data-page="piattaforma-evento"] .why h2{font-size:var(--fs-ds);line-height:var(--lh-ds)}
[data-page="piattaforma-evento"] .why .it h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
[data-page="piattaforma-evento"] .upd,[data-page="piattaforma-evento"] .cli .q{display:none}
[data-page="piattaforma-evento"] .cli .logos{margin-top:56px}
.pe-dc{margin-top:56px}
.pe-dc h3{font-size:var(--fs-hs);line-height:var(--lh-hs);font-weight:var(--fw-hs);margin-bottom:20px}
.pe-dc .k{font-size:var(--fs-bm);color:var(--ink-2)}
.pe-dc .sm{margin-top:4px;color:var(--muted);font-size:var(--fs-bs);line-height:var(--lh-bs)}
.pe-dc hr{border:0;border-top:1px solid #cfd5d9;margin:24px 0}
.pe-dc a.v svg{width:20px;height:20px}
[data-page="piattaforma-evento"] .cli{height:auto;padding:96px 0 112px}
[data-page="piattaforma-evento"] .cli .ring3{top:auto;bottom:-560px}
/* piattaforma evento: icone Material Symbols su fondo #348E9E, come in home */
[data-page="piattaforma-evento"] .ibox{background:#348e9e}
[data-page="piattaforma-evento"] .ibox svg{width:28px;height:28px}

/* breadcrumb: stanno sopra il contenuto della hero, così il link si può cliccare */
.crumb2{z-index:3}

/* titoli degli elenchi dei vantaggi in Headline Medium (32), come nelle pagine prodotto */
.cs-why h3,.ag-ben .cs-why h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}

/* Accreditamento e Registrazione: stessa impostazione della pagina Piattaforma evento */
[data-page="iscrizioni-e-biglietti"] .phero{height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 72px}
[data-page="iscrizioni-e-biglietti"] .phero .wrap{padding-top:0;align-items:center}
[data-page="iscrizioni-e-biglietti"] .phero .l{margin-top:0}
[data-page="iscrizioni-e-biglietti"] .phero .ph{height:auto;border-radius:0;overflow:visible}
[data-page="iscrizioni-e-biglietti"] .phero .ph img{height:auto;object-fit:contain}
[data-page="iscrizioni-e-biglietti"] .why h2{font-size:var(--fs-ds);line-height:var(--lh-ds)}
[data-page="iscrizioni-e-biglietti"] .why .it h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
[data-page="iscrizioni-e-biglietti"] .upd,[data-page="iscrizioni-e-biglietti"] .cli .q{display:none}
[data-page="iscrizioni-e-biglietti"] .cli .logos{margin-top:56px}
[data-page="iscrizioni-e-biglietti"] .cli{height:auto;padding:96px 0 112px}
[data-page="iscrizioni-e-biglietti"] .cli .ring3{top:auto;bottom:-560px}
[data-page="iscrizioni-e-biglietti"] .ibox{background:#348e9e}
[data-page="iscrizioni-e-biglietti"] .ibox svg{width:28px;height:28px}
[data-page="iscrizioni-e-biglietti"] .phero .ph img{border-radius:var(--r-xl)}
/* loghi dei clienti in nero (#303030) nella fascia azzurra, più leggibili */
.cli .logos .lg{background:#303030}

/* «C'è di più»: sfondo scuro con i cerchi del brand (pagine delle funzionalità e dei servizi) */
.more{background:#1e6e7c url(/img/bg-dark.jpg) center/cover no-repeat}
.more .r{display:none}
.more .btn-x{background:#88bec1;color:#1e2228;box-shadow:0 2px 6px rgba(0,0,0,.12)}
@media (hover:hover){.more .btn-x:hover{box-shadow:inset 0 0 0 100px rgba(252,252,252,.4),0 2px 6px rgba(0,0,0,.12)}}
.more .btn-x:active{box-shadow:inset 0 0 0 100px rgba(252,252,252,.4)}
.dk3.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.dk3.c2{grid-template-columns:1fr}}

/* spazio dopo l'ultimo blocco dei servizi e tra FAQ e modulo */
.pf>section:last-child{padding-bottom:128px!important}
.fq{padding-bottom:128px}
.fqx{padding-bottom:144px}
@media (max-width:720px){.pf>section:last-child{padding-bottom:72px!important}.fq{padding-bottom:72px}.fqx{padding-bottom:88px}}

/* mega menu: pagine indice 16/24, pagine interne 14/21 */
.mm .cols a{font-size:var(--fs-bs);line-height:var(--lh-bs)}
.mm .cols a.hd{font-size:var(--fs-bm);line-height:var(--lh-bm);font-weight:600}

/* Promozione & Marketing Eventi: stessa impostazione delle altre pagine indice dei prodotti */
[data-page="marketing-evento"] .phero{height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 72px}
[data-page="marketing-evento"] .phero .wrap{padding-top:0;align-items:center}
[data-page="marketing-evento"] .phero .l{margin-top:0}
[data-page="marketing-evento"] .phero .ph{height:auto;border-radius:0;overflow:visible}
[data-page="marketing-evento"] .phero .ph img{height:auto;object-fit:contain}
[data-page="marketing-evento"] .why h2{font-size:var(--fs-ds);line-height:var(--lh-ds)}
[data-page="marketing-evento"] .why .it h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
[data-page="marketing-evento"] .upd,[data-page="marketing-evento"] .cli .q{display:none}
[data-page="marketing-evento"] .cli .logos{margin-top:56px}
[data-page="marketing-evento"] .cli{height:auto;padding:96px 0 112px}
[data-page="marketing-evento"] .cli .ring3{top:auto;bottom:-560px}
[data-page="marketing-evento"] .ibox{background:#348e9e}
[data-page="marketing-evento"] .ibox svg{width:28px;height:28px}
[data-page="marketing-evento"] .phero .ph img{border-radius:var(--r-xl)}
/* segnaposto per le immagini ancora da inserire */
.pf .blk .shot.r43{aspect-ratio:4/3;height:auto}
.fx-hero .ph .shot.sq{aspect-ratio:1;max-width:560px;margin-left:auto;height:auto}
.fx-norows .fx-rows{margin-top:72px}

/* Piattaforma evento: sezione personalizzazione */
.pe-cust{padding:104px 0;text-align:center}
.pe-cust h2{margin-top:24px;font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
.pe-cust .lead2{margin:20px auto 0;max-width:760px}
.pe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;text-align:left}
.pe-grid>*{min-width:0}
.pe-grid .c{background:#fff;border:1px solid #e1e4e8;border-radius:var(--r-xl);padding:28px}
.pe-grid .ibox{width:56px;height:56px;border-radius:16px;background:#348e9e;color:#fff;display:grid;place-items:center}
.pe-grid .ibox svg{width:28px;height:28px}
.pe-grid h3{margin-top:20px;font-size:var(--fs-hs);line-height:var(--lh-hs);font-weight:var(--fw-hs)}
.pe-grid p{margin-top:10px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
@media (max-width:1100px){.pe-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.pe-cust{padding:72px 0}.pe-grid{grid-template-columns:1fr}}

/* hero delle pagine indice dei prodotti: un solo cerchio decorativo (il secondo si sovrapponeva al primo) */
.phero .r2{display:none}
/* mega menu a 3 colonne: si allarga sulle voci grandi, così ogni voce ha 16px di padding a sinistra e a destra */
.mm .box{width:max-content}
.mm .cols{grid-template-columns:repeat(3,minmax(268px,max-content))}
/* su desktop stretti il mega menu si centra nella pagina, così non esce dallo schermo */
@media (min-width:1101px) and (max-width:1300px){
  .nav .has-mm{position:static}
  .nav .has-mm .mm{top:64px;left:50%;right:auto;transform:translateX(-50%)}
}
/* sottotitoli delle hero nelle pagine interne (la home resta com'è): più leggeri e più ariosi */
.shero .sub,.phero .sub,.fhero .sub,.fx-hero .sub,.cs-hero .sub,.chero .sub,.lhero .sub,.ab-hero .sub{color:#6a737f;font-weight:400;line-height:26px}
.cs-hero.case .sub{line-height:var(--lh-bl)}

/* footer su mobile: tutto allineato a sinistra, link legali uno sotto l'altro */
@media (max-width:1100px){.ft .bar .wrap>div:last-child{align-items:flex-start!important}}
@media (max-width:720px){
  .ft .bar .wrap>div:last-child{gap:24px!important}
  .ft .bar .legal{flex-direction:column;align-items:flex-start;gap:12px;margin-right:0}
  .ft .bar .legal i{display:none}
}
/* 404: solo tipografia */
.e404{background:#f7f8f9;padding:200px 0 140px;min-height:100svh;display:flex;align-items:center}
.e404 .n{font-family:'Manrope',Arial,sans-serif;font-weight:800;font-size:clamp(140px,26vw,360px);line-height:.85;letter-spacing:-.04em;background:linear-gradient(90deg,var(--amber-deep) 0,#8b8a62 55%,#3f6760 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.e404 h1{margin-top:40px;font-size:var(--fs-dm);line-height:var(--lh-dm);letter-spacing:var(--ls-dm);font-weight:var(--fw-dm)}
.e404 .sub{margin-top:20px;max-width:640px;color:var(--ink-2);font-size:var(--fs-tm);line-height:var(--lh-tm);letter-spacing:var(--ls-tm)}
.e404 .btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.e404 .go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:64px;padding-top:28px;border-top:1px solid #e1e4e8;font-size:var(--fs-bm);line-height:var(--lh-bm)}
.e404 .go span{color:var(--muted)}
.e404 .go a{font-family:'Manrope',Arial,sans-serif;font-weight:700;color:var(--teal-700);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(48,126,130,.35)}
.e404 .go a:hover{text-decoration-color:currentColor}
@media (max-width:720px){.e404{padding:140px 0 80px;min-height:0}.e404 .btns{flex-direction:column;align-items:stretch}.e404 .btns .btn{width:100%}.e404 .go{flex-direction:column;align-items:flex-start}}
/* sottotitoli delle hero interne: come nelle Soluzioni */
main section:is(.shero,.phero,.fhero,.fx-hero,.cs-hero,.chero,.lhero,.ab-hero) .sub,main .cs-hero.case .sub{color:#6a737f;font-size:var(--fs-tm);line-height:26px;letter-spacing:normal;font-weight:400}
/* pagine indice dei prodotti: titoli delle fasce in display medium */
:root main:has(>.phero) section h2{font-size:var(--fs-dm);line-height:var(--lh-dm);letter-spacing:var(--ls-dm);font-weight:var(--fw-dm)}
/* pagine interne: h1 a 58, quindi le fasce a 48 (anche casi studio e modulo) */
:root main:has(>.fx-hero) :is(.fx-case,.ctx) h2{font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
/* card scure di "C'è di più" */
.dk3 .c{background:#2d333b}
.dk3 .ibox,.more .dk3 .ibox{background:#348e9e}
.dk3 .btn{border-color:#88bec1;color:#88bec1}
/* pagine indice: i titoli dei servizi restano in display small, sotto i titoli delle fasce */
:root main:has(>.phero) .pf .blk h2{font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
/* etichette lunghe: versione corta in mobile */
@media (max-width:720px){.tag .tg-lg{display:none}}
/* pagine indice: in mobile l'immagine del servizio va sempre sotto il testo, anche il segnaposto */
@media (max-width:1100px){.pf .blk.rev>.shot{order:2}}
/* breadcrumb in mobile: sempre su una riga, la voce superiore si accorcia con i puntini */
@media (max-width:720px){
  :root body .crumb2 .wrap{flex-wrap:nowrap;gap:8px;white-space:nowrap}
  :root body .crumb2 a{min-width:0;overflow:hidden;text-overflow:ellipsis}
  :root body .crumb2 :is(svg,b){flex:none}
}
/* 404 centrata */
.e404 .wrap{text-align:center}
.e404 .sub{margin-left:auto;margin-right:auto}
.e404 .btns,.e404 .go{justify-content:center}
@media (max-width:720px){.e404 .go{align-items:center}}
/* home: frecce di soluzioni e funzionalità sopra il carosello (accanto alle tab e al titolo), i pallini restano sotto */
.sol-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:53px}
.sol-bar .segs{margin-top:0}
.feat .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
[data-sol-ctl],[data-feat-ctl]{justify-content:center}
:is([data-sol-arrows],[data-feat-arrows]){display:flex;gap:16px;flex:none}
:is([data-sol-arrows],[data-feat-arrows]) button{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;transition:background .25s ease,box-shadow .25s ease}
:is([data-sol-arrows],[data-feat-arrows]) svg{width:22px;height:22px;stroke-width:2.2}
:is([data-sol-arrows],[data-feat-arrows]) button:disabled{background:#9cc5c6;cursor:default}
:is([data-sol-arrows],[data-feat-arrows]) button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media (hover:hover){:is([data-sol-arrows],[data-feat-arrows]) button:not(:disabled):hover{box-shadow:inset 0 0 0 40px rgba(252,252,252,.4)}}
:is([data-sol-arrows],[data-feat-arrows]) button:not(:disabled):active{box-shadow:inset 0 0 0 40px rgba(252,252,252,.4)}
/* mobile: niente frecce (si scorre col dito); le soluzioni scorrono in orizzontale e si intravede la card successiva */
@media (max-width:720px){
  :is([data-sol-arrows],[data-feat-arrows]){display:none}
  .sol-bar{display:block}
  .sol-stage{touch-action:auto}
  .sol-stage>.sol-slides:not([hidden]){display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 44px}
  .sol-stage>.sol-slides::-webkit-scrollbar{display:none}
  /* la card attiva resta al centro, quelle ai lati (tagliate) sono opache */
  .sol-stage>.sol-slides>.solp{flex:0 0 100%;scroll-snap-align:center;opacity:.45;transition:opacity .3s ease}
  .sol-stage>.sol-slides>.solp.is-on{opacity:1}
  /* tab delle soluzioni a tutta larghezza */
  .segs{display:flex;width:100%}
  .segs button{flex:1;padding:0 8px}
  /* prodotti: nelle prime due card la CTA va a sinistra */
  .cards2 .pc .btn-row{justify-content:flex-start}
}
[data-page="home"] .feat .ctl[data-feat-ctl]{justify-content:center}
/* home: le frecce delle funzionalità stanno 24px sopra le card (lo spazio tra titolo e card resta 94px) */
.feat .head-row [data-feat-arrows]{margin-bottom:-70px}
/* home: anche le frecce delle soluzioni stanno 24px sopra le card */
.sol-bar{align-items:flex-end}
.sol-bar [data-sol-arrows]{margin-bottom:-8px}
/* home: il cerchio delle funzionalità continua nella fascia dei casi studio, senza il taglio tra le due sezioni */
[data-page="home"] .feat{overflow:visible;overflow-x:clip}
[data-page="home"] .case{overflow:visible;overflow-x:clip}
/* home: il testo introduttivo delle soluzioni arriva fino al bordo del contenitore */
[data-page="home"] .sol .head .lead{max-width:none}

/* Stampa badge: card di ibrida.io Printers e modalità kiosk */
.sb-app{text-align:left}
.sb-app h2,.sb-app .lead2{margin-left:0;margin-right:0}
.sb-cards{text-align:left;margin-top:56px}
.sb-cards .pc{display:flex;flex-direction:column}
.sb-cards .pc .top{height:auto;min-height:0;padding-bottom:24px}
.sb-cards .pc h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
.sb-cards .pc p.t{font-size:var(--fs-bm);line-height:var(--lh-bm);letter-spacing:var(--ls-bm)}
.sb-cards .pc img.m{height:auto;aspect-ratio:1412/900;object-fit:contain;background:none;margin-top:auto}
.sb-pr .lnk{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope',Arial,sans-serif;font-weight:700;color:var(--teal-700)}
.sb-pr .lnk svg{width:16px;height:16px}
.sb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px;text-align:left}
.sb-step{margin:0}
.sb-step img{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;border-radius:28px;box-shadow:0 24px 60px -12px rgba(43,48,54,.3)}
.sb-step figcaption{margin-top:32px;text-align:center}
.sb-step .n{font-family:'Manrope',Arial,sans-serif;font-weight:700;color:#8a5a2a}
.sb-step h3{margin-top:8px;font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
.sb-step p{margin-top:12px;color:var(--muted);font-size:var(--fs-bm);line-height:var(--lh-bm);letter-spacing:var(--ls-bm);font-weight:var(--fw-body)}
.sb-wide{margin-top:80px}
.sb-wide img{width:100%;max-width:760px;height:auto;display:block;margin:0 auto;border-radius:var(--r-xl);box-shadow:0 24px 60px -12px rgba(43,48,54,.25)}
.sb-kiosk{background:var(--teal-900);padding:120px 0}
.sb-kiosk h2,.sb-kiosk .sb-step h3{color:#fff}
.sb-kiosk .lead2,.sb-kiosk .sb-step p{color:#c9dcdd}
.sb-kiosk .tag.or{border-color:#f0b27d;color:#f7c48f}
.sb-kiosk .sb-step .n{color:#f7a963}
.sb-kiosk .sb-step img,.sb-kiosk .sb-wide img{box-shadow:0 24px 60px -12px rgba(0,0,0,.45)}
@media (max-width:720px){
  .sb-cards{margin-top:36px}
  .sb-steps{grid-template-columns:1fr;gap:56px}
  .sb-step img{max-width:210px}
  .sb-wide{margin-top:56px}
  .sb-kiosk{padding:72px 0}
}

/* Moduli: verifica di sicurezza (Cloudflare Turnstile) ed errore di invio */
form .cf-turnstile{grid-column:1/-1;min-height:65px}
form .ferr{grid-column:1/-1;color:#b42318;font-size:var(--fs-bm);line-height:var(--lh-bm);font-weight:var(--fw-body)}
form .ferr[hidden]{display:none}