/* ─────────────────────────────────────────────────────────────────────────
   IL SITO — proposta finale «teatro» (10/10/2026), dal prototipo B.
   Le parti comuni delle tre pagine: colori, caratteri, barra in alto, bottoni,
   scene scure (fondo vivo) e chiare che si alternano, il linguaggio del
   movimento (studio 3: sboccia, viaggia, si posa, si firma, si scioglie +
   respira, entra in scena, si accende, conta), la barra in basso, i cookie,
   il piè di pagina. Le parti di ogni pagina: casa.css e funzioni.css.
   Regole: solo transform e opacity nelle animazioni; ombre e filtri già
   disegnati (si accende la loro opacità); per i telefoni vecchi niente inset,
   niente gap nei flex, niente :has(), color-mix(), linear().
   Solo tema chiaro (come registrati, accedi, /giro e la demo).
   ───────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'DM Sans fb';src:local('Arial'),local('ArialMT');font-weight:300 500;size-adjust:103.7%;ascent-override:95.5%;descent-override:29.9%;line-gap-override:0%}
@font-face{font-family:'DM Sans fb';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 800;size-adjust:100.8%;ascent-override:98.2%;descent-override:30.8%;line-gap-override:0%}
@font-face{font-family:'Bricolage fb';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 800;size-adjust:99%;ascent-override:94%;descent-override:27.3%;line-gap-override:0%}
:root{
  color-scheme:only light;
  --g:#22C55E;--g2:#16A34A;--g3:#00BF63;--gt:#166534;--gtg:#15803D;--gl:#86EFAC;--gl2:#4ADE80;
  --dark:#0B1A14;--dark2:#13261C;--dark3:#07120D;
  --ivory:#F5F0E8;--ivory2:#EDE7DC;--carta:#FFFCF7;--white:#FFFFFF;
  --t1:#141210;--t2:#5E5853;--t3:#6B6560;
  --linea:rgba(20,18,16,.10);--linea2:rgba(20,18,16,.16);
  --chiaro1:rgba(255,255,255,.86);--chiaro2:rgba(255,255,255,.74);
  --ff:'DM Sans','DM Sans fb',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fd:'Bricolage Grotesque','Bricolage fb','DM Sans','DM Sans fb',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nav-h:64px;
  /* MOVIMENTO: i token della firma del 04/10 + quelli del sito (studio 3) */
  --mv-premuto:100ms;--mv-micro:160ms;--mv-cambio:180ms;--mv-entra:240ms;--mv-esce:170ms;--mv-morfo:300ms;--mv-viaggio:320ms;
  --mv-volo:640ms;--mv-conta:700ms;--mv-scena:640ms;--mv-scala:80ms;--mv-respiro-a:28s;--mv-respiro-b:36s;
  /* i passaggi di scena del sito: devono vedersi (Michele, 10/10: 450-900 ms); le risposte al mouse restano rapide */
  --mv-via:360ms;--mv-arriva:560ms;--mv-indice:460ms;--mv-scambia-via:260ms;--mv-scambia-arriva:440ms;
  --mv-c-entra:cubic-bezier(.23,1,.32,1);--mv-c-pannello:cubic-bezier(.32,.72,0,1);--mv-c-viaggio:cubic-bezier(.77,0,.175,1);--mv-c-respiro:cubic-bezier(.37,0,.63,1);
  --mv-d2:8px;--mv-d4:24px;
}
@media(min-width:1024px){:root{--nav-h:72px}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ivory);scroll-padding-top:calc(var(--nav-h) + 8px);scroll-padding-bottom:104px}
@media(prefers-reduced-motion:no-preference){html:not([data-mv="fermo"]){scroll-behavior:smooth}}
body{font-family:var(--ff);font-size:16px;line-height:1.6;background:var(--ivory);color:var(--t1);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(min-width:1024px){body{font-size:17px}}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--g2);outline-offset:3px;border-radius:8px}
.fondo-vivo :focus-visible,#nav :focus-visible,.piede :focus-visible,.barra :focus-visible{outline-color:var(--gl)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.solo-lettore{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.ancora{display:block;position:relative;top:0;height:0;visibility:hidden}
/* le ancore arrivano sotto la barra in alto (scroll-padding-top di html + questi 4 px); col Tab il campo scelto resta sopra la barra in basso (scroll-padding-bottom) */
section[id],[id^="faq-"],.atto[id]{scroll-margin-top:4px}


/* ─── contenitori e testi ─────────────────────────────────────────────── */
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 32px}}
@media(min-width:1200px){.wrap{padding:0 40px}}
.sez{position:relative;padding:64px 0}
@media(min-width:1024px){.sez{padding:112px 0}}
.sc-carta{background:var(--carta)}
.sc-avorio{background:var(--ivory)}
.sc-avorio2{background:var(--ivory2)}
.occh{display:block;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gt);margin-bottom:14px}
.fondo-vivo .occh{color:var(--gl)}
.occh .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:10px;border-radius:50%;background:var(--dark);color:var(--gl);font-size:13px;letter-spacing:0;vertical-align:1px}
.fondo-vivo .occh .n{background:var(--g);color:var(--dark)}
.hh{font-family:var(--fd);font-weight:800;font-size:clamp(30px,8.4vw,44px);line-height:1.03;letter-spacing:-.035em;color:var(--t1)}
@media(min-width:1024px){.hh{font-size:clamp(46px,4.3vw,72px)}}
.fondo-vivo .hh{color:#fff}
.sh2{font-family:var(--fd);font-weight:800;font-size:clamp(29px,7.4vw,40px);line-height:1.05;letter-spacing:-.03em;color:var(--t1);margin-bottom:18px;max-width:20ch;text-wrap:balance}
@media(min-width:1024px){.sh2{font-size:clamp(40px,3.5vw,58px);max-width:18ch}}
.fondo-vivo .sh2{color:#fff}
.ssub{font-size:17px;line-height:1.62;color:var(--t2);max-width:60ch}
@media(min-width:1024px){.ssub{font-size:19px}}
.fondo-vivo .ssub{color:var(--chiaro1)}
.testa{margin-bottom:34px}
@media(min-width:1024px){.testa{margin-bottom:52px}}
.centro{text-align:center}
.centro .sh2,.centro .ssub{margin-left:auto;margin-right:auto}
.piccolo{font-size:14.5px;line-height:1.6;color:var(--t2)}
.fondo-vivo .piccolo{color:var(--chiaro2)}
.link-freccia{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--gt);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:100% 2px;background-position:0 calc(100% - 8px)}
.link-freccia .fr{display:inline-block;margin-left:6px;transition:transform var(--mv-micro) var(--mv-c-entra)}
.link-freccia:hover .fr{transform:translate3d(4px,0,0)}
.fondo-vivo .link-freccia{color:var(--gl)}
.etich{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.03em;line-height:1.3;color:var(--gt);background:rgba(34,197,94,.13);border:1px solid rgba(22,101,52,.2);border-radius:100px;padding:5px 11px}
.fondo-vivo .etich{color:var(--gl);background:rgba(134,239,172,.1);border-color:rgba(134,239,172,.3)}
.etichette{display:flex;flex-wrap:wrap;margin:-4px}
.etichette>*{margin:4px}
.esempio-et{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.fondo-vivo .esempio-et,.cv.scura .esempio-et{color:rgba(255,255,255,.74)}
.dal-conto{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--gt);text-decoration:none;border-bottom:1.5px dashed rgba(22,101,52,.4)}
.dal-conto:empty{display:none}
.fondo-vivo .dal-conto{color:var(--gl);border-bottom-color:rgba(134,239,172,.45)}

/* ─── bottoni: il principale, il «Provala», quelli su scuro ─────────────── */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border-radius:100px;background:var(--dark);color:#fff;font-weight:800;font-size:16.5px;line-height:1.2;text-decoration:none;text-align:center;box-shadow:0 10px 26px -12px rgba(11,26,20,.6);transition:transform var(--mv-micro) var(--mv-c-entra),background-color var(--mv-micro) ease}
.btn::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:0 16px 40px -10px rgba(34,197,94,.7);opacity:0;transition:opacity var(--mv-esce) var(--mv-c-entra);pointer-events:none}
.btn-verde{background:var(--g);color:var(--dark);box-shadow:0 12px 30px -12px rgba(34,197,94,.7)}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translate3d(0,-2px,0)}
  .btn:hover::after{opacity:1;transition:opacity var(--mv-entra) var(--mv-c-entra)}
  .btn:not(.btn-verde):hover{background:#123A28}
  .btn-verde:hover{background:var(--gl2)}
}
.btn:active,.btn-demo:active,.premi:active{transform:scale(.97);transition-duration:var(--mv-premuto)}
/* «Provala senza registrarti»: un bottone vero, ovunque (non più avorio su avorio) */
.btn-demo{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:54px;padding:8px 22px 8px 9px;border-radius:100px;text-decoration:none;color:var(--t1);background:#fff;border:2px solid var(--dark);font-weight:800;font-size:16.5px;line-height:1.15;text-align:left;transition:transform var(--mv-micro) var(--mv-c-entra),background-color var(--mv-micro) ease,border-color var(--mv-micro) ease}
.btn-demo .play{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-right:12px;border-radius:50%;background:var(--g);color:var(--dark);transition:transform var(--mv-entra) var(--mv-c-entra)}
.btn-demo .play svg{width:14px;height:14px;margin-left:2px;fill:currentColor}
.btn-demo small{display:block;font-weight:600;font-size:13px;color:var(--t2);margin-top:1px}
.fondo-vivo .btn-demo{border-color:#fff}
@media(hover:hover) and (pointer:fine){.btn-demo:hover{background:#F0FDF4;border-color:var(--g2)}.btn-demo:hover .play{transform:scale(1.1)}}
.btn-demo.grande{min-height:72px;padding:10px 30px 10px 12px;font-size:19px}
.btn-demo.grande .play{width:50px;height:50px}
.btn-demo.grande .play svg{width:18px;height:18px}
.btn-chiaro{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 24px;border-radius:100px;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:700;font-size:16px;text-decoration:none;text-align:center;transition:transform var(--mv-micro) var(--mv-c-entra),border-color var(--mv-micro) ease,background-color var(--mv-micro) ease}
@media(hover:hover) and (pointer:fine){.btn-chiaro:hover{border-color:var(--gl);background:rgba(134,239,172,.1)}}
.btn-linea{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 24px;border-radius:100px;border:2px solid var(--dark);color:var(--t1);background:#fff;font-weight:800;font-size:16px;text-decoration:none;text-align:center;transition:transform var(--mv-micro) var(--mv-c-entra),background-color var(--mv-micro) ease}
@media(hover:hover) and (pointer:fine){.btn-linea:hover{background:#F0FDF4}}
.bottoni{display:flex;flex-wrap:wrap;align-items:center;margin:-6px}
.bottoni>*{margin:6px}
.nota-btn{font-size:14px;line-height:1.55;color:var(--t2);margin-top:14px;max-width:52ch}
.fondo-vivo .nota-btn{color:var(--chiaro2)}
.riflesso-l{position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(134,239,172,.55) 50%,rgba(255,255,255,0) 100%)}

/* ─── barra in alto (scura su tutte le pagine) ──────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);background:var(--dark);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{max-width:1240px;height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center}
@media(min-width:768px){.nav-in{padding:0 32px}}
@media(min-width:1200px){.nav-in{padding:0 40px}}
.nav-logo{display:flex;align-items:center;min-height:44px;margin-right:auto;text-decoration:none;transition:transform var(--mv-micro) var(--mv-c-entra)}
.nav-logo img{width:128px}
@media(min-width:1024px){.nav-logo img{width:144px}}
@media(max-width:380px){.nav-logo img{width:108px}}
@media(hover:hover) and (pointer:fine){.nav-logo:hover{transform:scale(1.03)}}
.nav-links{list-style:none;display:flex;align-items:center}
.nav-links a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 11px;font-size:15px;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:11px;right:11px;bottom:8px;height:2px;border-radius:2px;background:var(--g);transform:scaleX(0);transform-origin:left center;transition:transform var(--mv-entra) var(--mv-c-entra)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* «Accedi» di nuovo colorato: pastiglia verde tenue col bordo verde pieno (sul telefono resta accanto al logo);
   non fa concorrenza a «Prova gratis 14 giorni», che è verde pieno */
.nav-accedi{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin-left:8px;border-radius:100px;border:1.5px solid var(--gl);background:rgba(134,239,172,.15);color:#fff;font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color var(--mv-micro) ease,border-color var(--mv-micro) ease,transform var(--mv-micro) var(--mv-c-entra)}
@media(hover:hover) and (pointer:fine){.nav-accedi:hover{background:rgba(134,239,172,.28)}}
.nav-accedi:active{transform:scale(.97);transition-duration:var(--mv-premuto)}
.nav-cta{min-height:44px;padding:10px 20px;font-size:15px;margin-left:10px;white-space:nowrap}
.nav-ham{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;color:#fff;margin-left:6px}
.nav-ham .ic{width:24px;height:24px}
.nav-ham .chiudi{display:none}
.nav-ham[aria-expanded="true"] .apri{display:none}
.nav-ham[aria-expanded="true"] .chiudi{display:block}
@media(max-width:979px){
  .nav-ham{display:inline-flex}
  .nav-cta{display:none}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--dark);padding:8px 16px 18px;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .nav-links.aperto{display:flex;animation:menuGiu 320ms var(--mv-c-pannello) both}
  .nav-links a{min-height:50px;font-size:17px;padding:0 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-links a::after{display:none}
  .nav-links li:last-child a{border-bottom:0}
}
@media(max-width:359px){.nav-accedi{padding:0 13px}}
@keyframes menuGiu{from{opacity:0;transform:translate3d(0,-12px,0)}to{opacity:1;transform:none}}

/* ─── RESPIRA: il verde scuro con le macchie sfocate (quello di Accedi, protagonista) ─── */
.fondo-vivo{position:relative;overflow:hidden;background-color:var(--dark);color:#fff;isolation:isolate}
.fv-luci{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.3;transition:opacity 1400ms var(--mv-c-entra)}
.fondo-vivo.luci .fv-luci{opacity:1}
/* il bordo alto e basso in px (non in %): se la sezione cambia altezza gli strati non «si spostano» (CLS) */
.fv-strato{position:absolute;top:-160px;right:-14%;bottom:-160px;left:-14%;pointer-events:none}
.fv-a{background:radial-gradient(ellipse 58% 52% at 22% 30%,rgba(34,197,94,.22) 0%,rgba(34,197,94,0) 62%),radial-gradient(ellipse 46% 50% at 84% 80%,rgba(34,197,94,.14) 0%,rgba(34,197,94,0) 60%)}
.fv-b{background:radial-gradient(ellipse 40% 46% at 72% 20%,rgba(0,191,99,.16) 0%,rgba(0,191,99,0) 62%),radial-gradient(ellipse 52% 40% at 28% 88%,rgba(134,239,172,.08) 0%,rgba(134,239,172,0) 60%)}
.fv-griglia{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.034) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 42%,#000 18%,transparent 76%);mask-image:radial-gradient(ellipse 85% 80% at 50% 42%,#000 18%,transparent 76%)}
/* ogni fondo scuro ha le sue macchie: le sezioni scure di fila non sembrano la stessa */
#link .fv-a,#zappy .fv-a,.zappy .fv-a{background:radial-gradient(ellipse 50% 50% at 82% 24%,rgba(34,197,94,.22) 0%,rgba(34,197,94,0) 62%),radial-gradient(ellipse 46% 52% at 14% 82%,rgba(34,197,94,.13) 0%,rgba(34,197,94,0) 60%)}
#incasso .fv-a,#storia .fv-a,.prot-conti .fv-a{background:radial-gradient(ellipse 56% 46% at 20% 76%,rgba(34,197,94,.21) 0%,rgba(34,197,94,0) 62%),radial-gradient(ellipse 40% 52% at 88% 16%,rgba(0,191,99,.15) 0%,rgba(0,191,99,0) 60%)}
#demo .fv-a,#prova .fv-a,.fondo-fz .fv-a{background:radial-gradient(ellipse 60% 55% at 50% 38%,rgba(34,197,94,.2) 0%,rgba(34,197,94,0) 64%),radial-gradient(ellipse 42% 40% at 50% 100%,rgba(134,239,172,.1) 0%,rgba(134,239,172,0) 60%)}
@keyframes mvRespiroA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.08)}}
@keyframes mvRespiroB{from{transform:translate3d(0,0,0) scale(1.05);opacity:.75}to{transform:translate3d(-5%,4%,0) scale(1);opacity:1}}
html[data-mv="pieno"] .fondo-vivo.in-vista .fv-a{will-change:transform;animation:mvRespiroA var(--mv-respiro-a) var(--mv-c-respiro) infinite alternate}
html[data-mv="pieno"] .fondo-vivo.in-vista .fv-b{will-change:transform,opacity;animation:mvRespiroB var(--mv-respiro-b) var(--mv-c-respiro) infinite alternate}
/* a scheda nascosta il respiro si ferma (la regola deve pesare più di quella che lo accende) */
html.mv-nascosta[data-mv] .fondo-vivo.in-vista .fv-strato{animation-play-state:paused}
/* SI ACCENDE: l'alone verde che segue il mouse (la «ombra verde» di prima, rifatta su transform) */
.fv-alone{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(74,222,128,.18) 0%,rgba(74,222,128,.06) 34%,rgba(74,222,128,0) 64%);opacity:0;will-change:transform;transition:opacity var(--mv-esce) var(--mv-c-entra)}
.fv-alone.on{opacity:1;transition:opacity var(--mv-entra) var(--mv-c-entra)}
html[data-mv="leggero"] .fv-alone{display:none}

/* ─── ENTRA IN SCENA (una volta, anche quello già in vista all'apertura) ─── */
html.mv-js .rivela{opacity:0;transform:translateY(var(--mv-d4))}
html.mv-js .rivela.su{opacity:1;transform:none;transition:opacity var(--mv-scena) var(--mv-c-entra),transform var(--mv-scena) var(--mv-c-entra)}
html.mv-js .rivela.subito-visibile{opacity:1}
html.mv-js .rivela.su.al-fuoco{transition:none}
html.mv-js .rivela.da-sx{transform:translateX(-28px)}
html.mv-js .rivela.da-dx{transform:translateX(28px)}
html.mv-js .rivela.sboccia-e{transform:translateY(28px) scale(.96)}
html.mv-js .rivela.da-sx.su,html.mv-js .rivela.da-dx.su,html.mv-js .rivela.sboccia-e.su{transform:none}
.titolo-sale .riga{display:block}
html.mv-js .titolo-sale .riga{transform:translateY(.42em)}
html.mv-js .titolo-sale.su .riga{transform:none;transition:transform 720ms var(--mv-c-entra)}
html.mv-js .titolo-sale.su .riga:nth-child(2){transition-delay:70ms}
html.mv-js .titolo-sale.su .riga:nth-child(3){transition-delay:140ms}
/* «verde sottolineato»: il titolo dell'apertura e, uguale, le frasi da far notare negli altri titoli.
   Su fondo chiaro il testo è il verde scuro del marchio (6,2:1 sull'avorio, 6,9:1 sulla carta) e la riga è il verde pieno;
   su fondo scuro il testo è il verde chiaro. La riga si «scrive» da sinistra (transform e opacity) quando il titolo entra. */
.sottolinea{position:relative;white-space:nowrap;color:var(--gt)}
.fondo-vivo .sottolinea{color:var(--gl)}
.sottolinea::after{content:'';position:absolute;left:0;right:0;bottom:.02em;height:.09em;min-height:3px;border-radius:3px;background:var(--g2);transform-origin:left center}
.fondo-vivo .sottolinea::after{background:var(--g)}
html.mv-js .sottolinea::after{transform:scaleX(.02);opacity:0}
html.mv-js .titolo-sale.su .sottolinea::after,html.mv-js .rivela.su .sottolinea::after{transform:none;opacity:1;transition:transform 700ms var(--mv-c-viaggio) 420ms,opacity 120ms linear 420ms}
/* una frase lunga in due pezzi (finisce a capo senza uscire dal riquadro): la riga del secondo pezzo parte quando finisce il primo */
.sottolinea+.sottolinea::after{transition-delay:800ms,800ms!important}
/* il primo pezzo prende anche lo spazio che lo separa dal secondo (la riga resta continua quando stanno sulla stessa riga) */
.sottolinea.sott-a{padding-right:.3em;margin-right:-.3em}

/* ─── CONTA: il rullo delle cifre (le cifre le disegna il CSS: nel testo c'è solo il numero vero) ─── */
.cf{white-space:nowrap;font-variant-numeric:tabular-nums}
.cf .cf-vis{display:inline-block;line-height:1.1;white-space:nowrap}
.cf .cf-in,.cf .cf-sep{display:inline;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit}
.cf .cf-sep::before{content:attr(data-c)}
.cf .cf-col{position:relative;display:inline-block;margin:0;padding:0}
.cf .cf-fant{display:inline;visibility:hidden}
.cf .cf-fant::before{content:'0'}
.cf .cf-fin{position:absolute;top:0;left:0;right:0;bottom:0;display:block;overflow:hidden}
.cf .cf-str{position:absolute;top:0;left:0;right:0;display:block;text-align:center}
.cf .cf-str::before{content:'0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9';white-space:pre;display:block;line-height:1.1}

/* ─── VOLA, SBOCCIA, SI FIRMA, SI SCIOGLIE (firma 04/10) ────────────────── */
.mv-voli{position:fixed;left:0;top:0;width:0;height:0;z-index:9999;pointer-events:none;contain:layout style}
.mv-vola{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;will-change:transform}
.mv-vola-y{will-change:transform}
.mv-vola-in{will-change:transform,opacity}
.pillola-volo{display:inline-block;padding:7px 14px;border-radius:100px;white-space:nowrap;background:var(--g);color:var(--dark);font-family:var(--fd);font-weight:800;font-size:18px;line-height:1.1;box-shadow:0 10px 24px -8px rgba(11,26,20,.45)}
.pillola-volo.piccola{font-size:15px;padding:5px 11px;background:var(--gl)}
.pillola-volo.rosa{background:#FBCFE8;color:#831843;font-size:15px}
.mv-onda{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:rgba(255,255,255,.6);opacity:0;pointer-events:none}
@keyframes mvSboccia{from{opacity:0;transform:translate3d(0,12px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes mvSpunta{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mvSale{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes mvScambiaVia{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes mvScambiaArriva{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.sboccia{animation:mvSboccia var(--mv-morfo) var(--mv-c-pannello) both}
.spunta-mv{display:inline-block;animation:mvSpunta 180ms var(--mv-c-entra) 40ms both}
.sale-mv{animation:mvSale var(--mv-entra) var(--mv-c-entra) both}
.scambia-via{animation:mvScambiaVia var(--mv-scambia-via) var(--mv-c-entra) both}
.scambia-arriva{animation:mvScambiaArriva var(--mv-scambia-arriva) var(--mv-c-pannello) both}
.ind{position:absolute;left:0;top:0;pointer-events:none;transition:transform var(--mv-indice) var(--mv-c-pannello)}
.premi{-webkit-tap-highlight-color:transparent;transition:transform var(--mv-micro) var(--mv-c-entra),background-color var(--mv-micro) ease,border-color var(--mv-micro) ease,color var(--mv-micro) ease}

/* ─── SI ACCENDE (2): le schede col mouse ───────────────────────────────── */
.cv{position:relative;isolation:isolate}
.cv::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;z-index:-1;box-shadow:0 26px 50px -24px rgba(11,26,20,.42),0 2px 8px rgba(11,26,20,.06);opacity:0;transition:opacity var(--mv-esce) var(--mv-c-entra)}
.cv-luce{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.cv-alone{position:absolute;left:0;top:0;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.2) 0%,rgba(34,197,94,.06) 36%,rgba(34,197,94,0) 64%);opacity:0;transition:opacity var(--mv-esce) var(--mv-c-entra);will-change:transform}
.fondo-vivo .cv-alone,.cv.scura .cv-alone{background:radial-gradient(circle,rgba(74,222,128,.24) 0%,rgba(74,222,128,.07) 36%,rgba(74,222,128,0) 64%)}
.cv>*:not(.cv-luce){position:relative;z-index:1}
@media(hover:hover) and (pointer:fine){
  html[data-mv="pieno"] .cv,html[data-mv="leggero"] .cv{transition:transform 320ms var(--mv-c-entra),border-color 320ms ease}
  html[data-mv="pieno"] .cv:hover{transform:translate3d(0,-4px,0)}
  html[data-mv="pieno"] .cv:hover::before,html[data-mv="leggero"] .cv:hover::before{opacity:1;transition:opacity var(--mv-entra) var(--mv-c-entra)}
  html[data-mv="pieno"] .cv.luce-on .cv-alone{opacity:1;transition:opacity var(--mv-entra) var(--mv-c-entra)}
}

/* ─── le clip (copertina; al tocco il video) ─────────────────────────────── */
/* GRANDI (Michele, 10/10 sera: «troppo piccoli e non si vedono»): sul telefono tutta la larghezza utile (fino a 400 px),
   sul computer 380 px (le clip sono verticali: 380 px di larghezza sono circa 713 px di altezza) */
.clip{width:100%;max-width:400px;margin:0 auto;min-width:0}
@media(min-width:768px){.clip{max-width:380px}}
.clip-b,.clip video{display:block;width:100%;border-radius:26px;background:var(--ivory2);box-shadow:0 26px 56px -20px rgba(11,26,20,.45)}
/* più clip insieme: una riga a tutta larghezza sotto la scena, centrate; sul telefono una sotto l'altra, ognuna larga come la pagina */
.clip-riga{display:flex;flex-wrap:wrap;justify-content:center;margin:44px -12px 0}
.clip-riga .clip{flex:0 1 380px;margin:12px}
@media(max-width:767px){.clip-riga{margin-top:32px}}
.clip-b{position:relative;overflow:hidden;cursor:pointer;transition:transform var(--mv-entra) var(--mv-c-entra)}
.clip-b img{width:100%;transition:transform 600ms var(--mv-c-entra)}
.clip-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--g);color:var(--dark);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -6px rgba(11,26,20,.55);transition:transform var(--mv-entra) var(--mv-c-entra)}
.clip-play svg{width:24px;height:24px;margin-left:3px;fill:currentColor}
@media(hover:hover) and (pointer:fine){.clip-b:hover{transform:translate3d(0,-4px,0)}.clip-b:hover img{transform:scale(1.04)}.clip-b:hover .clip-play{transform:scale(1.12)}}
.clip-b:active .clip-play{transform:scale(.94)}
.clip figcaption{font-size:14px;color:var(--t2);text-align:center;margin-top:12px;line-height:1.45}
.fondo-vivo .clip figcaption{color:var(--chiaro2)}

/* ─── il telefono disegnato (scene) ─────────────────────────────────────── */
.tel{position:relative;width:300px;max-width:100%;margin:0 auto;border-radius:42px;padding:11px;background:#0d1512;box-shadow:0 50px 90px -36px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08) inset}
.tel-schermo{position:relative;border-radius:32px;overflow:hidden;background:#FBF8F3;color:#1d1b19;height:560px}
.tel-tacca{position:absolute;left:50%;top:17px;width:88px;height:22px;margin-left:-44px;border-radius:100px;background:#0d1512;z-index:5}
.sch{position:absolute;top:0;left:0;right:0;bottom:0;padding:52px 16px 16px;overflow:hidden}
.sch[hidden]{display:none}
.dito{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(11,26,20,.2);border:2px solid rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(0,0,0,.3);pointer-events:none;opacity:0;z-index:8}
.tel .esempio-tel{position:absolute;left:0;right:0;bottom:-34px;text-align:center}

/* ─── domande ───────────────────────────────────────────────────────────── */
.faq{max-width:840px;margin:0 auto;border-top:1px solid var(--linea2)}
.faqi{border-bottom:1px solid var(--linea2)}
.faqi h3,.faqi h4{font:inherit}
.faqq{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:18px 0;text-align:left;font-family:var(--fd);font-size:19px;font-weight:700;line-height:1.35;color:var(--t1);transition:color var(--mv-micro) ease}
@media(min-width:1024px){.faqq{font-size:21px}}
.faqq::after{content:'+';flex-shrink:0;width:36px;height:36px;margin-left:14px;border-radius:50%;background:#fff;border:1px solid var(--linea2);display:flex;align-items:center;justify-content:center;font-family:var(--ff);font-size:22px;font-weight:500;color:var(--gt);transition:transform var(--mv-entra) var(--mv-c-entra),background-color var(--mv-micro) ease}
@media(hover:hover) and (pointer:fine){.faqq:hover{color:var(--gt)}.faqq:hover::after{transform:rotate(90deg)}}
.faqq[aria-expanded="true"]::after{content:'\2212';background:var(--dark);border-color:var(--dark);color:#fff}
.faqa{padding:0 0 22px}
.faqa[hidden]{display:none}
.faqa>*{animation:mvSale 180ms var(--mv-c-entra) both}
.faqa p{font-size:16.5px;line-height:1.7;color:var(--t2);max-width:68ch}
.faqa p+p{margin-top:10px}
.faqa a{color:var(--gt);font-weight:700}
.sotto-d{border-top:1px solid var(--linea)}
.sotto-d .faqq{font-family:var(--ff);font-size:16.5px;min-height:54px;padding:12px 0}
.sotto-d .faqq::after{width:30px;height:30px;font-size:18px}
.sotto-d .faqa{padding-bottom:14px}

/* ─── chiusura e piè di pagina ──────────────────────────────────────────── */
.chiusura{text-align:center}
.chiusura .sh2{margin:0 auto 16px;max-width:16ch}
.chiusura .ssub{margin:0 auto 28px}
.chiusura .bottoni{justify-content:center}
footer.piede{color:var(--chiaro1);padding:64px 0 32px}
.piede-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:24px 16px;gap:24px 16px}
.piede-g>div:first-child{grid-column:1/-1}
@media(max-width:340px){.piede-g{grid-template-columns:minmax(0,1fr)}}
@media(min-width:768px){.piede-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.piede-g{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}.piede-g>div:first-child{grid-column:auto}}
.piede-logo{display:inline-flex;min-height:44px;align-items:center}
.piede-logo img{width:140px}
.piede-tag{font-size:15px;line-height:1.6;margin-top:10px;max-width:34ch}
.piede-t{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.piede ul{list-style:none}
.piede li a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;font-size:15.5px;color:var(--chiaro1);text-decoration:none;transition:color var(--mv-micro) ease}
.piede li a:hover{color:var(--gl)}
.piede-fondo{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:var(--chiaro2)}
.piede-fondo a{color:inherit}
.mv-stato{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.62)}
.piede-min{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.piede-min>*{margin:4px 10px}
.piede-min a{display:inline-flex;align-items:center;min-height:44px;color:var(--chiaro1);text-decoration:none;font-size:15px}
.piede-min a:hover{color:var(--gl)}
/* lo spazio per la barra in basso c'è sempre (in fondo al piè di pagina): quando compare non si reimpagina niente */
footer.piede{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
@media(min-width:768px){footer.piede{padding-bottom:120px}}

/* ─── la barra in basso: su TUTTE le pagine, a tutte le larghezze ─────────── */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:800;display:flex;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(11,26,20,.97);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -10px 30px rgba(11,26,20,.25);transform:translate3d(0,115%,0);transition:transform var(--mv-via) var(--mv-c-entra)}
.barra.on{transform:translate3d(0,calc(-1 * var(--ck-alza,0px)),0);transition:transform var(--mv-arriva) var(--mv-c-pannello)}
.barra .btn{flex:1;min-height:46px;padding:9px 14px;font-size:16px}
.barra-frase{display:none}
/* il tasto per scriverci: un fumetto nostro (niente marchio di WhatsApp) con la parola «Scrivici», anche sul telefono */
.barra-chat{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:52px;height:46px;margin-left:10px;padding:0 14px 0 12px;border-radius:100px;border:1.5px solid var(--gl);background:rgba(134,239,172,.12);color:#fff;font-weight:800;font-size:15px;text-decoration:none;transition:background-color var(--mv-micro) ease,transform var(--mv-micro) var(--mv-c-entra)}
.barra-chat .ic{width:22px;height:22px;color:var(--gl)}
.barra-chat span{margin-left:7px}
@media(max-width:339px){.barra-chat span{display:none}}
@media(hover:hover) and (pointer:fine){.barra-chat:hover{background:rgba(134,239,172,.24)}}
.barra-chat:active{transform:scale(.97);transition-duration:var(--mv-premuto)}
.barra-frase b{color:#fff}
@media(min-width:768px){
  /* sul computer: una capsula scura in basso al centro, che dice il passo dopo */
  .barra{left:50%;right:auto;bottom:18px;width:720px;max-width:calc(100% - 40px);height:66px;padding:9px 9px 9px 24px;border-radius:100px;border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 50px -14px rgba(0,0,0,.55);transform:translate3d(-50%,160%,0)}
  .barra.on{transform:translate3d(-50%,calc(-1 * var(--ck-alza,0px)),0)}
  .barra .btn{flex:none;min-height:48px;padding:10px 22px;font-size:15.5px}
  .barra-frase{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto;min-width:0;margin-right:16px;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--chiaro1)}
}

/* ─── striscia dei cookie (in alto sul telefono, in basso a destra dai 561 px) ─── */
#ckb{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;width:calc(100% - 48px);max-width:680px;background:#fff;border:1px solid rgba(20,18,16,.12);border-radius:18px;box-shadow:0 8px 40px rgba(20,18,16,.18);padding:18px 22px;display:flex;align-items:center;flex-wrap:wrap;font-family:var(--ff)}
#ckb.hide,.ck-ok #ckb{display:none}
.ckb-text{flex:1;min-width:200px;font-size:14px;color:var(--t2);line-height:1.55;margin:4px 16px 4px 0}
.ckb-actions{display:flex;align-items:center;flex-shrink:0}
.ckb-ok{background:var(--dark);color:#fff;border-radius:100px;min-height:44px;padding:10px 22px;font-size:14px;font-weight:700}
.ckb-info{color:var(--gt);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
/* dai 561 px: una striscia bassa in fondo al centro; finché è aperta la barra «Prova gratis» le sta sopra
   (--ck-alza: la misura lo script dei cookie di ogni pagina) */
@media(min-width:561px) and (min-height:501px){
  #ckb{bottom:16px;max-width:640px;padding:10px 12px 10px 22px;flex-wrap:nowrap;border-radius:100px}
  .ckb-text{flex:1 1 auto;min-width:0;margin:0 14px 0 0;font-size:14px;line-height:1.4}
  .ckb-ok{white-space:nowrap}
}
@media(max-width:560px),(max-height:500px){
  #ckb{position:relative;top:auto;bottom:auto;left:auto;right:auto;transform:none;z-index:850;width:auto;max-width:none;margin:var(--nav-h) 0 0;border-width:0 0 1px;border-radius:0;box-shadow:none;padding:4px 10px 4px 16px;flex-wrap:nowrap}
  .ckb-text{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.4;margin:0 10px 0 0}
  .ckb-ok{min-height:40px;padding:8px 15px;font-size:13.5px;white-space:nowrap}
  html:not(.ck-ok) #ckb:not(.hide) ~ main > section:first-child{padding-top:24px}
}

/* ─── FERMO: «riduci movimento» (dal sistema) o ?movimento=fermo ──────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.mv-js .rivela,html.mv-js .titolo-sale .riga{opacity:1!important;transform:none!important}
  html.mv-js .sottolinea::after{transform:none!important;opacity:1!important}
  .fv-alone,.riflesso-l,.mv-vola{display:none!important}
  .fv-luci{opacity:1!important}
}
html[data-mv="fermo"] *,html[data-mv="fermo"] *::before,html[data-mv="fermo"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-mv="fermo"] .rivela,html[data-mv="fermo"] .titolo-sale .riga{opacity:1!important;transform:none!important}
html[data-mv="fermo"] .sottolinea::after{transform:none!important;opacity:1!important}
html[data-mv="fermo"] .fv-alone,html[data-mv="fermo"] .riflesso-l,html[data-mv="fermo"] .mv-vola{display:none!important}
html[data-mv="fermo"] .fv-luci{opacity:1}