/* Stili delle pagine servizio: si aggiungono a sito.css */

/* ---------- Intro: le lettere salgono e il sipario si apre in due ---------- */
.sipario-serv{display:none}
.intro-serv .sipario-serv{display:block;position:fixed;inset:0;z-index:100;pointer-events:none}
html.intro-serv,html.intro-serv body{overflow:hidden}
.sipario-serv .meta{position:absolute;left:0;right:0;height:50.5%;background:var(--notte);transition:transform .6s cubic-bezier(.75,0,.2,1)}
.sipario-serv .meta.su{top:0;box-shadow:0 1px 0 rgba(0,173,238,.35)}
.sipario-serv .meta.giu{bottom:0;box-shadow:0 -1px 0 rgba(0,173,238,.35)}
.sipario-serv.apri .meta.su{transform:translateY(-100%)}
.sipario-serv.apri .meta.giu{transform:translateY(100%)}
.sipario-serv p{position:absolute;inset:0;z-index:1;margin:0;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;
  font-family:var(--display);font-weight:800;font-size:clamp(28px,6.4vw,68px);line-height:1.1;letter-spacing:-.035em;color:#fff;transition:opacity .35s}
.sipario-serv.apri p{opacity:0}
.sipario-serv p b{display:inline-block;font-weight:inherit;transform:translateY(105%);opacity:0;animation:letteraSale .5s cubic-bezier(.2,.8,.2,1) forwards}
.sipario-serv p .spazio{width:.32em}
.sipario-serv .lampo{position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,transparent 42%,rgba(127,214,247,.55) 50%,transparent 58%);
  background-size:260% 100%;background-position:130% 0;animation:lampoPassa .55s .5s cubic-bezier(.4,0,.3,1) forwards}
@keyframes letteraSale{to{transform:none;opacity:1}}
@keyframes lampoPassa{to{background-position:-40% 0}}

/* ---------- Apertura della pagina ---------- */
.hero-serv{position:relative;overflow:hidden;padding:clamp(130px,16vh,190px) 0 clamp(60px,8vw,100px);isolation:isolate}
.hero-serv .briciole{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--testo-soft);margin-bottom:22px}
.hero-serv .briciole a{color:var(--testo-soft);text-decoration:none}
.hero-serv .briciole a:hover{color:#fff}
.hero-serv h1{font-size:clamp(38px,6vw,76px);max-width:16ch;margin:14px 0 22px}
.hero-serv .lead{font-size:clamp(17px,1.7vw,21px);max-width:660px}
.hero-serv .azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.serv-tag{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.serv-tag i{font-style:normal;font-size:13px;font-weight:500;padding:7px 14px;border-radius:99px;background:rgba(0,173,238,.1);color:var(--cielo);box-shadow:inset 0 0 0 1px rgba(127,214,247,.14)}

/* ---------- Infografica 1: cosa c'è dentro ---------- */
.tessere{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
@media (max-width:900px){.tessere{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tessere{grid-template-columns:1fr}}
.tessera{position:relative;overflow:hidden;padding:26px 24px 24px;border-radius:22px;background:linear-gradient(160deg,rgba(0,75,121,.32),rgba(0,17,44,.6));box-shadow:inset 0 0 0 1px rgba(127,214,247,.12)}
.tessera h3{font-size:19px;margin:18px 0 8px}
.tessera p{color:var(--testo-soft);font-size:15.5px}
.tessera .disegno{height:86px;display:grid;place-items:center}
.tessera svg{width:100%;height:86px;overflow:visible}
/* velocità: l'ago sale */
.ago{transform-origin:60px 58px;transform:rotate(-70deg)}
.tessera.visto .ago{animation:agoSale 1.6s .2s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes agoSale{60%{transform:rotate(62deg)}80%{transform:rotate(48deg)}100%{transform:rotate(55deg)}}
/* telefono e schermo */
.tessera.visto .schermo-p rect{animation:blocchi .5s both}
.tessera.visto .schermo-p rect:nth-child(2){animation-delay:.15s}
.tessera.visto .schermo-p rect:nth-child(3){animation-delay:.3s}
.tessera.visto .schermo-p rect:nth-child(4){animation-delay:.45s}
@keyframes blocchi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* lente che cerca */
.tessera.visto .lente{animation:cerca 3.4s .3s ease-in-out infinite}
@keyframes cerca{0%{transform:translate(0,0)}30%{transform:translate(26px,10px)}60%{transform:translate(48px,-6px)}100%{transform:translate(0,0)}}
/* lucchetto che si chiude */
.tessera.visto .arco{animation:chiudi .8s .3s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes chiudi{from{transform:translateY(-9px)}to{transform:none}}
/* matita che scrive */
.riga-scritta{stroke-dasharray:80;stroke-dashoffset:80}
.tessera.visto .riga-scritta{animation:scrivi 1.6s .2s ease-in-out infinite}
@keyframes scrivi{0%{stroke-dashoffset:80}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.tessera.visto .matita{animation:matitaVa 1.6s .2s ease-in-out infinite}
@keyframes matitaVa{0%{transform:translateX(0)}60%{transform:translateX(74px)}100%{transform:translateX(74px);opacity:0}}
/* spine che si agganciano */
.tessera.visto .spina-sx{animation:spinaSx 1.8s .2s ease-in-out infinite}
.tessera.visto .spina-dx{animation:spinaDx 1.8s .2s ease-in-out infinite}
@keyframes spinaSx{0%,100%{transform:translateX(-16px)}45%,70%{transform:none}}
@keyframes spinaDx{0%,100%{transform:translateX(16px)}45%,70%{transform:none}}
.tessera.visto .scintilla{animation:scintilla 1.8s .2s ease-in-out infinite}
@keyframes scintilla{0%,40%,75%,100%{opacity:0;transform:scale(.4)}50%,65%{opacity:1;transform:scale(1)}}

/* animazioni riusabili: partono quando la tessera entra in campo */
.tessera.visto .an-su > *{animation:anSu .5s both}
.tessera.visto .an-su > *:nth-child(2){animation-delay:.12s}
.tessera.visto .an-su > *:nth-child(3){animation-delay:.24s}
.tessera.visto .an-su > *:nth-child(4){animation-delay:.36s}
@keyframes anSu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tessera.visto .an-pulsa{animation:anPulsa 1.8s ease-in-out infinite;transform-origin:center}
@keyframes anPulsa{50%{transform:scale(1.12)}}
.tessera.visto .an-gira{animation:anGira 4.5s linear infinite;transform-origin:60px 40px}
@keyframes anGira{to{transform:rotate(360deg)}}
.tessera.visto .an-culla{animation:anCulla 3s ease-in-out infinite;transform-origin:60px 44px}
@keyframes anCulla{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.tessera.visto .an-scorre{animation:anScorre 3s ease-in-out infinite}
@keyframes anScorre{0%,100%{transform:translateX(-12px)}50%{transform:translateX(12px)}}
.tessera.visto .an-sale{animation:anSale 2.6s ease-in-out infinite}
@keyframes anSale{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}
.tessera.visto .an-lampeggia{animation:anLampeggia 2.2s ease-in-out infinite}
@keyframes anLampeggia{0%,100%{opacity:.25}50%{opacity:1}}
.tessera.visto .an-traccia{stroke-dasharray:120;stroke-dashoffset:120;animation:anTraccia 2.4s ease-in-out infinite}
@keyframes anTraccia{0%{stroke-dashoffset:120}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}

/* ---------- Infografica 2: dalla vetrina al su misura ---------- */
.scala{margin-top:52px;border-radius:26px;padding:clamp(24px,4vw,40px);background:linear-gradient(170deg,rgba(0,75,121,.35),rgba(0,17,44,.7));box-shadow:inset 0 0 0 1px rgba(127,214,247,.14)}
.scala-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.scala-testa h3{font-size:clamp(22px,2.6vw,30px)}
.scala-testa .livello{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ciano)}
.scala input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:26px 0 8px;border-radius:6px;background:rgba(127,214,247,.18);outline:none}
.scala input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--sfumatura-luce);box-shadow:0 8px 20px -6px rgba(0,173,238,.9);cursor:grab;border:0}
.scala input[type=range]::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:50%;background:#00adee;cursor:grab}
.scala input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
.scala-tappe{display:flex;justify-content:space-between;font-size:12.5px;color:var(--testo-soft);gap:8px}
.scala-tappe span{flex:1;text-align:center;transition:color .3s}
.scala-tappe span:first-child{text-align:left}.scala-tappe span:last-child{text-align:right}
.scala-tappe span.on{color:#fff;font-weight:700}
.scala-corpo{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px;align-items:center}
@media (max-width:760px){.scala-corpo{grid-template-columns:1fr;gap:22px}}
.scala-disegno{position:relative;height:230px;display:flex;align-items:flex-end;justify-content:center;gap:12px}
.mattone{width:58px;border-radius:12px 12px 6px 6px;background:var(--sfumatura-luce);box-shadow:0 14px 30px -14px rgba(0,173,238,.8);transform-origin:bottom;transition:height .55s cubic-bezier(.2,.8,.2,1),opacity .4s,transform .55s cubic-bezier(.2,.8,.2,1)}
.mattone.spento{opacity:.18;background:rgba(127,214,247,.4);box-shadow:none}
.scala-testo h4{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,26px);color:#fff;margin-bottom:8px;letter-spacing:-.02em}
.scala-testo p{color:var(--testo-soft);margin-bottom:14px}
.scala-testo ul{list-style:none;display:grid;gap:8px}
.scala-testo li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;animation:appare .4s both}
.scala-testo li:nth-child(2){animation-delay:.05s}.scala-testo li:nth-child(3){animation-delay:.1s}.scala-testo li:nth-child(4){animation-delay:.15s}.scala-testo li:nth-child(5){animation-delay:.2s}
.scala-testo li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:rgba(0,173,238,.18);color:var(--cielo);font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:2px}

/* ---------- Infografica 3: come nasce ---------- */
.nasce{position:relative;margin-top:56px;display:grid;gap:34px}
.nasce::before{content:"";position:absolute;left:23px;top:10px;bottom:10px;width:2px;background:rgba(127,214,247,.14)}
.nasce .linea-viva{position:absolute;left:23px;top:10px;width:2px;height:calc(var(--p,0) * (100% - 20px));background:var(--sfumatura-luce);box-shadow:0 0 14px rgba(0,173,238,.6)}
.tappa{position:relative;padding-left:76px}
.tappa .bolla{position:absolute;left:0;top:-4px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--abisso);box-shadow:inset 0 0 0 2px rgba(127,214,247,.2);transition:background .4s,box-shadow .4s,transform .4s}
.tappa .bolla svg{width:22px;height:22px;color:var(--cielo);transition:color .4s}
.tappa.accesa .bolla{background:var(--sfumatura-luce);box-shadow:0 12px 30px -12px rgba(0,173,238,.9);transform:scale(1.06)}
.tappa.accesa .bolla svg{color:var(--notte)}
.tappa h3{font-size:19px;margin-bottom:6px}
.tappa p{color:var(--testo-soft);font-size:15.5px;max-width:620px}
.tappa .quando{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--ciano);font-weight:600}

/* ---------- Domande della pagina servizio ---------- */
.dom-serv{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:26px;margin-top:48px;align-items:start}
@media (max-width:860px){.dom-serv{grid-template-columns:1fr;gap:12px}}
.dom-elenco{display:grid;gap:8px}
.dom-elenco button{position:relative;overflow:hidden;text-align:left;border:0;cursor:pointer;padding:16px 18px;border-radius:16px;font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.35;
  color:var(--testo);background:rgba(0,75,121,.18);box-shadow:inset 0 0 0 1px rgba(127,214,247,.1);transition:color .25s,background .25s,transform .25s}
.dom-elenco button:hover{color:#fff;transform:translateX(3px)}
.dom-elenco button[aria-selected="true"]{color:var(--notte);background:var(--sfumatura-luce);box-shadow:0 14px 30px -16px rgba(0,173,238,.9)}
.dom-elenco button i{font-style:normal;opacity:.55;margin-right:8px;font-size:13px}
.dom-pannello{position:relative;min-height:230px;padding:clamp(24px,3vw,34px);border-radius:22px;background:linear-gradient(160deg,rgba(0,75,121,.3),rgba(0,17,44,.65));box-shadow:inset 0 0 0 1px rgba(127,214,247,.14)}
.dom-pannello h3{font-size:clamp(19px,2.2vw,24px);margin-bottom:12px}
.dom-pannello p{color:var(--testo-soft);font-size:16px;line-height:1.7}
.dom-pannello .dentro{animation:rispostaEntra .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rispostaEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dom-risposta{display:none}
.dom-pannello .conta{position:absolute;right:26px;top:22px;font-family:var(--display);font-weight:800;font-size:44px;color:rgba(127,214,247,.08)}
@media (max-width:860px){
  .dom-elenco button{border-radius:16px}
  .dom-elenco .dom-risposta{padding:14px 2px 4px;font-family:var(--corpo);font-weight:400;font-size:15.5px;line-height:1.65;color:var(--testo-soft)}
  .dom-elenco button[aria-selected="true"] .dom-risposta{display:block;color:rgba(0,32,68,.8)}
  .dom-pannello{display:none}
}

/* ---------- Invito finale ---------- */
.serv-chiusura{margin-top:clamp(60px,8vw,100px);padding:clamp(30px,5vw,54px);border-radius:28px;text-align:center;
  background:radial-gradient(90% 120% at 50% 0%,rgba(0,173,238,.35),transparent 70%),linear-gradient(170deg,rgba(0,75,121,.4),rgba(0,17,44,.8));box-shadow:inset 0 0 0 1px rgba(127,214,247,.18)}
.serv-chiusura h2{margin-bottom:12px}
.serv-chiusura .lead{margin:0 auto 26px}
.serv-chiusura .azioni{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}