/* Coopyleft – pagina Tecnologie (proposta A). Stessa grammatica della pagina Servizi. */
.cl-te{
  --cl-p-ink:#21242a; --cl-p-primary:#467ef7; --cl-p-coral:#ed7466; --cl-p-soft:#dceaff;
  --cl-te-sfondo:#fafbfd;   /* SFONDO DELLA PAGINA (il grigino chiarissimo): cambia solo questo valore */
  --cl-t-sub:var(--wp--preset--font-size--subtitle,.75rem);
  --cl-t-p:var(--wp--preset--font-size--paragraph,1rem);
  --cl-t-h4:var(--wp--preset--font-size--h4,clamp(1.125rem,.971rem + .657vw,1.5625rem));
  --cl-t-h3:var(--wp--preset--font-size--h3,clamp(1.25rem,.898rem + 1.502vw,2.25rem));
  position:relative; isolation:isolate; color:var(--cl-p-ink); width:100%; font-size:var(--cl-t-p);
}
.cl-te::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--cl-te-sfondo)}
.cl-te *,.cl-te *::before,.cl-te *::after{box-sizing:border-box}
.cl-te p,.cl-te h1,.cl-te h2,.cl-te h3,.cl-te ul{margin:0}
.cl-te ul{padding:0; list-style:none}
.cl-te :focus-visible{outline:3px solid var(--cl-p-primary); outline-offset:3px}
.cl-te .wp-block-buttons,.cl-te .wp-block-button{margin:0}
.cl-te__sez{margin-top:clamp(4.5rem,10vw,8rem)}

/* ---- testi comuni: la DIMENSIONE di H1/H2/H3 la decide il tema (theme.json) ---- */
.cl-te__h1,.cl-te__h2,.cl-te__h3{font-weight:800; letter-spacing:normal}
.cl-te__h1{line-height:.98}
.cl-te__h2{line-height:1.05}
.cl-te__h3{line-height:1.1}
.cl-te__testo{font-size:var(--cl-t-p); line-height:1.55; color:#3b414b}
.cl-te__testo--grande{max-width:34em; margin-top:.9rem !important; font-size:var(--cl-t-h4); line-height:1.5}
.cl-te__eti{margin-bottom:.7rem !important; font-size:var(--cl-t-sub); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#2f5fd0}
.cl-te__link{display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.6rem 0; font-size:var(--cl-t-p); font-weight:800; color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.cl-te__link svg{transition:transform .2s ease}
.cl-te__link:hover svg{transform:translateX(4px)}
.cl-te__azioni{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.75rem}

/* ---- hero ---- */
.cl-te__hero{display:flex; flex-direction:column; align-items:flex-start; padding-top:clamp(1rem,4vw,3rem)}
.cl-te__eyebrow{display:inline-block; margin-bottom:1.25rem !important; padding:.45rem .9rem; border-radius:999px; background:var(--cl-p-soft); color:#1f4fc4; font-size:var(--cl-t-sub); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.cl-te__h1{max-width:16em}
.cl-te__h1 span{color:var(--cl-p-primary)}
.cl-te__lead{max-width:34em; margin:1.75rem 0 2.1rem !important; font-size:var(--cl-t-h4); line-height:1.5; color:#3b414b}

/* ---- pannello blu con le schede ---- */
.cl-te__pannello{margin-top:clamp(3.5rem,8vw,6rem); padding:clamp(1.75rem,5vw,4rem); border-radius:2.5rem; color:#fff; scroll-margin-top:1.5rem;
  background-color:var(--cl-p-primary);
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:64px 64px}
.cl-te__pannello-testa{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem 3rem; margin-bottom:clamp(1.75rem,4vw,3rem)}
.cl-te__pannello .cl-te__h2{max-width:14em; color:#fff}
.cl-te__pannello-sotto{max-width:27em; font-size:var(--cl-t-h4); font-weight:600; line-height:1.45; color:#fff}
.cl-te__griglia{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:1.5rem}

/* scheda: bianca (p) e azzurro scuro trasparente (s), a scacchiera */
.cl-te__card{display:flex; flex-direction:column; gap:.9rem; padding:clamp(1.5rem,3vw,2rem); border-radius:2rem; transition:transform .25s ease, box-shadow .25s ease}
.cl-te__card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(10,25,80,.28)}
.cl-te__card--p{background:#fff; color:var(--cl-p-ink); border:1.5px solid #fff}
.cl-te__card--s{background:rgba(18,36,100,.3); color:#fff; border:1.5px solid rgba(255,255,255,.6)}
.cl-te__card-testa{display:flex; align-items:center; justify-content:space-between}
.cl-te__bolla{display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%; font-size:1.25rem; font-weight:800; line-height:1}
.cl-te__card--p .cl-te__bolla{background:var(--cl-p-primary); color:#fff}
.cl-te__card--s .cl-te__bolla{background:#fff; color:var(--cl-p-ink)}
.cl-te__num{font-size:1.15rem; font-weight:800; opacity:.85; font-variant-numeric:tabular-nums}
.cl-te__cat{font-size:var(--cl-t-sub); font-weight:700; opacity:.85}
.cl-te__card .cl-te__testo{line-height:1.5; font-weight:500; color:inherit}
.cl-te__tags{display:flex; flex-wrap:wrap; gap:.5rem}
.cl-te__tag{display:inline-block; padding:.28rem .75rem; border:1.5px solid currentColor; border-radius:999px; font-size:var(--cl-t-sub); font-weight:700; line-height:1.2; letter-spacing:.02em}
.cl-te__card--p .cl-te__tag{background:var(--cl-p-soft); border-color:var(--cl-p-soft)}
.cl-te__vai{display:inline-flex; align-items:center; gap:.75rem; margin-top:auto; padding-top:.6rem; align-self:flex-start; font-size:var(--cl-t-sub); font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:inherit; text-decoration:none}
.cl-te__vai i{display:grid; place-items:center; flex:none; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--cl-p-coral); color:var(--cl-p-ink); transition:transform .25s ease}
.cl-te__vai:hover i,.cl-te__vai:focus-visible i{transform:rotate(45deg)}
.cl-te__card--s .cl-te__vai:focus-visible{outline-color:#fff}

/* ---- stack ---- */
.cl-te__stack{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}
.cl-te__stack-voce{padding:.8rem 1.6rem; border-radius:999px; background:var(--cl-p-soft); font-size:var(--cl-t-h4); font-weight:800; line-height:1.2}

/* ---- software libero ---- */
.cl-te__libero{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2.5rem; padding:clamp(1.75rem,6vw,4.5rem); border-radius:2.5rem; background:var(--cl-p-soft)}
.cl-te__libero-testo{flex:1 1 26rem; min-width:0}
.cl-te__libero-p{max-width:34em; margin-top:1.25rem !important; font-size:var(--cl-t-h4); line-height:1.5; font-weight:500}
.cl-te__anno{flex:0 1 18rem; text-align:center}
.cl-te__anno-n{font-size:clamp(5.5rem,12vw,9.5rem); font-weight:800; line-height:1; letter-spacing:normal; color:var(--cl-p-primary); font-variant-numeric:tabular-nums}
.cl-te__anno-t{margin-top:.4rem !important; font-size:var(--cl-t-p); font-weight:700}

/* ---- link ai progetti ---- */
.cl-te__lavoro{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 3rem}
.cl-te__lavoro-testo{flex:1 1 26rem; min-width:0}

/* ---- chiusura con la griglia di sfondo (la classe .serv-griglia del tema la fa muovere) ---- */
.cl-te__fine.serv-griglia{--cl-griglia-w:clamp(26rem,50vw,42rem); background-image:var(--cl-griglia); background-repeat:repeat; background-size:var(--cl-griglia-w) auto}
@media (max-width:781px){.cl-te__fine.serv-griglia{--cl-griglia-w:26rem}}
.cl-te__fine{margin-top:clamp(4.5rem,10vw,8rem); padding:clamp(2.75rem,7vw,5.5rem) 1.75rem; text-align:center; background-color:var(--cl-p-primary); color:#fff; border-radius:2.5rem}
.cl-te__fine-t{font-size:clamp(1.9rem,4vw,3.25rem); font-weight:800; line-height:1.08; letter-spacing:-.03em}
.cl-te__fine-s{margin:1rem auto 2.1rem !important; max-width:28em; font-size:1.25rem; font-weight:700; line-height:1.5}

/* CTA a tondino con orbita (come nella pagina Servizi) */
.cl-te__orb{display:inline-flex; align-items:center; gap:1.4rem; padding:.4rem .6rem .4rem .4rem; border-radius:999px; color:#fff; text-decoration:none}
.cl-te__orb-anello{position:relative; display:block; flex:none; width:5.5rem; height:5.5rem}
.cl-te__orb-anello::before{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px dashed rgba(255,255,255,.65)}
.cl-te__orb-giro{position:absolute; inset:0; display:block; animation:cl-te-orbita 6s linear infinite}
.cl-te__orb-giro i{position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--cl-p-soft)}
.cl-te__orb-tondo{position:absolute; inset:.75rem; display:grid; place-items:center; border-radius:50%; background:var(--cl-p-coral); color:var(--cl-p-ink); transition:transform .3s cubic-bezier(.65,0,.35,1), box-shadow .2s ease}
.cl-te__orb-testo{font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-.01em; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:6px; transition:text-decoration-color .2s ease}
.cl-te__orb:active .cl-te__orb-tondo,.cl-te__orb:focus-visible .cl-te__orb-tondo{transform:scale(1.18); box-shadow:0 4px 0 var(--cl-p-ink)}
.cl-te__orb:active .cl-te__orb-giro,.cl-te__orb:focus-visible .cl-te__orb-giro{animation-duration:2s}
.cl-te__orb:active .cl-te__orb-testo,.cl-te__orb:focus-visible .cl-te__orb-testo{text-decoration-color:#fff}
@media (hover:hover){
  .cl-te__orb:hover .cl-te__orb-tondo{transform:scale(1.18); box-shadow:0 4px 0 var(--cl-p-ink)}
  .cl-te__orb:hover .cl-te__orb-giro{animation-duration:2s}
  .cl-te__orb:hover .cl-te__orb-testo{text-decoration-color:#fff}
}
.cl-te .cl-te__orb:focus-visible{outline:3px solid #fff; outline-offset:6px}
@keyframes cl-te-orbita{to{transform:rotate(360deg)}}

/* ---- comparsa allo scroll (solo con JS) ---- */
.cl-te.is-js .cl-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.cl-te.is-js .cl-reveal.is-in{opacity:1; transform:none}

@media (max-width:700px){
  .cl-te__pannello,.cl-te__libero{border-radius:2rem}
  .cl-te__card{border-radius:1.75rem}
}
@media (prefers-reduced-motion:reduce){
  .cl-te *{animation:none !important}
  .cl-te__card,.cl-te__vai i{transition:none}
  .cl-te.is-js .cl-reveal{opacity:1; transform:none; transition:none}
}