/* ShowLesson · base del sito e raccordi con Elementor, Hello e Tutor.
   La grafica della demo A sta in sl-base.css (generato da tools/porta_demo.mjs): qui solo ciò che il sito vero aggiunge. */

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--ink-4) var(--paper-2)}
body.sl-sito,body.sl-sito *,body.sl-sito *::before,body.sl-sito *::after{box-sizing:border-box}
body.sl-sito{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 Archivo,system-ui,sans-serif;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* I nostri componenti stanno dentro contenitori Elementor a tutta larghezza */
.sl{overflow-x:visible;background:transparent}
.sl-hdr,.sl-ftr{background:transparent}
.elementor-widget-shortcode>.elementor-widget-container,.elementor-shortcode{width:100%}

/* Testata fissa: in Elementor la posizione sticky va sul contenitore della testata, non sulla .hdr interna */
.elementor-location-header{position:sticky;top:0;z-index:60}
body.admin-bar .elementor-location-header{top:32px}
@media (max-width:782px){body.admin-bar .elementor-location-header{top:0}}
.sl .hdr{position:relative}
.sl .hdr.scrolled{border-bottom-color:var(--line)}

/* Ancore sotto la testata fissa */
.sl [id]{scroll-margin-top:88px}

/* Pannelli dei software: hidden deve vincere sul display:grid */
.sl .sw-p[hidden]{display:none}

/* Accessibilità e modulo */
.sl .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sl .sl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.sl .sl-err{color:#B3261E;font-weight:600;font-size:15px}
.sl .chk a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange)}
.sl .form button[disabled]{opacity:.45}

/* Copertine con immagine vera (quando il corso ne ha una) */
.sl .cv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Catalogo: le card sono avvolte da un elemento per i filtri */
.sl .cat-i{display:flex}
.sl .cat-i[hidden]{display:none}
.sl .cat-i>.card{flex:1}

/* Scheda corso: il form d'iscrizione occupa il posto del pulsante */
.sl .buy form{margin:0}
.sl .buy form .btn{width:100%}
.sl .buy .lnk{font-size:15px}

/* Hello: titoli e link fuori dai nostri componenti con il carattere del sito */
body.sl-sito h1,body.sl-sito h2,body.sl-sito h3,body.sl-sito h4{font-family:Archivo,system-ui,sans-serif}

/* Pagine normali del tema Hello (registrazione, carrello, cassa, accesso): la gabbia e il titolo della demo */
body.sl-sito .site-main{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,44px) clamp(56px,7vw,96px)}
body.sl-sito .site-main .page-header{padding:clamp(32px,5vw,64px) 0 26px}
body.sl-sito .site-main .page-header .entry-title{margin:0;font:800 clamp(40px,5.6vw,76px)/.95 Archivo,system-ui,sans-serif;font-stretch:125%;letter-spacing:-.04em;color:var(--ink)}
body.sl-sito .site-main a{color:inherit}

/* Copertine disegnate dei software arrivati dopo la demo: il documento e il foglio di calcolo */
.sl .cv-doc .pg{left:22%;top:8%;width:56%;height:92%;background:var(--paper)!important;border-radius:5px 5px 0 0!important}
.sl .cv-doc .tt{left:29%;top:17%;width:26%;height:6%;background:var(--ink)!important;border-radius:3px!important}
.sl .cv-doc .l{left:29%;width:42%;height:3.5%;background:var(--ink-4)!important;opacity:.35;border-radius:2px!important}
.sl .cv-doc .l1{top:31%}
.sl .cv-doc .l2{top:39%;width:36%}
.sl .cv-doc .sel{left:29%;top:46%;width:30%;height:6.5%;background:var(--orange)!important;border-radius:2px!important}
.sl .cv-doc .l3{top:57%}
.sl .cv-doc .l4{top:65%;width:30%}
.sl .cv-doc .cv-cur{left:55%;top:54%}
.sl .cv-sheet .hd{left:7%;top:9%;width:86%;height:11%;background:var(--ink-3)!important;border-radius:4px!important}
.sl .cv-sheet .g{left:7%;top:24%;width:86%;height:64%;border-radius:0!important;background:linear-gradient(var(--ink-4) 1px,transparent 1px) 0 0/100% 25%,linear-gradient(90deg,var(--ink-4) 1px,transparent 1px) 0 0/25% 100%!important}
.sl .cv-sheet .cl{left:28.5%;top:40%;width:21.5%;height:16%;border-radius:0!important;background:transparent!important;box-shadow:inset 0 0 0 2px var(--orange)}
.sl .cv-sheet .cv-cur{left:47%;top:57%}
.sl .cv-slide .t{left:7%;width:17%;height:19%;background:var(--ink-3)!important;border-radius:3px!important}
.sl .cv-slide .t1{top:10%;box-shadow:inset 0 0 0 2px var(--orange)}
.sl .cv-slide .t2{top:34%}
.sl .cv-slide .t3{top:58%}
.sl .cv-slide .sd{left:29%;top:10%;width:64%;height:74%;background:var(--paper)!important;border-radius:4px!important}
.sl .cv-slide .ti{left:35%;top:19%;width:34%;height:7%;background:var(--ink)!important;border-radius:3px!important}
.sl .cv-slide .b{bottom:25%;width:9%;background:var(--ink-4)!important;border-radius:2px 2px 0 0!important}
.sl .cv-slide .b1{left:38%;height:14%}
.sl .cv-slide .b2{left:51%;height:24%;background:var(--orange)!important}
.sl .cv-slide .b3{left:64%;height:33%}
.sl .cv-slide .cv-cur{left:59%;top:60%}
.sl .cv-site .c{left:7%;height:12%;background:var(--ink-3)!important;border-radius:6px!important}
.sl .cv-site .c1{top:12%;width:27%}
.sl .cv-site .c2{top:30%;width:22%;background:var(--ink-4)!important}
.sl .cv-site .in{left:7%;bottom:10%;width:27%;height:13%;background:transparent!important;box-shadow:inset 0 0 0 2px var(--ink-4)}
.sl .cv-site .pv{left:40%;top:10%;width:53%;height:80%;background:var(--paper)!important;border-radius:5px!important}
.sl .cv-site .h{left:47%;top:22%;width:32%;height:8%;background:var(--ink)!important;border-radius:3px!important}
.sl .cv-site .l{left:47%;width:38%;height:4%;background:var(--ink-4)!important;opacity:.35;border-radius:2px!important}
.sl .cv-site .l1{top:37%}
.sl .cv-site .l2{top:45%;width:28%}
.sl .cv-site .bt{left:47%;top:59%;width:20%;height:11%;background:var(--orange)!important;border-radius:20px!important}
.sl .cv-site .cv-cur{left:62%;top:66%}
.sl .sl-verifica{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;max-width:560px;margin-top:20px}
.sl .sl-verifica .fld{flex:1 1 280px}
.sl .dark .buy .btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sl .sh-sig div{border-top:0;padding-top:0}
.sl .sh-sig .scr{display:block;border-bottom:1.5px solid var(--ink);padding-bottom:.7cqw;margin-bottom:1cqw}
/* Testi legali (inc/legale.php): testo da leggere, non da presentare */
.sl .page-h .legale-agg{margin-top:14px;font-size:15px}
.sl .legale{margin-top:clamp(28px,4vw,44px);max-width:68ch}
.sl .legale p,.sl .legale li{margin:0 0 14px;font-size:17px;line-height:1.65;color:var(--ink);max-width:none}
.sl .legale h2{font-size:clamp(22px,2.4vw,28px);line-height:1.15;margin:44px 0 14px}
.sl .legale h3{font-size:18px;font-stretch:100%;letter-spacing:0;line-height:1.3;margin:28px 0 8px}
.sl .legale ul{list-style:disc;padding-left:1.25em;margin:0 0 14px}
.sl .legale li{margin-bottom:6px}
.sl .legale li::marker{color:var(--orange)}
.sl .legale a{font-weight:600;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;overflow-wrap:anywhere}
/* Punti di forza della home (sl_home_perche): due elenchi, come il programma di un corso */
.sl .perche{background:var(--paper-2)}
.sl .pq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);align-items:start}
.sl .pq h3{font-size:clamp(22px,2.2vw,30px);padding-bottom:14px;border-bottom:1.5px solid var(--ink)}
.sl .pq ul{list-style:none;margin:0;padding:0}
.sl .pq li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;align-items:start;padding:17px 0;border-bottom:1px solid rgba(21,23,27,.13)}
.sl .pq li svg{color:var(--orange);margin-top:4px}
.sl .pq li p{margin:0;max-width:none;font-size:17px;line-height:1.5;color:var(--muted)}
.sl .pq li b{color:var(--ink);font-weight:700}
@media (max-width:900px){.sl .pq{grid-template-columns:minmax(0,1fr)}}
/* Chi siamo (inc/chi-siamo.php) */
.sl .chi-lead{margin-top:22px;max-width:58ch;font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--muted)}
.sl .chi{padding-top:clamp(20px,3vw,36px)}
.sl .chi .biz-b h2{font-size:clamp(28px,3vw,42px);line-height:1.02}
.sl .chi-dove{margin-top:8px;font-weight:650;color:var(--muted)}
.sl .dark .chi-dove{color:var(--muted-d)}
.sl .chi .biz-b>p{margin:0;font-size:17px;line-height:1.6;max-width:none}
.sl .chi .chi-ruolo{padding-top:16px;border-top:1px solid rgba(21,23,27,.15)}
.sl .chi .dark .chi-ruolo{border-top-color:var(--line-d)}
.sl .chi-fine{margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1.5px solid var(--ink);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px}
.sl .chi-fine p{margin:0;max-width:30ch;font-size:clamp(22px,2.4vw,30px);font-weight:800;font-stretch:var(--wide);letter-spacing:-.02em;line-height:1.1}

/* Home, «ShowLesson è per tutti»: un profilo alla volta (le linguette sono quelle dei software), con i corsi da cui partire */
.sl .pc-p{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);margin-top:26px;background:var(--paper-2);border-radius:var(--r-lg);padding:clamp(26px,3.6vw,52px)}
.sl .pc-a{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.sl .pc-a h3{font-size:clamp(26px,2.7vw,38px);line-height:1.04;max-width:18ch;text-wrap:balance}
.sl .pc-a ul,.sl .pc-c ul{list-style:none;margin:0;padding:0}
.sl .pc-a ul{display:flex;flex-direction:column;gap:12px}
.sl .pc-a li{display:flex;gap:11px;align-items:flex-start;font-size:17px;line-height:1.45}
.sl .pc-a li svg{flex:none;margin-top:3px;color:var(--orange)}
.sl .pc-a .btn{margin-top:6px}
.sl .pc-c h4{margin:0;padding-bottom:12px;border-bottom:1.5px solid var(--ink);font-size:18px;font-weight:800;font-stretch:112%;letter-spacing:-.01em}
.sl .pc-c a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;padding:16px 0;border-bottom:1px solid rgba(21,23,27,.13);text-decoration:none;color:inherit}
.sl .pc-c a>*{grid-column:1}
.sl .pc-c b{font-size:18px;font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.2}
.sl .pc-c span{margin-top:3px;color:var(--muted);font-size:15.5px;line-height:1.4}
.sl .pc-c small{margin-top:6px;color:var(--muted);font-size:13.5px;font-weight:600}
.sl .pc-c a svg{grid-column:2;grid-row:1/span 3;align-self:center;color:var(--orange);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.sl .pc-c a:hover b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.sl .pc-c a:hover svg{transform:translateX(4px)}
.sl .pc-c a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.sl .pc-p[hidden]{display:none}
/* Quattro profili: sempre tutti in vista, due per riga sul telefono (le linguette dei software invece scorrono) */
.sl .pc-t{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
.sl .pc-t .sw-t{min-width:0}
@media (max-width:640px){.sl .pc-t{grid-template-columns:repeat(2,minmax(0,1fr))}.sl .pc-t .sw-t{padding:14px 14px 13px}.sl .pc-t .sw-t b{font-size:17px}.sl .pc-t .sw-t span{font-size:13px}}
@media (max-width:900px){.sl .pc-p{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.sl .pc-c a svg{transition:none}}

/* Home, «Diventa nostro partner» */
.sl .partner{padding-top:0}
.sl .partner .dark>span{color:var(--orange)}

/* Home, registrazione dello schermo: Excel per il Web, lezione 4 «Le prime formule» (14/11/2026).
   Scena di 960×540 punti disegnata da sl_scena_html(); lo stato (0-5) è in data-k, lo imposta sl.js.
   Verde di Excel solo dove lo usa il programma (icona, scheda, selezione); i riferimenti della formula
   prendono il blu e l'arancio del sito, come Excel colora B2 e C2. */
.sl .stg-in .xv{display:none}
.sl [data-k="0"] .w0,.sl [data-k="1"] .w1,.sl [data-k="2"] .w2,.sl [data-k="3"] .w3,.sl [data-k="4"] .w4,.sl [data-k="5"] .w5{display:inline}
.sl .x-app{position:absolute;left:0;top:0;right:0;height:44px;background:#fff;border-bottom:1px solid #E6E2D9;display:flex;align-items:center;gap:10px;padding:0 16px}
.sl .x-logo{width:24px;height:24px;border-radius:6px;background:#107C41;color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.sl .x-app b{font-weight:750;font-size:15px;color:#15171B}
.sl .x-ok{display:flex;align-items:center;gap:5px;color:#6A6E76;font-size:13.5px}
.sl .x-ok svg{color:#107C41}
.sl .x-av{margin-left:auto;width:26px;height:26px;border-radius:50%;background:#DCD8CE}
.sl .x-tabs{position:absolute;left:0;right:0;top:44px;height:36px;background:#fff;display:flex;align-items:flex-end;gap:24px;padding:0 18px}
.sl .x-tabs span{padding-bottom:8px;font-weight:600;font-size:14px;color:#6A6E76;border-bottom:2.5px solid transparent}
.sl .x-tabs .on{color:#15171B;border-color:#107C41}
.sl .x-rib{position:absolute;left:0;right:0;top:80px;height:44px;background:#fff;border-bottom:1px solid #E6E2D9;display:flex;align-items:center;gap:8px;padding:0 18px}
.sl .x-rib i{width:22px;height:22px;border-radius:5px;background:#EEEBE3}
.sl .x-rib i.w{width:58px}
.sl .x-rib em{width:1px;height:24px;background:#E6E2D9;margin:0 8px}
.sl .x-fx{position:absolute;left:16px;right:16px;top:132px;height:34px;background:#fff;border:1px solid #E2DED5;border-radius:6px;display:flex;align-items:center;font-size:15px;color:#23262C;overflow:hidden}
.sl .x-nb{width:78px;align-self:stretch;display:flex;align-items:center;padding-left:10px;border-right:1px solid #E2DED5;font-weight:650;font-variant-numeric:tabular-nums}
.sl .x-fi{width:38px;align-self:stretch;display:flex;align-items:center;justify-content:center;border-right:1px solid #E2DED5;color:#8B8F96;font-style:italic;font-weight:600;font-size:14px}
.sl .x-fv{padding-left:12px;font-variant-numeric:tabular-nums}
.sl .x-b{color:#2459C9;font-weight:650}
.sl .x-o{color:#C83E22;font-weight:650}
.sl .x-grid{position:absolute;left:0;top:0;width:960px;height:540px}
.sl .x-corner,.sl .x-ch,.sl .x-rh{position:absolute;box-sizing:border-box;background:#F3F1EC;border-right:1px solid #E2DED5;border-bottom:1px solid #E2DED5;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#6A6E76;transition:background-color .3s,color .3s,box-shadow .3s}
.sl .x-corner{left:16px;top:176px;width:40px;height:28px}
.sl .x-ch{top:176px;height:28px}
.sl .x-rh{left:16px;width:40px;height:36px}
.sl [data-k="0"] .x-cA,.sl [data-k="0"] .x-r1,.sl .k1 .x-cD,.sl .k1 .x-r2,.sl .k5 .x-r3,.sl .k5 .x-r4,.sl .k5 .x-r5,.sl .k5 .x-r6{background:#E1EDE5;color:#0B5A2F}
.sl [data-k="0"] .x-cA,.sl .k1 .x-cD{box-shadow:inset 0 -2px #107C41}
.sl [data-k="0"] .x-r1,.sl .k1 .x-r2,.sl .k5 .x-r3,.sl .k5 .x-r4,.sl .k5 .x-r5,.sl .k5 .x-r6{box-shadow:inset -2px 0 #107C41}
.sl .x-cell{position:absolute;box-sizing:border-box;height:36px;display:flex;align-items:center;padding:0 10px;background:#fff;border-right:1px solid #ECE9E2;border-bottom:1px solid #ECE9E2;font-size:15px;color:#23262C;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.sl .x-cell.n{justify-content:flex-end}
.sl .x-cell.h{font-weight:700;color:#15171B}
.sl .x-cell .x-ed{margin-right:auto}
.sl .x-caret{display:inline-block;width:1.5px;height:17px;margin-left:1px;vertical-align:-3px;background:#15171B;animation:xcar 1s steps(1) infinite}
@keyframes xcar{50%{opacity:0}}
.sl .x-dv{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .45s var(--ease)}
.sl .k5 .x-dv{opacity:1;transform:none}
.sl .x-ref{position:absolute;top:240px;width:120px;height:36px;box-sizing:border-box;border:2px dashed;opacity:0;transition:opacity .25s;z-index:2}
.sl .x-rb{left:236px;border-color:#2F6FED;background:rgba(47,111,237,.07)}
.sl .x-ro{left:356px;border-color:#FF5A36;background:rgba(255,90,54,.07)}
.sl [data-k="2"] .x-rb,.sl [data-k="3"] .x-rb,.sl [data-k="3"] .x-ro{opacity:1}
.sl .x-sel{position:absolute;left:55px;top:203px;width:182px;height:38px;box-sizing:border-box;border:2px solid #107C41;z-index:3;transition:left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease),background-color .3s}
.sl .k1 .x-sel{left:475px;top:239px;width:142px}
.sl .k5 .x-sel{height:182px;background:rgba(16,124,65,.07)}
.sl .x-hdl{position:absolute;left:612px;top:272px;width:9px;height:9px;box-sizing:border-box;background:#107C41;border:1.5px solid #fff;z-index:4;opacity:0;transition:opacity .25s,top .45s var(--ease)}
.sl .k4 .x-hdl{opacity:1}
.sl .k5 .x-hdl{top:416px}
.sl .x-sh{position:absolute;left:0;right:0;top:498px;height:42px;background:#F3F1EC;border-top:1px solid #E2DED5;display:flex;align-items:flex-start;gap:6px;padding-left:56px}
.sl .x-sh .on{height:30px;padding:0 16px;display:flex;align-items:center;background:#fff;border-bottom:2.5px solid #107C41;font-weight:650;font-size:14px;color:#0B5A2F}
.sl .x-add{position:relative;width:30px;height:30px}
.sl .x-add::before,.sl .x-add::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:#6A6E76}
.sl .x-add::after{transform:rotate(90deg)}
.sl .x-toast{position:absolute;left:652px;top:300px;width:282px;height:52px;border-radius:12px;background:#15171B;color:#F7F5F0;display:flex;align-items:center;gap:10px;padding:0 16px;font-weight:650;font-size:15px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease);z-index:4}
.sl .x-toast svg{color:#FF5A36;flex:none}
.sl .k5 .x-toast{opacity:1;transform:none;transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.sl .x-caret{animation:none}}