/* Banner "gestione social" per le pagine statiche - 2026-10-01
   Solo grafica: il testo sta nell'HTML (visibile anche senza JavaScript). */
@property --tw-sb-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.tw-sb{position:relative;isolation:isolate;container-type:inline-size;margin:2.6rem 0;padding:1.5rem 1.3rem 1.8rem;border-radius:22px;overflow:hidden;color:#e2e8f0;
background:radial-gradient(120% 140% at 0% 0%,rgba(34,211,238,.17),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(236,72,153,.2),transparent 55%),linear-gradient(145deg,#0c1430,#111b3b 55%,#1b1040);
box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 60px rgba(34,211,238,.1)}
.tw-sb::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
background:conic-gradient(from var(--tw-sb-ang),#22d3ee,#a855f7,#ec4899,#f59e0b,#22d3ee);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:tw-sb-spin 8s linear infinite}
@keyframes tw-sb-spin{to{--tw-sb-ang:360deg}}
.tw-sb-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.tw-sb-glow::before,.tw-sb-glow::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(70px);opacity:.35;animation:tw-sb-drift 14s ease-in-out infinite}
.tw-sb-glow::before{background:#22d3ee;left:-70px;top:-60px}
.tw-sb-glow::after{background:#ec4899;right:-70px;bottom:-80px;animation-delay:-7s}
@keyframes tw-sb-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(40px,30px,0)}}
.tw-sb-grid{position:relative;z-index:1;display:grid;gap:1.3rem;grid-template-columns:1fr}
.tw-sb .tw-sb-eyebrow{margin:0 0 .5rem;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#67e8f9}
.tw-sb .tw-sb-title{margin:0 0 1rem;font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.5rem;line-height:1.2;font-weight:800;color:#fff}
.tw-sb-chips{display:flex;gap:.55rem;margin:0 0 1.1rem}
.tw-sb-chips span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);animation:tw-sb-bounce 3.6s ease-in-out infinite}
.tw-sb-chips span:nth-child(2){animation-delay:.25s}.tw-sb-chips span:nth-child(3){animation-delay:.5s}.tw-sb-chips span:nth-child(4){animation-delay:.75s}
.tw-sb-chips svg{width:22px;height:22px}
@keyframes tw-sb-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.tw-sb-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem}
.tw-sb-tabs button{appearance:none;cursor:pointer;font:inherit;font-size:.86rem;font-weight:700;padding:.5rem .95rem;border-radius:999px;color:#cbd5e1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);transition:background .25s,color .25s,transform .2s,border-color .25s}
.tw-sb-tabs button:hover{border-color:rgba(34,211,238,.6);transform:translateY(-1px)}
.tw-sb-tabs button:focus-visible{outline:3px solid #67e8f9;outline-offset:2px}
.tw-sb-tabs button[aria-selected="true"]{color:#0b1020;border-color:transparent;background:linear-gradient(90deg,#22d3ee,#a78bfa,#f472b6)}
.tw-sb:not(.tw-sb-js) .tw-sb-tabs{display:none}
.tw-sb-panel{margin:0 0 1rem}
.tw-sb-js .tw-sb-panel{animation:tw-sb-fade .45s ease both}
@keyframes tw-sb-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tw-sb .tw-sb-panel p{margin:0;color:#e2e8f0;font-size:1.02rem;line-height:1.65}
.tw-sb-panel strong{color:#fff}
.tw-sb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
.tw-sb .tw-sb-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.35rem;border-radius:14px;font-weight:800;font-size:1rem;line-height:1.3;text-decoration:none;color:#0b1020;
background:linear-gradient(90deg,#22d3ee,#a78bfa,#f472b6,#fbbf24);background-size:220% 100%;box-shadow:0 10px 28px rgba(34,211,238,.28);transition:transform .2s,box-shadow .2s,background-position .7s}
.tw-sb .tw-sb-btn:hover,.tw-sb .tw-sb-btn:focus-visible{transform:translateY(-2px);background-position:100% 0;box-shadow:0 14px 34px rgba(236,72,153,.32)}
.tw-sb .tw-sb-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tw-sb-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%)}
.tw-sb-btn:hover::after{transform:translateX(120%);transition:transform .8s ease}
.tw-sb-btn span{display:inline-block;transition:transform .25s}.tw-sb-btn:hover span{transform:translateX(5px)}
.tw-sb-note{font-size:.85rem;color:#94a3b8}
.tw-sb-fig{margin:0;display:flex;justify-content:center;perspective:800px}
.tw-sb-fig picture{display:block;transform:rotateX(var(--sb-rx,0deg)) rotateY(var(--sb-ry,0deg));transition:transform .25s ease-out}
.tw-sb-fig img{display:block;width:100%;max-width:250px;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.5));animation:tw-sb-bob 6.5s ease-in-out infinite}
@keyframes tw-sb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.tw-sb-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.07);z-index:2}
.tw-sb-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#22d3ee,#a855f7,#ec4899)}
.tw-sb-progress i.run{animation:tw-sb-run var(--sb-dur,6000ms) linear forwards}
@keyframes tw-sb-run{to{transform:scaleX(1)}}
@container (min-width:600px){
.tw-sb{padding:1.9rem 1.9rem 2.1rem}
.tw-sb-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:1.6rem}
.tw-sb .tw-sb-title{font-size:1.7rem}
.tw-sb-fig img{max-width:300px}}
@supports (animation-timeline:view()){
.tw-sb{animation:tw-sb-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes tw-sb-rise{from{opacity:.35;transform:translateY(26px)}to{opacity:1;transform:none}}}
@media (max-width:520px){.tw-sb .tw-sb-btn{width:100%;justify-content:center;text-align:center}}
@media (prefers-reduced-motion:reduce){
.tw-sb,.tw-sb::before,.tw-sb-glow::before,.tw-sb-glow::after,.tw-sb-chips span,.tw-sb-fig img,.tw-sb-panel,.tw-sb-progress i.run{animation:none!important}
.tw-sb-fig picture{transform:none!important}.tw-sb-progress{display:none}}
