/* L26 (17/10/2026, CUBE-DEV): lo stile comune alle due varianti della pagina di un collega. I colori sono quelli della home 3D
   (grafite, carta, linea smeraldo, i quattro tasti del terminale); i caratteri ospitati da noi. */
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/collega/fonts/caveat-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/collega/fonts/caveat-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/collega/fonts/caveat-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/collega/fonts/caveat-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/collega/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/collega/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/collega/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');}
:root{--fondo:#0b0c0f;--grafite:#26282c;--grafite2:#1b1d21;--carta:#f3f1e9;--inchiostro:#22408a;--testo:#e9e7e1;--muto:#9a9fa8;
  --smeraldo:#46d39a;--ciano:#35c9e0;--viola:#9b7cf0;--corallo:#ff7a5c;--linea:rgba(233,231,225,.12);}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body.cl-fermo{overflow:hidden;}
a{color:inherit;}
.cl-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;}
.cl-barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(16px,4vw,48px);
  background:color-mix(in srgb,var(--fondo) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);}
.cl-marchio{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.32em;font-size:.78rem;text-decoration:none;}
.cl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.3rem;border-radius:999px;border:1px solid var(--smeraldo);
  background:color-mix(in srgb,var(--smeraldo) 14%,transparent);color:var(--testo);font:600 .95rem 'IBM Plex Sans',sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s;}
.cl-btn:hover{background:color-mix(in srgb,var(--smeraldo) 26%,transparent);}
.cl-btn.vuoto{border-color:var(--linea);background:transparent;}
.cl-btn:focus-visible,.cl-carta:focus-visible,.cl-chiudi:focus-visible{outline:2px solid var(--ciano);outline-offset:3px;}
.cl-numeri{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin:1.6rem 0 0;padding:0;list-style:none;}
.cl-numeri b{display:block;font:500 clamp(1.6rem,3.4vw,2.3rem)/1 'IBM Plex Mono',monospace;color:var(--testo);}
.cl-numeri span{font-size:.82rem;color:var(--muto);}
@media (max-width:520px){ .cl-numeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;text-align:left;} .cl-numeri span{display:block;font-size:.74rem;line-height:1.3;} }
/* le carte dei lavori: la base (le varianti decidono come stanno nello spazio) */
.cl-carta{display:flex;flex-direction:column;text-align:left;padding:0;border:0;cursor:pointer;font:inherit;color:inherit;background:none;}
.cl-carta-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--grafite2);}
.cl-carta-img img,.cl-layout-img img,.cl-carta-img video,.cl-layout-img video{display:block;width:100%;height:100%;object-fit:cover;}
.cl-carta-testo{display:flex;flex-direction:column;gap:.2rem;padding:.8rem .95rem 1rem;}
.cl-carta-tipo{font:500 .68rem 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--smeraldo);}
.cl-carta-titolo{font-weight:600;font-size:1.02rem;line-height:1.3;}
.cl-segnaposto{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:radial-gradient(120% 90% at 20% 15%,color-mix(in srgb,var(--a) 55%,transparent),transparent 60%),linear-gradient(135deg,var(--b),#0d0e11);}
.cl-segnaposto span{font:500 2.4rem 'IBM Plex Mono',monospace;letter-spacing:.2em;color:color-mix(in srgb,var(--a) 70%,#fff);opacity:.85;}
/* il layout di un lavoro, aperto */
.cl-layout{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:clamp(12px,3vw,40px);}
.cl-layout-velo{position:absolute;inset:0;background:rgba(5,6,8,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:cl-entra .25s ease;}
.cl-layout-foglio{position:relative;width:min(1080px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--grafite2);border:1px solid var(--linea);border-radius:14px;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);animation:cl-sale .3s cubic-bezier(.2,.8,.2,1);}
.cl-layout-img{min-height:280px;background:#000;}
.cl-demo{display:block;width:100%;height:100%;min-height:420px;border:0;background:#fff;}
.cl-layout-testo{padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:.8rem;}
.cl-layout-testo h3{margin:0;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;}
.cl-layout-testo p{margin:0;color:#c9cbd1;}
.cl-tag{display:flex;flex-wrap:wrap;gap:.4rem;}
.cl-tag span{font:500 .7rem 'IBM Plex Mono',monospace;letter-spacing:.08em;padding:.25rem .55rem;border:1px solid var(--linea);border-radius:999px;color:var(--muto);}
.cl-layout-testo .cl-btn{align-self:flex-start;margin-top:auto;}
.cl-chiudi{position:absolute;top:10px;right:10px;z-index:2;min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--linea);background:rgba(11,12,15,.8);color:var(--testo);font:600 .85rem 'IBM Plex Sans',sans-serif;cursor:pointer;}
@media (max-width:760px){ .cl-layout-foglio{grid-template-columns:1fr;} .cl-layout-img{min-height:0;aspect-ratio:16/10;} .cl-demo{min-height:360px;} }
@keyframes cl-entra{from{opacity:0}}
@keyframes cl-sale{from{opacity:0;transform:translateY(24px) scale(.98)}}
/* il modulo */
.cl-contatto{max-width:640px;}
.cl-campo{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem;}
.cl-campo span{font-size:.85rem;color:var(--muto);}
.cl-campo input,.cl-campo textarea{width:100%;padding:.85rem 1rem;border-radius:10px;border:1px solid var(--linea);background:var(--grafite2);color:var(--testo);font:inherit;font-size:1rem;}
.cl-campo textarea{min-height:120px;resize:vertical;}
.cl-campo input:focus,.cl-campo textarea:focus{outline:none;border-color:var(--smeraldo);}
.cl-msg{min-height:1.4em;margin-top:.7rem;font-size:.92rem;color:var(--muto);}
.cl-msg.ok{color:var(--smeraldo);} .cl-msg.errore{color:var(--corallo);}
.cl-nota{font-size:.78rem;color:var(--muto);margin-top:.6rem;}
.cl-piede{padding:2rem clamp(16px,4vw,48px) 2.4rem;border-top:1px solid var(--linea);color:var(--muto);font-size:.8rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;}
.cl-assente{min-height:70vh;display:grid;place-items:center;text-align:center;padding:2rem;}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;} html{scroll-behavior:auto;} }