/* Pagina /servizi/ di raffaelevitulano.com, 4/11/2026. Veste del borgo: notte, carta, terracotta, oro. */
@font-face{font-family:General;src:url('/site/assets/GeneralSans-Medium.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:General;src:url('/site/assets/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:General;src:url('/site/assets/GeneralSans-Bold.woff2') format('woff2');font-weight:700 800;font-display:swap}
@font-face{font-family:Jost;src:url('/site/assets/Jost-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
 --notte:#182c40;--notte-2:#20394d;--notte-3:#12222f;
 --carta:#f4f1e7;--carta-2:#ebe5d6;--foglio:#fbf9f3;--filo:#d6cdb8;
 --inchiostro:#293e34;--inchiostro-2:#4b5c53;
 --terracotta:#a34828;--oro:#f4c678;--oro-scuro:#b07a22;--crema:#fff7e8;
 --c-software:var(--terracotta);--c-ia:var(--notte-2);--c-comunicazione:var(--oro-scuro);
 --misura:74rem;--pad:clamp(1.25rem,4.5vw,3rem);--indice:3.4rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--indice) + 1rem);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--carta);color:var(--inchiostro);font:500 1.0625rem/1.62 General,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:600;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,1.35rem + 2.3vw,3.1rem);line-height:1.08;letter-spacing:-.022em}
h3{font-size:1.22rem;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
a{color:var(--terracotta);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:4px}
.apertura :focus-visible,.capitolo-notte :focus-visible,.contatti :focus-visible,.piede :focus-visible{outline-color:var(--oro)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--oro);color:var(--notte);padding:.7rem 1rem;border-radius:6px;font-weight:600}
.salta:focus{top:1rem}

/* ---------- Apertura: il borgo di notte ---------- */
.apertura{position:relative;overflow:hidden;background:var(--notte);color:var(--crema);padding:0 var(--pad)}
.apertura::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;background:transparent;opacity:.55;pointer-events:none;
 box-shadow:54vw 9vh #fff7e8,58vw 30vh #fff7e8,61vw 6vh #f4c678,66vw 18vh #fff7e8,70vw 4vh #fff7e8,74vw 26vh #fff7e8,79vw 10vh #f4c678,83vw 21vh #fff7e8,87vw 5vh #fff7e8,91vw 15vh #fff7e8,95vw 28vh #fff7e8,97vw 8vh #f4c678,56vw 62vh #fff7e8,63vw 74vh #fff7e8,90vw 58vh #fff7e8,96vw 70vh #f4c678,76vw 80vh #fff7e8,52vw 48vh #fff7e8}
.testata{position:relative;max-width:var(--misura);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0}
.torna{color:var(--crema);text-decoration:none;font:600 .95rem/1 Jost,General,sans-serif;letter-spacing:.01em;padding:.7rem .2rem}
.torna:hover{color:var(--oro)}
.marchio img{width:44px;height:44px}
.apertura-griglia{position:relative;max-width:var(--misura);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1rem,4vh,3.5rem) 0 clamp(1.5rem,4vh,3rem)}
.briciole ol{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;font-size:.92rem;color:rgba(255,247,232,.78)}
.briciole li+li::before{content:"/";margin-right:.5rem;color:rgba(255,247,232,.45)}
.briciole a{color:var(--crema);text-decoration:none}
.briciole a:hover{color:var(--oro)}
.briciole [aria-current]{color:var(--oro)}
h1{font-size:clamp(2.3rem,1.45rem + 3vw,3.85rem);line-height:1.04;letter-spacing:-.028em;max-width:17ch}
.sottotitolo{margin-top:1.4rem;max-width:36rem;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.58;color:rgba(255,247,232,.86)}
.azioni{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.bottone{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:.8rem 1.25rem;border-radius:8px;font:600 1rem/1.1 Jost,General,sans-serif;letter-spacing:.01em;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.bottone-oro{background:var(--oro);color:var(--notte)}
.bottone-oro:hover{background:var(--crema)}
.bottone-filo{color:var(--crema);border:1px solid rgba(255,247,232,.5)}
.bottone-filo:hover{border-color:var(--oro);color:var(--oro)}

.borgo{margin:0;position:relative}
.borgo-isola{position:relative;width:min(100%,40rem);margin-inline:auto}
.luogo{position:absolute;left:var(--x);top:var(--y);display:flex;flex-direction:column;align-items:center;transform:translate(-50%,calc(-100% + 5px));text-decoration:none;color:var(--notte)}
.luogo-sotto{flex-direction:column-reverse;transform:translate(-50%,-5px)}
.luogo-cartello{display:flex;flex-direction:column;align-items:center;background:var(--crema);border-radius:6px;padding:.42rem .7rem .48rem;text-align:center;white-space:nowrap;transition:background-color .2s}
.luogo-cartello strong{font-size:.98rem;line-height:1.15;font-weight:600}
.luogo-cartello span{font-size:.8rem;line-height:1.2;color:var(--inchiostro-2)}
.luogo-filo{width:1px;height:1.6rem;background:var(--crema)}
.luogo-segno{width:10px;height:10px;background:var(--oro);outline:2px solid var(--notte)}
.luogo:hover .luogo-cartello,.luogo:focus-visible .luogo-cartello{background:var(--oro)}
.luogo:focus-visible{outline:none}
.luogo:focus-visible .luogo-cartello{outline:3px solid var(--oro);outline-offset:3px}

.cifre{position:relative;list-style:none;max-width:var(--misura);margin:0 auto;padding:1.4rem 0 2.2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2.5rem;border-top:1px solid rgba(255,247,232,.2);font-size:.95rem;line-height:1.5;color:rgba(255,247,232,.8)}
.cifre strong{display:block;font-size:1.15rem;color:var(--oro);font-weight:600}

@media (prefers-reduced-motion:no-preference){
 .borgo-isola{animation:galleggia 7s ease-in-out 1.6s infinite}
 .borgo img{animation:sorge .9s cubic-bezier(.2,.7,.2,1) both}
 .luogo{animation:compare .5s ease-out both;animation-delay:calc(.75s + var(--i) * .18s)}
 @keyframes sorge{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
 @keyframes compare{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
 @keyframes galleggia{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}

/* ---------- Indice che resta in alto ---------- */
.indice{position:sticky;top:0;z-index:20;background:rgba(244,241,231,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--filo)}
.indice ul{list-style:none;margin:0 auto;padding:0 var(--pad);max-width:calc(var(--misura) + 2 * var(--pad));display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none}
.indice ul::-webkit-scrollbar{display:none}
.indice a{display:flex;align-items:center;height:var(--indice);padding:0 .7rem;color:var(--inchiostro-2);text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.indice li:first-child a{padding-left:0}
.indice a:hover{color:var(--inchiostro)}
.indice a[aria-current="true"]{color:var(--inchiostro);border-bottom-color:var(--terracotta)}

/* ---------- Capitoli dei servizi ---------- */
.capitolo{padding:clamp(4rem,9vw,7rem) var(--pad)}
.capitolo-griglia{max-width:var(--misura);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem)}
.capitolo-testa{align-self:start;position:sticky;top:calc(var(--indice) + 2rem)}
.capitolo-area{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;margin-bottom:1rem}
.area::before,.capitolo-area::before{content:"";flex:none;display:inline-block;width:9px;height:9px;background:var(--c,currentColor)}
.area-software{--c:var(--c-software)}.area-ia{--c:var(--c-ia)}.area-comunicazione{--c:var(--c-comunicazione)}
.capitolo-intro{margin-top:1.3rem;color:var(--inchiostro-2);max-width:34rem}
.collegati{margin-top:2rem}
.collegati>p{font-weight:600;font-size:.92rem;margin-bottom:.45rem}
.collegati ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;font-size:.98rem}
.nel-borgo{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.8rem;font:600 .98rem/1.2 Jost,General,sans-serif;letter-spacing:.01em;text-decoration:none;padding:.65rem 0;border-bottom:1px solid currentColor}
.nel-borgo::after{content:"→";transition:translate .2s}
.nel-borgo:hover::after{translate:4px 0}
.servizi{list-style:none;margin:0;padding:0;border-top:2px solid var(--inchiostro)}
.servizi li{padding:1.6rem 0 1.7rem;border-bottom:1px solid var(--filo);display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.5rem 2rem}
.servizi p{color:var(--inchiostro-2);max-width:40rem}

.capitolo-notte{background:var(--notte);color:var(--crema)}
.capitolo-notte .capitolo-intro,.capitolo-notte .servizi p{color:rgba(255,247,232,.82)}
.capitolo-notte .area-ia{--c:var(--oro)}
.capitolo-notte a{color:var(--oro)}
.capitolo-notte .servizi{border-top-color:var(--crema)}
.capitolo-notte .servizi li{border-bottom-color:rgba(255,247,232,.18)}

/* ---------- Casi d'uso ---------- */
.casi{background:var(--carta-2);padding:clamp(4rem,9vw,7rem) var(--pad)}
.casi>*{max-width:var(--misura);margin-inline:auto}
.casi-testa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem clamp(2rem,6vw,6rem);align-items:end}
.casi-testa p{color:var(--inchiostro-2);max-width:34rem}
.filtri{margin-top:2.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.filtri[hidden]{display:none}
.filtri-gruppo{display:flex;flex-wrap:wrap;gap:.4rem}
.filtri button{font:600 .95rem/1 General,sans-serif;color:var(--inchiostro);background:transparent;border:1px solid var(--filo);border-radius:8px;padding:.7rem .95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background-color .15s,border-color .15s}
.filtri button .area{display:inline-flex;align-items:center;gap:.5rem}
.filtri button:hover{border-color:var(--inchiostro)}
.filtri button[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:var(--crema)}
.filtri button[aria-pressed="true"] .area-ia{--c:var(--oro)}
.filtri-tendine{display:none;gap:.75rem;width:100%}
.filtri-tendine label{flex:1;display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;font-weight:600}
.filtri select{appearance:none;font:600 1rem/1.2 General,sans-serif;color:var(--inchiostro);background:var(--foglio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23293e34' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right .9rem center;border:1px solid var(--filo);border-radius:8px;padding:.75rem 2.2rem .75rem .85rem;width:100%}
.filtri-conteggio{margin-left:auto;font-size:.92rem;color:var(--inchiostro-2)}
.casi-griglia{margin-top:1.6rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,31rem),1fr));gap:1.1rem;align-items:stretch}
.caso{background:var(--foglio);border:1px solid var(--filo);border-radius:12px;padding:1.5rem 1.6rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;scroll-margin-top:calc(var(--indice) + 1rem)}
.caso[hidden]{display:none}
.caso:target{border-color:var(--terracotta);box-shadow:0 0 0 1px var(--terracotta)}
.caso-etichette{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.86rem;font-weight:600;color:var(--inchiostro-2)}
.caso-etichette .area{display:inline-flex;align-items:center;gap:.45rem;color:var(--inchiostro)}
.caso h3{font-size:1.3rem;line-height:1.22}
.caso-committente{font-size:.93rem;color:var(--inchiostro-2);margin-top:-.35rem}
.caso p strong{font-weight:600;color:var(--inchiostro);margin-right:.15rem}
.caso p strong::after{content:":"}
.caso details{border-top:1px solid var(--filo);padding-top:.7rem}
.caso summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font:600 .98rem/1.2 Jost,General,sans-serif;letter-spacing:.01em;color:var(--terracotta);padding:.35rem 0}
.caso summary::-webkit-details-marker{display:none}
.caso summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .2s}
.caso details[open] summary::after{rotate:225deg;translate:0 2px}
.caso .chiudi,.caso details[open] .apri{display:none}
.caso details[open] .chiudi{display:inline}
.caso-resto{display:flex;flex-direction:column;gap:.8rem;padding-top:.5rem}
.caso-link{margin-top:auto;font-weight:600;font-size:.95rem}
.casi-vuoto{margin-top:1.5rem}
.casi-vuoto[hidden]{display:none}
.casi-azzera{font:600 1rem/1 Jost,General,sans-serif;color:var(--terracotta);background:none;border:0;border-bottom:1px solid currentColor;padding:.3rem 0;cursor:pointer}

/* ---------- Come lavoro ---------- */
.metodo,.strumenti,.domande{padding:clamp(4rem,9vw,7rem) var(--pad)}
.metodo>*,.strumenti>*,.domande>*{max-width:var(--misura);margin-inline:auto}
.principi{list-style:none;padding:0;margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 2.5rem}
.principi li{border-top:2px solid var(--inchiostro);padding-top:1.1rem}
.principi p{margin-top:.55rem;color:var(--inchiostro-2)}

/* ---------- Profilo ---------- */
.profilo{background:var(--foglio);border-block:1px solid var(--filo);padding:clamp(4rem,9vw,7rem) var(--pad)}
.profilo-griglia{max-width:var(--misura);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.ritratto{margin:0;position:sticky;top:calc(var(--indice) + 2rem)}
.ritratto img{border-radius:16px;aspect-ratio:1;object-fit:cover;width:100%;background:var(--carta-2)}
.ritratto figcaption{margin-top:.9rem;font-size:.95rem;color:var(--inchiostro-2)}
.ritratto figcaption strong{display:block;color:var(--inchiostro);font-weight:600;font-size:1.05rem}
.profilo-intro{margin-top:1.3rem;color:var(--inchiostro-2);max-width:40rem}
.percorso{list-style:none;padding:0;margin:2.4rem 0 0;border-top:2px solid var(--inchiostro)}
.percorso li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.4rem 1.5rem;padding:1.3rem 0;border-bottom:1px solid var(--filo)}
.anni{font-weight:600;color:var(--terracotta);font-size:1rem;padding-top:.08rem;font-variant-numeric:tabular-nums}
.percorso h3{font-size:1.12rem}
.percorso p{margin-top:.35rem;color:var(--inchiostro-2)}
.profilo-note{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;max-width:44rem;color:var(--inchiostro-2)}
.profilo-note strong{color:var(--inchiostro);font-weight:600}

/* ---------- Strumenti ---------- */
.strumenti dl{margin:2.2rem auto 0;border-top:2px solid var(--inchiostro)}
.strumenti dl>div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.3rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--filo)}
.strumenti dt{font-weight:600}
.strumenti dd{margin:0;color:var(--inchiostro-2)}

/* ---------- Domande ---------- */
.domande{padding-top:0}
.domande-elenco{margin-top:2.2rem;border-top:2px solid var(--inchiostro)}
.domande details{border-bottom:1px solid var(--filo)}
.domande summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.25rem 0;font-weight:600;font-size:1.12rem;line-height:1.35}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"";flex:none;width:1.1rem;height:1.1rem;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;color:var(--terracotta);transition:rotate .2s}
.domande details[open] summary::after{rotate:45deg}
.domande details p{padding:0 0 1.4rem;max-width:46rem;color:var(--inchiostro-2)}

/* ---------- Contatti ---------- */
.contatti{background:var(--notte);color:var(--crema);padding:clamp(4rem,9vw,6.5rem) var(--pad) 0;overflow:hidden}
.contatti-griglia{max-width:var(--misura);margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:2rem clamp(2rem,5vw,5rem);align-items:end}
.contatti-testo{padding-bottom:clamp(4rem,8vw,6rem)}
.contatti-testo>p{margin-top:1.2rem;max-width:34rem;color:rgba(255,247,232,.86);font-size:1.1rem}
.recapito{margin-top:2rem;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.15rem 1rem;max-width:32rem;padding:1rem 1.25rem;border:1px solid rgba(255,247,232,.45);border-radius:8px;color:var(--crema);text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.recapito-etichetta{font-size:.85rem;font-weight:600;color:rgba(255,247,232,.75)}
.recapito-valore{grid-column:1;font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);font-weight:600;overflow-wrap:anywhere}
.recapito-freccia{grid-column:2;grid-row:1 / span 2;font-size:1.3rem;color:var(--oro)}
.recapito:hover{background:var(--crema);border-color:var(--crema);color:var(--notte)}
.recapito:hover .recapito-etichetta{color:var(--inchiostro-2)}
.recapito:hover .recapito-freccia{color:var(--terracotta)}
.social{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,247,232,.22);max-width:32rem}
.social>p{font-size:.85rem;font-weight:600;color:rgba(255,247,232,.75)}
.social ul{list-style:none;margin:.75rem 0 0;padding:0;display:flex;gap:.6rem}
.social-icona{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,247,232,.45);border-radius:8px;color:var(--crema);transition:border-color .2s,color .2s}
.social-icona svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social-icona:hover{border-color:var(--oro);color:var(--oro)}
.contatti-avatar{width:min(100%,19rem);justify-self:center;margin-bottom:-.5rem}

.piede{background:var(--notte-3);color:rgba(255,247,232,.78);padding:1.6rem var(--pad);font-size:.92rem}
.piede,.piede>*{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center}
.piede{justify-content:space-between;max-width:none}
.piede>p,.piede>nav{max-width:var(--misura)}
.piede strong{color:var(--crema);font-weight:600}
.piede a{color:var(--crema);text-decoration:none}
.piede a:hover{color:var(--oro)}

/* ---------- Larghezze ---------- */
@media (max-width:980px){
 .servizi li{grid-template-columns:1fr}
 .principi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
 .apertura-griglia{grid-template-columns:1fr;padding-top:.5rem}
 h1{max-width:18ch}
 .borgo-isola{width:min(100%,30rem)}
 .capitolo-griglia,.casi-testa,.profilo-griglia,.contatti-griglia{grid-template-columns:1fr}
 .capitolo-testa,.ritratto{position:static}
 .ritratto{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1.1rem;align-items:center}
 .ritratto figcaption{margin:0}
 .contatti-testo{padding-bottom:0}
 .contatti-avatar{width:13rem;justify-self:end;margin-top:-1rem}
 .apertura::before{display:none}
}
@media (max-width:720px){
 .filtri-gruppo{display:none}
 .filtri-tendine{display:flex}
 .filtri-conteggio{margin-left:0}
 .cifre{grid-template-columns:1fr;gap:.9rem}
 .principi{grid-template-columns:1fr;gap:1.8rem}
 .strumenti dl>div{grid-template-columns:1fr}
 .percorso li{grid-template-columns:1fr}
}
@media (max-width:520px){
 .luogo-cartello{padding:.32rem .5rem .36rem}
 .luogo-cartello strong{font-size:.84rem}
 .luogo-cartello span{font-size:.7rem}
 .luogo-filo{height:1rem}
 .caso{padding:1.25rem 1.2rem 1.15rem}
 .piede{flex-direction:column;align-items:flex-start}
}