/* =========================================================================
   LOTUS GROUP — foglio di stile unico
   Direzione grafica: "tavola tecnica del geometra".
   La linea di quota (tacca — misura — tacca) è l'elemento firma del sito:
   viene dal mestiere del titolare e dice, senza scriverlo, la promessa
   dell'azienda — tutto misurato e messo per iscritto prima di iniziare.
   Colori BLU e VERDE campionati dal file reale del logo del cliente.
   ========================================================================= */

/* ---------- FONT (self-hosted: nessuna chiamata a domini terzi) ---------- */
@font-face{font-family:'Plex Sans';src:url('../fonts/plex-sans-latin.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Sans';src:url('../fonts/plex-sans-latin-ext.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plex Cond';src:url('../fonts/plex-cond-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Cond';src:url('../fonts/plex-cond-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plex Cond';src:url('../fonts/plex-cond-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Cond';src:url('../fonts/plex-cond-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Mono';src:url('../fonts/plex-mono-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------- TOKEN --------------------------------- */
:root{
  /* colori — blu e verde campionati dal logo reale del cliente */
  --blu:#0070d0;
  --blu-scuro:#005aa8;
  --blu-tenue:#e6f1fb;
  --verde:#00a030;
  --inchiostro:#0a1b2e;
  --inchiostro-2:#12283f;
  --calce:#f4f7f9;
  --cemento:#c9d2da;

  /* superfici e testo (tema chiaro) */
  --sfondo:#ffffff;
  --sfondo-2:var(--calce);
  --superficie:#ffffff;
  --testo:var(--inchiostro);
  --testo-tenue:#5a6b7d;
  --bordo:#dde4ea;
  --bordo-forte:#b9c5cf;

  /* tipografia */
  --f-display:'Plex Cond',ui-sans-serif,system-ui,sans-serif;
  --f-testo:'Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-mono:'Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem;
  --t-lg:clamp(1.05rem,.98rem + .35vw,1.2rem);
  --t-xl:clamp(1.3rem,1.15rem + .7vw,1.6rem);
  --t-2xl:clamp(1.6rem,1.35rem + 1.2vw,2.2rem);
  --t-3xl:clamp(1.9rem,1.55rem + 1.8vw,2.85rem);
  --t-4xl:clamp(2.15rem,1.65rem + 2.4vw,3.6rem);

  /* spazio */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:2.5rem; --s-8:3rem; --s-9:4rem; --s-10:5rem;
  --s-11:6rem; --s-12:8rem;

  --r-sm:2px; --r-md:4px; --r-lg:8px;
  --ombra-1:0 1px 2px rgba(10,27,46,.06),0 2px 8px rgba(10,27,46,.05);
  --ombra-2:0 12px 32px rgba(10,27,46,.13);
  --transizione:220ms cubic-bezier(.2,.6,.25,1);
  --larghezza:1180px;
}

:root[data-theme="dark"]{
  --sfondo:#081524;
  --sfondo-2:#0d1f33;
  --superficie:#0f2438;
  --testo:#e8eef4;
  --testo-tenue:#9fb0c1;
  --bordo:#1d354c;
  --bordo-forte:#2c4a66;
  --blu:#4ea3f0;
  --blu-scuro:#7cbcf5;
  --blu-tenue:#0f2c46;
  --calce:#0d1f33;
  --cemento:#2c4a66;
}

/* ---------------------------------- BASE ---------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--sfondo);color:var(--testo);
  font-family:var(--f-testo);font-size:var(--t-base);font-weight:400;
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.06;letter-spacing:-.012em}
p{margin:0 0 var(--s-4)}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blu);outline-offset:3px;border-radius:var(--r-sm)}

.contenitore{width:min(100% - 2.5rem,var(--larghezza));margin-inline:auto}
@media(min-width:900px){.contenitore{width:min(100% - 5rem,var(--larghezza))}}

.salta{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blu);color:#fff;padding:.75rem 1.25rem;font-weight:600}
.salta:focus{left:.5rem;top:.5rem}

/* ---------------------- ELEMENTO FIRMA: LINEA DI QUOTA --------------------- */
/* tacca | ——— testo ——— | tacca : la stessa notazione dei disegni tecnici */
.quota{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blu);
  margin:0 0 var(--s-4);
}
.quota::before,.quota::after{content:"";height:1px;background:currentColor;opacity:.45}
.quota::before{width:26px;flex:none}
.quota::after{flex:1;max-width:180px}
.quota__tacca{width:1px;height:11px;background:currentColor;flex:none;opacity:.75}

/* linea di quota animata sotto il titolo hero */
.misura{display:block;height:14px;margin:var(--s-5) 0 var(--s-6);max-width:340px;color:var(--blu)}
.misura__linea{stroke:currentColor;stroke-width:1.4;fill:none}
.misura__corpo{stroke-dasharray:300;stroke-dashoffset:300;animation:misurare 1.15s .35s cubic-bezier(.2,.7,.2,1) forwards}
.misura__testo{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;fill:currentColor;opacity:0;animation:comparire .5s 1.15s forwards}
@keyframes misurare{to{stroke-dashoffset:0}}
@keyframes comparire{to{opacity:1}}

/* i sei pallini del logo, usati come micro-motivo ricorrente */
.pallini{display:inline-flex;gap:5px;align-items:center}
.pallini i{width:5px;height:5px;border-radius:50%;display:block}
.pallini i:nth-child(1){background:#f5b715}
.pallini i:nth-child(2){background:var(--verde)}
.pallini i:nth-child(3){background:#f26a1b}
.pallini i:nth-child(4){background:var(--blu)}
.pallini i:nth-child(5){background:#d81f26}
.pallini i:nth-child(6){background:#8b2fa8}

/* ------------------------------- INTESTAZIONE ------------------------------ */
.testata{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--sfondo) 92%,transparent);border-bottom:1px solid transparent;transition:border-color var(--transizione),box-shadow var(--transizione)}
.testata.compatta{border-bottom-color:var(--bordo);box-shadow:var(--ombra-1);background:var(--sfondo)}
.testata__riga{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:72px}
.marchio{display:flex;align-items:center;gap:.7rem;padding:.35rem 0}
.marchio__segno{width:38px;height:auto;flex:none}
.marchio__nome{display:block;font-family:var(--f-display);font-weight:700;font-size:1.06rem;letter-spacing:.02em;line-height:1;text-transform:uppercase;white-space:nowrap}
.marchio__sotto{display:none;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--testo-tenue);margin-top:3px;white-space:nowrap}
@media(min-width:560px){.marchio__sotto{display:block}}

.navigazione{display:none}
@media(min-width:980px){
  .navigazione{display:flex;align-items:center;gap:var(--s-6)}
  .navigazione__voce{position:relative;font-size:var(--t-sm);font-weight:500;padding:.4rem 0;color:var(--testo);transition:color var(--transizione)}
  .navigazione__voce::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blu);transition:right var(--transizione)}
  .navigazione__voce:hover{color:var(--blu)}
  .navigazione__voce:hover::after,.navigazione__voce[aria-current="page"]::after{right:0}
}
.testata__azioni{display:flex;align-items:center;gap:var(--s-3)}
/* sotto i 560px il pulsante in testata sparisce: c'è già il tasto WhatsApp fisso */
@media(max-width:559px){.testata__azioni .btn{display:none}}

.tema{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--bordo);border-radius:var(--r-md);transition:border-color var(--transizione),background var(--transizione)}
.tema:hover{border-color:var(--blu);background:var(--blu-tenue)}
.tema svg{width:17px;height:17px}
.tema__sole{display:none}
:root[data-theme="dark"] .tema__sole{display:block}
:root[data-theme="dark"] .tema__luna{display:none}

.apri-menu{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--bordo);border-radius:var(--r-md)}
@media(min-width:980px){.apri-menu{display:none}}
.apri-menu span{display:block;width:17px;height:1.5px;background:currentColor;position:relative;transition:background var(--transizione)}
.apri-menu span::before,.apri-menu span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor;transition:transform var(--transizione)}
.apri-menu span::before{top:-5px}
.apri-menu span::after{top:5px}
.apri-menu[aria-expanded="true"] span{background:transparent}
.apri-menu[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.apri-menu[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

.menu-mobile{position:fixed;inset:72px 0 0;background:var(--sfondo);z-index:99;padding:var(--s-6) 0;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity var(--transizione),transform var(--transizione),visibility var(--transizione);overflow-y:auto}
.menu-mobile.aperto{opacity:1;transform:none;visibility:visible}
@media(min-width:980px){.menu-mobile{display:none}}
.menu-mobile__voce{display:flex;align-items:baseline;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--bordo);font-family:var(--f-display);font-size:1.5rem;font-weight:700;text-transform:uppercase}
.menu-mobile__num{font-family:var(--f-mono);font-size:.7rem;color:var(--blu);letter-spacing:.1em}

/* -------------------------------- PULSANTI -------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:var(--r-md);font-weight:600;font-size:var(--t-sm);letter-spacing:.01em;border:1.5px solid transparent;transition:transform var(--transizione),background var(--transizione),border-color var(--transizione),color var(--transizione),box-shadow var(--transizione);text-align:center}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primario{background:var(--blu);color:#fff;box-shadow:0 4px 14px rgba(0,112,208,.28)}
.btn--primario:hover{background:var(--blu-scuro);box-shadow:0 8px 22px rgba(0,112,208,.34)}
:root[data-theme="dark"] .btn--primario{color:#04121f}
.btn--fantasma{border-color:var(--bordo-forte);color:var(--testo)}
.btn--fantasma:hover{border-color:var(--blu);color:var(--blu);background:var(--blu-tenue)}
.btn--chiaro{background:#fff;color:var(--inchiostro)}
.btn--chiaro:hover{background:var(--calce)}
.btn--bordo-chiaro{border-color:rgba(255,255,255,.45);color:#fff}
.btn--bordo-chiaro:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn--piccolo{padding:.6rem 1.05rem;font-size:var(--t-xs)}
.gruppo-btn{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* -------------------------------- SEZIONI --------------------------------- */
.sez{padding:var(--s-10) 0}
@media(min-width:900px){.sez{padding:var(--s-11) 0}}
.sez--stretta{padding:var(--s-9) 0}
.sez--calce{background:var(--sfondo-2)}
.sez--inchiostro{background:var(--inchiostro);color:#e8eef4}
.sez--inchiostro .quota{color:#7cc0f5}
.sez--inchiostro .testo-tenue{color:#a9bccd}

.titolo-sez{font-size:var(--t-3xl);max-width:20ch}
.intro-sez{font-size:var(--t-lg);color:var(--testo-tenue);max-width:60ch;margin-top:var(--s-4)}
.testo-tenue{color:var(--testo-tenue)}
.intestazione-sez{margin-bottom:var(--s-8)}

/* ---------------------------------- HERO ---------------------------------- */
/* impaginato come una tavola tecnica: cartiglio a sinistra, disegno a destra */
.hero{background:var(--inchiostro);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,46,.94) 0%,rgba(10,27,46,.82) 55%,rgba(10,27,46,.9) 100%)}
.hero__didascalia{display:none}
@media(min-width:980px){
  .hero__media{left:44%;right:0;top:0;bottom:0}
  .hero__media::after{background:linear-gradient(90deg,var(--inchiostro) 0%,rgba(10,27,46,.86) 14%,rgba(10,27,46,.42) 38%,rgba(10,27,46,.04) 72%)}
  .hero__didascalia{display:block;position:absolute;right:var(--s-5);bottom:var(--s-5);z-index:3;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(10,27,46,.72);padding:.45rem .7rem;border-left:2px solid var(--blu);margin:0}
}
.hero__cartiglio{position:relative;z-index:2;padding:var(--s-9) 0 var(--s-10)}
@media(min-width:980px){.hero__cartiglio{width:57%;min-height:600px;padding:var(--s-11) var(--s-8) var(--s-11) 0;display:flex;flex-direction:column;justify-content:center}}
.hero__occhiello{display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:#7cc0f5;margin-bottom:var(--s-5)}
.hero__occhiello::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.hero__titolo{font-size:var(--t-4xl);color:#fff;text-wrap:balance;max-width:16ch}
.hero__sottotitolo{font-size:var(--t-lg);color:#c3d3e1;max-width:50ch;margin:0 0 var(--s-6)}

/* barra credibilità agganciata all'hero */
.credibilita{background:var(--inchiostro-2);color:#fff;position:relative;z-index:2}
.credibilita__griglia{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.credibilita__griglia{grid-template-columns:repeat(4,1fr)}}
.credibilita__voce{padding:var(--s-5) var(--s-4);border-top:1px solid rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.1)}
.credibilita__voce:nth-child(2n){border-right:0}
@media(min-width:820px){.credibilita__voce{border-right:1px solid rgba(255,255,255,.1)}.credibilita__voce:nth-child(2n){border-right:1px solid rgba(255,255,255,.1)}.credibilita__voce:last-child{border-right:0}}
.credibilita__num{display:block;font-family:var(--f-display);font-weight:700;font-size:1.75rem;line-height:1.1;color:#fff}
.credibilita__et{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#8fa9c0;margin-top:.4rem}

/* ------------------------------ BLOCCO 2 COLONNE --------------------------- */
.duecol{display:grid;gap:var(--s-8);align-items:center}
@media(min-width:900px){.duecol{grid-template-columns:1fr 1fr;gap:var(--s-10)}}
.duecol--invertito .duecol__media{order:-1}
@media(max-width:899px){.duecol--invertito .duecol__media{order:0}}
.duecol__media{position:relative}
.duecol__media img{width:100%;border-radius:var(--r-md);box-shadow:var(--ombra-2)}
/* linea di quota a lato dell'immagine: la firma grafica ricorrente */
.duecol__media::before{content:"";position:absolute;left:-16px;top:16px;bottom:16px;width:1px;background:var(--bordo-forte)}
.duecol__media::after{content:"";position:absolute;left:-20px;top:16px;bottom:16px;width:9px;border-top:1px solid var(--bordo-forte);border-bottom:1px solid var(--bordo-forte)}
@media(max-width:899px){.duecol__media::before,.duecol__media::after{display:none}}

/* --------------------------------- SERVIZI -------------------------------- */
.servizi{display:grid;gap:1px;background:var(--bordo);border:1px solid var(--bordo);border-radius:var(--r-md);overflow:hidden}
@media(min-width:700px){.servizi{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.servizi{grid-template-columns:repeat(3,1fr)}}
.servizio{background:var(--superficie);padding:var(--s-6) var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);transition:background var(--transizione)}
.servizio:hover{background:var(--blu-tenue)}
.servizio__icona{width:34px;height:34px;color:var(--blu)}
.servizio__titolo{font-size:var(--t-xl)}
.servizio__testo{font-size:var(--t-sm);color:var(--testo-tenue);margin:0}
.servizio__lista{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:var(--s-3)}
.servizio__tag{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.04em;color:var(--testo-tenue);border:1px solid var(--bordo);border-radius:999px;padding:.2rem .55rem}
.servizio__link{margin-top:var(--s-3);font-size:var(--t-sm);font-weight:600;color:var(--blu);display:inline-flex;align-items:center;gap:.4rem}
.servizio__link svg{width:14px;height:14px;transition:transform var(--transizione)}
.servizio:hover .servizio__link svg{transform:translateX(4px)}

/* ------------------------------ COME LAVORIAMO ---------------------------- */
/* i quattro passi sono un vero ordine: qui la numerazione porta informazione */
.passi{position:relative;display:grid;gap:var(--s-7)}
@media(min-width:900px){.passi{grid-template-columns:repeat(4,1fr);gap:var(--s-6)}}
.passi::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;width:1px;background:rgba(255,255,255,.18)}
@media(min-width:900px){.passi::before{left:0;right:0;top:11px;bottom:auto;width:auto;height:1px}}
.passo{position:relative;padding-left:var(--s-7)}
@media(min-width:900px){.passo{padding-left:0;padding-top:var(--s-7)}}
.passo::before{content:"";position:absolute;left:8px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--blu);box-shadow:0 0 0 4px var(--inchiostro)}
@media(min-width:900px){.passo::before{left:0;top:8px}}
.passo__num{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;color:#7cc0f5;display:block;margin-bottom:.6rem}
.passo__titolo{font-size:var(--t-xl);color:#fff;margin-bottom:.6rem}
.passo__testo{font-size:var(--t-sm);color:#a9bccd;margin:0}

/* --------------------------------- LAVORI --------------------------------- */
.griglia-lavori{display:grid;gap:var(--s-5)}
@media(min-width:680px){.griglia-lavori{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.griglia-lavori{grid-template-columns:repeat(3,1fr)}}
.lavoro{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--bordo);border-radius:var(--r-md);overflow:hidden;background:var(--superficie);transition:border-color var(--transizione),transform var(--transizione),box-shadow var(--transizione)}
.lavoro:hover{border-color:var(--blu);transform:translateY(-4px);box-shadow:var(--ombra-2)}
.lavoro__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--calce)}
.lavoro__foto img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.6,.25,1)}
.lavoro:hover .lavoro__foto img{transform:scale(1.05)}
.lavoro__cat{position:absolute;left:0;top:var(--s-4);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;background:var(--inchiostro);color:#fff;padding:.3rem .6rem .3rem .55rem}
.lavoro__n{position:absolute;right:var(--s-3);top:var(--s-3);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;color:#fff;background:rgba(10,27,46,.62);padding:.2rem .45rem;border-radius:2px}
.lavoro__corpo{padding:var(--s-4) var(--s-5) var(--s-5);display:flex;flex-direction:column;gap:.4rem}
.lavoro__titolo{font-size:var(--t-lg);font-family:var(--f-display);font-weight:700;line-height:1.15}
.lavoro__luogo{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-tenue)}
.lavoro__testo{font-size:var(--t-sm);color:var(--testo-tenue);margin:0}

.filtri{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s-7)}
.filtro{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .9rem;border:1px solid var(--bordo);border-radius:999px;color:var(--testo-tenue);transition:all var(--transizione)}
.filtro:hover{border-color:var(--blu);color:var(--blu)}
.filtro[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}
:root[data-theme="dark"] .filtro[aria-pressed="true"]{background:var(--blu);border-color:var(--blu);color:#04121f}

/* --------------------------------- MOTIVI --------------------------------- */
.motivi{display:grid;gap:0;border-top:1px solid var(--bordo)}
.motivo{display:grid;gap:var(--s-2) var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--bordo)}
@media(min-width:820px){.motivo{grid-template-columns:minmax(0,26ch) minmax(0,1fr);align-items:baseline}}
.motivo__titolo{font-size:var(--t-lg);font-family:var(--f-display);font-weight:700;display:flex;align-items:baseline;gap:.6rem}
.motivo__titolo::before{content:"";width:10px;height:10px;flex:none;border:2px solid var(--blu);border-radius:2px;transform:translateY(-1px)}
.motivo__testo{margin:0;color:var(--testo-tenue)}

/* ----------------------------------- FAQ ---------------------------------- */
.faq{border-top:1px solid var(--bordo)}
.faq__voce{border-bottom:1px solid var(--bordo)}
.faq__bottone{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:var(--s-5);padding:var(--s-5) 0;text-align:left;font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);line-height:1.2;transition:color var(--transizione)}
.faq__bottone:hover{color:var(--blu)}
.faq__segno{flex:none;width:22px;height:22px;position:relative;margin-top:3px}
.faq__segno::before,.faq__segno::after{content:"";position:absolute;left:50%;top:50%;background:var(--blu);transition:transform var(--transizione)}
.faq__segno::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.faq__segno::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.faq__bottone[aria-expanded="true"] .faq__segno::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__risposta{overflow:hidden;height:0;transition:height var(--transizione)}
.faq__risposta p{padding:0 0 var(--s-5);margin:0;color:var(--testo-tenue);max-width:70ch}

/* --------------------------------- BANDA CTA ------------------------------ */
.banda{background:var(--blu);color:#fff;position:relative;overflow:hidden}
.banda::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 14px);pointer-events:none}
.banda__contenuto{position:relative;padding:var(--s-9) 0;display:grid;gap:var(--s-6);align-items:center}
@media(min-width:900px){.banda__contenuto{grid-template-columns:1.4fr 1fr;gap:var(--s-9)}}
.banda__titolo{font-size:var(--t-2xl);color:#fff}
.banda__testo{margin:var(--s-3) 0 0;color:rgba(255,255,255,.9);max-width:52ch}
.banda__contatti{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-6);font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:rgba(255,255,255,.92)}
:root[data-theme="dark"] .banda{background:var(--inchiostro-2)}

/* ---------------------------------- FOOTER -------------------------------- */
.pie{background:var(--inchiostro);color:#c3d1de;padding:var(--s-9) 0 var(--s-5);font-size:var(--t-sm)}
.pie__griglia{display:grid;gap:var(--s-7)}
@media(min-width:760px){.pie__griglia{grid-template-columns:1.5fr 1fr 1.2fr 1.2fr}}
.pie__logo{width:132px;margin-bottom:var(--s-4);background:#fff;padding:.6rem .7rem;border-radius:var(--r-md)}
.pie__titolo{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7f97ad;margin-bottom:var(--s-4)}
.pie__voce{display:block;padding:.3rem 0;color:#c3d1de;transition:color var(--transizione)}
.pie__voce:hover{color:#fff}
.pie__legale{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.05em;color:#8299ae}

/* ------------------------------ WHATSAPP FISSO ---------------------------- */
.wa{position:fixed;right:16px;bottom:16px;z-index:90;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#25d366;color:#062012;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform var(--transizione)}
.wa:hover{transform:scale(1.07)}
.wa svg{width:27px;height:27px}
@media(min-width:980px){.wa{right:24px;bottom:24px}}

/* ------------------------------- COOKIE BANNER ---------------------------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;background:var(--superficie);border:1px solid var(--bordo-forte);border-radius:var(--r-md);box-shadow:var(--ombra-2);padding:var(--s-4) var(--s-5);display:none;gap:var(--s-4);align-items:center;flex-wrap:wrap;font-size:var(--t-sm)}
.cookie.visibile{display:flex}
@media(min-width:760px){.cookie{left:auto;right:24px;bottom:24px;max-width:430px}}
.cookie p{margin:0;flex:1 1 220px;color:var(--testo-tenue)}

/* --------------------------------- PAGINE --------------------------------- */
.testata-pagina{background:var(--inchiostro);color:#fff;padding:var(--s-9) 0 var(--s-8)}
@media(min-width:900px){.testata-pagina{padding:var(--s-10) 0 var(--s-9)}}
.testata-pagina .quota{color:#7cc0f5}
.testata-pagina__titolo{font-size:var(--t-3xl);color:#fff;max-width:22ch}
.testata-pagina__testo{font-size:var(--t-lg);color:#b6c7d6;max-width:60ch;margin:var(--s-4) 0 0}

.briciole{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#7f97ad;margin-bottom:var(--s-5)}
.briciole a:hover{color:#fff}

.blocco-servizio{scroll-margin-top:90px}
.elenco-tecnico{display:grid;gap:.55rem;margin:var(--s-5) 0 0}
.elenco-tecnico li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-sm)}
.elenco-tecnico li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55rem;border:1.5px solid var(--blu);border-radius:1px}

.testo-lungo{max-width:72ch}
.testo-lungo h2{font-size:var(--t-2xl);margin:var(--s-8) 0 var(--s-4)}
.testo-lungo h3{font-size:var(--t-lg);margin:var(--s-6) 0 var(--s-3)}
.testo-lungo p,.testo-lungo li{color:var(--testo-tenue)}
.testo-lungo ul{margin:0 0 var(--s-4);padding-left:1.1rem;list-style:disc}
.testo-lungo li{margin-bottom:.4rem}
.testo-lungo a{color:var(--blu);text-decoration:underline;text-underline-offset:3px}

.schede-contatto{display:grid;gap:var(--s-4)}
@media(min-width:700px){.schede-contatto{grid-template-columns:repeat(3,1fr)}}
.scheda{display:flex;flex-direction:column;gap:.5rem;padding:var(--s-5);border:1px solid var(--bordo);border-radius:var(--r-md);background:var(--superficie);transition:border-color var(--transizione),transform var(--transizione)}
.scheda:hover{border-color:var(--blu);transform:translateY(-3px)}
.scheda__et{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-tenue)}
.scheda__valore{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);word-break:break-word}
.scheda__nota{font-size:var(--t-sm);color:var(--testo-tenue);margin:0}

.dati{display:grid;gap:.85rem;margin:0;font-size:var(--t-sm)}
.dati div{display:grid;gap:.15rem;padding-bottom:.85rem;border-bottom:1px solid var(--bordo)}
.dati dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--testo-tenue)}
.dati dd{margin:0;font-weight:500}

/* --------------------------------- LIGHTBOX ------------------------------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,16,28,.94);display:none;align-items:center;justify-content:center;padding:var(--s-5)}
.lightbox.aperta{display:flex}
.lightbox__fig{margin:0;max-width:1200px;width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}
.lightbox__img{max-height:76vh;width:auto;max-width:100%;border-radius:var(--r-md);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox__cap{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:#cfe0ee;text-align:center}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;color:#fff;background:rgba(0,0,0,.3);transition:background var(--transizione),border-color var(--transizione)}
.lightbox__nav:hover{background:var(--blu);border-color:var(--blu)}
.lightbox__nav--prec{left:12px}
.lightbox__nav--succ{right:12px}
.lightbox__chiudi{position:absolute;top:14px;right:14px;width:44px;height:44px;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:50%;transition:background var(--transizione)}
.lightbox__chiudi:hover{background:rgba(255,255,255,.15)}
.lightbox svg{width:18px;height:18px}

/* --------------------------- COMPARSA ALLO SCROLL -------------------------- */
/* rete di sicurezza: se JS non parte o l'observer non scatta, dopo 3s tutto
   torna visibile — un contenuto invisibile è il guasto peggiore possibile */
.rivela{opacity:0;transform:translateY(18px);transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 700ms cubic-bezier(.2,.7,.2,1)}
.rivela.dentro{opacity:1;transform:none}
html.no-js .rivela,html.sicurezza .rivela{opacity:1!important;transform:none!important}

/* barra di avanzamento lettura */
.avanzamento{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--blu);z-index:101;will-change:transform}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rivela{opacity:1;transform:none}
  .misura__corpo{stroke-dashoffset:0}
  .misura__testo{opacity:1}
}