/* ─────────────────────────────────────────────────────────────────────────
   /funzioni e /promemoria — proposta finale (10/10/2026), dal prototipo B.
   /funzioni: ogni capitolo ha UNA funzione protagonista con la sua prova
   (lente che trova il posto, vetrina, incasso col barattolo, clip), poi un
   elenco corto su due colonne (icona, titolo, una riga): niente più schede
   bianche in griglia con le celle vuote. Zappy: titolo chiaro sul verde scuro,
   cinque segnalazioni che arrivano una per volta.
   ───────────────────────────────────────────────────────────────────────── */
.fz-hero{padding:calc(var(--nav-h) + 30px) 0 56px}
@media(min-width:1024px){.fz-hero{padding:calc(var(--nav-h) + 56px) 0 80px}}
.fz-hero .hh{margin-bottom:18px}
.fz-hero .ssub{margin-bottom:26px;max-width:62ch}
@media(max-width:560px){.fz-hero .btn,.fz-hero .btn-demo{width:100%}.fz-hero .btn-demo{justify-content:flex-start}}
.indice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px;margin-top:34px;list-style:none;counter-reset:ix}
@media(min-width:768px){.indice{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ix-t{min-width:0}
.ix-t small{display:none}
/* sul computer l'indice sta a destra del titolo, in due colonne, ogni voce con la sua riga: niente metà vuota */
@media(min-width:1024px){
  .fz-hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-column-gap:56px;column-gap:56px;align-items:center}
  .fz-hero .hh{font-size:clamp(42px,3.7vw,58px)}
  .fz-hero .indice{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px}
  .fz-hero .indice a{min-height:70px;padding:10px 14px 10px 10px;font-size:16px}
  .fz-hero .ix{width:42px;height:42px;margin-right:12px}
  .ix-t small{display:block;margin-top:2px;font-size:13px;font-weight:600;line-height:1.3;color:var(--chiaro2)}
}
.indice a{display:flex;align-items:center;min-height:52px;padding:8px 12px 8px 8px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:15px;font-weight:700;line-height:1.25;color:#fff;text-decoration:none;transition:background-color var(--mv-micro) ease,border-color var(--mv-micro) ease,transform var(--mv-micro) var(--mv-c-entra)}
.indice .ix{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:10px;border-radius:11px;background:rgba(134,239,172,.14);color:var(--gl);transition:transform var(--mv-entra) var(--mv-c-entra)}
.indice .ix .ic{width:18px;height:18px}
@media(hover:hover) and (pointer:fine){.indice a:hover{background:rgba(134,239,172,.12);border-color:rgba(134,239,172,.5);transform:translate3d(0,-2px,0)}.indice a:hover .ix{transform:scale(1.1) rotate(-6deg)}}

/* la protagonista del capitolo + la seconda */
.prot{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:16px;gap:16px;margin-bottom:44px;align-items:stretch}
@media(min-width:1024px){.prot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-gap:22px;gap:22px}}
.prot-a{border-radius:28px;padding:24px 20px;background:var(--dark);color:#fff}
@media(min-width:768px){.prot-a{padding:34px 34px 30px}}
.prot-a h3,.prot-b h3{font-family:var(--fd);font-weight:800;font-size:clamp(25px,2.6vw,34px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 10px}
.prot-a>p{font-size:16.5px;line-height:1.6;color:var(--chiaro1);max-width:56ch}
.prot-a .etich{color:var(--gl);background:rgba(134,239,172,.1);border-color:rgba(134,239,172,.3)}
.prot-a.bianca{background:#fff;color:var(--t1);border:1px solid var(--linea)}
.prot-a.bianca>p{color:var(--t2)}
.prot-a.bianca .etich{color:var(--gt);background:rgba(34,197,94,.13);border-color:rgba(22,101,52,.2)}
.prot-a.bianca .link-freccia{margin-top:12px}
.prot-b{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;border-radius:28px;padding:24px 20px;background:#fff;border:1px solid var(--linea)}
@media(min-width:768px){.prot-b{padding:30px}}
.prot-b>div{flex:1 1 220px;min-width:0;margin-right:16px}
.prot-b h3{margin-top:0}
.prot-b p{font-size:16px;line-height:1.6;color:var(--t2)}
.prot-b .prot-piu{margin-top:8px}
.prot-b .clip{margin-top:12px}
.pdn-posti.chiaro li{background:var(--ivory);border:1px solid var(--linea)}
.pdn-posti.chiaro li:first-child{background:var(--g);border-color:var(--g)}
.prot-clip{align-self:center}
@media(min-width:1024px){.prot-a.bianca{align-self:center}}
/* Trova posto libero, spiegato col movimento */
.posto{margin-top:22px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:14px}
.posto .esempio-et{display:block;margin-bottom:8px}
.posto-griglia{position:relative}
.posto-r{display:grid;grid-template-columns:48px repeat(6,minmax(0,1fr));grid-gap:5px;gap:5px;align-items:center;margin-top:6px}
.posto-r:first-child{margin-top:0}
.posto-r .n{font-size:13px;font-weight:700;color:var(--chiaro1)}
.posto-r .o{font-size:11px;font-weight:700;color:var(--chiaro2);text-align:center}
.slot{height:34px;border-radius:9px;background:rgba(255,255,255,.08)}
.slot.pieno{background:rgba(134,239,172,.22)}
.slot.libero{position:relative;background:transparent;border:1.5px dashed rgba(134,239,172,.6)}
.slot.libero.trovato{background:var(--g);border-color:var(--g)}
.lente{position:absolute;left:0;top:0;width:10px;height:34px;border-radius:9px;border:2px solid #fff;box-shadow:0 0 0 4px rgba(255,255,255,.12);opacity:0;pointer-events:none}
.posto-esito{display:flex;align-items:center;margin-top:12px;font-weight:800;color:var(--gl);min-height:24px}
/* l'elenco corto: due colonne, icona, titolo, una riga; niente celle vuote */
.fz-lista{list-style:none;-webkit-columns:1;columns:1;-webkit-column-gap:48px;column-gap:48px}
@media(min-width:768px){.fz-lista{-webkit-columns:2;columns:2}}
.fz-lista>li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-column-gap:16px;column-gap:16px;padding:18px 0;border-top:1px solid var(--linea2);-webkit-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid}
.fz-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--dark);color:var(--gl);transition:transform var(--mv-entra) var(--mv-c-entra)}
.fz-ic .ic{width:20px;height:20px}
.fz-lista h3{font-family:var(--fd);font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25;margin-bottom:4px}
.fz-lista p{font-size:15.5px;line-height:1.6;color:var(--t2)}
@media(hover:hover) and (pointer:fine){.fz-lista>li:hover .fz-ic{transform:scale(1.1) rotate(-6deg)}.fz-lista>li:hover h3{color:var(--gt)}}
.fz-lista.scura>li{border-top-color:rgba(255,255,255,.14)}
.fz-lista.scura .fz-ic{background:rgba(134,239,172,.14)}
.fz-lista.scura h3{color:#fff}
.fz-lista.scura p{color:var(--chiaro1)}
@media(hover:hover) and (pointer:fine){.fz-lista.scura>li:hover h3{color:var(--gl)}}
#link .fz-lista{margin-top:56px}
.acc{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:100px;background:rgba(34,197,94,.13);color:var(--gt);font-family:var(--ff);font-size:11.5px;font-weight:800;letter-spacing:.02em;vertical-align:3px;white-space:nowrap}
.prot-conti{border-radius:30px;padding:22px 16px;margin-bottom:44px}
@media(min-width:768px){.prot-conti{padding:40px}}
.fz-p{font-size:16.5px;line-height:1.6;color:var(--chiaro1);margin-bottom:18px}
.fz-fine-conti{margin-top:22px}
.fz-riga{font-size:17px;line-height:1.6;max-width:70ch;padding-left:16px;border-left:3px solid var(--g)}
.fz-fine-conti .piccolo{margin-top:10px}
.fz-cta{margin-top:20px}
/* Zappy */
.zappy-h{max-width:22ch}
.zappy-due{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:32px;gap:32px;margin-top:20px;align-items:start}
@media(min-width:1024px){.zappy-due{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:64px;gap:64px}}
.zp{padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.zp:first-child{border-top:0;padding-top:0}
.zp h3{font-family:var(--fd);font-size:20px;font-weight:800;color:#fff;margin-bottom:4px}
.zp p{font-size:16px;line-height:1.6;color:var(--chiaro1)}
.zappy-dx .btn{margin-top:8px}
.zappy-img{margin-top:26px;width:100%;max-width:420px;border-radius:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.doppie{display:flex;flex-wrap:wrap;align-items:center;margin:10px -4px 0;min-height:40px}
.doppie span{position:relative;display:inline-block;margin:4px;padding:6px 11px;border-radius:10px;background:var(--ivory2);font-weight:700;font-size:14px}
.doppie span[hidden]{display:none}
.sistema{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0 16px;border-radius:100px;background:var(--dark);color:#fff;font-weight:800;font-size:14.5px}
.sistema.fatto{background:var(--g);color:var(--dark)}
.annulla{margin-left:10px;min-height:44px;font-weight:800;color:var(--gt);text-decoration:underline;font-size:14.5px}
.annulla[hidden]{display:none}
/* Per chi è: l'indicatore scuro scivola sotto la linguetta scelta */
.uc-tabs{position:relative;display:flex;flex-wrap:wrap;margin:0 0 18px;padding:5px;border-radius:22px;background:var(--ivory2);max-width:max-content}
.uc-tabs .ind{border-radius:17px;background:var(--dark);box-shadow:0 8px 18px -10px rgba(11,26,20,.6)}
.uc-tabs button{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:46px;padding:0 15px;border-radius:17px;font-weight:800;font-size:14.5px;color:var(--t1);transition:color var(--mv-cambio) ease}
.uc-tabs button .ic{width:18px;height:18px;margin-right:8px}
.uc-tabs button[aria-selected="true"]{color:#fff;background:var(--dark);transition:color var(--mv-cambio) ease,background-color 0s linear var(--mv-morfo)}
@media(hover:hover) and (pointer:fine){.uc-tabs button:not([aria-selected="true"]):hover{color:var(--gt)}}
.ucp{background:#fff;border:1px solid var(--linea);border-radius:26px;padding:22px 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-gap:22px;gap:22px;align-items:center}
.ucp[hidden]{display:none}
@media(min-width:900px){.ucp{padding:32px 36px}.ucp.con-foto{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:36px;gap:36px}}
.ucp img{border-radius:14px;border:1px solid var(--linea)}
.uc-t{font-family:var(--fd);font-size:24px;font-weight:800;line-height:1.25;margin-bottom:8px}
.uc-s{font-size:16px;line-height:1.6;color:var(--t2);margin-bottom:12px}
.ucck{display:flex;align-items:flex-start;font-size:16px;line-height:1.5;padding:5px 0}
.ucck .ic{color:var(--gt);width:18px;height:18px;margin:3px 10px 0 0}
.uc-sap{font-size:15px;line-height:1.55;color:var(--t2);background:var(--ivory);border-radius:12px;padding:12px 14px;margin-top:12px}
.non-fa-box{margin-top:16px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:20px;padding:18px 20px}
.non-fa-box b{display:block;font-family:var(--fd);font-size:19px;margin-bottom:4px}
.non-fa-box p{font-size:15.5px;line-height:1.6;color:#57361A}
/* Come cresce */
.cresce{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:28px;gap:28px;margin-bottom:28px}
@media(min-width:900px){.cresce{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cresce>div{border-top:3px solid var(--dark);padding-top:14px}
.cresce-n{font-family:var(--fd);font-weight:800;font-size:44px;line-height:1;color:var(--gtg)}
.cresce-t{font-family:var(--fd);font-weight:800;font-size:21px;margin:8px 0 6px}
.cresce p{font-size:16px;line-height:1.6;color:var(--t2)}
.cresce p.cresce-n{font-size:44px;line-height:1;color:var(--gt)}
.cresce-box{border-radius:28px;padding:26px 22px}
@media(min-width:768px){.cresce-box{padding:40px 44px}}
.cresce-box b{color:#fff}
.cresce-box p{color:var(--chiaro1);font-size:17px;line-height:1.65;margin:8px 0 14px;max-width:70ch}
.cresce-box .cresce-q{font-family:var(--fd);font-size:21px;font-weight:800;color:#fff}
.fondo-fz{text-align:center}
.fondo-fz .bottoni{justify-content:center}

/* ─── /promemoria ───────────────────────────────────────────────────────── */
.pm-hero{padding:calc(var(--nav-h) + 30px) 0 64px}
.pm-hero-in{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:44px;gap:44px;align-items:center}
@media(min-width:1024px){.pm-hero{padding:calc(var(--nav-h) + 48px) 0 88px}.pm-hero-in{grid-template-columns:minmax(0,1.1fr) 320px;grid-gap:72px;gap:72px}}
.fumetto{display:inline-block;position:relative;font-style:italic;font-size:18px;line-height:1.4;color:var(--t1);background:var(--carta);border-radius:18px 18px 18px 4px;padding:10px 16px;margin-bottom:20px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.pm-hero .hh{max-width:15ch;margin-bottom:18px}
.pm-hero .hero-sub{margin-bottom:22px}
@media(max-width:560px){.pm-hero .btn,.pm-hero .btn-demo{width:100%}.pm-hero .btn-demo{justify-content:flex-start}}
.pm-blocchi{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:48px 64px;gap:48px 64px}
@media(min-width:1024px){.pm-blocchi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pm-blocco .sh2{font-size:clamp(26px,5.6vw,40px)}
.pm-blocco .link-freccia{margin-top:8px}
.pm-cit{margin-top:22px;background:var(--dark)}
.pm-cit p{font-size:clamp(19px,2vw,24px)}
.pm-due-in{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:36px;gap:36px;align-items:center}
@media(min-width:900px){.pm-due-in{grid-template-columns:minmax(0,1fr) 380px;grid-gap:72px;gap:72px}}
.pm-domande{max-width:840px}
.pm-buco{border-radius:24px;padding:22px;background:#fff;border:1px solid var(--linea)}
.fondo-vivo .pm-did{color:var(--chiaro2)}