/* Stili delle sezioni Lavori e Chi sono, portati nella homepage da portfolio.html e about.html */

/* ---- da portfolio.html ---- */
#lavori .page-title-section{
            text-align: center;
            margin-bottom: 50px;
        }
#lavori .page-title-section h1{
            font-size: 2.8rem;
            margin-bottom: 15px;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(188, 19, 254, 0.4);
        }
#lavori .page-title-section p{
            color: #bbbbbb;
            font-size: 1.15rem;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
        }
@media (max-width: 768px){
#lavori .page-title-section h1{
                font-size: 2.2rem;
            }
}
#lavori .w-kicker{ display: block; color: #d8b4fe; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
#lavori .w-bar{ display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1a1622; border-bottom: 1px solid #2a2433; }
#lavori .w-bar i{ width: 10px; height: 10px; border-radius: 50%; background: #3a3344; }
#lavori .w-bar i:nth-child(1){ background: #ff5f57; }
#lavori .w-bar i:nth-child(2){ background: #febc2e; }
#lavori .w-bar i:nth-child(3){ background: #28c840; }
#lavori .w-bar span{ margin-left: 10px; flex: 1; background: #0d0b12; color: #9a93a8; font-size: 12px; border-radius: 6px; padding: 4px 10px; }
#lavori .w-feature{ display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; background: rgba(13,11,18,.92); border: 1px solid rgba(188,19,254,.45); border-radius: 22px; padding: 40px; box-shadow: 0 0 40px rgba(188,19,254,.15); margin-bottom: 30px; }
#lavori .w-media{ position: relative; padding: 0 40px 40px 0; }
#lavori .w-browser{ border-radius: 12px; overflow: hidden; border: 1px solid #2a2433; box-shadow: 0 20px 50px rgba(0,0,0,.6); transition: transform .5s; }
#lavori .w-browser img{ display: block; width: 100%; }
#lavori .w-phone{ position: absolute; right: 0; bottom: 0; width: 30%; border-radius: 22px; overflow: hidden; border: 5px solid #1a1622; box-shadow: 0 20px 40px rgba(0,0,0,.7), 0 0 24px rgba(188,19,254,.35); transition: transform .5s; }
#lavori .w-phone img{ display: block; width: 100%; }
#lavori .w-feature:hover .w-browser{ transform: translateY(-4px); }
#lavori .w-feature:hover .w-phone{ transform: translateY(-10px) rotate(-2deg); }
#lavori .w-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
#lavori .w-logo{ height: 40px; width: auto; }
#lavori .w-badge{ display: inline-block; background: rgba(188,19,254,.18); color: #e0aaff; border: 1px solid rgba(188,19,254,.45); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; letter-spacing: .5px; }
#lavori .w-info h2{ font-size: 2.2rem; margin: 0; color: #fff; }
#lavori .w-sub{ color: #d8b4fe !important; font-weight: 600; margin: 4px 0 14px !important; }
#lavori .w-info p{ color: #c4c4cc; line-height: 1.6; margin: 0 0 16px; }
#lavori .w-points{ list-style: none; padding: 0; margin: 0 0 20px; }
#lavori .w-points li{ position: relative; padding: 6px 0 6px 26px; color: #c4c4cc; font-size: .95rem; }
#lavori .w-points li::before{ content: "\2713"; position: absolute; left: 0; color: #bc13fe; font-weight: 700; }
#lavori .w-points strong{ color: #fff; font-weight: 600; }
#lavori .w-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
#lavori .w-tags span{ font-size: 12px; color: #bdb6c9; background: #16121d; border: 1px solid #2a2433; padding: 4px 10px; border-radius: 6px; }
#lavori .w-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
#lavori .w-btn{ display: inline-block; padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: #fff; transition: all .25s; }
#lavori .w-btn-primary{ background: #bc13fe; box-shadow: 0 0 14px rgba(188,19,254,.55); }
#lavori .w-btn-primary:hover{ box-shadow: 0 0 26px #bc13fe; transform: translateY(-2px); }
#lavori .w-btn-ghost{ border: 1px solid #bc13fe; background: rgba(0,0,0,.4); }
#lavori .w-btn-ghost:hover{ background: rgba(188,19,254,.15); }
#lavori .w-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-bottom: 70px; }
#lavori .w-card{ background: rgba(13,11,18,.92); border: 1px solid rgba(188,19,254,.28); border-radius: 18px; overflow: hidden; transition: all .3s; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
#lavori .w-card:hover{ border-color: #bc13fe; box-shadow: 0 0 26px rgba(188,19,254,.3); transform: translateY(-4px); }
#lavori .w-thumb{ margin: 20px 20px 0; border-radius: 10px; overflow: hidden; border: 1px solid #2a2433; }
#lavori .w-thumb img{ display: block; width: 100%; }
#lavori .w-body{ padding: 20px 24px 6px; }
#lavori .w-card h3{ color: #fff; font-size: 1.35rem; margin: 12px 0 8px; }
#lavori .w-card p{ color: #c4c4cc; line-height: 1.6; margin: 0 0 16px; font-size: .95rem; }
#lavori .w-cta{ align-items: center; justify-content: center; text-align: center; padding: 34px 28px; border-style: dashed; border-color: rgba(188,19,254,.6); background: radial-gradient(circle at 50% 30%, rgba(188,19,254,.16), rgba(13,11,18,.92) 65%); }
#lavori .w-plus{ width: 64px; height: 64px; border-radius: 50%; border: 2px solid #bc13fe; color: #e0aaff; font-size: 34px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 22px rgba(188,19,254,.5); margin-bottom: 8px; }
#lavori .w-cta h3{ font-size: 1.6rem; }
#lavori .w-past{ text-align: center; }
#lavori .w-past h2{ color: #fff; font-size: 1.8rem; margin: 0 0 10px; }
#lavori .w-past-lead{ color: #aaa; max-width: 640px; margin: 0 auto 30px; line-height: 1.6; }
#lavori .w-timeline{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
#lavori .w-tl{ background: rgba(13,11,18,.85); border: 1px solid #2a2433; border-left: 3px solid #bc13fe; border-radius: 12px; padding: 20px 22px; }
#lavori .w-date{ font-size: 12px; color: #d8b4fe; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
#lavori .w-tl h3{ color: #fff; margin: 8px 0 2px; font-size: 1.1rem; }
#lavori .w-tl h4{ color: #9a93a8; margin: 0 0 10px; font-size: .9rem; font-weight: 600; }
#lavori .w-tl p{ color: #aaa; margin: 0; line-height: 1.55; font-size: .92rem; }
@media (max-width: 900px){
#lavori .w-feature{ grid-template-columns: 1fr; padding: 22px 18px; gap: 26px; }
#lavori .w-media{ padding: 0 22px 30px 0; }
#lavori .w-grid,#lavori .w-timeline{ grid-template-columns: 1fr; }
#lavori .w-info h2{ font-size: 1.9rem; }
#lavori .w-actions .w-btn{ flex: 1; text-align: center; }
}
#lavori .w-concepts{ margin-bottom: 80px; text-align: center; }
#lavori .w-concepts h2{ color: #fff; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 10px; }
#lavori .w-cgrid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; text-align: left; }
#lavori .w-open{ display: inline-block; color: #e0aaff; font-weight: 700; font-size: .9rem; margin-bottom: 18px; }
#lavori .w-card:hover .w-open{ text-shadow: 0 0 10px rgba(188,19,254,.8); }
@media (max-width: 900px){
#lavori .w-cgrid{ grid-template-columns: 1fr; }
}

/* ---- da about.html ---- */
#chi-sono .page-title-section{
            text-align: center;
            margin-bottom: 30px;
        }
#chi-sono .page-title-section h1{
            font-size: 2.8rem;
            margin-bottom: 15px;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(188, 19, 254, 0.4);
        }
#chi-sono .page-title-section p{
            color: #bbbbbb;
            font-size: 1.15rem;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
        }
#chi-sono .profile-image-freeform-wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-top: 40px;
            margin-bottom: 30px;
        }
#chi-sono .profile-image-freeform-container{
            width: 100%;
            max-width: 450px; 
            height: auto;
            background: transparent;
            
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
#chi-sono .profile-image-freeform-container.fade-in-active{
            opacity: 1;
            transform: translateY(0);
        }
#chi-sono .profile-pic-freeform{
            width: 100%;
            height: auto;
            display: block;
            filter: drop-shadow(0 0 15px rgba(188, 19, 254, 0.35));
            transition: filter 0.4s ease-out, transform 0.4s ease-out;
        }
#chi-sono .profile-image-freeform-container.fade-in-active:hover .profile-pic-refined{
            transform: scale(1.02);
        }
@media (max-width: 768px){
#chi-sono .page-title-section h1{ font-size: 2.2rem; }
#chi-sono .profile-image-freeform-container{ max-width: 300px; }
}
#chi-sono .a-hero{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: center; margin: 10px 0 50px; }
#chi-sono .a-photo{ display: flex; justify-content: center; }
#chi-sono .a-photo .profile-image-freeform-container{ max-width: 380px; width: 100%; }#chi-sono .a-kicker,#fuori-orario .a-kicker{ display: block; color: #d8b4fe; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
#chi-sono .a-intro h2.a-title{text-align:left; font-size: clamp(2.4rem, 5vw, 3.4rem); margin: 0 0 18px; color: #fff; line-height: 1.1; }
#chi-sono .a-intro p{ color: #c4c4cc; font-size: 1.08rem; line-height: 1.7; margin: 0 0 14px; }
#chi-sono .a-intro .a-lead{ color: #e6e6ea; font-size: 1.2rem; }
#chi-sono .a-intro strong{ color: #fff; }
#chi-sono .a-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: rgba(13,11,18,.92); border: 1px solid rgba(188,19,254,.4); border-radius: 18px; margin-bottom: 80px; box-shadow: 0 0 30px rgba(188,19,254,.12); }
#chi-sono .a-stats div{ padding: 26px 20px; text-align: center; border-right: 1px solid rgba(188,19,254,.2); }
#chi-sono .a-stats div:last-child{ border-right: 0; }
#chi-sono .a-stats b{ display: block; font-size: 2.2rem; color: #fff; text-shadow: 0 0 16px rgba(188,19,254,.7); }
#chi-sono .a-stats span{ display: block; color: #aaa; font-size: .88rem; margin-top: 6px; line-height: 1.4; }
#chi-sono .a-block{ margin-bottom: 80px; }
#chi-sono .a-block > h2,#chi-sono .a-final h2{ text-align: center; color: #fff; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 34px; }
#chi-sono .a-story{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
#chi-sono .a-step{ background: rgba(13,11,18,.92); border: 1px solid rgba(188,19,254,.28); border-radius: 16px; padding: 26px; transition: all .3s; }
#chi-sono .a-step:hover,#chi-sono .a-val:hover{ border-color: #bc13fe; box-shadow: 0 0 22px rgba(188,19,254,.3); transform: translateY(-3px); }
#chi-sono .a-num{ font-family: 'Fixedsys Excelsior 3.01', monospace; color: #bc13fe; font-size: 1.6rem; text-shadow: 0 0 10px rgba(188,19,254,.7); }
#chi-sono .a-step h3,#chi-sono .a-val h3{ color: #fff; margin: 10px 0 8px; font-size: 1.15rem; }
#chi-sono .a-step p,#chi-sono .a-val p{ color: #c4c4cc; line-height: 1.6; margin: 0; font-size: .95rem; }
#chi-sono .a-step a{ color: #e0aaff; }
#chi-sono .a-values{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#chi-sono .a-val{ background: rgba(13,11,18,.92); border: 1px solid rgba(188,19,254,.28); border-top: 3px solid #bc13fe; border-radius: 14px; padding: 22px; transition: all .3s; }
#chi-sono .a-val h3{ margin-top: 0; }
#chi-sono .a-edu{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#chi-sono .a-edu-item{ display: flex; align-items: center; gap: 18px; background: rgba(13,11,18,.85); border: 1px solid #2a2433; border-radius: 14px; padding: 18px 22px; }
#chi-sono .a-edu-item img{ width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
#chi-sono .a-edu-item h3{ color: #fff; font-size: 1rem; margin: 0 0 4px; }
#chi-sono .a-edu-item p{ color: #9a93a8; margin: 0; font-size: .88rem; }
#chi-sono .a-off{ display: flex; align-items: center; gap: 20px; max-width: 760px; margin: 0 auto 80px; background: radial-gradient(circle at 0% 50%, rgba(188,19,254,.18), rgba(13,11,18,.92) 60%); border: 1px dashed rgba(188,19,254,.55); border-radius: 18px; padding: 22px 26px; }
#chi-sono .a-skate{ font-size: 2.6rem; filter: drop-shadow(0 0 10px rgba(188,19,254,.7)); }
#chi-sono .a-off p{ margin: 0; color: #c4c4cc; line-height: 1.6; }
#chi-sono .a-off strong{ color: #fff; }
#chi-sono .a-final{ text-align: center; margin-bottom: 30px; }
#chi-sono .a-final h2{ margin-bottom: 12px; }
#chi-sono .a-final p{ color: #aaa; margin: 0 0 24px; }
#chi-sono .a-btn{ display: inline-block; background: #bc13fe; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; padding: 15px 30px; border-radius: 8px; box-shadow: 0 0 16px rgba(188,19,254,.6); transition: all .25s; }
#chi-sono .a-btn:hover{ box-shadow: 0 0 28px #bc13fe; transform: translateY(-2px); }
@media (max-width: 900px){
#chi-sono .a-hero{ grid-template-columns: 1fr; gap: 20px; text-align: center; }
#chi-sono .a-photo .profile-image-freeform-container{ max-width: 260px; }
#chi-sono .a-stats{ grid-template-columns: 1fr 1fr; }
#chi-sono .a-stats div:nth-child(2){ border-right: 0; }
#chi-sono .a-stats div:nth-child(-n+2){ border-bottom: 1px solid rgba(188,19,254,.2); }
#chi-sono .a-story,#chi-sono .a-values,#chi-sono .a-edu{ grid-template-columns: 1fr; }
#chi-sono .a-off{ flex-direction: column; text-align: center; }
#chi-sono .a-block{ margin-bottom: 60px; }
}#chi-sono .a-off2,#fuori-orario .a-off2{ display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 40px; max-width: 860px; margin: 0 auto 80px; }#chi-sono .a-off2-img,#fuori-orario .a-off2-img{ width: 100%; max-width: 300px; justify-self: center; filter: drop-shadow(0 0 22px rgba(188,19,254,.45)); }#chi-sono .a-off2-txt h2,#fuori-orario .a-off2-txt h2{ color: #fff; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 12px; }#chi-sono .a-off2-txt p,#fuori-orario .a-off2-txt p{ color: #c4c4cc; font-size: 1.08rem; line-height: 1.6; margin: 0; }
@media (max-width: 900px){#chi-sono .a-off2,#fuori-orario .a-off2{ grid-template-columns: 1fr; text-align: center; gap: 16px; }#chi-sono .a-off2-img,#fuori-orario .a-off2-img{ max-width: 220px; }
}

/* adattamenti dentro la homepage */
#lavori .w-feature{margin-top:10px}
#lavori,#chi-sono{max-width:1100px}
#chi-sono .a-hero{margin-top:10px}
@media (max-width:768px){#chi-sono .a-intro h2.a-title{text-align:center}}
#lavori .w-info h2,#lavori .w-info h3{text-align:left}
/* Card "Questo sito": desktop + telefono come OnlyPoster */
#lavori .w-media-sm{margin:20px 20px 0;padding:0 26px 26px 0}
#lavori .w-media-sm .w-phone{width:27%;border-width:4px;border-radius:16px}
#lavori .w-card:hover .w-media-sm .w-phone{transform:translateY(-8px) rotate(-2deg)}
@media (max-width:768px){#lavori .w-media-sm{margin:16px 16px 0;padding:0 18px 20px 0}}
/* "+" disegnato in CSS: sempre perfettamente al centro del cerchio */
#lavori .w-plus{position:relative;font-size:0;line-height:0}
#lavori .w-plus::before,#lavori .w-plus::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:2.5px;border-radius:2px;background:#e0aaff;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(188,19,254,.8)}
#lavori .w-plus::after{transform:translate(-50%,-50%) rotate(90deg)}

/* Fuori orario in fondo alla homepage */
#fuori-orario{padding-top:40px;padding-bottom:40px}
#fuori-orario .a-off2{margin:0 auto}
@media (min-width:769px){#fuori-orario .a-off2-txt h2{text-align:left}}