*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#163826;--g2:#0e2619;--g3:#2a6645;
  --au:#c4974a;--au2:#e8d5a4;
  --wh:#ffffff;--cr:#f7f4ef;--tx:#1c1c1c;--tx2:#6a6a6a;--bd:#e8e3dc;
  --f1:'Cormorant Garamond',Georgia,serif;
  --f2:'Jost','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--f2);color:var(--tx);background:var(--wh);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:#f0ede8}::-webkit-scrollbar-thumb{background:var(--g3)}

/* NAV
   #nav è fixed e non riserva spazio nel flusso: la sezione #home (100vh) ci scorre sotto di proposito.
   L'altezza della barra e la dimensione del logo sono legate: se si cambia una, aggiornare anche l'altra
   (vedi anche i breakpoint in fondo al file, sezione RESPONSIVE, per i valori su tablet/mobile). */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;padding:0 6%;height:100px;transition:all .4s var(--ease)}
#nav.s{background:rgba(14,38,25,.97);backdrop-filter:blur(12px);height:64px;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.nl{display:flex;align-items:center;text-decoration:none;line-height:1}
.nl img{height:120px;width:auto;display:block;transition:height .4s var(--ease)}
#nav.s .nl img{height:52px}
.nl svg{width:32px;height:32px;flex-shrink:0}
.nt{display:flex;flex-direction:column;line-height:1.05}
.nt span:first-child{font-family:var(--f2);font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--au);opacity:.9}
.nt span:last-child{font-family:var(--f1);font-size:19px;letter-spacing:1px;color:var(--wh);font-weight:400}
.nm{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0} /* azzera margin/padding che il Reboot di Bootstrap applica a ul */
.nm a{font-family:var(--f2);font-size:14px;font-weight: 900; letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none;position:relative;padding-bottom:3px;transition:color .3s}
.nm a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--au);transition:width .35s var(--ease)}
.nm a:hover{color:var(--au2)}.nm a:hover::after{width:100%}
.nm .cta{background:var(--au);color:var(--g2)!important;padding:9px 20px;font-weight:500;letter-spacing:1.5px!important}
.nm .cta::after{display:none!important}.nm .cta:hover{background:var(--au2)!important}
.hbg{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px 8px} /* padding: area cliccabile min. 24x24 (WCAG 2.5.8), l'icona resta visivamente piccola */
.hbg span{width:24px;height:1.5px;background:var(--wh);transition:.3s}

/* HERO */
/* dvh dopo vh: sui browser che non supportano dvh la riga viene ignorata e resta 100vh (fallback).
   Dove è supportata, dvh evita il "salto" di layout quando la barra indirizzi mobile appare/scompare. */
#home{height:100vh;height:100dvh;min-height:580px;position:relative;overflow:hidden;display:flex;align-items:center}
.hbg-img{position:absolute;inset:0;z-index:0;background:url('../img/_hero/hero-background.webp') center/cover no-repeat;transform:scale(1.08);animation:hz 14s ease-in-out infinite alternate}
@keyframes hz{from{transform:scale(1.08)}to{transform:scale(1.14)}}
.hov{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(10,30,18,.78) 0%,rgba(14,38,25,.52) 55%,rgba(0,0,0,.28) 100%)}
.hc{position:relative;z-index:2;padding:0 8%;max-width:860px;color:var(--wh)}
.h-ey{font-family:var(--f2);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--au);margin-bottom:22px;opacity:0;animation:fu .7s .1s var(--ease) forwards;text-shadow:0 1px 6px rgba(0,0,0,.5);font-weight:500}
.h-ti{font-family:var(--f1);font-weight:300;font-size:clamp(52px,8.5vw,104px);line-height:1.0;margin-bottom:28px;opacity:0;animation:fu .8s .25s var(--ease) forwards}
.h-ti em{font-style:italic;color:var(--au2)}
.h-su{font-family:var(--f2);font-size:clamp(14px,1.5vw,17px);font-weight:300;color:rgba(255,255,255,.8);line-height:1.8;max-width:480px;margin-bottom:42px;opacity:0;animation:fu .8s .4s var(--ease) forwards}
.h-bt{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fu .8s .55s var(--ease) forwards}
.btng{display:inline-block;text-decoration:none;font-family:var(--f2);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;padding:15px 34px;border:1px solid var(--au);background:var(--au);color:var(--g2);transition:all .35s var(--ease)}
.btng:hover{background:transparent;color:var(--au)}
.btno{display:inline-block;text-decoration:none;font-family:var(--f2);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:300;padding:15px 34px;border:1px solid rgba(255,255,255,.4);color:var(--wh);background:transparent;transition:all .35s var(--ease)}
.btno:hover{border-color:var(--au);color:var(--au)}
.sh{position:absolute;bottom:32px;left:8%;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:rgba(255,255,255,.4);font-size:9px;letter-spacing:3px;text-transform:uppercase}
.sh::after{content:'';display:block;width:1px;height:50px;background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);animation:sb 2s ease-in-out infinite}
@keyframes sb{0%,100%{height:50px}50%{height:26px}}
@keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* SECTIONS */
section{padding:96px 7%}
.sec-hd{text-align:center;margin-bottom:60px}
.sec-ey{display:block;font-family:var(--f2);font-size:10px;letter-spacing:4.5px;text-transform:uppercase;color:var(--g3);margin-bottom:16px}
.sec-ti{font-family:var(--f1);font-weight:300;font-size:clamp(34px,4.5vw,56px);color:var(--tx);line-height:1.1;margin-bottom:0} /* azzera il margin-bottom:.5rem che il Reboot di Bootstrap applica a h1-h6 */
.sec-ti em{font-style:italic;color:var(--g)}
.dv{display:block;width:38px;height:1px;background:var(--au);margin:18px auto 0}
.sec-su{max-width:540px;margin:16px auto 0;font-size:15px;font-weight:300;color:var(--tx2);line-height:1.9}

/* CHI SIAMO */
#chi-siamo{background:var(--cr)}
/* .cs-wr è anche .row (Bootstrap): flex/gutter arrivano da lì, qui resta solo il contenitore.
   Il gutter (86px) è impostato via --bs-gutter-x inline in index.php, non con la scala standard
   di Bootstrap, per riprodurre esattamente il gap originale. */
.cs-wr{align-items:center;max-width:1180px;margin:0 auto} /* i due .col ottengono 50/50 automaticamente da Bootstrap (stesso flex-grow) */
.cs-im{position:relative}
.cs-im img{width:100%;height:550px;object-fit:cover;display:block}
.cs-im::before{content:'';position:absolute;top:-16px;right:-16px;width:55%;height:55%;border:1px solid var(--au);opacity:.45;z-index:-1}
.cs-im::after{content:'';position:absolute;bottom:-16px;left:-16px;width:45%;height:45%;border:1px solid var(--au);opacity:.25;z-index:-1}
.cs-tx h2{font-family:var(--f1);font-weight:300;font-size:clamp(30px,3.8vw,46px);line-height:1.25;color:var(--g2);margin-bottom:24px}
.cs-tx h2 em{font-style:italic;color:var(--g3)}
.cs-tx p{font-size:15px;font-weight:300;color:var(--tx2);line-height:1.95;margin-bottom:18px}
.cs-tx blockquote{border-left:2px solid var(--au);padding:12px 20px;margin:26px 0;font-family:var(--f1);font-style:italic;font-size:18px;color:var(--g);line-height:1.6}
.cs-tx blockquote cite{display:block;font-family:var(--f2);font-style:normal;font-size:10px;letter-spacing:1px;color:var(--tx2);margin-top:7px}
.stats{margin-top:34px;background:var(--bd)} /* gutter 1px via --bs-gutter-x inline: il colore --bd sotto crea le sottili linee divisorie */
.stat{background:var(--g2);padding:24px 16px;text-align:center}
.stat strong{display:block;font-family:var(--f1);font-size:40px;font-weight:300;color:var(--au);line-height:1;margin-bottom:7px}
.stat span{font-family:var(--f2);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* CATALOGO
   .pgrid usa CSS columns (non grid) per l'effetto masonry: le card .pi si
   impilano in colonne di altezza naturale invece che allinearsi in righe.
   Il numero di colonne per taglia di schermo è nella sezione RESPONSIVE in fondo.
   Il filtro categoria (bottoni .fb) e lo show/hide di .pi sono gestiti in
   assets/js/nav-gallery.js, che sincronizza anche tabindex (elementi nascosti
   diventano tabindex="-1" per non restare raggiungibili da tastiera). */
#catalogo{background:var(--wh)}
.filters{display:flex;flex-wrap:wrap;gap:0;justify-content:center;margin-bottom:52px;border:1px solid var(--bd);display:inline-flex;position:relative;left:50%;transform:translateX(-50%)}
.fb{font-family:var(--f2);font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:12px 20px;background:transparent;border:none;color:var(--tx2);cursor:pointer;transition:all .3s var(--ease);position:relative;white-space:nowrap}
.fb::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--g);transform:scaleX(0);transition:transform .3s var(--ease)}
.fb:hover{color:var(--tx)}.fb.on{color:var(--g);font-weight:500}.fb.on::after{transform:scaleX(1)}
.pgrid{columns:4;column-gap:3px;max-width:1600px;margin:0 auto}
.pi{break-inside:avoid;margin-bottom:3px;position:relative;overflow:hidden;cursor:pointer;display:block;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pi.visible{opacity:1;transform:translateY(0)}
.pi.hide{opacity:0!important;transform:scale(.96)!important;height:0;margin:0;overflow:hidden;pointer-events:none;transition:none}
.pi img{width:100%;display:block;transition:transform .7s var(--ease)}
.pi:hover img{transform:scale(1.06)}
.po{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,30,18,.82) 0%,transparent 52%);opacity:0;transition:opacity .35s var(--ease);display:flex;flex-direction:column;justify-content:flex-end;padding:18px 16px}
.pi:hover .po{opacity:1}
.po-cat{font-family:var(--f2);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--au);margin-bottom:4px}
.po-name{font-family:var(--f1);font-size:16px;font-weight:300;color:var(--wh);line-height:1.3;margin:0} /* azzera il margin-bottom:1rem che il Reboot di Bootstrap applica a p */

/* SERVIZI */
#servizi{background:var(--g2);color:var(--wh)}
#servizi .sec-ey{color:var(--au)}
#servizi .sec-ti{color:var(--wh)}
#servizi .sec-su{color:rgba(255,255,255,.5)}
/* .sgrid è anche .row: col-4 (Bootstrap, 33.33%) combacia esattamente con l'originale repeat(3,1fr).
   Il gutter 1px va a capo su 2 righe da 3 card: serve --bs-gutter-y oltre a --bs-gutter-x (inline). */
.sgrid{max-width:1180px;margin:0 auto;background:rgba(255,255,255,.05)}
.sc{background:rgba(255,255,255,.02);padding:50px 34px;text-align:center;transition:background .3s var(--ease)}
.sc:hover{background:rgba(255,255,255,.05)}
.sico{width:50px;height:50px;border:1px solid rgba(196,151,74,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--au);margin:0 auto 20px}
.sc h3{font-family:var(--f1);font-size:19px;font-weight:300;color:var(--wh);margin-bottom:12px}
.sc p{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.48);line-height:1.85;margin:0} /* azzera il margin-bottom:1rem del Reboot Bootstrap su p */

/* BAND */
.band{background:var(--au);padding:80px 7%;text-align:center}
.band h2{font-family:var(--f1);font-weight:300;font-size:clamp(30px,5vw,52px);color:var(--g2);margin-bottom:10px}
.band h2 em{font-style:italic}
.band p{font-size:15px;font-weight:300;color:rgba(14,38,25,.68);margin-bottom:34px}
.btdk{display:inline-block;text-decoration:none;font-family:var(--f2);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;padding:14px 34px;border:1px solid var(--g2);background:var(--g2);color:var(--wh);transition:all .35s var(--ease);margin:0 6px}
.btdk:hover{background:transparent;color:var(--g2)}
.btdk2{display:inline-block;text-decoration:none;font-family:var(--f2);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:300;padding:14px 34px;border:1px solid rgba(14,38,25,.35);color:var(--g2);background:transparent;transition:all .35s var(--ease);margin:0 6px}
.btdk2:hover{background:var(--g2);color:var(--wh)}

/* CONTATTI
   Ogni <label> del form è associata al proprio campo via for/id (in index.html):
   se aggiungi un nuovo campo, ricordati id sull'input/select/textarea e for
   corrispondente sulla label, altrimenti lo screen reader non lo annuncia. */
#contatti{background:var(--cr)}
/* .cgrid è anche .row (Bootstrap). Split 40/60 (1fr/1.5fr originale): non combacia con
   nessuna coppia di frazioni dei 12 di Bootstrap (col-5/col-7 = 41.67/58.33, leggermente diverso),
   quindi larghezza custom su .ci/.cf invece delle classi col-* standard. */
.cgrid{max-width:1080px;margin:0 auto;align-items:flex-start}
.ci{flex:0 0 40%;max-width:40%}
.ci h3{font-family:var(--f1);font-size:28px;font-weight:300;color:var(--g2);margin-bottom:30px}
.ii{display:flex;gap:13px;margin-bottom:20px;align-items:flex-start}
.iico{width:36px;height:36px;background:var(--g);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--au);flex-shrink:0}
.itx{font-size:14px;color:var(--tx2);line-height:1.7}
.itx strong{display:block;font-family:var(--f2);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx2);margin-bottom:2px}
.itx a{color:inherit;text-decoration:none;display:inline-block;padding:6px 4px;margin:-6px -4px} /* padding+margin negativo: allarga l'area cliccabile (min. 24x24, WCAG 2.5.8) senza spostare il testo */
.orari{margin-top:20px} /* .orari è anche .row: i due .or col sono 50/50 automatici, il terzo (.or-full) va a capo su tutta la riga */
.or{background:var(--wh);padding:13px 15px;border-left:2px solid var(--au);font-size:13px;color:var(--tx2)}
.or-full{flex:0 0 100%;max-width:100%}
.or strong{display:block;font-family:var(--f2);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g3);margin-bottom:2px}
.soc{display:flex;gap:9px;margin-top:24px}
.sb{width:36px;height:36px;border:1px solid var(--g);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--g);text-decoration:none;transition:all .3s var(--ease)}
.sb:hover{background:var(--g);color:var(--wh)}
.cf{flex:0 0 60%;max-width:60%;background:var(--wh);padding:42px}
.cf h3{font-family:var(--f1);font-size:25px;font-weight:300;color:var(--g2);margin-bottom:26px}
/* .fr è anche .row: i due .fg col dentro sono 50/50 automatici (stesso flex-grow) */
.fg{margin-bottom:13px}
.fg label{display:block;font-family:var(--f2);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--tx2);margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 14px;border:1px solid var(--bd);outline:none;font-family:var(--f2);font-size:13px;color:var(--tx);background:var(--cr);transition:border-color .3s;appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--g);background:var(--wh)}
.fg textarea{resize:vertical;min-height:96px}
.pck{display:flex;align-items:flex-start;gap:9px;font-size:11.5px;color:var(--tx2);line-height:1.7;margin:13px 0}
.pck input{width:24px;height:24px;flex-shrink:0;margin:0;accent-color:var(--au);cursor:pointer}
.pck a{color:var(--g)}
.fsub{width:100%;background:var(--g);color:var(--wh);border:none;cursor:pointer;font-family:var(--f2);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;padding:14px;transition:background .3s}
.fsub:hover{background:var(--g3)}

/* MAPPA */
.mappa{height:350px;position:relative;overflow:hidden}
.mappa iframe{width:100%;height:100%;border:none;filter:grayscale(12%) contrast(1.05)}
.mc{position:absolute;top:0;right:2%;bottom:0;display:flex;align-items:center;pointer-events:none}
.mcard{background:var(--g2);color:var(--wh);padding:26px 28px;max-width:230px;pointer-events:all}
.mcard h4{font-family:var(--f1);font-size:16px;font-weight:300;color:var(--au);margin-bottom:9px}
.mcard p{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.65);margin:0} /* azzera il margin-bottom:1rem del Reboot Bootstrap su p */
.mcard a{display:inline-block;margin-top:13px;font-family:var(--f2);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--au);text-decoration:none;border-bottom:1px solid rgba(196,151,74,.28)}

/* FOOTER */
footer{background:#060d08;padding:48px 7% 26px}
/* .fgrid è anche .row: col-6/col-3/col-3 (Bootstrap) combacia esattamente con l'originale 2fr/1fr/1fr (50/25/25%) */
.fgrid{max-width:1180px;margin:0 auto 34px}
.fbrand p{font-size:13px;font-weight:300;color:rgba(255,255,255,.38);line-height:1.9;max-width:280px;margin:13px 0 0} /* margin-bottom:0 azzera il Reboot Bootstrap su p */
.fc h5{font-family:var(--f2);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--au);margin-bottom:16px}
.fc ul{list-style:none;margin:0;padding:0} /* azzera margin/padding che il Reboot di Bootstrap applica a ul */
.fc li{margin-bottom:9px}
.fc a{font-size:13px;color:rgba(255,255,255,.38);text-decoration:none;transition:color .3s}
.fc a:hover{color:var(--au)}
.fbot{border-top:1px solid rgba(255,255,255,.06);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;max-width:1180px;margin:0 auto;font-size:11px;color:rgba(255,255,255,.28)}
.fbot a{color:rgba(255,255,255,.28);text-decoration:none}
.fbot a:hover{color:var(--au)}

/* WA */


@keyframes wap{0%,100%{box-shadow:0 4px 16px rgba(37,211,102,.3)}50%{box-shadow:0 4px 22px rgba(37,211,102,.5),0 0 0 7px rgba(37,211,102,.07)}}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ════ LIGHTBOX ════
   Markup/comportamento in JS: assets/js/lightbox.js. Il focus viene spostato
   su .lbx-close all'apertura e ripristinato sul .pi che l'ha aperta alla chiusura
   (gestione tastiera/screen reader, vedi commenti nel file JS). */
.lbx{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out;padding:20px}
.lbx.open{display:flex}
.lbx img{max-width:90vw;max-height:88vh;object-fit:contain;box-shadow:0 0 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
.lbx-close{position:fixed;top:18px;right:22px;color:#fff;font-size:28px;cursor:pointer;line-height:1;opacity:.7;transition:opacity .2s;background:none;border:none;font-family:sans-serif}
.lbx-close:hover{opacity:1}
.pi{cursor:zoom-in}.pi img{pointer-events:none}

/* BONUS MOBILI */
#bonus{background:var(--g2);padding:72px 8%;overflow:hidden;position:relative}
#bonus::before{content:'';position:absolute;left:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:rgba(196,151,74,.07);pointer-events:none}
/* .bonus-wr è anche .row: separatore centrale da 1px non riproducibile con le frazioni dei 12 di
   Bootstrap, quindi flex-basis custom (left/right equi-crescita, sep fisso a 1px) invece di col-*. */
.bonus-wr{max-width:1080px;margin:0 auto;align-items:center}
.bonus-left,.bonus-right{flex:1 0 0%}
.bonus-sep{flex:0 0 1px;max-width:1px;background:var(--au);opacity:.3;height:100%;min-height:120px; padding: 0;}
.bonus-left .tag{font-family:var(--f2);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--au);margin-bottom:18px;display:block}
.bonus-left h2{font-family:var(--f1);font-size:clamp(32px,4vw,52px);font-weight:300;color:var(--wh);line-height:1.15;margin-bottom:0}
.bonus-left h2 em{font-style:italic;color:var(--au)}
.bonus-right p{font-size:14px;color:rgba(255,255,255,.65);line-height:1.9;margin-bottom:28px;max-width:420px}
.bonus-right p strong{color:var(--wh);font-weight:500}
.bonus-cta{display:inline-block;background:var(--au);color:var(--g2);font-family:var(--f2);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;padding:14px 32px;text-decoration:none;transition:background .3s}
.bonus-cta:hover{background:#d4a860}
/* override responsive di .bonus-wr accorpato nella sezione RESPONSIVE in fondo al file */

/* ACCESSIBILITA' */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--g2);color:var(--wh);padding:12px 22px;font-family:var(--f2);font-size:13px;letter-spacing:1px;text-decoration:none}
.skip-link:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--g2);border-radius:2px}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — tutti i breakpoint del sito, in un unico posto.
   Approccio "desktop-first": lo stile base sopra è pensato per desktop grandi
   e laptop; ogni query qui sotto restringe/adatta scendendo di larghezza.
   Tenerli accorpati qui (invece che sparsi accanto a ogni componente) rende
   più facile capire, a colpo d'occhio, cosa cambia a ogni taglia di schermo.

   Fasce coperte:
     > 1400px          desktop grande     → stile base, nessuna query dedicata
     1101–1400px       laptop             → stile base, nessuna query dedicata
      861–1100px       tablet landscape   → prima query sotto
       641–860px       tablet portrait / phablet → nav a hamburger da qui in giù
          ≤640px       mobile portrait
   mobile landscape (telefono ruotato) va individuato con (orientation + max-height),
   non con max-width: in landscape un telefono è "largo" quanto un tablet ma ha
   pochissima altezza, quindi serve una query a parte per non schiacciare l'hero.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- Tablet landscape (≤1100px): iPad landscape, finestre laptop ridotte ---- */
@media(max-width:1100px){
  .pgrid{columns:3}
  .cs-wr{--bs-gutter-x:50px}
  section{padding:80px 6%}
}

/* ---- Tablet portrait / phablet (≤860px) ----
   Da qui in giù: menu orizzontale → hamburger, e i layout a 2 colonne
   (chi-siamo, contatti, footer) si impilano su 1 colonna. */
@media(max-width:860px){
  .nm{display:none}.hbg{display:flex}
  /* nav e logo più compatti: su schermi stretti la barra piena-dimensione occuperebbe troppo spazio verticale */
  #nav{height:80px}#nav.s{height:56px}
  .nl img{height:60px}#nav.s .nl img{height:44px}
  .cs-wr{--bs-gutter-x:0}.cs-im{display:none}
  .cgrid{--bs-gutter-x:0;--bs-gutter-y:68px}.ci,.cf{flex:0 0 100%;max-width:100%}
  .sc{flex:0 0 50%;max-width:50%} /* 2 card per riga: su tablet 1 sola sarebbe troppo vuota */
  .pgrid{columns:2}.fgrid{--bs-gutter-x:0;--bs-gutter-y:26px}.fbrand,.fc{flex:0 0 100%;max-width:100%}
  .fr .fg{flex:0 0 100%;max-width:100%}.filters{flex-wrap:wrap}
  section{padding:64px 6%}
  .bonus-wr{--bs-gutter-x:0;--bs-gutter-y:60px}.bonus-left,.bonus-right{flex:0 0 100%;max-width:100%}.bonus-sep{display:none}
  /* Mappa: da card assoluta sovrapposta (pensata per schermi larghi) a blocco impilato sotto la mappa */
  .mappa{height:auto}
  .mappa iframe{display:block;height:300px}
  .mc{position:static;display:block;padding:0;pointer-events:auto}
  .mcard{max-width:none;width:100%}
}

/* ---- Mobile portrait (≤640px) ---- */
@media(max-width:640px){
  .sc{flex:0 0 100%;max-width:100%} /* sotto i 640px anche 2 card per riga iniziano a essere strette */
  section{padding:56px 5%}
  .cf{padding:28px}
  .stat strong{font-size:32px}
}
@media(max-width:480px){
  .pgrid{columns:1} /* immagini catalogo a piena larghezza sui telefoni più piccoli */
}

/* ---- Mobile landscape: telefono ruotato, larghezza normale ma altezza ridotta ----
   Individuato via max-height (non max-width): senza questo, l'hero a 100dvh
   schiaccerebbe titolo/sottotitolo/bottoni in uno spazio troppo basso. */
@media(max-height:500px) and (orientation:landscape){
  #home{min-height:420px}
  .h-ti{font-size:clamp(32px,6vw,56px);margin-bottom:14px}
  .h-su{margin-bottom:20px}
  .sh{display:none} /* l'indicatore "Scopri" non ha spazio verticale per esistere */
  #nav{height:64px}#nav.s{height:52px}
  .nl img{height:48px}#nav.s .nl img{height:40px}
}


.credits_link{
 color: #38B5E6 !important;
 font-weight: 700;
 font-family: sans-serif;
}

.credits_link:hover{
 color: #fff !important;
}

 .credits_link:before{
  content: "";
  vertical-align: middle;
  width:16px;
  height: 16px;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
  background-image: url(https://www.clion.it/favicon-96x96.png);
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center center;

  transition: all 450ms ease;
 }

  .credits_link:hover:before{
   transform: rotateZ(360deg) rotateY(360deg);
  }