/* Pagina Servizi: riusa i blocchi della pagina SABE (css/sabe-pagina.css) col ciano del logo Axxell; le parti nuove hanno il prefisso se- */
.pagina-servizi .inclina{--luce:var(--sistema-nucleo)}
.pagina-servizi .close-row{margin-top:0}
.pagina-servizi .sp-link{text-decoration-color:var(--appoggio-gamba)}
.pagina-servizi .sp-passo-ic{background:var(--sistema-nucleo);color:var(--ink);box-shadow:0 3px 0 -1px var(--appoggio-gamba)}
.pagina-servizi .sp-domande summary::after{background:var(--sistema-nucleo);color:var(--ink)}
.pagina-servizi .sp-passi{grid-template-columns:repeat(4,minmax(0,1fr))}
.se-icona{display:inline-grid;place-items:center;width:1.6em;height:1.6em;padding:.2em;border-radius:.4em;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.se-icona svg{width:100%;height:100%}
@media (max-width:1200px){ .pagina-servizi .sp-apertura{grid-template-columns:minmax(0,1fr)} }
.se-carte p b,.se-con-anima b{font-weight:700;color:var(--ink);font-size:inherit}

/* il chatbot: la conversazione d'esempio e, accanto, da dove prende le risposte */
.se-demo{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.se-chat{width:100%;max-width:440px;justify-self:center;border-radius:20px;overflow:hidden;background:var(--wash);box-shadow:inset 0 0 0 1px var(--line), var(--lift)}
.se-chat-testa{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--ink);color:#fff}
.se-chat-testa > span:last-child{display:grid;line-height:1.2}
.se-chat-testa small{color:var(--sistema-nucleo);font-size:.8rem}
.se-chat-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sistema-nucleo);color:var(--ink)}
.se-conversazione{position:relative;list-style:none;margin:0;padding:18px 16px 20px;display:grid;gap:10px}
.se-conversazione > li{max-width:84%;padding:10px 14px;border-radius:18px;line-height:1.4;transition:opacity .45s var(--ease), translate .5s var(--ease)}
.se-c-cliente{justify-self:end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.se-c-bot{justify-self:start;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:6px}
.se-chiama{display:flex;width:max-content;align-items:center;gap:8px;margin-top:10px;padding:8px 14px;border-radius:999px;background:var(--sistema-nucleo);color:var(--ink);font-weight:700}
.se-fonti-blocco{display:grid;gap:18px;align-content:center}
.se-fonti{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.se-fonti li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic nome" "ic val";column-gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s var(--ease), scale .4s var(--ease), opacity .4s var(--ease)}
.se-fonti li b{grid-area:nome}
.se-fonti li > span:last-child{grid-area:val;color:var(--ink-2)}
.se-fonte-ic{grid-area:ic;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--wash);color:var(--appoggio-gamba)}
.se-fonte-ic svg{width:24px;height:24px}
.se-fonte-ic.se-marchio{color:var(--fuchsia);padding:6px}
.se-fonte-ic.se-marchio svg{width:100%;height:100%}
.se-fonti li.attiva{box-shadow:inset 0 0 0 2px var(--sistema-nucleo), 0 14px 28px -18px rgba(21,151,166,.7);scale:1.02}
.se-fonti:has(li.attiva) li:not(.attiva){opacity:.55}
.se-con-anima{margin:0;color:var(--ink-2);line-height:1.5;max-width:46ch}
.se-carte{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,20px)}
.se-carte article{display:grid;gap:10px;align-content:start;padding:20px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.se-carte h3{font-size:1.1rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.se-carte p{margin:0;color:var(--ink-2);line-height:1.45}
.se-carta-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--sistema-nucleo) 18%,var(--paper));color:var(--ink)}

/* Atelier: i mondi, le tecniche, il metodo */
.se-etichetta{margin:0 0 10px;display:flex;align-items:center;gap:10px;font-weight:800;font-variation-settings:var(--wide);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}
.se-etichetta::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sistema-nucleo)}
.se-etichetta--chatbot::before{background:var(--blue)}
.se-sotto{margin-top:clamp(36px,5vw,64px)}
.se-nota{margin:8px 0 0;color:var(--ink-2)}
.se-mondi{list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px)}
.se-mondo{position:relative;display:grid;gap:6px;align-content:start;padding:20px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line), 0 12px 24px -18px rgba(12,26,143,.35)}
.se-mondo-segno{display:grid;place-items:center;height:84px;margin-bottom:8px;border-radius:12px;background:linear-gradient(135deg,var(--wash),color-mix(in srgb,var(--sistema-nucleo) 18%,var(--paper)));color:var(--appoggio-gamba)}
.se-mondo > b{font-size:var(--step-1);font-weight:800;letter-spacing:-.02em}
.se-mondo small{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.se-mondo small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sistema-nucleo)}
.se-mondo-frase{color:var(--ink-2);line-height:1.45}
.se-mondo--tuo{background:transparent;box-shadow:none;outline:2px dashed var(--appoggio-gamba);outline-offset:-2px}
.se-mondo--tuo .se-mondo-segno{background:transparent}
.se-tecniche{list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,20px)}
.se-tecnica{display:grid;gap:6px;align-content:start;padding:18px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.se-tecnica b{font-weight:800}
.se-tecnica > span:last-child{color:var(--ink-2);line-height:1.4}
.se-t-disegno{position:relative;display:block;height:72px;margin-bottom:6px;border-radius:12px;background:var(--wash);overflow:hidden}
/* particelle: da cerchio a fila e ritorno; da fermi restano sul cerchio */
.se-t-particelle i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--appoggio-gamba);
  translate:calc(cos(var(--a)) * 26px) calc(sin(var(--a)) * 26px);animation:se-sciame 4.8s var(--ease) infinite alternate;animation-delay:calc(var(--n) * -.12s)}
@keyframes se-sciame{to{translate:calc((var(--n) - 4) * 11px) 0}}
/* un cubo che gira */
.se-t-3d{perspective:300px}
.se-t-cubo{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;transform-style:preserve-3d;animation:se-cubo 9s linear infinite}
.se-t-cubo i{position:absolute;inset:0;border:2px solid var(--appoggio-gamba);background:color-mix(in srgb,var(--sistema-nucleo) 22%,transparent)}
.se-t-cubo i:nth-child(1){transform:translateZ(15px)}
.se-t-cubo i:nth-child(2){transform:rotateY(180deg) translateZ(15px)}
.se-t-cubo i:nth-child(3){transform:rotateY(90deg) translateZ(15px)}
.se-t-cubo i:nth-child(4){transform:rotateY(-90deg) translateZ(15px)}
.se-t-cubo i:nth-child(5){transform:rotateX(90deg) translateZ(15px)}
.se-t-cubo i:nth-child(6){transform:rotateX(-90deg) translateZ(15px)}
@keyframes se-cubo{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(340deg) rotateY(720deg)}}
/* due gocce che cambiano forma */
.se-t-fluido::before,.se-t-fluido::after{content:"";position:absolute;width:64px;height:64px;left:calc(50% - 32px);top:4px;border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;background:var(--sistema-nucleo);opacity:.75;animation:se-goccia 7s ease-in-out infinite alternate}
.se-t-fluido::after{background:var(--blue);opacity:.3;animation-duration:9s;animation-direction:alternate-reverse}
@keyframes se-goccia{50%{border-radius:63% 37% 38% 62% / 55% 61% 39% 45%;rotate:120deg}100%{border-radius:37% 63% 52% 48% / 46% 39% 61% 54%;rotate:240deg;translate:12px 0}}
/* un video: il triangolo e la barra che avanza */
@property --se-p{syntax:'<percentage>';inherits:false;initial-value:35%}
.se-t-video::before{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - 15px);border-left:18px solid var(--ink);border-block:11px solid transparent}
.se-t-video::after{content:"";position:absolute;left:12px;right:12px;bottom:10px;height:4px;border-radius:2px;
  background:linear-gradient(var(--appoggio-gamba),var(--appoggio-gamba)) 0 0 / var(--se-p) 100% no-repeat, var(--line);animation:se-avanza 5s linear infinite}
@keyframes se-avanza{from{--se-p:0%}to{--se-p:100%}}
.se-tecniche.ferma *,.se-tecniche.ferma *::before,.se-tecniche.ferma *::after{animation-play-state:paused}

/* due servizi distinti, ognuno col suo colore (Atelier ciano, chatbot blu), e sotto la fascia «Insieme» con ANIMA e SABE */
.se-due{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,2vw,24px);align-items:stretch}
.se-servizio{--tinta:var(--sistema-nucleo);--tinta-ink:var(--appoggio-gamba);display:grid;gap:14px;align-content:start;padding:clamp(22px,3vw,34px);border-radius:calc(var(--r) * 1.4);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line), inset 0 4px 0 var(--tinta), var(--lift)}
.se-servizio[data-servizio=chatbot]{--tinta:var(--blue);--tinta-ink:var(--blue)}
.se-servizio-etichetta{margin:0;text-wrap:balance;display:flex;align-items:center;gap:12px;font-weight:800;font-variation-settings:var(--wide);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}
.se-servizio-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tinta);color:#fff}
.se-servizio[data-servizio=atelier] .se-servizio-ic{color:var(--ink)}
.se-servizio h3{font-size:var(--step-2);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variation-settings:var(--wide)}
.se-servizio ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.se-servizio li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.45}
.se-servizio li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--tinta)}
.se-servizio li b{font-weight:700;color:var(--ink);font-size:inherit}
.se-servizio > .sp-link{justify-self:start;text-decoration-color:var(--tinta-ink)}
.se-piu{align-self:center;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:1.6rem;font-weight:800;line-height:1}
.se-insieme{margin-top:clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:18px clamp(18px,2.4vw,28px);border-radius:var(--r);background:color-mix(in srgb,var(--sistema-nucleo) 12%,var(--paper));box-shadow:inset 0 0 0 1px var(--line)}
.se-insieme-marchi{display:flex;gap:8px}
.se-insieme-marchi .se-marchio{width:40px;height:40px;padding:7px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.se-insieme-marchi .se-marchio svg{width:100%;height:100%;display:block}
.se-insieme-marchi [data-marchio=anima]{color:var(--fuchsia)}
.se-insieme-marchi [data-marchio=sabe]{color:var(--volt-deep)}
.se-insieme-frase{margin:0;flex:1 1 320px;min-width:0;line-height:1.45;color:var(--ink-2)}
.se-insieme-frase b{font-weight:700;color:var(--ink);font-size:inherit}
.se-insieme-link{margin:0;display:flex;flex-wrap:wrap;gap:12px 28px}

@media (prefers-reduced-motion:reduce){ .se-tecniche *,.se-tecniche *::before,.se-tecniche *::after{animation:none!important} }
@media (max-width:1100px){ .se-carte{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:980px){ .se-mondi,.se-tecniche{grid-template-columns:repeat(2,minmax(0,1fr))} .pagina-servizi .sp-passi{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .se-demo{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){ .se-due{grid-template-columns:minmax(0,1fr)} .se-piu{justify-self:center} }
@media (max-width:600px){ .se-mondi,.se-tecniche,.se-carte,.pagina-servizi .sp-passi{grid-template-columns:minmax(0,1fr)} }
/* la scena d'apertura: un sito che si compone e il chatbot nell'angolo. Le misure seguono la larghezza della scena (cqi) */
.se-scena{container-type:inline-size;position:relative;width:100%;aspect-ratio:1.08}
.se-scena > *{transition:opacity .4s var(--ease)}
.se-scena.via > *,.se-scena.via > .se-bot{opacity:0}   /* anche il chatbot aperto: .se-bot.aperto ha lo stesso peso */
.se-browser{position:absolute;left:0;top:3%;width:90%;height:80%;font-size:clamp(10px,2.7cqi,15px);border-radius:1.1em;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line), var(--lift)}
.se-barra{display:flex;align-items:center;gap:.45em;padding:.7em 1em;border-bottom:1px solid var(--line);background:var(--wash)}
.se-barra i{flex:none;width:.65em;height:.65em;border-radius:50%;background:var(--edge-paper)}
.se-indirizzo{margin-left:.6em;flex:1;min-width:0;padding:.25em .9em;border-radius:999px;background:var(--paper);font-size:.85em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-sito{--tinta:#c2410c;min-height:0;padding:1.1em 1.3em 1.3em;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"nav nav" "testo foto" "tasti foto";gap:1em 1.2em}
.se-sito-nav{grid-area:nav;display:flex;align-items:center;justify-content:space-between}
.se-sito-logo{font-weight:800;color:var(--tinta);letter-spacing:-.01em}
.se-sito-menu{display:flex;gap:.6em}
.se-sito-menu i{width:2.2em;height:.4em;border-radius:.2em;background:var(--line)}
.se-sito-testo{grid-area:testo;align-self:center;display:grid;gap:.5em;min-width:0}
.se-sito-titolo{font-size:1.9em;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variation-settings:var(--wide);overflow-wrap:break-word}
.se-sito-motto{color:var(--ink-2);font-size:.95em;line-height:1.3}
.se-sito-foto{grid-area:foto;min-height:6em;border-radius:.9em;background:radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--tinta) 45%,#fff), var(--tinta));position:relative;overflow:hidden}
.se-sito-foto::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 .5em, transparent .5em 1.2em)}
.se-sito-tasti{grid-area:tasti;display:flex;flex-wrap:wrap;gap:.5em}
.se-sito-tasti span{padding:.5em 1.1em;border-radius:999px;font-weight:700;font-size:.85em;background:var(--tinta);color:#fff}
.se-sito-tasti span + span{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.se-pezzo{opacity:0;translate:0 .8em;filter:blur(4px);transition:opacity .5s var(--ease), translate .6s var(--ease), filter .5s var(--ease)}
.se-pezzo.su{opacity:1;translate:none;filter:none}
.se-bot{position:absolute;right:0;bottom:0;width:50%;font-size:clamp(10px,2.5cqi,14px);border-radius:1.1em;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line), var(--lift);
  opacity:0;translate:0 1.2em;scale:.96;transform-origin:100% 100%;transition:opacity .45s var(--ease), translate .55s var(--ease), scale .55s var(--ease)}
.se-bot.aperto{opacity:1;translate:none;scale:1}
.se-bot-testa{display:flex;align-items:center;gap:.6em;padding:.7em .9em;background:var(--ink);color:#fff}
.se-bot-testa > span:last-child{display:grid;line-height:1.15;min-width:0}
.se-bot-testa b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-bot-testa small{color:var(--sistema-nucleo);font-size:.8em}
.se-bot-avatar{flex:none;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;background:var(--tinta);color:#fff}
.se-bot-avatar svg{width:1.1em;height:1.1em}
.se-bot-corpo{display:grid;gap:.55em;padding:.9em;align-content:end;background:var(--wash)}
.se-msg{margin:0;max-width:92%;padding:.55em .8em;border-radius:1em;line-height:1.35;opacity:0;translate:0 .5em;transition:opacity .4s var(--ease), translate .45s var(--ease)}
.se-msg.su{opacity:1;translate:none}
.se-msg-cliente{justify-self:end;background:var(--ink);color:#fff;border-bottom-right-radius:.3em}
.se-risposta{display:grid;justify-items:start}
.se-risposta > *{grid-area:1/1}
.se-msg-bot{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:.3em}
.se-scrive{display:flex;gap:.3em;padding:.7em .8em;border-radius:1em;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);opacity:0;transition:opacity .25s}
.se-scrive.su{opacity:1}
.se-scrive i{width:.45em;height:.45em;border-radius:50%;background:var(--ink-3);animation:se-punto 1s ease-in-out infinite}
.se-scrive i:nth-child(2){animation-delay:.15s}
.se-scrive i:nth-child(3){animation-delay:.3s}
@keyframes se-punto{50%{translate:0 -.3em;opacity:.5}}
.se-fonte{justify-self:start;display:inline-flex;align-items:center;gap:.4em;font-size:.8em;font-weight:700;color:var(--ink-2);opacity:0;transition:opacity .4s var(--ease)}
.se-fonte.su{opacity:1}
.se-fonte svg{width:1.3em;height:1.3em;flex:none}
.se-fonte .se-marchio{display:inline-grid;width:1.4em;height:1.4em;color:var(--fuchsia)}
.se-fonte .se-marchio svg{width:100%;height:100%}
/* la conversazione animata (classi messe da js/se-chat.js): i messaggi non ancora entrati tengono il loro posto, invisibili */
.se-conversazione.in-scena > li:not(.visto):not(.se-c-scrive){opacity:0;translate:0 10px}
.se-c-scrive{position:absolute;left:16px;display:flex;gap:5px;padding:14px 16px !important;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-bottom-left-radius:6px}
.se-c-scrive i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:se-punto 1s ease-in-out infinite}
.se-c-scrive i:nth-child(2){animation-delay:.15s}
.se-c-scrive i:nth-child(3){animation-delay:.3s}
/* telefono: la chat ha un'altezza fissa e i messaggi salgono dal basso, come in una vera app; quelli non ancora arrivati
   non tengono posto (senza script e col movimento ridotto la conversazione resta tutta, intera) */
@media (max-width:860px){
  .se-demo{row-gap:48px}
  .se-conversazione.in-scena{height:400px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}
  .se-conversazione.in-scena > li{flex:none}
  .se-conversazione.in-scena > li:not(.visto):not(.se-c-scrive){display:none}
  .se-conversazione.in-scena > .se-c-cliente{align-self:flex-end}
  .se-conversazione.in-scena > .se-c-bot,.se-conversazione.in-scena > .se-c-scrive{align-self:flex-start}
  .se-conversazione.in-scena > .se-c-scrive{position:static}
  @starting-style{ .se-conversazione.in-scena > li.visto{opacity:0;translate:0 10px} }
}