/* Template condiviso per le pagine servizio (Manualistica Tecnica, Cataloghi Ricambi, ...):
   stesse variabili/reset/topbar/overlay di parliamone.css (pattern "pagina secondaria" del sito),
   più le sezioni di contenuto specifiche di un articolo servizio. Cambiare qui aggiorna tutte le
   pagine servizio insieme. */
:root{--black:#0A0A0A;--paper:#EDEDEA;--ink:#141412;--red:#E2231A;
  --geo:'Big Shoulders Display',sans-serif;--mono:'IBM Plex Mono',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--geo)}

/* ---- topbar + menu: pastiglia scura translucida (come style.css), non il testo semplice di
   parliamone.css — qui il corpo dell'articolo scorre a lungo e può passare proprio sotto l'angolo
   in alto a destra, serve restare leggibile sopra al testo, non solo sopra la carta vuota ---- */
.topbar{position:fixed;top:0;left:0;right:0;height:62px;z-index:30;display:flex;align-items:center;
  justify-content:flex-end;padding:0 38px;pointer-events:none}
.menuBtn{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border-radius:999px;background:rgba(10,10,10,.55);border:1px solid rgba(237,237,234,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#EDEDEA;
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .3s ease,border-color .3s ease}
.menuBtn:hover{background:rgba(10,10,10,.82);border-color:rgba(237,237,234,.55)}
.menuBtn .plus{color:var(--red)}

/* ================= HERO — carta calda, stesso trattamento di parliamone.css ================= Due
   colonne: testo (svcHeroText) e immagine di copertina fissa (svcHeroVisual) — l'ancora visiva "in
   alto a destra" per la testata dell'articolo. */
.svcHero{position:relative;overflow:hidden;background:var(--paper);min-height:62vh;
  display:grid;grid-template-columns:1.15fr 1fr;align-items:center;column-gap:5vw;
  padding:15vh 6vw 8vh}
/* padding-top che riserva lo spazio per il triangolo + la pillola "Servizi" qui sopra (entrambi
   fuori dal flusso, position:absolute rispetto a .svcHero — vedi sotto): senza, l'eyebrow partirebbe
   dalla cima di .svcHeroText, che nella griglia (align-items:center) può trovarsi più in alto del
   cluster triangolo/pillola a seconda dell'altezza dell'immagine a fianco, sovrapponendosi */
.svcHeroText{min-width:0;padding-top:calc(8vh + 38px)}
.svcHeroVisual{position:relative;align-self:stretch;overflow:hidden;min-height:38vh;
  opacity:0;transform:scale(1.04);transition:opacity 1s ease .3s,transform 1.2s cubic-bezier(.4,0,.2,1) .3s}
.svcHeroVisual img{width:100%;height:100%;object-fit:cover;display:block}
.svcHero.revealed .svcHeroVisual{opacity:1;transform:scale(1)}
/* nuovo: stesso triangolo di marchio nell'angolo in basso a destra dell'immagine di copertina */
.svcHeroVisual::after{content:'';position:absolute;right:0;bottom:0;width:52px;height:52px;
  background:var(--red);clip-path:polygon(100% 0,100% 100%,0 100%,100% 0);pointer-events:none}
.svcHeroMark{position:absolute;left:6vw;top:9vh;width:52px;height:52px;background:var(--red);
  clip-path:polygon(100% 0,100% 100%,0 100%,100% 0)}
/* pillola "Servizi": fuori dal flusso del testo, ancorata subito sotto il triangolo (non più
   "attaccata" al resto del testo) — stesso principio del pulsante MENU (bordo sottile, sfondo
   quasi trasparente), leggibile come controllo cliccabile per tornare indietro */
.svcBack{position:absolute;left:6vw;top:calc(9vh + 52px + 16px);display:inline-flex;align-items:center;
  gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(20,20,18,.45);text-decoration:none;transition:color .25s,gap .25s,background .3s ease,border-color .3s ease;
  width:fit-content;padding:9px 18px;border-radius:999px;border:1px solid rgba(20,20,18,.16);
  background:rgba(20,20,18,.035)}
.svcBack:hover{color:var(--red);gap:12px;background:rgba(20,20,18,.07);border-color:rgba(20,20,18,.3)}
.svcEyebrow{display:block;font-family:var(--mono);color:#D02018;font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.16em;text-transform:uppercase;margin-top:18px}
.svcHero h1{margin-top:16px;font-family:var(--geo);font-weight:800;text-transform:uppercase;color:var(--ink);
  font-size:clamp(42px,6.4vw,96px);line-height:.98;letter-spacing:-.01em;max-width:90vw;
  clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.4,0,.2,1) .2s}
.svcAccent{display:block;margin-top:14px;font-family:var(--mono);font-size:clamp(14px,1.5vw,19px);
  letter-spacing:.04em;color:var(--red);text-transform:uppercase;opacity:0;transform:translateY(10px);
  transition:opacity .6s ease .35s,transform .6s ease .35s}
.svcLead{margin-top:26px;max-width:640px;font-family:var(--mono);color:rgba(20,20,18,.75);
  font-size:clamp(15px,1.3vw,18px);line-height:1.65;opacity:0;transform:translateY(14px);
  transition:opacity .6s ease .5s,transform .6s ease .5s}
.svcHero.revealed h1{clip-path:inset(0 0% 0 0)}
.svcHero.revealed .svcAccent,.svcHero.revealed .svcLead{opacity:1;transform:translateY(0)}

/* ================= LAYOUT CORPO — colonna principale + sidebar ================= svcMain
   (svcIntro+svcBody) a sinistra, svcSidebar a destra: la "colonna di destra" con la gallery
   random, sotto l'ancora visiva della testata. Su mobile collassa a una riga (vedi media query) —
   niente sticky per ora, mantiene la sezione più semplice. */
.svcLayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:5vw;
  max-width:1400px;margin:0 auto;padding:0 6vw}
.svcMain{min-width:0}

/* padding-bottom simmetrico al top: quando il corpo testo è più corto della sidebar (pagine con
   meno paragrafi), la sidebar diventa la colonna più alta della grid e l'ultima immagine finiva
   incollata al fondo, senza il margine "sollevato" delle pagine con testo più lungo */
.svcSidebar{display:flex;flex-direction:column;gap:3vh;padding-top:8vh;padding-bottom:8vh}
/* <picture> non stilizzato altrimenti sarebbe lui il flex item (invece di .svcSidebarImg), vanificando
   width/aspect-ratio/flex-basis sotto: display:contents lo rimuove dal layout, l'<img> torna a
   comportarsi come se fosse figlio diretto di .svcSidebar */
.svcSidebar picture{display:contents}
.svcSidebarImg{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:rgba(20,20,18,.05);
  opacity:0;transition:opacity .6s ease}
.svcSidebarImg.loaded{opacity:1}

/* ================= CORPO — testo su carta, stessa maschera verticale del reveal contatti ================= */
.svcSection{position:relative;background:var(--paper);padding:8vh 0;
  clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.4,0,.2,1)}
.svcSection.revealed{clip-path:inset(0 0 0% 0)}
.svcSection+.svcSection{padding-top:2vh}
.svcCol{max-width:680px}
.svcCol p{font-family:var(--mono);font-size:clamp(14px,1.05vw,16px);line-height:1.75;
  color:rgba(20,20,18,.7);margin-bottom:22px}
.svcCol p:last-child{margin-bottom:0}
.svcCallout{border-left:3px solid var(--red);background:rgba(226,35,26,.05);padding:18px 24px;margin-top:6px}
.svcCallout p{color:rgba(20,20,18,.85);margin-bottom:0}

.svcSectionLabel{display:flex;align-items:center;gap:10px;margin-bottom:5vh}
.svcSectionLabel .bar{width:26px;height:2px;background:var(--red)}
.svcSectionLabel span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(20,20,18,.5)}
.svcCol h2{font-family:var(--geo);font-weight:800;text-transform:uppercase;color:var(--ink);
  font-size:clamp(26px,3.2vw,46px);line-height:1.08;letter-spacing:-.005em;margin-bottom:4vh;max-width:16ch}
.svcCol h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:5vh 0 14px}
.svcCol h3:first-of-type{margin-top:1vh}

.svcList{list-style:none;display:flex;flex-direction:column;gap:12px}
.svcList li{font-family:var(--mono);font-size:clamp(14px,1.05vw,16px);line-height:1.6;
  color:rgba(20,20,18,.7);padding-left:22px;position:relative}
.svcList li::before{content:'';position:absolute;left:0;top:calc(.6em - 3px);width:7px;height:7px;
  background:var(--red);clip-path:polygon(100% 0,100% 100%,0 100%,100% 0)}
/* niente peso 700 nel mono self-hosted (solo 400/500): l'etichetta si distingue col colore, non
   con un bold sintetico che renderebbe male */
.svcList li strong{font-weight:500;color:var(--ink)}

/* ================= CHIUSURA — logo + CTA, identico a parliamone.css con l'aggiunta del bottone ================= */
.svcClose{background:var(--black);padding:11vh 6vw 5vh;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.svcCloseLogo{width:clamp(220px,26vw,420px);height:auto;opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s ease}
.svcClose.revealed .svcCloseLogo{opacity:1;transform:translateY(0)}
.svcCloseTag{margin-top:24px;font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(237,237,234,.5);opacity:0;transition:opacity .8s ease .15s}
.svcClose.revealed .svcCloseTag{opacity:1}
.svcCta{margin-top:5vh;display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border-radius:2px;opacity:0;transform:translateY(20px);
  transition:opacity .8s ease .25s,transform .8s ease .25s,gap .25s ease,background .25s ease}
.svcClose.revealed .svcCta{opacity:1;transform:translateY(0)}
.svcCta:hover{gap:18px;background:#c91d15}

/* footer legale minimale — identico a parliamone.css */
.svcLegalFooter{background:var(--black);padding:5vh 6vw 34px;display:flex;justify-content:center}
.footerLegal{margin-top:6vh;padding-top:22px;border-top:1px solid rgba(237,237,234,.14);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px;width:100%;max-width:900px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(237,237,234,.5)}
.footerLegal a{color:rgba(237,237,234,.5);text-decoration:none}
.footerLegal a:hover{color:var(--red)}

@media (max-width:820px){
  .svcHero{grid-template-columns:1fr;padding:12vh 8vw 7vh;min-height:auto}
  /* margin-top riserva lo spazio per il cluster triangolo+pillola (absolute, ancorato a .svcHero,
     non spostato da "order"): senza, l'immagine (order:-1) parte da sotto il padding-top di .svcHero
     (12vh) e si sovrappone al fondo della pillola (bottom reale ~7vh+91px). Il margine qui è la
     DIFFERENZA tra dove serve arrivare (7vh+107px dalla cima di .svcHero) e dove il padding-top
     porta già il contenuto (12vh) — non va sommato al padding, altrimenti l'immagine scende troppo */
  .svcHeroVisual{order:-1;margin:calc(107px - 5vh) -8vw 4vh;min-height:auto;aspect-ratio:16/10}
  .svcHeroMark{left:8vw;top:7vh;width:40px;height:40px}
  .svcHeroVisual::after{width:40px;height:40px}
  .svcBack{top:calc(7vh + 40px + 14px);left:8vw;z-index:5}
  .svcHeroMark{z-index:5}
  /* niente riserva qui: su mobile l'immagine sta sopra il testo (order:-1), quindi il blocco
     eyebrow/titolo parte già ben sotto al cluster triangolo+pillola, non serve compensare */
  .svcHeroText{padding-top:0}
  .svcHero h1{font-size:clamp(36px,10.5vw,64px)}
  .svcLead{max-width:100%}
  .svcLayout{grid-template-columns:1fr;padding:0 8vw}
  .svcSidebar{order:-1;flex-direction:row;overflow-x:auto;gap:4vw;padding:4vh 0 1vh;
    -webkit-overflow-scrolling:touch}
  .svcSidebarImg{flex:0 0 62vw}
  .svcSection{padding:6vh 0}
  .svcCol h2{max-width:100%}
  .svcClose{padding:8vh 8vw 4vh}
  .svcLegalFooter{padding:4vh 8vw 28px}
  .footerLegal{gap:14px 20px;font-size:10px;justify-content:flex-start}
}

@media (prefers-reduced-motion: reduce){
  .svcHero h1{clip-path:inset(0 0% 0 0);transition:none}
  .svcAccent,.svcLead{opacity:1;transform:none;transition:none}
  .svcHeroVisual{opacity:1;transform:none;transition:none}
  .svcSection{clip-path:inset(0 0 0% 0);transition:none}
  .svcSidebarImg{opacity:1;transition:none}
  .svcCloseLogo,.svcCloseTag,.svcCta{opacity:1;transform:none;transition:none}
}