/* La sezione «Parliamo del tuo progetto»: la stessa in fondo a home, Infrastruttura IT e Siti web
   (Simone, 2026-10-15). Il markup è identico nelle tre pagine: si cambia in tutte e tre. */
.contatti-home h2{font-size:clamp(1.8rem,1.2rem + 2vw,3rem)}
.contatti-griglia.contatti-home{align-items:center}
.recapiti-h{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.recapito{display:flex;align-items:center;gap:18px;padding:14px 20px;border-radius:16px;border:1px solid var(--bordo);
  background:rgba(10,35,41,.55);color:var(--testo);text-decoration:none;font-weight:600;font-size:1.02rem;line-height:1.4;
  transition:border-color .3s,background .3s,transform .4s var(--esce)}
a.recapito:hover{border-color:var(--accento);background:var(--accento-tenue);transform:translateX(4px)}
.recapito::after{content:"";margin-left:auto}
a.recapito::after{width:9px;height:9px;flex:none;border-right:1.5px solid var(--accento);border-top:1.5px solid var(--accento);transform:rotate(45deg);margin-right:6px;transition:transform .3s var(--esce)}
a.recapito:hover::after{transform:translateX(3px) rotate(45deg)}
.recapito small{display:block;margin-bottom:2px;font-size:.78rem;font-weight:500;color:var(--testo-2)}
.r-icona{flex:none;width:52px;height:52px;padding:11px;border-radius:14px;background:var(--accento-tenue);overflow:visible}
.r-icona *{transform-box:fill-box}
.busta .lembo{transform-origin:50% 0;transition:transform .45s var(--esce)}
a.recapito:hover .busta .lembo{transform:scaleY(-.6)}
.contatti-home .modulo .campo textarea{min-height:120px}
/* i tre passi di cosa succede dopo */
.dopo-h{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;counter-reset:dopo;position:relative}
.dopo-h::before{content:"";position:absolute;left:17px;top:22px;bottom:22px;width:2px;border-radius:2px;
  background:linear-gradient(var(--accento),var(--accento)) 0 0/100% 100% no-repeat,var(--bordo-forte)}
.js .dopo-h.visto::before{background-size:100% 100%;transition:background-size 1.4s var(--esce) .3s}
.js .dopo-h::before{background-size:100% 0%}
.dopo-h li{counter-increment:dopo;position:relative;padding:12px 0 12px 56px;display:grid;gap:2px}
.dopo-h li::before{content:counter(dopo);position:absolute;left:0;top:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:.9rem;color:var(--accento);background:var(--fondo);box-shadow:inset 0 0 0 1.5px var(--accento);transition:background .4s,color .4s}
.js .dopo-h.visto li::before{background:var(--accento);color:var(--fondo)}
.js .dopo-h.visto li:nth-child(2)::before{transition-delay:.6s}.js .dopo-h.visto li:nth-child(3)::before{transition-delay:1.1s}
.dopo-h b{font-size:1.05rem;font-weight:650}
.dopo-h span{font-size:.95rem;color:var(--testo-2)}

.js main>section[data-vivo]:not(.in-vista) .r-icona *{animation-play-state:paused}

@media (max-width:1024px){
  .contatti-griglia.contatti-home{align-items:start}
}
@media (prefers-reduced-motion:reduce){
  .r-icona,.r-icona *{animation:none!important}
  a.recapito:hover{transform:none}
  a.recapito:hover .busta .lembo{transform:none}
}