/* Virdemlux — base: token, reset, tipografia, bottoni, utility
   Estratto dai mockup in /sofi — non modificare i token a mano:
   sono la fonte del design system. */

/* =====================================================================
   VIRDEMLUX
   Verde logo #5BAC26 · verde nav #7AA93C · indaco #28348B
   Il buio esiste solo nell'hero: è lì che si vende la luce.
   Tutto il resto della pagina è chiaro.
   ===================================================================== */
:root{
  /* --- SCALA VERDE VIRDEMLUX -------------------------------------
     Un verde per ogni mestiere. La tonalità non si sceglie a gusto:
     la decide il contrasto minimo che quel ruolo deve garantire.

       marchio  #5BAC26  logo, striscia LED, superfici grandi
                         NON regge testo bianco (2,85) né testo su bianco
       testo    #3F7A19  link, occhielli, icone su fondo chiaro   5,24 AA
       azione   #2F6414  bottoni pieni, badge, pillole             7,11 AA
       luce     #8FD14F  solo su fondo scuro                      10,38 AA
       bosco    #1F3320  footer e superfici scure
     --------------------------------------------------------------- */
  --verde-marchio:#5BAC26;
  --verde-testo:#3F7A19;
  --verde-azione:#2F6414;
  --verde-luce:#8FD14F;
  --verde-bosco:#1F3320;
  /* alias storici, così il resto del foglio non si rompe */
  --green:var(--verde-marchio);
  --leaf:#7AA93C;
  --glow:var(--verde-luce);
  --green-d:var(--verde-testo);
  --green-dd:var(--verde-azione);
  --night:#0B1109;        /* usato solo nell'hero */
  --forest:var(--verde-bosco);
  --ink:#18241A;
  --text:#414B3F;
  --muted:#68725F;
  --tint:#F4F8EE;
  --tint-2:#E9F1DD;
  --line:#E5E9DF;
  --line-2:#D3DAC9;
  --indigo:#28348B;
 /* I mockup usano var(--ok) per la disponibilità ma non la definiscono
    mai: il testo restava senza colore. */
 --ok:#2F6414;
  --red:#B3261E;
  --focus:#F5B301;
  --r:16px; --r-l:24px; --pill:999px;
  --sh:0 2px 8px rgba(24,36,26,.05);
  --sh-h:0 16px 40px rgba(24,36,26,.12);
  --wrap:1400px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{margin:0;background:#fff;color:var(--text);font-family:Poppins,system-ui,-apple-system,
 "Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}

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

ul{margin:0;padding:0;list-style:none}

button,input,select{font:inherit;color:inherit}

a{color:var(--verde-testo);text-decoration:none}

a:hover{text-decoration:underline;text-underline-offset:3px}

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

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3{color:var(--ink);margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.12}

h1{font-size:clamp(36px,4.6vw,58px);letter-spacing:-.03em}

h2{font-size:clamp(22px,2.1vw,31px)}

h3{font-size:16.5px;letter-spacing:-.015em;line-height:1.32}

p{margin:0}

.kick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
 letter-spacing:.16em;text-transform:uppercase;color:var(--verde-testo)}

.kick i{font-size:15px}

.lead{font-size:15.5px;color:var(--muted);max-width:64ch;font-weight:300}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
 padding:13px 30px;border-radius:var(--pill);font-size:15.5px;font-weight:600;cursor:pointer;
 border:2px solid transparent;transition:.2s}

.btn:hover{text-decoration:none}

.btn-g{background:var(--verde-azione);color:#fff;border-color:var(--verde-azione)}

.btn-g:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.btn-hero,.btn-glow-w{background:#fff;color:var(--ink);border-color:#fff}

.btn-hero:hover,.btn-glow-w:hover{background:transparent;border-color:#fff;color:#fff}

.btn-o{background:transparent;color:var(--ink);border-color:var(--line-2)}

.btn-o:hover{border-color:var(--ink)}

.btn-o-lt{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}

.btn-o-lt:hover{border-color:var(--verde-luce);color:var(--verde-luce)}

.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
 color:var(--ink)}

.arrow i{color:var(--verde-testo);transition:transform .22s}

.arrow:hover{text-decoration:none;color:var(--verde-testo)}

.arrow:hover i{transform:translateX(4px)}

/* =====================================================================
   HEADER — solido, appoggiato sopra l'hero (niente overlay).
   Sotto ci corre una striscia LED con la luce che scorre.
   ===================================================================== */
.top{background:#F3F4F1;border-bottom:1px solid #E4E6E1;font-size:12.5px}

.top .wrap{display:flex;align-items:center;gap:24px;min-height:36px;flex-wrap:wrap;color:#5A6157}

.top .m{display:flex;align-items:center;gap:9px}

.top .m i{font-size:16px;color:var(--verde-testo)}

.top .m b{font-weight:600;color:var(--ink)}

.top nav{margin-left:auto;display:flex;gap:20px}

.top a{color:#6E766B;font-size:12px}

.top a:hover{color:var(--ink)}

.bar{position:sticky;top:0;z-index:90;background:#fff;transition:box-shadow .3s ease}

.bar.solid{box-shadow:0 8px 26px rgba(24,36,26,.12)}

.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
 background:linear-gradient(90deg,rgba(47,100,20,.2) 0%,rgba(47,100,20,.75) 16%,#2F6414 30%,
  rgba(47,100,20,.8) 44%,rgba(47,100,20,.25) 70%,rgba(47,100,20,.2) 100%);
 background-size:220% 100%;animation:led 7s linear infinite}

@keyframes led{from{background-position:120% 0}to{background-position:-120% 0}}

.hdr-in{display:flex;align-items:center;gap:30px;height:98px}

.logo{flex:none;display:block}

.logo img{width:262px;height:62px;object-fit:contain;mix-blend-mode:multiply}

.hdr-r{margin-left:auto;display:flex;align-items:center;gap:2px}

.hb{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--pill);
 color:var(--ink);font-size:13.5px;font-weight:500;position:relative;transition:background .2s}

.hb:hover{background:var(--tint);text-decoration:none;color:var(--ink)}

.hb i{font-size:22px}

.hb .n{position:absolute;top:3px;left:29px;min-width:19px;height:19px;border-radius:var(--pill);
 background:var(--verde-azione);color:#fff;font-size:11px;font-weight:600;display:flex;
 align-items:center;justify-content:center;padding:0 5px}

@keyframes mmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* =====================================================================
   USP
   ===================================================================== */
.usp{background:#fff;border-bottom:1px solid var(--line)}

.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:22px 28px}

.usp div{display:flex;align-items:center;gap:13px;padding:4px 8px}

.usp i{font-size:26px;color:var(--verde-testo);flex:none}

.usp b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}

.usp span{font-size:13px;color:var(--muted)}

/* =====================================================================
   sezioni chiare
   ===================================================================== */
.sec{padding:60px 0}

/* sezioni che condividono lo stesso fondo e vanno lette come un blocco solo:
   mezzo respiro fra loro invece di due padding pieni sommati */
.sec-flow{padding:30px 0}

.sec + .sec-flow{padding-top:0}

.sec-flow + .sec-flow{padding-top:0}

.sec-tint{background:var(--tint)}

.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
 margin-bottom:28px;flex-wrap:wrap}

.sh h2{margin:12px 0 0}

.sh .lead{margin-top:12px}

/* prodotti: vedi blocco carosello */
/* kelvin */
.kelv{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}

.kst{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/10;
 box-shadow:var(--sh-h)}

.kst img{width:100%;height:100%;object-fit:cover}

.ktint{position:absolute;inset:0;mix-blend-mode:multiply;background:#FFD1A0;transition:background .3s}

.kbl{position:absolute;inset:0;mix-blend-mode:screen;opacity:.17;background:#FFD1A0;
 transition:background .3s}

.kval{position:absolute;left:20px;top:18px;background:#fff;color:var(--ink);border-radius:var(--pill);
 padding:9px 20px;font-size:15px;font-weight:600;letter-spacing:-.02em;box-shadow:var(--sh)}

.ksl{margin:30px 0 8px}

.ksl input{width:100%;height:44px;accent-color:#5BAC26;cursor:pointer}

.kscale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}

.knote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;
 margin:24px 0 28px}

.knote b{display:block;font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
 margin-bottom:5px}

.knote span{font-size:15px;color:var(--muted)}

/* su misura */
.mis{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);
 border-radius:var(--r-l);overflow:hidden}

.mis-p{position:relative;min-height:440px}

.mis-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.mis-t{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}

.mis-l{display:grid;gap:12px;margin:20px 0 30px}

.mis-l li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}

.mis-l i{color:var(--verde-testo);font-size:20px;flex:none;margin-top:3px}

/* banner pubblicitario */
.adv-wrap{display:flex;justify-content:center}

.adv{display:block;max-width:970px;width:100%;border-radius:var(--r);overflow:hidden;
 line-height:0;border:1px solid var(--line);transition:.24s}

.adv:hover{box-shadow:var(--sh-h);transform:translateY(-2px)}

.adv img{width:100%;height:auto}

/* newsletter */
.nl{background:var(--tint-2);border-radius:var(--r-l);padding:38px 42px;display:grid;
 grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}

.nl p{color:var(--muted);margin-top:10px}

.nl-f{display:flex;gap:10px;flex-wrap:wrap}

.nl-f input{flex:1;min-width:220px;height:52px;border:1px solid var(--line-2);
 border-radius:var(--pill);padding:0 22px;background:#fff;font-size:15px}

.nl-c{display:flex;gap:10px;font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}

.nl-c input{width:19px;height:19px;flex:none;margin-top:2px}

/* seo */
.seo{padding:56px 0 64px;border-top:1px solid var(--line)}

/* .seo-in sta sullo stesso elemento di .wrap: se qui rimettevo max-width
   annullavo il limite del contenitore e il testo usciva dai 1400px */
.seo-in h2{margin-bottom:20px}

.seo h2{font-size:23px;margin-bottom:14px}

.seo p{color:var(--muted);font-size:15.5px;margin-bottom:16px;font-weight:300}

.seo strong{color:var(--text);font-weight:500}

.fmark{display:block;font-size:27px;font-weight:600;letter-spacing:-.025em;color:#fff;
 margin-bottom:8px}

.fmark em{font-style:normal;color:var(--verde-luce)}

.frow{display:flex;gap:12px;margin-bottom:11px;align-items:flex-start}

.frow i{color:var(--verde-luce);font-size:19px;flex:none;margin-top:3px}

.soc{display:flex;gap:8px}

.soc a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
 display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px}

.soc a:hover{background:var(--verde-luce);color:var(--night);border-color:var(--verde-luce)}

.pay{margin-left:auto;display:flex;gap:8px}

.pay span{border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:6px 12px;
 font-size:11.5px;color:#BDC9B4}

/* --- carosello orizzontale (categorie e prodotti) --- */
.rail-h{display:flex;align-items:center;gap:10px;margin-left:auto}

.rail-b{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:#fff;
 cursor:pointer;font-size:19px;color:var(--ink);display:flex;align-items:center;
 justify-content:center;transition:.2s}

.rail-b[disabled]{opacity:.3;cursor:default}

.rail-b[disabled]:hover{background:#fff;border-color:var(--line-2);color:var(--ink)}

.rail{display:grid;grid-auto-flow:column;gap:18px;overflow-x:auto;overflow-y:hidden;
 scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
 -ms-overflow-style:none;
 /* overflow-x:auto ritaglia anche in verticale: il padding dà spazio all'ombra
    e i margini negativi lo tolgono dal flusso della pagina */
 padding:18px 4px 30px;margin:-18px -4px -22px}

.rail::-webkit-scrollbar{display:none}

.rail > *{scroll-snap-align:start}

.rail-prod{grid-auto-columns:calc((100% - 4*18px)/5)}

.rail-cat{grid-auto-columns:calc((100% - 3*18px)/4)}

/* --- card prodotto compatta --- */
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
 display:flex;flex-direction:column;position:relative;transition:.25s}

.pc:hover{box-shadow:var(--sh-h);transform:translateY(-4px);border-color:var(--line-2)}

.pc-img{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}

.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}

.pc:hover .pc-img img{transform:scale(1.05)}

.pc-img::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
 background:radial-gradient(58% 46% at 50% 26%,rgba(210,255,160,.34),rgba(210,255,160,0) 70%)}

.pc:hover .pc-img::after{opacity:1}

.tags{position:absolute;left:10px;top:10px;z-index:2;display:flex;flex-direction:column;gap:5px;
 align-items:flex-start}

.tag{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
 padding:4px 9px;border-radius:var(--pill)}

.tag.new{background:var(--indigo);color:#fff}

.tag.off{background:var(--red);color:#fff}

.tag.mis{background:#fff;color:var(--verde-testo);box-shadow:var(--sh);
 border:1px solid var(--line)}

.fav{position:absolute;right:8px;top:8px;z-index:2;width:34px;height:34px;border-radius:50%;
 border:0;background:rgba(255,255,255,.94);color:var(--muted);cursor:pointer;font-size:17px;
 display:flex;align-items:center;justify-content:center;opacity:0;transition:.25s}

.pc:hover .fav,.fav:focus-visible{opacity:1}

.fav:hover{color:var(--red)}

.pc-b{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1;
 border-top:1px solid var(--line)}

.pc-cat{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
 color:var(--muted);margin-bottom:5px}

.pc h3{font-size:14.5px;line-height:1.3;margin-bottom:10px;letter-spacing:-.01em}

.pc h3 a{color:var(--ink)}

.pc h3 a:hover{color:var(--verde-testo);text-decoration:none}

.pc-f{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}

.price s{font-size:12px;color:var(--muted);margin-right:5px}

.price b{display:block;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.03em;
 line-height:1.2}

.price small{font-size:10.5px;color:var(--muted)}

.add{border:0;background:var(--verde-azione);color:#fff;border-radius:50%;width:40px;height:40px;
 cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center;
 transition:background .2s;flex:none}

.add:hover{background:var(--ink)}

/* --- card categoria compatta --- */
.catc{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);
 border-radius:var(--r);overflow:hidden;transition:.25s}

.catc:hover{box-shadow:var(--sh-h);transform:translateY(-4px);border-color:var(--line-2);
 text-decoration:none}

.catc-p img{width:100%;height:100%;object-fit:cover;filter:brightness(.94);
 transition:transform .5s,filter .4s}

.catc:hover .catc-p img{transform:scale(1.07);filter:brightness(1.06)}

.catc-p::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
 background:radial-gradient(62% 52% at 50% 20%,rgba(200,255,150,.4),rgba(200,255,150,0) 72%)}

.catc:hover .catc-p::after{opacity:1}

.catc-b{display:block;padding:14px 16px 16px;text-align:center}

.catc-b b{display:block;font-size:16.5px;font-weight:600;color:var(--ink);
 letter-spacing:-.02em;line-height:1.3}

.catc-b small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}

/* =====================================================================
   VIDEO — "Lasciati ispirare": schede verticali 9:16 in carosello
   ===================================================================== */
.rail-vid{grid-auto-columns:calc((100% - 4*18px)/5)}

.vid{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;
 background:var(--night);text-decoration:none;transition:transform .3s,box-shadow .3s}

.vid:hover{transform:translateY(-4px);box-shadow:var(--sh-h);text-decoration:none}

.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}

.vid:hover img{transform:scale(1.05)}

.vid::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(11,17,9,.34) 0%,rgba(11,17,9,0) 26%,
  rgba(11,17,9,0) 52%,rgba(11,17,9,.82) 100%)}

.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
 width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
 background:rgba(255,255,255,.24);backdrop-filter:blur(6px);color:#fff;font-size:24px;
 display:flex;align-items:center;justify-content:center;transition:.25s;padding-left:3px}

.vid:hover .vid-play{background:#fff;color:var(--verde-azione);transform:translate(-50%,-50%) scale(1.08)}

.vid-shop{position:absolute;right:12px;top:12px;z-index:3;width:38px;height:38px;border-radius:50%;
 border:0;cursor:pointer;background:rgba(11,17,9,.42);backdrop-filter:blur(6px);color:#fff;
 font-size:18px;display:flex;align-items:center;justify-content:center;transition:.22s}

.vid-shop:hover{background:#fff;color:var(--ink)}

.vid-cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff}

.vid-cap b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}

.vid-cap span{display:block;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:2px}

/* =====================================================================
   TARGET — il catalogo letto per ambiente, non per prodotto
   ===================================================================== */

/* =====================================================================
   B2B — doppia porta d'ingresso + download schede tecniche
   ===================================================================== */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.door{border:1px solid var(--line);border-radius:var(--r-l);padding:30px 30px;background:#fff;
 display:flex;flex-direction:column}

.door.pro{background:var(--verde-bosco);border-color:var(--verde-bosco);color:#C4CFBB}

.door.pro h3,.door.pro .kick{color:#fff}

.door.pro .kick{color:#A8D683}

.door h3{font-size:22px;letter-spacing:-.03em;margin:10px 0 9px}

.door p{font-size:15.5px;color:var(--muted);margin-bottom:20px}

.door.pro p{color:#C4CFBB}

.door ul{display:grid;gap:10px;margin-bottom:26px}

.door li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px}

.door li i{color:var(--verde-testo);font-size:19px;flex:none;margin-top:2px}

.door.pro li i{color:#A8D683}

.door .btn{align-self:flex-start;margin-top:auto}

@media (max-width:1200px){
  .rail-prod{grid-auto-columns:calc((100% - 3*18px)/4)}
  .rail-cat{grid-auto-columns:calc((100% - 2*18px)/3)}
}

@media (max-width:980px){
  .rail-prod{grid-auto-columns:calc((100% - 2*18px)/3)}
  .rail-cat{grid-auto-columns:calc((100% - 1*18px)/2)}
}

@media (max-width:760px){
  .rail-prod{grid-auto-columns:74%}
  .rail-cat{grid-auto-columns:44%}
  .rail-h{display:none}
}

@media (max-width:1200px){ .rail-vid{grid-auto-columns:calc((100% - 3*18px)/4)} }

@media (max-width:980px){ .rail-vid{grid-auto-columns:calc((100% - 2*18px)/3)}
  .close-band .brands-row h2{max-width:none;flex-basis:100%}
    .doors{grid-template-columns:1fr}
   }

@media (max-width:760px){ .rail-vid{grid-auto-columns:56%}
  .brands ul{justify-content:flex-start;gap:16px} .close-band .brands-row li{font-size:16px}
    .door{padding:28px 22px} }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1360px){
  .ni{padding:0 11px;font-size:11px;letter-spacing:.08em}
  .nav-r{display:none}
  .mm-in{grid-template-columns:repeat(4,1fr)}
  .mm-c{display:none}

}

@media (max-width:1180px){
  .ni{padding:0 10px;font-size:13.5px}
}

@media (max-width:1024px){
  .burger{display:flex}
  .nav{display:none}
  .bar::after{bottom:0}
  .hdr-in{height:74px;gap:18px}
  .hb .t{display:none}
  .hb .n{left:26px}
  .hb{padding:9px}
  .srch{max-width:none}
  .hero{height:460px;min-height:460px}
  .hero-c h1{font-size:clamp(32px,5.2vw,46px)}
  .hero-c p{font-size:16.5px;max-width:62ch;margin-bottom:24px}
  .usp .wrap{grid-template-columns:repeat(2,1fr);gap:16px}
  .kelv{grid-template-columns:1fr;gap:34px}
  .mis{grid-template-columns:1fr}
  .mis-p{min-height:280px}
  .mis-t{padding:38px 28px}
  .duo{grid-template-columns:1fr}
  .nl{grid-template-columns:1fr;padding:34px 28px}
  .ftr-g{grid-template-columns:1fr 1fr}
}

@media (max-width:680px){
  .wrap{padding:0 18px}
  .sec{padding:52px 0}
  .logo img{width:168px;height:40px}
  .hdr-in{flex-wrap:wrap;height:auto;padding:14px 0;gap:14px}
  .srch{order:4;flex-basis:100%}
  .top nav{display:none}
  .top .wrap{min-height:32px;font-size:11.5px}
  .hint{display:none}
  .ticks{margin-left:0}
  .usp .wrap{grid-template-columns:1fr;gap:12px}
  .hero{height:420px;min-height:420px}
  .add{width:auto;padding:0 20px;font-size:14.5px;font-weight:600}
  .add .lbl{display:inline}
  .ftr-g{grid-template-columns:1fr}
  .pay{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .sl[data-on=true] .kick,.sl[data-on=true] h1,.sl[data-on=true] p,
  .sl[data-on=true] .hero-cta{opacity:1;transform:none;animation:none}
  .bar::after{animation:none}
  .tick[aria-current=true] i{animation:none;width:100%}
}


/* ---------------------------------------------------------------
   ICONE
   Nei mockup erano un webfont (Tabler da cdnjs). Qui sono uno sprite
   SVG autoospitato, ma il markup mantiene il wrapper <i class="ti">
   perché 20 regole di CSS estratte dai mockup dimensionano le icone
   con selettori sull'elemento <i> (.hb i, .usp i, .ni i, ...).
   L'<i> è la scatola di dimensionamento, l'SVG dentro è 1em.
   --------------------------------------------------------------- */
i.ti{
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;line-height:1;flex:0 0 auto;
  width:1em;height:1em;
}
i.ti>svg{
  width:1em;height:1em;display:block;
  fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* Le varianti "filled" di Tabler usano fill, non stroke. */
i.ti-circle-check-filled>svg,
i.ti-player-play-filled>svg,
i.ti-player-pause-filled>svg,
i.ti-heart-filled>svg{fill:currentColor;stroke:none}

/* Utility di accessibilità: nei mockup c'era .sr-only, la teniamo e
   aggiungiamo l'alias .screen-reader-text che usa WordPress. */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:static;width:auto;height:auto;margin:0;clip:auto;
  white-space:normal;
}

/* ---------------------------------------------------------------
   FASCIA VANTAGGI
   Il numero di riquadri arriva dal backend (si possono svuotare),
   quindi le colonne non sono fisse a 4. Il testo secondario passa
   da 13 a 14px: 13 era troppo piccolo accanto a un titolo di 14.
   --------------------------------------------------------------- */
.usp .wrap{grid-template-columns:repeat(var(--usp-cols,4),minmax(0,1fr))}
.usp span span{font-size:14px}

@media (max-width:1100px){
  .usp .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .usp .wrap{grid-template-columns:minmax(0,1fr)}
}