/* ═══════════════════════════════════════════════════════════════════════
   quenta.it — anteprima del sito a più pagine (novembre 2026).

   Questo foglio si AGGIUNGE a style.css del sito attuale (copiato tale e
   quale come base.css): stessi colori, stessi font, stesso vetro. Qui c'è
   solo il nuovo: menu a tendina, dispositivi disegnati in CSS con dentro le
   schermate vere, nastro dei clienti, «film» a scene, pagine prodotto, blog.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --menta:#87CEBD;
  --c-cassa:#346D5F; --c-palmare:#3D7C9C; --c-monitor:#D34E47; --c-totem:#51A48E;
  --c-check:#564787; --c-gestionale:#0F5D57; --c-web:#0F5D57;
}
h1{font-size:clamp(36px,5vw,60px);font-weight:700;letter-spacing:-.035em;line-height:1.04}
.luce{
  background:linear-gradient(100deg,var(--tertiary),var(--secondary) 55%,#A8DCCD);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
main a.filo{color:var(--tertiary);border-bottom:1px solid rgba(100,184,163,.35)}
main a.filo:hover{border-color:var(--tertiary)}

/* ── menu a tendina ───────────────────────────────────────────────────── */
.voce-gruppo{position:relative}
.voce-gruppo > button{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  padding:8px 13px;border-radius:9px;font:500 13.5px 'Plus Jakarta Sans',sans-serif;color:var(--muted);
  transition:color .2s,background .2s;
}
.voce-gruppo > button svg{width:11px;height:11px;transition:transform .25s}
.voce-gruppo:hover > button,.voce-gruppo:focus-within > button{color:var(--text);background:rgba(255,255,255,.05)}
.voce-gruppo:hover > button svg,.voce-gruppo:focus-within > button svg{transform:rotate(180deg)}
.menu a.corrente,.voce-gruppo.corrente > button{color:var(--text)}
.tendina{
  position:absolute;top:calc(100% + 16px);left:50%;width:640px;
  transform:translate(-50%,8px);opacity:0;visibility:hidden;
  transition:opacity .22s,transform .22s,visibility .22s;
  background:rgba(18,20,20,.96);border:1px solid rgba(255,255,255,.10);border-radius:18px;
  padding:12px;backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
.tendina.stretta{width:330px;grid-template-columns:1fr}
.tendina::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
.voce-gruppo:hover .tendina,.voce-gruppo:focus-within .tendina{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menu .tendina a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.menu .tendina a::after{display:none}
.tendina a img,.tendina a .ico{width:40px;height:40px;border-radius:11px;flex:none}
.tendina a .ico{display:flex;align-items:center;justify-content:center;background:rgba(100,184,163,.10);
  border:1px solid rgba(100,184,163,.2);color:var(--tertiary)}
.tendina a .ico svg{width:19px;height:19px}
.tendina a b{display:block;font:600 14px 'Outfit',sans-serif;color:var(--text);line-height:1.2}
.tendina a span{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
.tendina .tutti{grid-column:1/-1;justify-content:center;font-size:12.5px;color:var(--tertiary);
  border-top:1px solid rgba(255,255,255,.07);border-radius:0 0 12px 12px;margin-top:4px;padding-top:12px}
.menu-mobile .gruppo-titolo{font:600 10.5px 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:14px 14px 4px}
.menu-mobile .due{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:1120px){.menu{display:none}.hamburger{display:block}}

/* ── dispositivi disegnati ────────────────────────────────────────────── */
/* Niente immagini di mockup: la cornice è CSS, dentro ci sono le schermate
   vere. `data-sequenza` le fa scorrere (nuovo.js) col cerchio del tocco. */
.disp{position:relative;width:100%}
.disp .schermo{position:relative;overflow:hidden;background:#0d0f0f}
.disp .schermo img,.disp .schermo video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
}
.disp .schermo[data-sequenza] img{opacity:0;transition:opacity .75s ease,transform 6s ease-out;transform:scale(1.0)}
.disp .schermo[data-sequenza] img.attiva{opacity:1}
.tocco{
  position:absolute;width:8%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:3;
  background:rgba(135,206,189,.42);border:2px solid rgba(255,255,255,.9);
  transform:translate(-50%,-50%) scale(0);opacity:0;
}
.tocco.via{animation:tocco .75s ease-out}
@keyframes tocco{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}

.tablet{padding:2.1%;border-radius:4.4% / 5.8%;
  background:linear-gradient(145deg,#2c3030,#0a0b0b 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 40px 90px rgba(0,0,0,.6),0 0 0 1px #000}
.tablet .schermo{aspect-ratio:4/3;border-radius:2.3% / 3.1%}

/* Telefono: misure in cqw (centesimi della larghezza del telefono), così cornice, angoli e isola
   restano proporzionati a ogni grandezza. Ogni schermata ha sopra la sua barra di stato. */
.telefono{container-type:inline-size}
.telefono .cornice{position:relative;padding:2.6cqw;border-radius:15.5cqw;
  background:linear-gradient(145deg,#3b4041,#101212 40%,#232727);
  box-shadow:inset 0 0 0 .5cqw #0a0b0b,inset 0 0 0 .9cqw rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.6)}
.telefono .cornice::before{content:'';position:absolute;left:-.7cqw;top:36cqw;width:.9cqw;height:11cqw;border-radius:1cqw 0 0 1cqw;
  background:#2a2e2e;box-shadow:0 15cqw 0 #2a2e2e,calc(100cqw + .5cqw) 8cqw 0 #2a2e2e}
.telefono .cornice::after{content:'';position:absolute;top:4.6cqw;left:50%;width:27cqw;height:7.6cqw;transform:translateX(-50%);
  background:#050606;border-radius:99px;z-index:4}
.telefono .schermo{aspect-ratio:94.8/217;border-radius:13cqw;background:#fff}
.telefono .fotogramma{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--sb,#fff)}
.telefono .schermo[data-sequenza] .fotogramma{opacity:0;transition:opacity .75s ease}
.telefono .schermo[data-sequenza] .fotogramma.attiva,.telefono .schermo:not([data-sequenza]) .fotogramma{opacity:1}
.telefono .stato{flex:none;height:11cqw;padding:1.6cqw 7.5cqw 0;display:flex;align-items:center;justify-content:space-between;
  color:var(--sbt,#111);font:600 3.9cqw 'Outfit',sans-serif;letter-spacing:.01em}
.telefono .stato svg{height:3.3cqw;width:auto}
.telefono .fotogramma img,.telefono .fotogramma video{position:static!important;opacity:1!important;flex:1;min-height:0;width:100%;height:auto;object-fit:cover;object-position:top center}

.totem{padding:0 0 34%}
.totem .corpo{padding:4.5%;border-radius:6% / 3.6%;background:linear-gradient(160deg,#30494a,#12201f 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.55)}
.totem .schermo{aspect-ratio:9/16;border-radius:3% / 1.7%}
.totem::before{content:'';position:absolute;left:36%;right:36%;bottom:5%;height:30%;
  background:linear-gradient(90deg,#16292a,#274142 45%,#132322)}
.totem::after{content:'';position:absolute;left:14%;right:14%;bottom:0;height:5.5%;border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,#2b4546,#101c1c);box-shadow:0 18px 40px rgba(0,0,0,.5)}

.tv{padding-bottom:9%}
.tv .corpo{padding:1.2%;border-radius:1.6% / 2.8%;background:#060707;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 34px 80px rgba(0,0,0,.6)}
.tv .schermo{aspect-ratio:16/9;border-radius:.6%}
.tv::before{content:'';position:absolute;left:46%;right:46%;bottom:2.4%;height:8%;background:linear-gradient(90deg,#161818,#2b2e2e,#161818)}
.tv::after{content:'';position:absolute;left:34%;right:34%;bottom:0;height:2.6%;border-radius:8px 8px 3px 3px;background:#1d2020}

.finestra{border-radius:14px;overflow:hidden;background:#0b0c0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 90px rgba(0,0,0,.6)}
.finestra .cromo{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#151717;border-bottom:1px solid rgba(255,255,255,.07)}
.finestra .cromo i{width:10px;height:10px;border-radius:50%;background:#3a3d3d}
.finestra .cromo span{margin-left:10px;flex:1;max-width:320px;height:22px;border-radius:7px;background:rgba(255,255,255,.05);
  font:500 11px 'Plus Jakarta Sans',sans-serif;color:var(--muted);display:flex;align-items:center;padding:0 10px}
.finestra .schermo{aspect-ratio:16/10}

/* ── apertura della home: la scena coi dispositivi ────────────────────── */
.apertura.nuova .apertura-griglia{grid-template-columns:.92fr 1.08fr;gap:44px}
.scena{position:relative;perspective:1700px;padding:4% 4% 12% 0}
.scena .piano{transform-style:preserve-3d;transform:rotateY(calc(-13deg + var(--ry,0deg))) rotateX(calc(6deg + var(--rx,0deg)));
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.scena .tablet{animation:fluttua 9s ease-in-out infinite}
.scena .telefono{position:absolute;width:25%;right:-3%;bottom:-17%;transform:translateZ(90px);animation:fluttua 7s ease-in-out -2s infinite}
.scena .gettone{position:absolute;z-index:5;transform:translateZ(130px)}
.scena .gettone.a{left:-7%;top:10%;animation:fluttua 6s ease-in-out -1s infinite}
.scena .gettone.b{left:-4%;bottom:-6%;animation:fluttua 8s ease-in-out -3s infinite}
.scena .gettone.c{right:4%;top:-7%;animation:fluttua 7s ease-in-out -4s infinite}
@keyframes fluttua{0%,100%{translate:0 0}50%{translate:0 -9px}}
.scena::before{content:'';position:absolute;inset:10% 0 0 6%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(100,184,163,.26),transparent);filter:blur(30px)}
.gettone{
  display:flex;align-items:center;gap:11px;padding:10px 15px 10px 11px;border-radius:15px;
  background:rgba(22,25,25,.82);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);white-space:nowrap;
}
.gettone .pallino{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;
  background:rgba(100,184,163,.14);color:var(--tertiary)}
.gettone .pallino svg{width:17px;height:17px}
.gettone b{display:block;font:600 13.5px 'Outfit',sans-serif;color:var(--text);line-height:1.2}
.gettone span{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
.gettone .vivo{width:7px;height:7px;border-radius:50%;background:#5fe0a8;box-shadow:0 0 0 0 rgba(95,224,168,.6);animation:battito 2s infinite;margin-left:4px}
@keyframes battito{70%{box-shadow:0 0 0 9px rgba(95,224,168,0)}100%{box-shadow:0 0 0 0 rgba(95,224,168,0)}}
@media (prefers-reduced-motion:reduce){.scena *{animation:none!important}}
@media (max-width:980px){
  .apertura.nuova .apertura-griglia{grid-template-columns:1fr}
  .scena{padding:0 6% 16% 6%;margin-top:10px}.scena .gettone.a{left:-2%}.scena .gettone.c{display:none}
}
@media (max-width:620px){.scena .gettone.b{display:none}.gettone{padding:8px 11px 8px 8px}}

/* ── nastro dei clienti ───────────────────────────────────────────────── */
.clienti-nastro{padding:44px 0 10px;text-align:center}
.clienti-nastro .dicitura{font:600 11px 'Outfit',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.loghi{overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.loghi-pista{display:flex;width:max-content;animation:scorri 60s linear infinite}
.loghi.contrario .loghi-pista{animation-direction:reverse;animation-duration:74s}
.loghi:hover .loghi-pista{animation-play-state:paused}
.loghi-gruppo{display:flex;flex:none;gap:14px;padding-right:14px}
.logo-cliente{
  width:176px;height:76px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--glass);border:1px solid var(--glass-bordo);padding:12px 18px;
  filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s,border-color .3s;
}
.logo-cliente:hover{filter:none;opacity:1;border-color:rgba(100,184,163,.4)}
.logo-cliente img{max-height:44px;max-width:100%;object-fit:contain}
.logo-cliente.segnaposto{border-style:dashed}
.logo-cliente.segnaposto .mono{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  font:700 15px 'Outfit',sans-serif;color:#07332F;background:linear-gradient(135deg,#87CEBD,#4D9D91)}
.logo-cliente.segnaposto span{font:600 12.5px 'Outfit',sans-serif;color:var(--text-2);text-align:left;line-height:1.2}
.logo-cliente.segnaposto small{display:block;font:500 10.5px 'Plus Jakarta Sans',sans-serif;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.loghi-pista{animation:none}}
.muro-loghi{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px;margin-top:40px}
.muro-loghi .logo-cliente{width:auto;height:96px}

/* ── ecosistema: le app a schede ──────────────────────────────────────── */
.eco{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center;margin-top:52px}
.eco-lista{display:flex;flex-direction:column;gap:6px}
.eco-lista button{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;text-align:left;width:100%;cursor:pointer;
  padding:12px 14px;border-radius:15px;background:transparent;border:1px solid transparent;
  transition:background .25s,border-color .25s;
}
.eco-lista button:hover{background:rgba(255,255,255,.03)}
.eco-lista button[aria-selected=true]{background:var(--glass-alto);border-color:rgba(100,184,163,.28)}
.eco-lista img{width:46px;height:46px;border-radius:12px;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.eco-lista b{display:block;font:600 16px 'Outfit',sans-serif;color:var(--text)}
.eco-lista span{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.eco-lista i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--tertiary)}
.eco-lista button[aria-selected=true] i.corre{animation:riempi var(--durata,6s) linear forwards}
@keyframes riempi{to{width:100%}}
.eco-palco{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center}
.eco-pannello{display:none;width:100%;flex-direction:column;align-items:center;gap:22px}
.eco-pannello.attivo{display:flex;animation:entra .55s cubic-bezier(.2,.7,.2,1)}
@keyframes entra{from{opacity:0;transform:translateY(18px) scale(.985)}}
.eco-pannello .disp{max-width:var(--larg,100%)}
.eco-pannello .sotto{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
@media (max-width:980px){
  .eco{grid-template-columns:1fr}
  .eco-lista{flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .eco-lista button{flex:none;width:auto}.eco-lista span{display:none}.eco-palco{min-height:0}
}

/* ── il «film»: una serata raccontata a scene ─────────────────────────── */
.film{margin-top:52px;border-radius:26px;border:1px solid var(--glass-bordo);overflow:hidden;position:relative;
  background:linear-gradient(160deg,rgba(15,90,84,.22),rgba(18,18,18,.55) 50%,rgba(100,184,163,.08))}
.film-palco{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;min-height:540px}
.film-testi{position:relative;padding:48px 0 48px 48px}
.film-testo{position:absolute;inset:48px 0 48px 48px;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;pointer-events:none}
.film-testo.attiva{opacity:1;transform:none;pointer-events:auto}
.film-testo .ora{font:600 13px 'Outfit',sans-serif;letter-spacing:.12em;color:var(--tertiary);display:flex;align-items:center;gap:10px}
.film-testo .ora img{width:30px;height:30px;border-radius:8px}
.film-testo h3{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;margin:16px 0 12px;line-height:1.12}
.film-testo p{color:var(--muted);font-size:15.5px;max-width:400px}
.film-testo a{margin-top:20px;align-self:flex-start}
.film-schermi{position:relative;overflow:hidden}
.film-scena{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:44px;
  opacity:0;transform:translateX(40px) scale(.97);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.film-scena.attiva{opacity:1;transform:none}
.film-scena.uscita{opacity:0;transform:translateX(-40px) scale(.97)}
.film-scena .disp{max-width:var(--larg,100%)}
.film-scena .telefono{--larg:226px}.film-scena .tv{--larg:620px}.film-scena .tablet{--larg:560px}
.film-barra{display:flex;align-items:center;gap:14px;padding:16px 22px;border-top:1px solid var(--glass-bordo);background:rgba(0,0,0,.25)}
.film-barra .pausa{width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--glass-alto);border:1px solid var(--glass-bordo);color:var(--text)}
.film-barra .pausa svg{width:14px;height:14px}
.film-tappe{display:flex;gap:8px;flex:1}
.film-tappe button{flex:1;background:none;border:0;cursor:pointer;text-align:left;padding:4px 0}
.film-tappe .riga{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.film-tappe .riga i{display:block;height:100%;width:0;background:var(--tertiary)}
.film-tappe button.fatta .riga i{width:100%}
.film-tappe button.attiva .riga i{animation:riempi var(--durata,6s) linear forwards}
.film.fermo .film-tappe button.attiva .riga i{animation-play-state:paused}
.film-tappe em{display:block;font:500 11.5px 'Plus Jakarta Sans',sans-serif;font-style:normal;color:var(--muted);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-tappe button.attiva em{color:var(--text)}
@media (max-width:980px){
  .film-palco{grid-template-columns:1fr;min-height:0}
  .film-testi{padding:0;min-height:230px}.film-testo{inset:28px 24px 0}
  .film-schermi{height:400px}.film-scena{padding:20px 24px 28px}
  .film-scena .telefono{--larg:160px}.film-tappe em{display:none}
}

/* ── griglia «bento» delle funzioni ───────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:52px}
.bento .vetro{grid-column:span 2;display:flex;flex-direction:column;min-height:300px;padding:26px 26px 0}
.bento .vetro.largo{grid-column:span 4}
.bento .vetro.meta{grid-column:span 3}
.bento .vetro p{margin-top:8px;font-size:14.5px;color:var(--muted)}
.bento .vista{margin:22px -26px 0;flex:1;position:relative;min-height:170px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.bento .vista img{position:absolute;left:26px;top:0;width:calc(100% - 52px);border-radius:12px 12px 0 0;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bento .vetro:hover .vista img{transform:translateY(-10px)}
.bento .vista.stretta img{left:50%;width:46%;translate:-50% 0}
.bento .vista.coppia img{width:38%;left:9%}
.bento .vista.coppia img + img{left:53%;top:26px}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.bento .vetro,.bento .vetro.largo,.bento .vetro.meta{grid-column:span 1}}
@media (max-width:620px){.bento{grid-template-columns:1fr}}

/* ── integrazioni ─────────────────────────────────────────────────────── */
.integra{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.integra .vetro{padding:20px}
.integra h3{font-size:15.5px;display:flex;align-items:center;gap:9px}
.integra h3 svg{width:17px;height:17px;color:var(--tertiary);flex:none}
.integra p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
@media (max-width:980px){.integra{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.integra{grid-template-columns:1fr}}

/* ── testata delle pagine interne ─────────────────────────────────────── */
.testata{padding:150px 0 40px;position:relative}
.testata.con-figura .contenitore{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.testata h1{margin:8px 0 18px}
.testata .intro{font-size:clamp(16px,1.7vw,18px);max-width:560px}
.briciole{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:22px}
.briciole a:hover{color:var(--tertiary)}
.briciole span::before{content:'/';margin-right:8px;opacity:.5}
.app-etichetta{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:99px;
  background:var(--glass);border:1px solid var(--glass-bordo);font:600 13px 'Outfit',sans-serif;color:var(--text);margin-bottom:14px}
.app-etichetta img{width:28px;height:28px;border-radius:8px}
.testata .figura{display:flex;justify-content:center}
.testata .figura .telefono{max-width:270px}.testata .figura .totem{max-width:290px}
.testata .figura.duo{position:relative;padding-right:12%}
.testata .figura.duo .telefono{position:absolute;right:0;bottom:-8%;width:23%}
@media (max-width:980px){.testata{padding:120px 0 20px}.testata.con-figura .contenitore{grid-template-columns:1fr;gap:36px}}

/* galleria delle schermate: una striscia che scorre col dito */
.galleria{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 24px 22px;margin:44px -24px 0;scrollbar-width:thin;scrollbar-color:#2c2c2c transparent}
.galleria figure{flex:none;scroll-snap-align:center;width:var(--w,300px)}
.galleria figure img{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.galleria figcaption{margin-top:14px}
.galleria figcaption b{display:block;font:600 15.5px 'Outfit',sans-serif;color:var(--text)}
.galleria figcaption span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.galleria.larga{--w:min(720px,82vw)}.galleria.media{--w:min(560px,82vw)}.galleria.alta{--w:250px}

.funzioni .vetro h3{font-size:17.5px}
.funzioni .vetro p{font-size:14.5px;color:var(--muted);margin-top:8px}
.funzioni .vetro .icona{margin-bottom:16px}

/* domande frequenti */
.domande{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:10px}
.domande details{background:var(--glass);border:1px solid var(--glass-bordo);border-radius:15px;padding:0 22px}
.domande summary{cursor:pointer;list-style:none;padding:18px 0;font:600 16px 'Outfit',sans-serif;color:var(--text);display:flex;justify-content:space-between;gap:16px}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:'+';color:var(--tertiary);font-size:20px;line-height:1;transition:transform .25s}
.domande details[open] summary::after{transform:rotate(45deg)}
.domande details p{padding:0 0 20px;color:var(--muted);font-size:15px}

/* schede che rimandano a un'altra pagina */
a.vetro{display:block}
a.vetro.articolo-scheda{display:flex}
a.vetro:hover{border-color:rgba(100,184,163,.4);transform:translateY(-3px)}
.scheda-app{display:flex;gap:16px;align-items:flex-start}
.scheda-app img{width:54px;height:54px;border-radius:14px;flex:none;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.scheda-app p{font-size:14px;color:var(--muted);margin-top:6px}
.freccia{display:inline-flex;align-items:center;gap:6px;font:600 13px 'Plus Jakarta Sans',sans-serif;color:var(--tertiary);margin-top:14px}
.freccia svg{width:14px;height:14px;transition:transform .25s}
a:hover .freccia svg{transform:translateX(4px)}

/* settori */
.settori{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:52px}
.settore{position:relative;border-radius:var(--raggio);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;
  border:1px solid var(--glass-bordo);isolation:isolate}
.settore img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.settore::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,12,12,.15),rgba(10,12,12,.93) 72%)}
.settore:hover img{transform:scale(1.06)}
.settore div{padding:24px}
.settore p{font-size:13.5px;color:var(--text-2);opacity:.8;margin-top:6px}
@media (max-width:1180px){.settori{grid-template-columns:repeat(3,1fr)}}
@media (max-width:980px){.settori{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.settori{grid-template-columns:1fr}.settore{min-height:260px}}

/* ── blog ─────────────────────────────────────────────────────────────── */
.articoli{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.articolo-scheda{display:flex;flex-direction:column;padding:0;overflow:hidden}
.articolo-scheda .copertina{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--bg-2)}
.articolo-scheda .copertina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.articolo-scheda:hover .copertina img{transform:scale(1.05)}
.articolo-scheda .dentro-scheda{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.articolo-scheda h3{font-size:19px;line-height:1.25;margin-top:10px}
.articolo-scheda p{font-size:14px;color:var(--muted);margin-top:10px;flex:1}
.meta-art{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.meta-art .tema{font:600 10.5px 'Outfit',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--tertiary);
  background:rgba(100,184,163,.10);border:1px solid rgba(100,184,163,.22);padding:4px 9px;border-radius:99px}
.articoli .primo{grid-column:1/-1;flex-direction:row}
.articoli .primo .copertina{flex:1.15;aspect-ratio:auto;min-height:320px}
.articoli .primo .dentro-scheda{flex:1;justify-content:center;padding:36px}
.articoli .primo h3{font-size:clamp(22px,2.6vw,30px)}
@media (max-width:980px){.articoli{grid-template-columns:1fr 1fr}.articoli .primo{flex-direction:column}.articoli .primo .copertina{min-height:220px}}
@media (max-width:620px){.articoli{grid-template-columns:1fr}}
.filtri-temi{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.filtri-temi button{cursor:pointer;padding:8px 15px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-bordo);
  font:500 13px 'Plus Jakarta Sans',sans-serif;color:var(--text-2)}
.filtri-temi button[aria-pressed=true]{background:rgba(100,184,163,.16);border-color:rgba(100,184,163,.5);color:var(--text)}

.articolo{max-width:760px;margin:0 auto}
.articolo .copertina-grande{border-radius:var(--raggio);overflow:hidden;border:1px solid var(--glass-bordo);margin:34px 0 10px;aspect-ratio:16/8;position:relative}
.articolo .copertina-grande img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.prosa{font-size:17px;line-height:1.75;color:var(--text-2)}
.prosa > *{margin-top:22px}
.prosa h2{font-size:clamp(23px,2.6vw,29px);margin-top:44px}
.prosa h3{margin-top:32px}
.prosa ul,.prosa ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prosa li::marker{color:var(--tertiary)}
.prosa strong{color:var(--text)}
.prosa a{color:var(--tertiary);border-bottom:1px solid rgba(100,184,163,.35)}
.prosa .riquadro{background:rgba(100,184,163,.08);border:1px solid rgba(100,184,163,.25);border-radius:15px;padding:20px 22px;font-size:15.5px}
.prosa .riquadro b{color:var(--text);font-family:'Outfit',sans-serif}

/* ── piede a più colonne ──────────────────────────────────────────────── */
.piede-griglia.ampio{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}
@media (max-width:980px){.piede-griglia.ampio{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.piede-griglia.ampio{grid-template-columns:1fr}}

/* ── note dell'anteprima (spariscono dal sito vero) ───────────────────── */
.nota-ant{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin:6px 0;
  font:600 11px 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;color:#1d1600;
  background:#F2C94C;border-radius:7px;padding:4px 9px;text-transform:none;white-space:normal;text-align:left;line-height:1.35}
.nota-ant::before{content:'✎'}
span.nota-ant{color:#1d1600!important;font-size:11px!important;margin-top:8px!important}
body.senza-note .nota-ant{display:none}
.interruttore-note{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:99px;background:#F2C94C;color:#1d1600;border:0;font:700 12px 'Plus Jakarta Sans',sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.senza-note .interruttore-note{background:rgba(30,32,32,.9);color:var(--muted);border:1px solid var(--glass-bordo)}

/* ── clienti veri ─────────────────────────────────────────────────────── */
.logo-cliente{width:104px;height:104px;padding:0;overflow:hidden;border-radius:24px;filter:none;opacity:1;background:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.logo-cliente img{width:100%;height:100%;max-height:none;object-fit:cover}
.logo-cliente:hover{transform:translateY(-3px) scale(1.04);transition:transform .25s}
.loghi-gruppo{gap:18px;padding-right:18px}
.muro-clienti{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px;margin-top:56px}
.cliente{text-align:center}
.cliente img{width:112px;height:112px;border-radius:26px;margin:0 auto;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .25s}
.cliente:hover img{transform:translateY(-4px)}
.cliente b{display:block;font:600 14.5px 'Outfit',sans-serif;color:var(--text);margin-top:12px}
.cliente span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* storia in evidenza e caso di studio */
a.vetro.storia{display:grid;grid-template-columns:1.1fr 1fr;padding:0;overflow:hidden}
.storia-foto{position:relative;min-height:380px}
.storia-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.storia-testo{padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;justify-content:center}
.storia-testo h3{font-size:clamp(22px,2.5vw,30px);line-height:1.18;margin-top:14px}
.storia-testo p{color:var(--muted);font-size:15px;margin-top:12px}
.storia-cifre{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--glass-bordo)}
.storia-cifre b{display:block;font:700 26px 'Outfit',sans-serif;color:var(--tertiary)}
.storia-cifre span{display:block;font-size:11.5px;color:var(--muted);line-height:1.3}
@media (max-width:980px){a.vetro.storia{grid-template-columns:1fr}.storia-foto{min-height:240px}}
.copertina-caso{border-radius:var(--raggio);overflow:hidden;border:1px solid var(--glass-bordo);margin:34px 0 22px;aspect-ratio:16/7;position:relative}
.copertina-caso img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.numeri.otto{grid-template-columns:repeat(4,1fr)}
.numeri.otto .numero b{font-size:clamp(26px,3.2vw,38px)}
@media (max-width:980px){.numeri.otto{grid-template-columns:repeat(2,1fr)}}

/* ── integrazioni coi loghi ───────────────────────────────────────────── */
.logo-int{background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:14px 18px;
  width:150px;height:78px;flex:none;color:#0F5A54}
.logo-int img{max-width:100%;max-height:100%;object-fit:contain}
.logo-int svg{width:30px;height:30px}
.loghi-int{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:44px}
.loghi-int .logo-int{transition:transform .25s}
.loghi-int .logo-int:hover{transform:translateY(-3px)}
.scheda-int{display:flex;gap:20px;align-items:center;padding:22px}
.scheda-int h3{font-size:17px}
.scheda-int p{font-size:14px;color:var(--muted);margin-top:6px}
.titolo-cat{font-size:clamp(20px,2.2vw,26px);margin:46px 0 18px}
@media (max-width:620px){.scheda-int{flex-direction:column;align-items:flex-start}}

/* ── mappa d'Italia ───────────────────────────────────────────────────── */
.clienti-mappa{padding:clamp(48px,6vw,80px) 0 0}
.clienti-mappa + .sezione{padding-top:clamp(48px,6vw,84px)}
.mappa-riquadro{position:relative;display:flex;justify-content:center}
.mappa-riquadro::before{content:'';position:absolute;inset:8% 4%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(100,184,163,.22),transparent);filter:blur(34px)}
.mappa{width:100%;max-width:520px;height:auto;overflow:visible}
.mappa-riquadro.larga .mappa{max-width:600px}
.mappa .terra path{fill:url(#mTerra);stroke:rgba(135,206,189,.28);stroke-width:.8;stroke-linejoin:round;transition:fill .3s}
.mappa .terra path:hover{fill:#24332f}
.mappa .scie circle{fill:#87CEBD;opacity:.55}
.mappa .bolla .corpo{fill:url(#mBolla);stroke:rgba(255,255,255,.85);stroke-width:1.1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.mappa .bolla text{fill:#06231f;font-family:'Outfit',sans-serif;font-weight:700;text-anchor:middle;pointer-events:none}
.mappa .bolla .onda{fill:none;stroke:#87CEBD;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:onda 3.6s ease-out var(--rit,0s) infinite}
@keyframes onda{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.3)}}
.mappa .bolla{transform-box:fill-box;transform-origin:center;transition:transform .2s;cursor:default}
.mappa .bolla:hover{transform:scale(1.15)}
.appare .mappa .bolla .corpo,.appare .mappa .bolla text{opacity:0;transition:opacity .5s var(--rit,0s)}
.appare.dentro .mappa .bolla .corpo,.appare.dentro .mappa .bolla text{opacity:1}
@media (prefers-reduced-motion:reduce){.mappa .bolla .onda{animation:none}.appare .mappa .bolla .corpo,.appare .mappa .bolla text{opacity:1}}

.griglia.kit-due{max-width:820px;margin-left:auto;margin-right:auto}