/* ==========================================================================
   GENERAL COSTRUZIONI & C. S.R.L.
   Bianco e rosso come Pancleon, ma il rosso e' quello del LOGO: #FA2047.
   L'impaginazione viene dal disegno tecnico: righe di quota, numeri in
   monospazio, griglia a vista. E' il mestiere dell'azienda, non un ornamento.
   ========================================================================== */

:root{
  /* --- tavolozza, identica a Pancleon --- */
  --bianco:#FFFFFF;
  --fondo:#FAFBFC;
  --superficie:#FFFFFF;
  --bordo:#E8EBF0;
  --bordo-forte:#D6DBE4;
  --inchiostro:#0C1017;
  --inchiostro-soft:#4A5462;
  --inchiostro-tenue:#8892A3;
  /* Il rosso e' quello del LOGO, misurato dentro le campiture del file
     (#FA2047), non il #FF3568 di Pancleon. Sono due rossi vicinissimi, ed e'
     proprio per questo che non possono convivere: un secondo rosso quasi
     uguale accanto al primo si nota, e il logo e' un file fisso che non si
     puo' accordare al sito. Si accorda il sito al logo. */
  --rosso:#FA2047;
  --rosso-bg:#FFF3F5;
  --rosso-tenue:#FEE0E5;
  --rosso-medio:#E0123A;
  --rosso-ink:#D00126;
  --rosso-scuro:#92001A;
  --marchio-forte:#E0123A;

  --r-bottone:10px;
  --r-card:16px;
  --r-grande:20px;
  --r-pillola:999px;

  --display:"Archivo","Archivo Expanded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --testo:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(18px,4vw,56px);
  --largo:1240px;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bianco);color:var(--inchiostro);
  font-family:var(--testo);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px;border-radius:4px}

.contenitore{max-width:var(--largo);margin:0 auto;padding-inline:var(--gutter)}
.sezione{padding-block:clamp(56px,9vw,120px)}
.sezione--stretta{padding-block:clamp(40px,6vw,76px)}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(31px,5.6vw,68px);font-weight:800}
h2{font-size:clamp(30px,4.6vw,56px);font-weight:800}
h3{font-size:clamp(20px,2.3vw,27px);font-weight:700;line-height:1.16}
p{margin:0 0 1.05em}
.occhiello{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosso-ink);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.occhiello::before{content:"";width:28px;height:2px;background:var(--rosso)}
.guida{color:var(--inchiostro-soft);font-size:clamp(17px,1.5vw,19px);max-width:62ch}
.grande{font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:var(--inchiostro-soft);max-width:60ch}

/* ---------- la riga di quota: il segno che tiene insieme il sito ---------- */
.quota{position:relative;padding-left:26px}
.quota::before{
  content:"";position:absolute;left:0;top:.42em;bottom:.3em;width:2px;
  background:linear-gradient(180deg,var(--rosso),var(--rosso) 60%,transparent);
}
.quota::after{
  content:"";position:absolute;left:-4px;top:.42em;width:10px;height:2px;background:var(--rosso);
}

/* ---------- barra in alto ---------- */
.barra{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--bordo);
}
.barra__fila{height:var(--nav-h);display:flex;align-items:center;gap:26px}
.marchio{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;
  letter-spacing:-.02em;font-size:17px;line-height:1.05;flex:0 0 auto}
.marchio__segno{
  width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--inchiostro);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.marchio__segno::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 0 42%,var(--rosso) 42% 58%,transparent 58%),
    linear-gradient(180deg,transparent 0 58%,var(--bianco) 58% 72%,transparent 72%);
}
.marchio small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;color:var(--inchiostro-tenue);text-transform:uppercase;margin-top:3px}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.menu a{
  padding:9px 13px;border-radius:var(--r-bottone);font-size:15px;font-weight:500;
  white-space:nowrap;
  color:var(--inchiostro-soft);position:relative;transition:color .18s,background .18s;
}
.menu a:hover{color:var(--inchiostro);background:var(--fondo)}
.menu a[aria-current="page"]{color:var(--inchiostro);font-weight:650}
.menu a[aria-current="page"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--rosso);
}

/* **Il bottone nel menu' resta un bottone.** `.menu a` e' piu' specifico di
   `.btn--rosso` — una classe piu' un elemento contro una classe sola — e gli
   sovrascriveva il bianco: «Chiedi un preventivo» usciva con la scritta scura
   sul fondo rosso, mentre lo stesso bottone in pagina era bianco. Due bottoni
   uguali che si vedono diversi sono un difetto, non una variante. */
.menu a.btn{color:#fff;font-weight:650;padding:14px 24px}
.menu a.btn--rosso{background:var(--rosso);color:#fff}
.menu a.btn--rosso:hover{background:var(--marchio-forte);color:#fff}
.menu a.btn::after{display:none}
.apri-menu{display:none;margin-left:auto;background:none;border:1px solid var(--bordo-forte);
  border-radius:var(--r-bottone);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.apri-menu span{display:block;width:19px;height:2px;background:var(--inchiostro);position:relative}
.apri-menu span::before,.apri-menu span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--inchiostro)}
.apri-menu span::before{top:-6px}.apri-menu span::after{top:6px}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-bottone);font-weight:650;font-size:16px;
  border:1px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s;
  /* L'etichetta non si spezza a meta' frase, ma non puo' nemmeno sfondare lo
     schermo: oltre la larghezza disponibile va a capo invece di uscire. */
  white-space:nowrap;max-width:100%;
}
@media (max-width:420px){ .btn{white-space:normal;text-align:center} }
.btn--rosso{background:var(--rosso);color:#fff;box-shadow:0 6px 20px rgba(250,32,71,.26)}
.btn--rosso:hover{background:var(--marchio-forte);transform:translateY(-2px);box-shadow:0 12px 30px rgba(250,32,71,.34)}
.btn--fantasma{background:var(--bianco);color:var(--inchiostro);border-color:var(--bordo-forte)}
.btn--fantasma:hover{border-color:var(--inchiostro);transform:translateY(-2px)}
.btn--scuro{background:var(--inchiostro);color:#fff}
.btn--scuro:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(12,16,23,.3)}

/* ==========================================================================
   LA COPERTINA — l'edificio che si costruisce mentre si scorre
   ========================================================================== */
.copertina{position:relative;overflow:hidden;background:var(--bianco);
  border-bottom:1px solid var(--bordo)}
.copertina__griglia{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--bordo) 1px,transparent 1px),
    linear-gradient(90deg,var(--bordo) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,transparent 72%);
}
.copertina__fila{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);
  align-items:center;min-height:min(84vh,760px);padding-block:clamp(40px,6vw,76px);position:relative;
}
.copertina h1 .riga{display:block;overflow:hidden}
.copertina h1 .riga>span{display:block}
/* La sottolineatura e' uno SFONDO, non una barra posizionata sopra.
   Con la barra serviva `white-space:nowrap` per tenerla su una riga sola, e a
   390 pixel «rimettiamo in piedi» e' piu' larga dello schermo: la pagina
   usciva dal telefono e il menu' a panino finiva fuori vista. Cosi' invece il
   testo va a capo quando serve e la riga rossa lo segue su ogni riga. */
.copertina h1 em{
  font-style:normal;color:var(--rosso);
  background-image:linear-gradient(var(--rosso),var(--rosso));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:calc(var(--sottolinea,0) * 100%) .085em;
  transition:background-size .9s cubic-bezier(.2,.7,.2,1) .4s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.02em;
}
.copertina__azioni{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.copertina__nota{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--bordo);
  display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
}
.copertina__nota div{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--inchiostro-tenue)}
.copertina__nota strong{display:block;font-family:var(--display);font-size:19px;
  letter-spacing:-.02em;color:var(--inchiostro);margin-top:5px;text-transform:none}

/* il disegno */
.cantiere{position:relative;aspect-ratio:1/1.04;width:100%;max-width:560px;margin-inline:auto}
.cantiere svg{width:100%;height:100%;overflow:visible}
.cantiere__etichetta{
  position:absolute;left:0;bottom:-4px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--inchiostro-tenue);
}
.cantiere__fase{color:var(--rosso-ink);font-weight:600}

/* i pezzi dell'edificio: si scoprono col progresso di scorrimento --costruito */
.pz{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.pz.su{opacity:1;transform:none}
.gru{transform-origin:118px 300px}
.gru-braccio{transform-box:fill-box;transform-origin:8% 50%}

/* ==========================================================================
   blocchi comuni
   ========================================================================== */
.intesta{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.intesta--centro{margin-inline:auto;text-align:center}
.intesta--centro .occhiello{justify-content:center}

.griglia{display:grid;gap:clamp(14px,1.6vw,22px)}
.griglia--2{grid-template-columns:repeat(2,1fr)}
.griglia--3{grid-template-columns:repeat(3,1fr)}
.griglia--4{grid-template-columns:repeat(4,1fr)}

/* schede dei servizi: il bordo rosso cresce da sinistra, come una quota */
.scheda{
  position:relative;background:var(--superficie);border:1px solid var(--bordo);
  border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;
  overflow:hidden;display:flex;flex-direction:column;
}
.scheda::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rosso);
  transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.scheda:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(12,16,23,.09);border-color:var(--bordo-forte)}
.scheda:hover::before{transform:scaleY(1)}
.scheda__n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--inchiostro-tenue);margin-bottom:14px}
.scheda h3{margin-bottom:10px}
.scheda p{color:var(--inchiostro-soft);font-size:16px;margin-bottom:16px}
.scheda ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.scheda li{font-size:14.5px;color:var(--inchiostro-soft);padding-left:18px;position:relative}
.scheda li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--rosso)}

/* fascia scura */
.scuro{background:var(--inchiostro);color:#fff;position:relative;overflow:hidden}
.scuro h2,.scuro h3{color:#fff}
.scuro .guida,.scuro p{color:#B9C0CC}
.scuro .occhiello{color:#FF7D92}
.scuro__trama{
  position:absolute;inset:0;opacity:.11;pointer-events:none;
  background-image:linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px);
  background-size:56px 56px;
}

/* **Dentro la fascia scura i passaggi vanno riscritti in chiaro.**
   `.passo p` e' piu' specifico di `.scuro p` e vinceva lui: il testo dei sei
   passaggi usciva grigio scuro su fondo nero, cioe' illeggibile. E' il difetto
   che non si vede guardando il CSS, solo guardando la pagina. */
.scuro .passo p{color:#B9C0CC}
.scuro .passi::before{background:rgba(255,255,255,.16)}
.scuro .passo__n{background:#161B24;border-color:rgba(255,255,255,.22);color:#8892A3}
.scuro .passo.visto .passo__n{background:var(--rosso);border-color:var(--rosso);color:#fff}

/* numeri */
.numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bordo);
  border:1px solid var(--bordo);border-radius:var(--r-card);overflow:hidden}
.numeri div{background:var(--superficie);padding:clamp(22px,2.6vw,34px)}
.numeri .val{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,56px);
  line-height:1;letter-spacing:-.035em;color:var(--inchiostro)}
.numeri .val span{color:var(--rosso)}
.numeri .et{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-tenue);margin-top:12px}
.numeri .vuoto{color:var(--bordo-forte)}

/* il metodo, a passi numerati con la linea che scende */
.passi{position:relative;display:grid;gap:0}
.passi::before{
  content:"";position:absolute;left:27px;top:14px;bottom:40px;width:2px;background:var(--bordo);
}
.passi::after{
  content:"";position:absolute;left:27px;top:14px;width:2px;background:var(--rosso);
  height:calc(var(--avanz,0) * 1%);max-height:calc(100% - 54px);transition:height .25s linear;
}
.passo{display:grid;grid-template-columns:56px 1fr;gap:clamp(16px,2.4vw,34px);
  padding-block:clamp(20px,2.4vw,30px);align-items:start;position:relative}
.passo__n{
  width:56px;height:56px;border-radius:50%;background:var(--bianco);border:2px solid var(--bordo);
  display:grid;place-items:center;font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--inchiostro-tenue);position:relative;z-index:1;transition:all .3s;
}
.passo.visto .passo__n{border-color:var(--rosso);color:var(--rosso-ink);background:var(--rosso-bg)}
.passo h3{margin-bottom:8px}
.passo p{color:var(--inchiostro-soft);margin:0;max-width:66ch}

/* elenco su due colonne con la riga rossa */
.lista{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bordo);
  border-block:1px solid var(--bordo)}
.lista article{background:var(--bianco);padding:clamp(22px,2.4vw,30px)}
.lista h3{font-size:19px;margin-bottom:8px}
.lista p{color:var(--inchiostro-soft);font-size:15.5px;margin:0}

/* realizzazioni */
.opera{
  position:relative;border:1px solid var(--bordo);border-radius:var(--r-card);overflow:hidden;
  background:var(--superficie);transition:transform .22s,box-shadow .22s;
}
.opera:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(12,16,23,.1)}
.opera__img{aspect-ratio:4/3;background:var(--fondo);position:relative;overflow:hidden;
  display:grid;place-items:center}
.opera__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.opera:hover .opera__img img{transform:scale(1.045)}
.opera__vuota{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--inchiostro-tenue);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;
  background-image:repeating-linear-gradient(135deg,var(--fondo) 0 12px,#F2F4F7 12px 24px);
}
.opera__corpo{padding:22px}
.opera__cat{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rosso-ink);background:var(--rosso-bg);
  padding:5px 10px;border-radius:var(--r-pillola);margin-bottom:12px}
.opera h3{font-size:20px;margin-bottom:6px}
.opera .dove{font-family:var(--mono);font-size:12px;color:var(--inchiostro-tenue);letter-spacing:.08em}
.opera p{color:var(--inchiostro-soft);font-size:15px;margin:12px 0 0}

/* zone servite */
.zone{display:flex;flex-wrap:wrap;gap:9px}
.zona{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;padding:9px 15px;
  border:1px solid var(--bordo);border-radius:var(--r-pillola);color:var(--inchiostro-soft);
  background:var(--bianco);transition:all .2s;
}
.zona:hover{border-color:var(--rosso);color:var(--rosso-ink);background:var(--rosso-bg)}

/* domande */
.dom{border-bottom:1px solid var(--bordo)}
.dom summary{
  cursor:pointer;list-style:none;padding:24px 48px 24px 0;position:relative;
  font-family:var(--display);font-weight:650;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.015em;
}
.dom summary::-webkit-details-marker{display:none}
.dom summary::after{
  content:"";position:absolute;right:8px;top:50%;width:14px;height:2px;background:var(--inchiostro);
  transition:transform .25s;
}
.dom summary::before{
  content:"";position:absolute;right:14px;top:50%;width:2px;height:14px;margin-top:-6px;
  background:var(--inchiostro);transition:transform .25s,opacity .25s;
}
.dom[open] summary::before{transform:rotate(90deg);opacity:0}
.dom[open] summary{color:var(--rosso-ink)}
.dom[open] summary::after,.dom[open] summary::before{background:var(--rosso)}
.dom .risposta{padding:0 48px 26px 0;color:var(--inchiostro-soft);max-width:78ch}
.dom .risposta p{margin:0}

/* richiamo finale */
.richiamo{
  background:var(--inchiostro);color:#fff;border-radius:var(--r-grande);
  padding:clamp(34px,5vw,64px);position:relative;overflow:hidden;
}
.richiamo::before{
  content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(250,32,71,.38),transparent 68%);
}
.richiamo h2{color:#fff;max-width:17ch}
.richiamo p{color:#B9C0CC;max-width:54ch;margin-top:16px}
.richiamo .azioni{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;position:relative}

/* moduli */
.campo{margin-bottom:18px}
.campo label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inchiostro-tenue);margin-bottom:8px}
.campo input,.campo textarea,.campo select{
  width:100%;padding:14px 16px;border:1px solid var(--bordo-forte);border-radius:var(--r-bottone);
  font:inherit;font-size:16px;background:var(--bianco);color:var(--inchiostro);transition:border-color .18s,box-shadow .18s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--rosso);box-shadow:0 0 0 3px var(--rosso-bg);
}
.campo textarea{min-height:140px;resize:vertical}
.avviso{padding:16px 18px;border-radius:var(--r-bottone);margin-bottom:22px;font-size:15.5px}
.avviso--ok{background:#E9FBF3;color:#06744A;border:1px solid #BEEBD8}
.avviso--no{background:var(--rosso-bg);color:var(--rosso-ink);border:1px solid #FFD0DC}

/* dati dell'azienda */
.dati{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bordo);
  border:1px solid var(--bordo);border-radius:var(--r-card);overflow:hidden}
.dati div{background:var(--superficie);padding:20px 22px}
.dati dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-tenue);margin:0 0 6px}
.dati dd{margin:0;font-size:16px;font-weight:500;word-break:break-word}
.dati dd.da-fare{color:var(--rosso-ink);font-family:var(--mono);font-size:13px}

/* piede */
.piede{background:var(--inchiostro);color:#9AA3B2;padding-block:clamp(44px,5vw,70px) 28px;margin-top:0}
.piede a{color:#9AA3B2;transition:color .18s}
.piede a:hover{color:#fff}
.piede__fila{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,44px);
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.piede h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:16px;font-weight:600}
.piede ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px}
.piede .marchio{color:#fff}
.piede .marchio small{color:#6B7483}
.piede__coda{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;font-size:13px;font-family:var(--mono);letter-spacing:.04em}

/* banner dei cookie */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:var(--bianco);
  border:1px solid var(--bordo-forte);border-radius:var(--r-card);padding:20px 22px;
  box-shadow:0 20px 60px rgba(12,16,23,.18);display:none;gap:18px;align-items:center;
  max-width:760px;margin-inline:auto;
}
.cookie.mostra{display:flex}
.cookie p{margin:0;font-size:14.5px;color:var(--inchiostro-soft)}
.cookie .btn{padding:11px 18px;font-size:14.5px}

/* comparsa allo scorrimento */
.appare{opacity:0;transform:translateY(22px)}
.appare.visto{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.2,.7,.2,1),transform .62s cubic-bezier(.2,.7,.2,1)}
.appare.visto[style*="--rit"]{transition-delay:calc(var(--rit) * 1ms)}

/* barra di avanzamento della lettura */
.avanzamento{position:fixed;top:0;left:0;height:3px;background:var(--rosso);z-index:70;
  width:calc(var(--letto,0) * 1%);transition:width .1s linear}

/* ---------- telefono e tavoletta ---------- */
@media (max-width:1020px){
  .copertina__fila{grid-template-columns:1fr;min-height:0}
  .cantiere{max-width:430px;margin-top:8px}
  .griglia--4{grid-template-columns:repeat(2,1fr)}
  .griglia--3{grid-template-columns:repeat(2,1fr)}
  .piede__fila{grid-template-columns:repeat(2,1fr)}
  .numeri{grid-template-columns:repeat(2,1fr)}
}
/* **Il menu' diventa a panino a 1140, non a 760.** Fra i due valori le sei voci
   piu' il bottone non ci stanno in riga: a 768 «Sicurezza» risultava tagliata a
   meta', a 1024 le voci andavano a capo («Cosa / facciamo»). Le griglie invece
   stanno bene fino a 760 e restano dove sono. */
@media (max-width:1140px){
  .menu{
    position:fixed;inset:var(--nav-h) 0 auto;background:var(--bianco);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 16px 20px;border-bottom:1px solid var(--bordo);
    transform:translateY(-120%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 20px 50px rgba(12,16,23,.1);max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  }
  .menu.aperto{transform:none}
  .menu a{padding:14px 10px;font-size:17px;border-bottom:1px solid var(--bordo)}
  .menu a:last-child{border-bottom:none}
  .menu .btn{margin-top:12px}
  .apri-menu{display:flex}
}

@media (max-width:760px){
  body{font-size:16px}
  .griglia--2,.griglia--3,.griglia--4,.lista,.dati{grid-template-columns:1fr}
  .numeri{grid-template-columns:repeat(2,1fr)}
  .piede__fila{grid-template-columns:1fr}
  .passo{grid-template-columns:44px 1fr;gap:16px}
  .passo__n{width:44px;height:44px;font-size:12px}
  .passi::before,.passi::after{left:21px}
  .cookie{flex-direction:column;align-items:stretch}
}

/* ---------- chi non vuole il movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .appare{opacity:1;transform:none}
  .pz{opacity:1;transform:none}
  .copertina h1 em{background-size:100% .085em}
}

/* ---------- stampa ---------- */
@media print{
  .barra,.cookie,.avanzamento,.copertina__griglia,.cantiere{display:none}
  body{font-size:11pt}
  .scuro,.richiamo,.piede{background:#fff!important;color:#000!important}
}

/* ==========================================================================
   PASSAGGIO FRA LE PAGINE
   Due righe di CSS e il browser dissolve una pagina nell'altra da solo, senza
   una libreria e senza trasformare il sito in un'applicazione: i collegamenti
   restano collegamenti veri, con l'indirizzo giusto e il tasto «indietro» che
   funziona. Dove il browser non la conosce, non succede niente di male.
   ========================================================================== */
@view-transition{ navigation:auto }

::view-transition-old(root){animation:esce .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:entra .3s cubic-bezier(0,0,.2,1) both}
@keyframes esce{to{opacity:0;transform:translateY(-8px)}}
@keyframes entra{from{opacity:0;transform:translateY(12px)}}

/* La barra in alto e il marchio NON si dissolvono: restano fermi mentre il
   resto cambia, ed e' quello che fa sembrare il sito una cosa sola. */
.barra{view-transition-name:barra}
.marchio{view-transition-name:marchio}
.piede{view-transition-name:piede}
::view-transition-group(barra),
::view-transition-group(marchio),
::view-transition-group(piede){animation-duration:.26s}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- il logo nella barra e nel piede ---------- */
.marchio__img{height:30px;width:auto;display:block}
.piede .marchio__img{height:28px}
@media (max-width:420px){ .marchio__img{height:25px} }

/* ---------- salta al contenuto: per chi naviga da tastiera ---------- */
.salta-al-contenuto{
  position:absolute;left:12px;top:-60px;z-index:100;background:var(--inchiostro);color:#fff;
  padding:12px 18px;border-radius:var(--r-bottone);font-size:15px;transition:top .18s;
}
.salta-al-contenuto:focus{top:12px}

/* ---------- testata delle pagine interne ---------- */
.testata{
  border-bottom:1px solid var(--bordo);position:relative;overflow:hidden;
  padding-block:clamp(40px,6vw,86px) clamp(32px,4.4vw,60px);
}
.testata::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--bordo) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bordo) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(90% 120% at 88% 0%,#000,transparent 70%);
}
.testata>.contenitore{position:relative}
.briciole{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--inchiostro-tenue);margin-bottom:18px}
.briciole a:hover{color:var(--rosso-ink)}
.testata h1{font-size:clamp(34px,5.4vw,64px)}
.testata .guida{margin-top:20px}

/* ---------- servizio esteso ---------- */
.servizio{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,54px);
  padding-block:clamp(34px,4.4vw,62px);border-bottom:1px solid var(--bordo);align-items:start;
  scroll-margin-top:calc(var(--nav-h) + 20px);
}
.servizio:last-child{border-bottom:none}
.servizio__n{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--rosso-ink);margin-bottom:12px}
.servizio h2{font-size:clamp(25px,3vw,38px);margin-bottom:14px}
.servizio p{color:var(--inchiostro-soft)}
.servizio ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--bordo);
  border:1px solid var(--bordo);border-radius:var(--r-card);overflow:hidden}
.servizio li{background:var(--superficie);padding:16px 20px;font-size:15.5px;
  display:flex;align-items:center;gap:13px;color:var(--inchiostro)}
.servizio li::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:3px;
  background:var(--rosso-tenue);border:2px solid var(--rosso)}
@media (max-width:860px){.servizio{grid-template-columns:1fr}}

/* ---------- indice laterale dei servizi ---------- */
.indice{display:flex;flex-wrap:wrap;gap:8px;padding-block:22px}
.indice a{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;padding:9px 14px;
  border:1px solid var(--bordo);border-radius:var(--r-pillola);color:var(--inchiostro-soft);transition:all .18s}
.indice a:hover{border-color:var(--rosso);color:var(--rosso-ink);background:var(--rosso-bg)}

/* ---------- due colonne testo ---------- */
.duecol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,64px);align-items:start}
@media (max-width:860px){.duecol{grid-template-columns:1fr}}
.valore{padding:26px 0;border-top:1px solid var(--bordo)}
.valore h3{font-size:21px;margin-bottom:8px}
.valore p{color:var(--inchiostro-soft);margin:0;font-size:16px}

/* ---------- pagine di testo lungo (privacy, cookie, articoli) ---------- */
.testo-lungo h2{font-size:clamp(22px,2.3vw,30px);margin:40px 0 14px}
.testo-lungo h2:first-child{margin-top:0}
.testo-lungo h3{font-size:20px;margin:28px 0 10px}
.testo-lungo p{color:var(--inchiostro-soft);max-width:72ch}
.testo-lungo a{color:var(--rosso-ink);text-decoration:underline;text-underline-offset:2px}
.testo-lungo ul,.testo-lungo ol{color:var(--inchiostro-soft);padding-left:22px}
.testo-lungo li{margin-bottom:8px}
.testo-lungo img{border-radius:var(--r-card);margin:24px 0}
.nota-doc{
  margin-top:40px;padding:18px 20px;border-left:3px solid var(--rosso);
  background:var(--rosso-bg);border-radius:0 var(--r-bottone) var(--r-bottone) 0;
  font-size:15px;color:var(--rosso-ink)!important;
}

/* ---------- contatto rapido, sempre a schermo ---------- */
.chat-veloce{
  position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;padding:13px 19px 13px 15px;border-radius:var(--r-pillola);
  font-weight:650;font-size:15px;box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.chat-veloce:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px rgba(37,211,102,.5)}
.chat-veloce svg{flex:0 0 auto}
@media (max-width:620px){
  .chat-veloce span{display:none}
  .chat-veloce{padding:15px;right:14px;bottom:14px}
}
/* quando c'e' il banner dei cookie, il bottone sale per non finirci sotto */
body:has(.cookie.mostra) .chat-veloce{bottom:140px}

/* ---------- vetrina Instagram ---------- */
.ig-griglia{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig-griglia a{display:block;aspect-ratio:1;border-radius:var(--r-bottone);overflow:hidden;
  background:var(--fondo);position:relative}
.ig-griglia img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ig-griglia a:hover img{transform:scale(1.07)}
.ig-carico{grid-column:1/-1;text-align:center;color:var(--inchiostro-tenue);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:34px 0}
@media (max-width:1020px){.ig-griglia{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.ig-griglia{grid-template-columns:repeat(2,1fr)}}

/* ---------- filtri del portfolio ---------- */
.filtri{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filtro{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;padding:10px 17px;
  border:1px solid var(--bordo);border-radius:var(--r-pillola);background:var(--bianco);
  color:var(--inchiostro-soft);cursor:pointer;transition:all .18s;
}
.filtro:hover{border-color:var(--bordo-forte);color:var(--inchiostro)}
.filtro[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}
.opera[hidden]{display:none}

/* ---------- la scheda di un lavoro ---------- */
.opera__importo{
  display:inline-flex;align-items:baseline;gap:7px;margin:14px 0 0;
  font-family:var(--display);font-weight:800;font-size:clamp(21px,2.1vw,27px);
  letter-spacing:-.02em;color:var(--inchiostro);
}
.opera__importo small{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inchiostro-tenue);
}
.opera__senza{
  margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rosso-ink);
}
.opera__dida{
  margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--inchiostro-tenue);
  font-style:italic;
}
/* prima e dopo: un bottone sull'immagine scambia le due foto */
.opera__img{position:relative}
.scambia{
  position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(12,16,23,.84);color:#fff;border:none;border-radius:var(--r-pillola);
  padding:9px 15px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .18s,transform .18s;
}
.scambia:hover{background:var(--rosso);transform:translateY(-2px)}
.scambia::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--rosso);flex:0 0 auto;
}
.scambia[data-stato="prima"]::before{background:#fff}

/* ---------- i sei passaggi, versione corta per la home ----------
   In pagina intera ogni passaggio ha il suo paragrafo; qui bastano i titoli.
   La home non deve raccontare tutto: deve far venire voglia di aprire la
   pagina che lo racconta. */
.passi-corti{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-card);overflow:hidden}
.passi-corti li{
  background:#161B24;padding:16px 20px;display:flex;align-items:center;gap:16px;
  font-family:var(--display);font-weight:650;font-size:17px;letter-spacing:-.01em;color:#fff;
}
.passi-corti li span{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;
  background:rgba(250,32,71,.16);color:#FF7D92;border:1px solid rgba(250,32,71,.4);
}
@media (max-width:860px){ .passi-corti li{font-size:15.5px;padding:14px 16px} }

/* ---- il timelapse del cantiere: il video e' la cosa da guardare, il testo
       gli sta accanto e non gli ruba spazio ------------------------------- */
.cantiere-video{padding-block:96px}
.video-blocco{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:48px;align-items:center}
.video-testo h2{font-size:clamp(28px,3vw,40px);line-height:1.08;margin:14px 0 16px}
.video-testo p{color:#B9C0CC;margin:0 0 18px}
.video-testo .dove{color:#7C8697;font-size:14px;letter-spacing:.02em}
.video-cornice{border-radius:16px;background:#0B0E14;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.video-cornice video{display:block;width:100%;height:auto;aspect-ratio:848/300;
  background:#0B0E14;border-radius:15px}
.video-apri{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#C9CFDA}
.video-apri:hover{color:#fff}
@media (max-width:900px){
  .cantiere-video{padding-block:64px}
  .video-blocco{grid-template-columns:1fr;gap:28px}
}

/* ---- la scheda diventa un collegamento ------------------------------------ */
.opera--link{display:block;color:inherit;text-decoration:none}
.opera--link::after{display:none}
.opera--link:hover{transform:translateY(-3px)}
.opera__apri{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rosso-ink)}
.opera--link:hover .opera__apri{color:var(--rosso-scuro)}
.bollo-video{position:absolute;right:12px;top:12px;z-index:2;
  background:rgba(12,16,23,.84);color:#fff;border-radius:var(--r-pillola);
  padding:6px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;backdrop-filter:blur(6px)}

/* ---- l'archivio: 72 righe, quindi un ELENCO e non una griglia di riquadri -- */
.archivio h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;margin:14px 0 14px}
.cerca-riga{display:flex;align-items:center;gap:16px;margin:26px 0 10px;flex-wrap:wrap}
.cerca-riga input{flex:1 1 320px;min-width:0;padding:15px 18px;border-radius:12px;
  border:1px solid var(--bordo);background:#fff;font:inherit;font-size:16px;color:var(--inchiostro)}
.cerca-riga input:focus{outline:2px solid var(--rosso);outline-offset:1px;border-color:transparent}
.cerca-riga .conta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--inchiostro-tenue)}
.archivio-elenco{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--bordo)}
.archivio-elenco li{border-bottom:1px solid var(--bordo)}
.archivio-elenco a{display:grid;grid-template-columns:minmax(0,1fr) 190px 110px 130px;
  gap:18px;align-items:baseline;padding:16px 10px;color:inherit;text-decoration:none;
  transition:background .16s}
.archivio-elenco a::after{display:none}
.archivio-elenco a:hover{background:var(--rosso-bg)}
.archivio-tit{font-weight:600}
.archivio-tit i{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--rosso);margin-left:9px;vertical-align:middle;font-style:normal}
.archivio-dove,.archivio-anno{color:var(--inchiostro-tenue);font-size:14.5px}
.archivio-anno{font-family:var(--mono);font-size:12.5px}
.archivio-imp{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums}
.vuoto-ricerca{margin-top:22px}
@media (max-width:860px){
  .archivio-elenco a{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:15px 6px}
  .archivio-tit{grid-column:1/-1}
  .archivio-anno{grid-column:2;text-align:right}
  .archivio-imp{grid-column:2;text-align:right}
}

/* ---- la pagina di un cantiere --------------------------------------------- */
.testata--opera h1{max-width:18ch}
.opera-dati{display:flex;flex-wrap:wrap;gap:12px 48px;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--bordo)}
.opera-dati div{display:flex;flex-direction:column;gap:5px}
.opera-dati span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--inchiostro-tenue)}
.opera-dati strong{font-size:19px;font-variant-numeric:tabular-nums}
.opera-foto{margin:0 0 26px;border-radius:16px;overflow:hidden;background:var(--fondo)}
.opera-foto img{display:block;width:100%;height:auto}
.opera-foto figcaption{padding:14px 18px;font-size:14.5px;color:var(--inchiostro-tenue);
  background:var(--fondo)}
.opera-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:52px;
  align-items:start}
.opera-testo .guida{font-size:19px;line-height:1.62;margin:14px 0 0}
.nota-foto{margin-top:18px;font-size:14.5px;color:var(--inchiostro-tenue)}
.squadra{background:var(--fondo);border:1px solid var(--bordo);border-radius:18px;padding:26px}
.squadra__testa{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 20px}
.squadra__testa div{display:flex;flex-direction:column;gap:5px}
.squadra__testa strong{font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.squadra__testa span{font-size:12px;line-height:1.3;color:var(--inchiostro-tenue)}
.squadra__voci{list-style:none;margin:0;padding:0;border-top:1px solid var(--bordo)}
.squadra__voci li{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--bordo);font-size:15px}
.squadra__voci b{font-family:var(--mono);font-size:13px;color:var(--inchiostro-tenue);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.squadra__nota{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--inchiostro-tenue)}
.squadra__nota strong{color:var(--inchiostro)}
@media (max-width:980px){
  .opera-corpo{grid-template-columns:1fr;gap:34px}
  .squadra__testa{grid-template-columns:repeat(3,1fr)}
}

/* Le foto di cantiere arrivano dal telefono, metà in verticale: a tutta
   larghezza una verticale diventa alta due schermi. Si ritagliano in un
   rettangolo fisso, e due foto stanno affiancate. */
.galleria{display:grid;gap:22px}
.galleria--due{grid-template-columns:1fr 1fr}
.opera-foto img{aspect-ratio:3/2;object-fit:cover;object-position:center}
.galleria:not(.galleria--due) .opera-foto img{aspect-ratio:21/9;max-height:560px}
@media (max-width:820px){ .galleria--due{grid-template-columns:1fr} }

.cerca-riga input{max-width:640px}
.cerca-riga .conta{margin-left:auto;white-space:nowrap}

.squadra__testa--breve{grid-template-columns:repeat(2,1fr)}
.squadra__breve{margin:0 0 4px;font-size:15px;color:var(--inchiostro-tenue);
  padding-top:16px;border-top:1px solid var(--bordo)}

/* ---- il carosello delle foto di cantiere ---------------------------------
   Scorre davvero (scroll-snap), quindi funziona col dito e con la rotella
   anche se il javascript non parte: le frecce e i provini sono in piu'. */
.carosello{position:relative;border-radius:16px;overflow:hidden;background:#0B0E14}
.carosello__pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carosello__pista::-webkit-scrollbar{display:none}
.carosello__foto{flex:0 0 100%;margin:0;scroll-snap-align:center}
.carosello__foto img{display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;object-position:center}
.carosello__freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(12,16,23,.68);color:#fff;font-size:28px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(6px);
  transition:background .18s,opacity .18s}
.carosello__freccia:hover{background:var(--rosso)}
.carosello__freccia[disabled]{opacity:.28;cursor:default}
.carosello__freccia--sx{left:14px}
.carosello__freccia--dx{right:14px}
.carosello__sotto{display:flex;align-items:baseline;gap:20px;margin-top:14px}
.carosello__dida{margin:0;flex:1;color:var(--inchiostro-tenue);font-size:14.5px}
.carosello__conta{font-family:var(--mono);font-size:12.5px;color:var(--inchiostro-tenue);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.carosello__conta b{color:var(--inchiostro)}
.provini{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin}
.provino{flex:0 0 96px;height:66px;padding:0;border:none;border-radius:9px;
  overflow:hidden;cursor:pointer;background:var(--fondo);opacity:.52;
  transition:opacity .18s,box-shadow .18s}
.provino img{width:100%;height:100%;object-fit:cover;display:block}
.provino:hover{opacity:.85}
.provino.acceso{opacity:1;box-shadow:0 0 0 2px var(--rosso)}
@media (max-width:700px){
  .carosello__foto img{aspect-ratio:4/3}
  .carosello__freccia{width:40px;height:40px;font-size:24px}
  .provino{flex:0 0 74px;height:52px}
}

.bollo-foto{position:absolute;left:12px;top:12px;z-index:2;
  background:rgba(12,16,23,.84);color:#fff;border-radius:var(--r-pillola);
  padding:6px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;backdrop-filter:blur(6px)}

/* ---- le qualificazioni ------------------------------------------------------
   Il marchio si mostra col file originale e con «width:auto»: il regolamento
   d'uso vieta di variare le proporzioni fra base e altezza. */
.certificazioni{background:var(--fondo);border-block:1px solid var(--bordo)}
.guida--larga{max-width:62ch;margin:14px 0 0}
.qualifiche{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.qualifica{background:#fff;border:1px solid var(--bordo);border-radius:18px;padding:28px}
.qualifica__testa{display:flex;gap:22px;align-items:flex-start;justify-content:space-between}
.qualifica__sigla{display:inline-block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rosso-ink);
  background:var(--rosso-bg);padding:5px 11px;border-radius:var(--r-pillola)}
.qualifica h3{font-size:20px;line-height:1.25;margin:12px 0 8px;max-width:26ch}
.qualifica__num{margin:0;font-size:14px;color:var(--inchiostro-tenue)}
.qualifica__marchio{flex:0 0 auto;width:150px;height:auto;display:block}
.qualifica__righe{margin:22px 0 0;padding:0;border-top:1px solid var(--bordo)}
.qualifica__righe div{display:flex;justify-content:space-between;gap:18px;
  padding:10px 0;border-bottom:1px solid var(--bordo)}
.qualifica__righe dt{margin:0;font-size:14.5px;color:var(--inchiostro-tenue)}
.qualifica__righe dd{margin:0;font-size:14.5px;font-weight:600;text-align:right}
.qualifica__nota{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--inchiostro-tenue)}
.qualifica__file{display:inline-block;margin-top:16px;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rosso-ink)}
.piede__bolli{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:26px 0;border-top:1px solid rgba(255,255,255,.10)}
.piede__marchio{width:170px;height:auto;display:block;background:#fff;
  border-radius:10px;padding:8px}
.piede__bolli p{margin:0;flex:1;min-width:260px;font-size:13px;line-height:1.6;color:#9AA3B2}
.piede__bolli strong{color:#E6E9EF}
@media (max-width:860px){ .qualifiche{grid-template-columns:1fr} }
@media (max-width:620px){
  .qualifica__testa{flex-direction:column}
  .qualifica__marchio{width:140px}
}

/* ---- la pagina di un documento: a sinistra i dati, a destra il PDF vero ---- */
.testata--doc h1{max-width:22ch}
.doc-griglia{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:44px;align-items:start}
.doc-lato .qualifica__righe{margin-top:0}
.doc-marchio{width:180px;height:auto;display:block;margin:22px 0 0}
.doc-azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.doc-collegamento{margin:22px 0 0;font-size:13px;color:var(--inchiostro-tenue);line-height:1.8}
.doc-collegamento code{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:13px;
  background:var(--fondo);border:1px solid var(--bordo);border-radius:8px;padding:8px 12px;
  color:var(--inchiostro);word-break:break-all}
.doc-visore{border:1px solid var(--bordo);border-radius:16px;overflow:hidden;background:var(--fondo);
  min-height:720px;display:grid}
.doc-visore object,.doc-visore iframe{width:100%;height:100%;min-height:720px;border:0;display:block}
.doc-ripiego{display:grid;place-items:center;gap:16px;padding:60px 24px;text-align:center}
@media (max-width:980px){
  .doc-griglia{grid-template-columns:1fr;gap:30px}
  .doc-visore{min-height:520px}
  .doc-visore object,.doc-visore iframe{min-height:520px}
}

/* ---- dove la foto non c'e' ancora: il cantiere disegnato -------------------
   Si costruisce da solo quando entra nello schermo, una volta sola: una
   costruzione che riparte all'infinito dietro quindici schede e' rumore.
   Il riquadro ha le proporzioni del disegno, cosi' l'SVG non puo' debordare. */
.opera__vuota{display:grid;place-items:center;padding:0;overflow:hidden}
.opera__vuota span{position:absolute;left:0;right:0;bottom:10px;z-index:2;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-tenue);line-height:1.5}
.cantiere-posto{aspect-ratio:460/480;height:88%;width:auto;max-width:86%;
  margin:0 auto;overflow:hidden}
.cantiere-posto svg{display:block;width:100%;height:100%;overflow:hidden}
.cantiere-posto .pz{opacity:0;transform:translateY(14px)}
.cantiere-posto.costruisce .pz{
  animation:posa .62s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--p, 1) * .16s)}
@keyframes posa{to{opacity:1;transform:none}}
.opera-posto{display:grid;place-items:center;gap:18px;padding:34px 20px 30px;
  background:var(--fondo);border:1px solid var(--bordo);border-radius:18px}
.opera-posto .cantiere-posto{height:auto;width:min(340px,70vw);max-width:100%}
.opera-posto p{margin:0;max-width:52ch;text-align:center;color:var(--inchiostro-tenue);font-size:15px}
@media (prefers-reduced-motion:reduce){
  .cantiere-posto .pz{opacity:1;transform:none;animation:none}
}
}

.griglia--4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1180px){ .griglia--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .griglia--4{grid-template-columns:1fr} }
.vetrina .opera__corpo{padding:18px}
.vetrina .opera__corpo h3{font-size:18px;line-height:1.24}
.vetrina .opera__importo{font-size:22px}
.dato-nota{display:block;margin-top:6px;max-width:30ch;font-style:normal;font-size:12px;
  line-height:1.5;color:var(--inchiostro-tenue)}

/* Il disegno della copertina si costruisce da solo: niente scorrimento. */
.cantiere--sola .pz{opacity:0;transform:translateY(16px);transition:none}
.cantiere--sola.costruisce .pz{
  animation:posa .62s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--p, 1) * .2s)}
.cantiere--sola .pz.su{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cantiere--sola .pz{opacity:1;transform:none;animation:none}
}

/* ---- la fila di lavori che si scorre ------------------------------------- */
.scorri{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-block:4px 10px;margin-top:30px;
  /* Senza «scroll-padding» lo scatto allinea la prima scheda al bordo della
     finestra e il margine della pista scompare: la fila partiva appiccicata
     al vetro mentre il titolo era rientrato. */
  scroll-padding-inline:max(var(--gutter), calc((100vw - var(--largo)) / 2 + var(--gutter)))}
.scorri::-webkit-scrollbar{display:none}
.scorri__pista{display:flex;gap:22px;
  padding-inline:max(var(--gutter), calc((100vw - var(--largo)) / 2 + var(--gutter)))}
.scorri__pista > .opera{flex:0 0 clamp(262px, 25vw, 320px);scroll-snap-align:start}
.scorri__pista .opera__corpo{padding:18px}
.scorri__pista .opera__corpo h3{font-size:18px;line-height:1.24}
.scorri__pista .opera__importo{font-size:21px}
.scorri__comandi{display:flex;align-items:center;gap:10px}
.scorri__freccia{width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid var(--bordo-forte);background:var(--bianco);color:var(--inchiostro);
  font-size:22px;line-height:1;display:grid;place-items:center;
  transition:background .18s,border-color .18s,opacity .18s}
.scorri__freccia:hover{background:var(--fondo);border-color:var(--inchiostro)}
.scorri__freccia[disabled]{opacity:.3;cursor:default}
@media (max-width:620px){ .scorri__freccia{display:none} }
.opera--tutti{flex:0 0 clamp(200px,18vw,240px);scroll-snap-align:start;display:grid;
  align-content:center;justify-items:start;gap:10px;padding:28px;background:var(--fondo);
  border:1px dashed var(--bordo-forte);border-radius:var(--r-grande);color:inherit;
  text-decoration:none}
.opera--tutti::after{display:none}
.opera--tutti strong{display:block;font-size:40px;line-height:1;letter-spacing:-.02em}
.opera--tutti span{font-size:14px;color:var(--inchiostro-tenue)}
.opera--tutti:hover{border-color:var(--rosso);background:var(--rosso-bg)}

/* ---- la pagina di presentazione ------------------------------------------- */
.pres-copertina{padding-block:clamp(60px,9vw,120px) clamp(40px,6vw,70px);
  background:var(--fondo);border-bottom:1px solid var(--bordo)}
.pres-copertina h1{font-size:clamp(38px,6.4vw,86px);line-height:.98;letter-spacing:-.03em;
  margin:16px 0 0}
.pres-sommario{max-width:58ch;margin:26px 0 0;font-size:clamp(17px,1.5vw,21px);
  line-height:1.6;color:var(--inchiostro-soft)}
.pres-numeri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
  margin-top:44px;padding-top:30px;border-top:1px solid var(--bordo)}
.pres-numeri strong{display:block;font-size:clamp(26px,3vw,40px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pres-numeri span{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-tenue);line-height:1.5}
.pres-vetrina{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pres-vetrina--bassa{margin-top:0}
.pres-vetrina figure{margin:0;position:relative;overflow:hidden}
.pres-vetrina img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.pres-vetrina figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;
  color:#fff;background:linear-gradient(transparent,rgba(8,11,16,.86))}
.pres-vetrina figcaption strong{display:block;font-size:16px;line-height:1.3}
.pres-vetrina figcaption span{display:block;margin-top:5px;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;color:#C9CFDA}
.pres-punti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:38px}
.pres-punti h3{font-size:18px;margin:0 0 9px;color:#fff}
.pres-punti p{margin:0;font-size:15px;line-height:1.65;color:#B9C0CC}
.pres-qualifiche{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
.pres-qualifiche article{background:#fff;border:1px solid var(--bordo);border-radius:18px;padding:26px}
.pres-qualifiche h3{font-size:19px;line-height:1.28;margin:12px 0 8px;max-width:28ch}
.pres-qualifiche p{margin:0;font-size:14px;color:var(--inchiostro-tenue)}
.pres-marchio{width:160px;height:auto;display:block;margin:18px 0 4px}
.pres-contatti{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:18px 30px;margin:24px 0 6px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.pres-contatti span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8E97A6;margin-bottom:6px}
.pres-contatti strong{font-size:15.5px;line-height:1.45;color:#fff;word-break:break-word}
@media (max-width:900px){
  .pres-numeri{grid-template-columns:1fr 1fr;gap:26px 18px}
  .pres-vetrina{grid-template-columns:1fr 1fr}
  .pres-punti{grid-template-columns:1fr 1fr}
  .pres-qualifiche{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pres-vetrina{grid-template-columns:1fr}
  .pres-punti{grid-template-columns:1fr}
}

/* ---- lo strumento della firma per la posta -------------------------------- */
.firma-banco{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:34px;align-items:start}
.firma-campi{display:grid;gap:16px;background:var(--fondo);border:1px solid var(--bordo);
  border-radius:16px;padding:22px}
.firma-campi label{display:grid;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-tenue)}
.firma-campi label small{text-transform:none;letter-spacing:0;font-family:var(--corpo)}
.firma-campi input[type=text],.firma-campi input[type=email]{padding:11px 13px;border-radius:10px;
  border:1px solid var(--bordo-forte);background:#fff;font:inherit;font-size:15px;color:var(--inchiostro)}
.firma-campi input:focus{outline:2px solid var(--rosso);outline-offset:1px;border-color:transparent}
.firma-spunta{grid-template-columns:auto 1fr;align-items:center;gap:10px;text-transform:none;
  letter-spacing:0;font-family:var(--corpo);font-size:14.5px;color:var(--inchiostro)}
.firma-spunta input{width:17px;height:17px;accent-color:var(--rosso)}
.firma-barra{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.firma-barra .btn{padding:11px 18px;font-size:14.5px}
.firma-finestra{background:#fff;border:1px solid var(--bordo);border-radius:16px;padding:28px;
  overflow-x:auto;box-shadow:0 10px 40px -28px rgba(12,16,23,.5)}
.firma-aiuto{min-height:22px;margin:12px 0 0;font-size:14px}
.firma-aiuto.bene{color:#0E7A3C}
.firma-aiuto.male{color:var(--rosso-ink)}
.firma-codice{margin-top:10px}
.firma-codice summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--inchiostro-tenue)}
.firma-codice textarea{width:100%;margin-top:12px;padding:14px;border-radius:12px;
  border:1px solid var(--bordo);background:var(--fondo);font-family:var(--mono);font-size:12px;
  line-height:1.6;color:var(--inchiostro-soft);resize:vertical}
.firma-istruzioni{margin-top:54px;padding-top:40px;border-top:1px solid var(--bordo)}
.firma-istruzioni code{font-family:var(--mono);font-size:13px;background:var(--fondo);
  padding:2px 6px;border-radius:5px}
@media (max-width:900px){ .firma-banco{grid-template-columns:1fr} }
.firma-bottoni{display:flex;gap:10px;flex-wrap:wrap}
.firma-avvertenza{margin:14px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--rosso-bg);border:1px solid var(--rosso-tenue);
  font-size:14.5px;line-height:1.6;color:var(--inchiostro-soft)}
.firma-avvertenza strong{display:block;margin-bottom:5px;color:var(--rosso-ink)}
.firma-avvertenza kbd{font-family:var(--mono);font-size:12.5px;background:#fff;
  border:1px solid var(--bordo-forte);border-bottom-width:2px;border-radius:5px;padding:1px 6px}