/* Antonio Manzoni · Marketing & Business Applications
   Palette e caratteri presi dal marchio: lamina argento su carta carbone. */

/* ---------- Font (in locale, nessuna richiesta a servizi esterni) ---------- */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/marcellus-400.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/cinzel-var.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/hanken-grotesk-var.woff2') format('woff2')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/carlito-400.woff2') format('woff2')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/carlito-700.woff2') format('woff2')}

/* ---------- Gettoni ---------- */
:root{
  --carbone:#1e2227;
  --carbone-fondo:#16191d;
  --carbone-alto:#252a30;
  --filo:#383e46;
  --argento:#d3d6da;
  --argento-luce:#f2f3f4;
  --fumo:#9ca3ab;
  --perla:#e8eaeb;
  --perla-alta:#f4f5f5;
  --inchiostro:#1e2227;
  --grafite:#4a5159;
  --filo-chiaro:#c9ced3;

  --lamina:linear-gradient(100deg,#8f969f 0%,#c6cbd1 13%,#f8f9fa 24%,#aeb4bb 37%,#e6e9ec 50%,#8d949d 63%,#dadee2 77%,#f5f6f7 88%,#a3a9b1 100%);
  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --f-titoli:'Marcellus','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-incise:'Cinzel','Marcellus',Georgia,serif;
  --f-testo:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-excel:'Carlito',Calibri,Arial,sans-serif;

  --margine:clamp(16px,4.5vw,48px);
  --testata:72px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--testata) + 12px)}
body{margin:0;font-family:var(--f-testo);font-size:1.0625rem;line-height:1.65;background:var(--carbone);color:var(--argento);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.icona{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4{font-family:var(--f-titoli);font-weight:400;color:var(--titolo,var(--argento-luce));text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--fuoco,#f2f3f4);outline-offset:3px;border-radius:2px}

.contenitore{width:min(1240px,100% - 2 * var(--margine));margin-inline:auto}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--argento-luce);color:var(--carbone);padding:10px 16px;border-radius:4px;font-weight:600;text-decoration:none}
.salta:focus{top:12px}

/* ---------- Temi: carta carbone / carta perla ---------- */
.tema-scuro{
  --testo:var(--argento);--testo-2:var(--fumo);--titolo:var(--argento-luce);--linea:var(--filo);--fuoco:#f2f3f4;
  --bottone-sfondo:var(--lamina);--bottone-testo:var(--carbone);--bottone-bordo:rgba(255,255,255,.4);
  position:relative;isolation:isolate;background-color:var(--carbone);color:var(--testo);
}
.tema-scuro::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grana);opacity:.06;pointer-events:none}
.tema-chiaro{
  --testo:#2a2f35;--testo-2:var(--grafite);--titolo:var(--inchiostro);--linea:var(--filo-chiaro);--fuoco:var(--inchiostro);
  --bottone-sfondo:linear-gradient(var(--carbone),var(--carbone));--bottone-testo:var(--argento-luce);--bottone-bordo:var(--carbone);
  background:var(--perla);color:var(--testo);
}

/* ---------- Elementi ricorrenti ---------- */
.occhiello{font-family:var(--f-incise);font-weight:600;font-size:.72rem;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;color:var(--testo-2);margin:0}
.lamina{background-image:var(--lamina);background-size:260% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lucentezza 3.2s cubic-bezier(.3,.1,.2,1) 2.65s both}
@keyframes lucentezza{from{background-position:100% 0}to{background-position:0 0}}

.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.55em;border-radius:3px;border:1px solid var(--bottone-bordo);
  background:var(--bottone-sfondo);background-size:220% 100%;background-position:0 0;color:var(--bottone-testo);
  font:600 .98rem/1.1 var(--f-testo);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -14px rgba(0,0,0,.7);
  transition:background-position .7s ease,transform .2s ease,box-shadow .2s ease;
}
.bottone:hover{background-position:100% 0;transform:translateY(-1px)}
.bottone--piccolo{padding:.62em 1.1em;font-size:.9rem}
.bottone--vuoto{background:transparent;color:var(--titolo);border-color:var(--linea);box-shadow:none}
.bottone--vuoto:hover{border-color:var(--titolo)}

.collegamento-freccia{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--titolo);text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:.35em;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.collegamento-freccia::after{content:"→";transition:transform .25s ease}
.collegamento-freccia:hover{text-decoration-color:currentColor}
.collegamento-freccia:hover::after{transform:translateX(4px)}
[data-segnaposto]{text-decoration:underline dotted #d9b56b;text-underline-offset:5px}

/* ---------- Apertura del sito: la carta carbone si apre lungo un filo d'argento ----------
   0,15 s il filo si traccia dal centro · 0,35 s affiora il monogramma e la luce scorre sulla lamina
   0,85 s il nome stringe la spaziatura · 2,05 s la carta si apre lungo il filo · 3 s il sipario sparisce.
   Tutto in CSS, così funziona anche senza JavaScript; main.js aggiunge il salto (clic, tasto, scorrimento)
   e blocca lo scorrimento finché l'apertura è in corso. */
.sipario{position:fixed;inset:0;z-index:200;pointer-events:none;animation:sipario-fine 0s linear 3s forwards}
@keyframes sipario-fine{to{visibility:hidden}}
.sipario__meta{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:auto;background-color:var(--carbone);animation:.95s cubic-bezier(.76,0,.24,1) 2.05s forwards}
.sipario__meta::before{content:"";position:absolute;inset:0;background-image:var(--grana);opacity:.06;pointer-events:none}
.sipario__meta::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#8f969f 18%,#f8f9fa 50%,#8f969f 82%,transparent);transform:scaleX(0);animation:filo .85s cubic-bezier(.2,.7,.2,1) .15s forwards}
.sipario__meta--alto{top:0;height:calc(50% + 1px);justify-content:flex-end;padding-bottom:clamp(22px,4vh,38px);background-image:radial-gradient(900px 520px at 10% -5%,rgba(255,255,255,.07),transparent 70%);animation-name:apri-su}
.sipario__meta--alto::after{bottom:0}
.sipario__meta--basso{bottom:0;height:50%;justify-content:flex-start;gap:12px;padding-top:clamp(22px,4vh,36px);animation-name:apri-giu}
.sipario__meta--basso::after{top:0}
@keyframes filo{to{transform:scaleX(1)}}
@keyframes apri-su{to{transform:translateY(-101%)}}
@keyframes apri-giu{to{transform:translateY(101%)}}
.sipario__ma{position:relative;width:clamp(124px,15vw,184px);aspect-ratio:640/415;background:var(--lamina);background-size:320% 100%;-webkit-mask:url('../img/monogramma-ma.png') center/contain no-repeat;mask:url('../img/monogramma-ma.png') center/contain no-repeat;opacity:0;animation:ma-affiora 1.05s cubic-bezier(.2,.7,.2,1) .35s forwards,ma-luce 1.7s cubic-bezier(.45,0,.2,1) .55s both}
@keyframes ma-affiora{from{opacity:0;transform:translateY(18px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ma-luce{from{background-position:100% 0}to{background-position:0 0}}
.sipario__nome{position:relative;font-family:var(--f-incise);font-weight:600;font-size:clamp(1rem,.8rem + 1vw,1.45rem);letter-spacing:.2em;text-transform:uppercase;color:var(--argento-luce);white-space:nowrap;opacity:0;animation:nome-stringe 1.15s cubic-bezier(.2,.7,.2,1) .85s forwards}
@keyframes nome-stringe{from{opacity:0;letter-spacing:.62em}to{opacity:1;letter-spacing:.2em}}
.sipario__sotto{position:relative;font-family:var(--f-incise);font-weight:500;font-size:clamp(.54rem,.48rem + .25vw,.7rem);letter-spacing:.34em;text-transform:uppercase;color:var(--fumo);white-space:nowrap;opacity:0;animation:svela .9s ease 1.25s forwards}
@keyframes svela{to{opacity:1}}
html{scrollbar-gutter:stable}
html.in-apertura{overflow:hidden}
.apertura-saltata .sipario{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}

/* ---------- Testata ---------- */
.testata{position:sticky;top:0;z-index:50;background:rgba(30,34,39,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .3s}
.testata.scorsa{border-bottom-color:var(--filo)}
.testata__riga{height:var(--testata);display:flex;align-items:center;gap:24px}
.marchio{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--argento-luce);margin-right:auto;min-width:0}
.marchio__ma{flex:none;width:46px;aspect-ratio:640/415;background:var(--lamina);background-size:200% 100%;-webkit-mask:url('../img/monogramma-ma.png') center/contain no-repeat;mask:url('../img/monogramma-ma.png') center/contain no-repeat}
.marchio__testo{display:flex;flex-direction:column;gap:3px;min-width:0}
.marchio__nome{font-family:var(--f-incise);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
.marchio__sotto{font-family:var(--f-incise);font-weight:500;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fumo);line-height:1.2;white-space:nowrap}
.menu{display:flex;gap:28px}
.menu a{color:var(--argento);text-decoration:none;font-size:.94rem;font-weight:500;position:relative;padding:6px 0;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--argento-luce);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.menu a:hover{color:var(--argento-luce)}
.menu a:hover::after{transform:scaleX(1)}
.testata__azione{--bottone-sfondo:var(--lamina);--bottone-testo:var(--carbone);--bottone-bordo:rgba(255,255,255,.4)}
.testata__chiama{display:inline-flex;align-items:center;gap:8px;padding:.6em 1em;border:1px solid var(--filo);border-radius:3px;color:var(--argento-luce);text-decoration:none;font-size:.9rem;font-weight:600;line-height:1.1;transition:border-color .2s,background-color .2s}
.testata__chiama:hover{border-color:var(--argento);background-color:rgba(255,255,255,.04)}
.testata__social{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--argento);transition:color .2s,background-color .2s}
.testata__social:hover{color:var(--argento-luce);background-color:rgba(255,255,255,.07)}
.testata__social svg{width:22px;height:22px;fill:currentColor}
.testata__social+.testata__social{margin-left:-14px} /* Facebook e LinkedIn vicini, come una coppia */

/* Barretta dei contatti rapidi: solo su telefono e tablet (su computer c'è «Chiama» nella testata) */
.barra-contatti{display:none}
@media (max-width:959px){
  .testata__chiama{display:none}
  .barra-contatti{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(22,25,29,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--filo)}
  .barra-contatti a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border-radius:3px;font-size:1rem;font-weight:600;text-decoration:none}
  .barra-contatti__chiama{background:var(--lamina);background-size:220% 100%;color:var(--carbone);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
  .barra-contatti__scrivi{color:var(--argento-luce);border:1px solid #4a515a}
}
.testata__apri{display:none;align-items:center;gap:10px;background:none;border:1px solid var(--filo);color:var(--argento-luce);font:600 .85rem/1 var(--f-testo);padding:10px 12px;border-radius:3px;cursor:pointer}
.testata__apri-icona{position:relative;width:16px;height:10px}
.testata__apri-icona::before,.testata__apri-icona::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .25s ease,top .25s ease}
.testata__apri-icona::before{top:0}
.testata__apri-icona::after{top:8.5px}
.testata__apri[aria-expanded="true"] .testata__apri-icona::before{top:4.25px;transform:rotate(45deg)}
.testata__apri[aria-expanded="true"] .testata__apri-icona::after{top:4.25px;transform:rotate(-45deg)}

/* il menu passa al pulsante «Menu» sotto i 1240 px, così testata, Facebook, «Chiama» e «Contattami» stanno su una riga */
@media (min-width:1240px){.menu__contatti{display:none}}
@media (max-width:1239px){
  .testata__apri{display:inline-flex}
  .menu{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0;padding:4px var(--margine) 18px;background:var(--carbone);border-bottom:1px solid var(--filo);box-shadow:0 30px 40px -30px rgba(0,0,0,.8)}
  .testata.aperta .menu{display:flex}
  .menu a{padding:15px 0;border-bottom:1px solid var(--filo);font-size:1.05rem}
  .menu a::after{display:none}
}
@media (max-width:639px){
  :root{--testata:64px}
  .testata__azione{display:none}
  .marchio{gap:11px}
  .marchio__ma{width:38px}
  .marchio__nome{font-size:.8rem;letter-spacing:.12em}
  .marchio__sotto{font-size:.5rem;letter-spacing:.18em}
  .testata__riga{gap:10px}
  .testata__social{width:34px;height:34px}
  .testata__social+.testata__social{margin-left:-8px}
  /* poco spazio: «Menu» resta solo icona (la scritta c'è ancora per i lettori di schermo) */
  .testata__apri{padding:10px 11px}
  .testata__apri-testo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
/* telefoni stretti: prima si toglie la riga sotto il nome, poi (sotto i 350 px) LinkedIn resta solo nei Contatti */
@media (max-width:429px){
  .marchio__nome{letter-spacing:.1em}
  .marchio__sotto{font-size:.46rem;letter-spacing:.1em}
}
@media (max-width:389px){
  .marchio__ma{width:34px}
  .marchio__nome{font-size:.76rem;letter-spacing:.1em}
  .marchio__sotto{display:none}
}
@media (max-width:349px){
  .marchio__ma{width:30px}
  .marchio__nome{font-size:.72rem;letter-spacing:.08em}
  .testata__social+.testata__social{display:none}
}

/* ---------- Apertura ---------- */
.apertura{
  padding:clamp(40px,7vw,96px) 0 clamp(36px,5vw,64px);
  background-image:radial-gradient(900px 520px at 10% -5%,rgba(255,255,255,.07),transparent 70%),radial-gradient(700px 520px at 92% 55%,rgba(150,162,178,.07),transparent 70%);
}
.apertura__griglia{display:grid;gap:clamp(44px,5vw,72px);align-items:center}
@media (min-width:1000px){.apertura__griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:1200px){.apertura__griglia{grid-template-columns:minmax(0,1fr) minmax(0,560px)}}
.apertura__titolo{font-size:clamp(2.6rem,1.2rem + 4.2vw,4.3rem);line-height:1.03;letter-spacing:-.01em;margin:.45em 0 .42em}
.attacco{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.62;color:var(--argento);max-width:33em;margin-bottom:1.8em}
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
/* mentre la carta si apre, le parti dell'intestazione salgono in sequenza */
@keyframes sale{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.apertura__testo>*,.confronto,.settori{animation:sale .95s cubic-bezier(.2,.7,.2,1) both}
.apertura__testo>.occhiello{animation-delay:2.3s}
.apertura__titolo{animation-delay:2.4s}
.attacco{animation-delay:2.55s}
.azioni{animation-delay:2.68s}
.confronto{animation-delay:2.5s}
.settori{animation-delay:2.85s}
.apertura-saltata .apertura__testo>*,.apertura-saltata .confronto,.apertura-saltata .settori,.apertura-saltata .lamina{animation:none}
.settori{margin:clamp(48px,6vw,84px) 0 0;padding-top:22px;border-top:1px solid var(--linea);font-family:var(--f-incise);font-weight:500;font-size:.72rem;line-height:2;letter-spacing:.2em;text-transform:uppercase;color:var(--testo-2)}
.settori span{color:var(--titolo);font-weight:600;margin-right:1.4em}

/* ---------- Confronto prima / dopo ---------- */
.confronto{margin:0;width:100%;max-width:560px;justify-self:center}
.confronto__legenda{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-family:var(--f-incise);font-weight:600;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fumo)}
.confronto__schermo{
  --pos:50%;--k:1;
  position:relative;aspect-ratio:560/460;border-radius:12px;overflow:hidden;background:#14171b;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 44px 80px -34px rgba(0,0,0,.85),0 14px 28px -16px rgba(0,0,0,.6);
  touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;
}
.pannello{position:absolute;inset:0;overflow:hidden}
.pannello--prima{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.scala{position:absolute;top:0;left:0;width:560px;height:460px;transform:scale(var(--k));transform-origin:0 0}
.confronto__maniglia{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;z-index:3;pointer-events:none;background:linear-gradient(#f2f3f4,#a9afb6 50%,#f2f3f4);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 18px rgba(0,0,0,.35)}
.confronto__pomello{position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:var(--lamina);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.45)}
.confronto__pomello::before,.confronto__pomello::after{content:"";position:absolute;top:50%;margin-top:-5px;border:5px solid transparent}
.confronto__pomello::before{left:9px;border-right:6px solid var(--carbone);border-left:0}
.confronto__pomello::after{right:9px;border-left:6px solid var(--carbone);border-right:0}
.confronto__cursore{position:absolute;left:0;bottom:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.confronto__schermo:has(.confronto__cursore:focus-visible) .confronto__pomello{outline:2px solid #f2f3f4;outline-offset:4px}
.confronto__didascalia{margin-top:14px;font-size:.86rem;color:var(--fumo);line-height:1.5}

/* il foglio Excel (prima) */
.xl{width:560px;height:460px;display:flex;flex-direction:column;background:#fff;color:#1f1f1f;font-family:var(--f-excel);font-size:12.5px;line-height:1}
.xl__titolo{flex:none;height:30px;display:flex;align-items:center;justify-content:center;background:#1e6b41;color:#fff;font-size:12px;letter-spacing:.01em}
.xl__formula{flex:none;height:26px;display:flex;align-items:center;gap:10px;padding:0 8px;border-bottom:1px solid #d4d4d4;font-size:12px;color:#222}
.xl__nome{width:46px;padding-right:8px;border-right:1px solid #d4d4d4}
.xl__fx{color:#7a7a7a;padding-right:8px;border-right:1px solid #d4d4d4}
.xl__griglia{flex:1;display:grid;grid-template-columns:30px 128px 92px 80px 64px 1fr;grid-auto-rows:22px;overflow:hidden}
.xl__griglia>span{border-right:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;padding:0 5px;line-height:21px;white-space:nowrap;overflow:hidden}
.xl__griglia .xl__angolo,.xl__griglia .xl__col,.xl__griglia .xl__riga{background:#f3f3f3;color:#5a5a5a;text-align:center;font-size:11.5px;border-color:#d4d4d4}
.xl__griglia .xl__col--sel,.xl__griglia .xl__riga--sel{background:#d2e6d9;color:#1e6b41;font-weight:700}
.xl__griglia .xl__col--sel{box-shadow:inset 0 -2px #1e6b41}
.xl__griglia .xl__riga--sel{box-shadow:inset -2px 0 #1e6b41}
.xl__griglia .xl__int{font-weight:700}
.xl__griglia .dx{text-align:right}
.xl__griglia .giallo{background:#fff1ad}
.xl__griglia .rosso{background:#f7cfca;color:#9c1c12}
.xl__griglia .allarme{color:#c00000;font-weight:700}
.xl__griglia .errore{color:#c00000}
.xl__griglia .grassetto{font-weight:700}
.xl__griglia .esce{overflow:visible;position:relative;z-index:1}
.xl__griglia .xl__sel{position:relative;outline:2px solid #1e6b41;outline-offset:-2px;overflow:visible}
.xl__griglia .xl__sel::after{content:"";position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;background:#1e6b41;border:1px solid #fff}
.xl__fogli{flex:none;height:28px;display:flex;background:#f3f3f3;border-top:1px solid #d4d4d4;padding-left:30px;font-size:12px}
.xl__fogli span{display:flex;align-items:center;padding:0 12px;color:#444;border-right:1px solid #d9d9d9;white-space:nowrap}
.xl__fogli .attivo{background:#fff;color:#1e6b41;font-weight:700;box-shadow:inset 0 -2px #1e6b41}

/* il gestionale (dopo) */
.gst{width:560px;height:460px;display:flex;flex-direction:column;background:#14171b;color:#e6e8eb;font-family:var(--f-testo);line-height:1.25}
.gst__barra{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#191c21;border-bottom:1px solid #2a2f36}
.gst__logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px}
.gst__ma{width:27px;aspect-ratio:640/415;background:var(--lamina);-webkit-mask:url('../img/monogramma-ma.png') center/contain no-repeat;mask:url('../img/monogramma-ma.png') center/contain no-repeat}
.gst__cerca{width:176px;padding:6px 10px;border:1px solid #30363e;border-radius:6px;font-size:11.5px;color:#868e97}
.gst__corpo{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 18px 14px}
.gst__giorno{display:flex;align-items:baseline;gap:12px}
.gst__oggi{font-family:var(--f-titoli);font-size:25px;color:#f3f4f5}
.gst__data{font-family:var(--f-incise);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9ca3ab}
.gst__numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gst__numero{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:#1c2025;border:1px solid #2b3037;border-radius:8px}
.gst__numero>span{font-size:11px;color:#9ca3ab}
.gst__numero strong{font-size:20px;font-weight:600;color:#f3f4f5;font-variant-numeric:tabular-nums}
.gst__titoletto{margin:4px 0 -4px;font-family:var(--f-incise);font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#9ca3ab}
.gst__lista{list-style:none;margin:0;padding:0;border:1px solid #2b3037;border-radius:8px;overflow:hidden}
.gst__lista li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#1a1d22;border-top:1px solid #262b31}
.gst__lista li:first-child{border-top:0}
.gst__lista strong{display:block;font-size:13.5px;font-weight:600;color:#f1f2f4}
.gst__lista li>div>span{display:block;margin-top:3px;font-size:11.5px;color:#9ca3ab}
.gst__azioni{flex:none;display:flex;align-items:center;gap:6px}
.gst__azioni b{padding:4px 7px;border-radius:5px;background:#d9dcdf;color:#14171b;font-size:10.5px;font-weight:600}
.chip{padding:4px 9px;border-radius:999px;font-size:10.5px;font-style:normal;font-weight:600;white-space:nowrap}
.chip--rosso{background:rgba(214,104,90,.17);color:#f2a99e}
.chip--verde{background:rgba(96,168,124,.17);color:#a3d9b6}
.chip--blu{background:rgba(112,150,206,.19);color:#b4cbef}
.chip--ambra{background:rgba(222,170,72,.17);color:#f2cf8a}
.gst__unito{margin:auto 0 0;font-size:11.5px;color:#a3d9b6}
/* nomi, telefoni e importi dell'esempio: riempimento sfocato, come nelle foto dei gestionali */
.oscura{display:inline-block;filter:blur(3.5px);-webkit-user-select:none;user-select:none}

/* ---------- Sezioni ---------- */
.sezione{padding-block:clamp(80px,10vw,136px)}
.sezione--attaccata{padding-top:0}
.intestazione{max-width:780px;margin-bottom:clamp(40px,5vw,64px)}
.intestazione h2,.chi-sono__testo h2,.contatti__testo h2{font-size:clamp(2.1rem,1.45rem + 2.3vw,3.35rem);line-height:1.08;letter-spacing:-.005em;margin:.4em 0 .42em}
.intestazione__testo{font-size:1.1rem;color:var(--testo-2);max-width:40em;margin:0}

/* ---------- Servizi ---------- */
.servizi{display:grid;gap:clamp(40px,4vw,56px)}
@media (min-width:900px){.servizi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.servizio{padding-top:22px;border-top:1px solid var(--inchiostro)}
.servizio__etichetta{font-family:var(--f-incise);font-weight:600;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--testo-2);margin:0 0 14px}
.servizio h3{font-size:1.7rem;line-height:1.15;margin:0 0 .5em}
.servizio>p{color:var(--testo-2)}
.elenco{list-style:none;margin:1.4em 0 0;padding:0}
.elenco li{position:relative;padding:.62em 0 .62em 1.35em;border-top:1px solid var(--linea);line-height:1.5}
.elenco li::before{content:"";position:absolute;left:.15em;top:1.2em;width:6px;height:6px;background:var(--grafite);transform:rotate(45deg)}

/* ---------- Vetrine: finestre del browser e telefoni ---------- */
.vetrina{position:relative;margin:0;padding:0 8% 8% 0}
.finestra{border-radius:10px;overflow:hidden;background:#0f1114;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 34px 64px -30px rgba(0,0,0,.85)}
.finestra__barra{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#2a2f35}
.finestra__barra i{flex:none;width:9px;height:9px;border-radius:50%;background:#4b5159}
.finestra__barra span{min-width:0;max-width:62%;margin-left:10px;padding:3px 10px;border-radius:4px;background:#1d2126;color:#9ca3ab;font-size:11.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finestra img{display:block;width:100%;height:auto}
.finestra--chiara{background:#fff;box-shadow:0 0 0 1px rgba(30,34,39,.12),0 34px 60px -34px rgba(30,34,39,.55)}
.finestra--chiara .finestra__barra{background:#dcdfe2}
.finestra--chiara .finestra__barra i{background:#b6bbc1}
.finestra--chiara .finestra__barra span{background:#f2f3f4;color:var(--grafite)}
.telefono{position:absolute;right:0;bottom:0;width:23%;padding:5px;border-radius:20px;background:#0b0c0e;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 26px 44px -18px rgba(0,0,0,.9)}
.telefono img{display:block;width:100%;height:auto;border-radius:15px}

/* ---------- Lavori: siti ---------- */
.progetto--grande{display:grid;gap:32px;margin-bottom:clamp(64px,8vw,112px)}
@media (min-width:1000px){.progetto--grande{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px;align-items:end}}
.progetti{display:grid;gap:clamp(56px,6vw,80px) clamp(32px,4vw,56px)}
@media (min-width:760px){.progetti{grid-template-columns:repeat(2,minmax(0,1fr))}}
.progetto .vetrina{margin-bottom:26px}
.progetto--grande .vetrina{margin-bottom:0}
.progetto--grande .telefono{width:21%}
.progetto__lavoro{font-family:var(--f-incise);font-weight:600;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--testo-2);margin:0 0 10px}
.progetto h3{font-size:1.75rem;line-height:1.15;margin:0 0 .45em}
.progetto--grande h3{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem)}
.progetto__testo p{max-width:34em}
/* ---------- Lavori: gestionali ---------- */
.applicativo{display:grid;gap:32px;align-items:center;margin-bottom:clamp(64px,8vw,104px)}
@media (min-width:960px){
  .applicativo{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:64px}
  .applicativo--inverso{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .applicativo--inverso .vetrina{order:2}
}
.vetrina--app{padding:0}
.vetrina--telefoni{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2.5vw,28px);padding:0}
.telefono--grande{position:relative;width:min(46%,236px);box-shadow:0 0 0 1px rgba(30,34,39,.18),0 34px 56px -30px rgba(30,34,39,.7)}
.telefono--grande+.telefono--grande{margin-top:56px}
.applicativo h3{font-size:clamp(1.8rem,1.45rem + 1vw,2.3rem);line-height:1.12;margin:0 0 .5em}
.applicativo__testo p{max-width:32em}
.etichette{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.etichette li{padding:8px 11px 7px;border:1px solid var(--linea);border-radius:2px;font-family:var(--f-incise);font-weight:600;font-size:.62rem;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-2)}

.catalogo__titolo{font-size:clamp(1.5rem,1.3rem + .6vw,1.85rem);margin:0 0 22px}
.catalogo{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--inchiostro)}
@media (min-width:700px){.catalogo{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1080px){.catalogo{grid-template-columns:repeat(3,minmax(0,1fr))}}
.catalogo li{display:flex;flex-direction:column;gap:6px;padding:22px 0 20px;border-bottom:1px solid var(--linea)}
.catalogo h4{font-size:1.28rem;line-height:1.2;margin:0}
.catalogo p{margin:0;color:var(--testo-2);font-size:.98rem;line-height:1.55}
.catalogo__dove{margin-top:auto;padding-top:8px;font-family:var(--f-incise);font-weight:600;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grafite)}

/* ---------- Casi che arrivano dal pannello /admin ---------- */
/* screenshot con proporzioni diverse: il riquadro resta uguale, si vede la parte alta */
.finestra img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.telefono img{aspect-ratio:440/952;object-fit:cover;object-position:top}
.vetrina--senza-telefono{padding:0}
.applicativo.applicativo--solo-testo{grid-template-columns:minmax(0,1fr);max-width:46em}

/* Campagne e comunicazione */
.campagne{display:grid;gap:clamp(40px,5vw,64px) clamp(28px,3vw,44px)}
@media (min-width:700px){.campagne{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.campagne{grid-template-columns:repeat(3,minmax(0,1fr))}}
.campagna__foto{margin:0 0 22px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 56px -30px rgba(0,0,0,.85)}
.campagna__foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.campagna h3{font-size:1.5rem;line-height:1.18;margin:0 0 .45em}
.campagna p:last-child{margin-bottom:0}
#marketing:not([hidden])+#metodo{padding-top:clamp(80px,10vw,136px)}

/* ---------- Come si comincia ---------- */
.passi{list-style:none;margin:0;padding:0;display:grid;gap:40px}
@media (min-width:700px){.passi{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1080px){.passi{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}}
.passo{padding-top:22px;border-top:1px solid var(--inchiostro)}
.passo__numero{display:block;margin-bottom:20px;font-family:var(--f-incise);font-weight:500;font-size:2.5rem;line-height:1;letter-spacing:.04em;color:var(--titolo)}
.passo h3{font-size:1.42rem;line-height:1.2;margin:0 0 .45em}
.passo p{margin:0;color:var(--testo-2)}

/* ---------- Chi sono ---------- */
.chi-sono{display:grid;gap:44px;align-items:center}
@media (min-width:960px){.chi-sono{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px}}
.chi-sono__immagine{margin:0;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 44px 80px -40px rgba(0,0,0,.95)}
.chi-sono__immagine img{display:block;width:100%;height:auto}
.chi-sono__testo>p{max-width:35em}
.punti{display:grid;gap:16px;margin:32px 0 0;padding-top:24px;border-top:1px solid var(--linea)}
.punti div{display:grid;gap:4px}
@media (min-width:560px){.punti div{grid-template-columns:11.5em 1fr;gap:16px}}
.punti dt{padding-top:.3em;font-family:var(--f-incise);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--titolo)}
.punti dd{margin:0;color:var(--testo-2)}

/* ---------- Contatti ---------- */
#contatti{padding-top:clamp(24px,4vw,48px)}
.contatti{display:grid;gap:48px;padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--linea)}
@media (min-width:960px){.contatti{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:start}}
.contatti__testo>p{max-width:30em}
.recapiti{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px}
.recapiti li{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--linea)}
.recapiti span{font-family:var(--f-incise);font-weight:600;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--testo-2)}
.recapiti a,.recapiti b{font-family:var(--f-titoli);font-weight:400;font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);color:var(--titolo);text-decoration:none;overflow-wrap:anywhere}
.recapiti a:hover{text-decoration:underline;text-underline-offset:5px}
.recapiti .recapiti__altro{font-family:var(--f-testo);font-size:.92rem;font-weight:600;color:var(--testo);text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:4px}
.recapiti .recapiti__altro:hover{text-decoration-color:currentColor}

.modulo{display:grid;gap:20px;padding:clamp(22px,3vw,36px);background:var(--carbone-alto);border:1px solid var(--linea);border-radius:10px}
.campo{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0}
.campo>label,.campo legend{padding:0;font-size:.92rem;font-weight:600;color:var(--titolo)}
.facoltativo{font-weight:400;color:var(--testo-2)}
.modulo input[type="text"],.modulo textarea{width:100%;padding:.8em .9em;border:1px solid #3d444c;border-radius:6px;background:#181b1f;color:var(--argento-luce);font:inherit;font-size:1rem;line-height:1.45;transition:border-color .2s}
.modulo textarea{resize:vertical;min-height:7.5em}
.modulo input::placeholder,.modulo textarea::placeholder{color:#79818a}
.modulo input[type="text"]:hover,.modulo textarea:hover{border-color:#57606a}
.modulo input[type="text"]:focus-visible,.modulo textarea:focus-visible{border-color:var(--argento);outline-offset:1px}
.modulo [aria-invalid="true"]{border-color:#e08f83}
.scelte{display:flex;flex-wrap:wrap;gap:8px}
.scelte legend{width:100%;margin-bottom:10px}
.scelte label{position:relative;display:inline-flex}
.scelte input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.scelte span{padding:.55em 1em;border:1px solid #444b54;border-radius:999px;font-size:.9rem;line-height:1.2;color:var(--argento);transition:background-color .2s,color .2s,border-color .2s}
.scelte input:hover+span{border-color:var(--argento)}
.scelte input:checked+span{background:var(--argento-luce);border-color:var(--argento-luce);color:var(--carbone)}
.scelte input:focus-visible+span{outline:2px solid var(--argento-luce);outline-offset:2px}
.modulo__errore{margin:0;color:#f2a99e;font-size:.94rem}
.modulo__invia{display:flex;flex-wrap:wrap;gap:12px}
.modulo__invia .bottone{flex:1 1 auto}
.modulo__nota{margin:0;font-size:.86rem;color:var(--testo-2)}

/* ---------- Piede ---------- */
.piede{background-color:var(--carbone-fondo);padding:56px 0 36px}
@media (max-width:959px){.piede{padding-bottom:calc(36px + 62px + env(safe-area-inset-bottom))}} /* spazio per la barretta Chiama/WhatsApp */
.piede__griglia{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--linea)}
.marchio--piede{margin-right:0}
.piede__menu{display:flex;flex-wrap:wrap;gap:12px 26px}
.piede__menu a{color:var(--argento);text-decoration:none;font-size:.95rem}
.piede__menu a:hover{color:var(--argento-luce);text-decoration:underline;text-underline-offset:5px}
.piede__legale{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:22px;font-size:.85rem;color:var(--testo-2)}
.piede__legale p{margin:0}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sipario{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}