/* DigitaSito · pagine delle attività. Composizione della principale (si appoggia ai suoi fogli), vestito dell'attività:
   i colori --n-* arrivano sul <body> da modello/stili.css (genera_attivita.py). */

/* ---------------------------------------------------------------- il vestito dell'attività sopra i colori dell'area */
.att{--viola:var(--n-acc-testo);--viola-scuro:var(--n-scuro);--viola-chiaro:var(--n-acc-luce);--lavanda:var(--n-velo);--notte:var(--n-testo);--fondo:var(--n-chiaro);
  --grigio:var(--n-tenue);--grigio2:color-mix(in srgb,var(--n-tenue) 75%,#fff);background:var(--n-carta);color:var(--n-testo)}
.att .bozza{background:var(--n-chiaro);color:var(--n-tenue);border-color:color-mix(in srgb,var(--n-testo) 10%,transparent)}
.att .pannello,.att .fin,.att .prz__carta--su{
  background:radial-gradient(60% 70% at 88% 6%,color-mix(in srgb,var(--n-acc-luce) 34%,transparent),transparent 62%),
    radial-gradient(50% 60% at 0% 100%,color-mix(in srgb,var(--n-acc) 30%,transparent),transparent 70%),
    linear-gradient(140deg,var(--n-scuro) 0%,color-mix(in srgb,var(--n-scuro) 82%,var(--n-acc)) 60%,color-mix(in srgb,var(--n-scuro) 62%,var(--n-acc)) 100%)}
.att .btn--pieno{background:var(--n-scuro);color:#fff;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--n-scuro) 80%,transparent)}
.att .btn--bianco,.att .nav--chiaro .btn--nav{background:#fff;color:var(--n-scuro);box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.att .btn--bordo{color:var(--n-testo)}
.att .sz--come,.att .sz--att,.att .sz--rich,.att .sz--fin,.att .sz--alt,.att .sz--fz{background:var(--n-carta)}
.att .sz__eti,.att .dom__voce,.att .prz__carta:not(.prz__carta--su),.att .come__carta,.att .modulo2,.att .fz__voce{background:#fff}
.att .m2-stima,.att .sc15__cifra,.att .modulo2__avanza i{background:linear-gradient(135deg,var(--n-scuro),color-mix(in srgb,var(--n-scuro) 65%,var(--n-acc)))}
.att .come__mini,.att .vz{background:radial-gradient(70% 80% at 85% 10%,color-mix(in srgb,var(--n-acc) 22%,transparent),transparent 70%),linear-gradient(160deg,var(--n-velo),var(--n-chiaro))}
.att .pd{background:var(--n-scuro)}
.att .pannello h1.t em,.att .fin h2 em{background:color-mix(in srgb,var(--n-acc) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--n-acc-luce) 40%,transparent);color:#fff}

/* i titoli nel carattere dell'attività */
.att h1.t,.att .sz h2,.att .dentro__testo h3,.att .come__carta h3,.att .prz__carta h3,.att .prz__carta>b,.att .modulo2 legend,.att .dom__voce summary,
.att .alt h3,.att .modulo2__fatto h3{font-family:var(--n-font);letter-spacing:-.01em}
.att h1.t{line-height:1.14}
.att-estetista h1.t,.att-estetista .sz h2,.att-estetista .dentro__testo h3{font-weight:600;font-size:1.12em}
.att-estetista h1.t{font-size:clamp(38px,4.2vw,62px)}
.att-estetista .sz h2{font-size:clamp(36px,4.3vw,58px)}
.att-estetista .dentro__testo h3{font-size:clamp(30px,3.2vw,44px)}
.att-estetista h1.t em,.att-estetista .sz h2 em{font-style:italic}
.att-avvocato h1.t em,.att-avvocato .sz h2 em{font-style:italic}
.att-avvocato h1.t,.att-avvocato .sz h2,.att-bar h1.t,.att-bar .sz h2,.att-ristorante h1.t,.att-ristorante .sz h2{font-weight:500}
.att-ristorante h1.t,.att-ristorante .sz h2,.att-ristorante .dentro__testo h3,.att-ristorante .alt h3{font-weight:400}
.att-parrucchiere h1.t,.att-parrucchiere .sz h2,.att-parrucchiere .dentro__testo h3,.att-parrucchiere .alt h3{text-transform:uppercase;font-weight:600;letter-spacing:.005em}
.att-bar h1.t{font-size:clamp(32px,3.4vw,50px)}
.att-bar .sz h2{font-size:clamp(28px,3.2vw,44px)}
.att-bar .dentro__testo h3{font-size:clamp(24px,2.4vw,32px)}

/* ---------------------------------------------------------------- apertura */
.att__torna{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 14px 6px 10px;border-radius:999px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13.5px;font-weight:600;text-decoration:none}
.att__torna .ico{width:16px;height:16px}
.att__torna span{font-weight:500;color:rgba(255,255,255,.7)}
.att__torna:hover span{color:#fff}
.att .hg h1.t{margin-top:0}
.att .scg__chips span.on{background:var(--n-scuro)}
.nastro__riga--funzioni span .ico{width:16px;height:16px;padding:2px;border-radius:50%;background:rgba(255,255,255,.18)}

/* ---------------------------------------------------------------- i riquadri dei problemi */
.vz--mini{min-height:330px}
.mi{width:100%;max-width:380px;padding:18px;border-radius:18px;background:#fff;color:var(--n-testo);box-shadow:0 22px 44px -22px rgba(0,0,0,.35);font-size:13.5px}
.mi>b{display:block;margin-bottom:12px;font:600 16px 'Inter Tight',sans-serif}
.mi--scheda{position:relative;display:grid;gap:6px;max-width:330px}
.mi--scheda>b{margin:4px 0 0;font-size:18px}
.mi__tag{justify-self:start;padding:3px 10px;border-radius:999px;background:var(--n-velo);color:var(--n-acc-testo);font-size:11px;font-weight:600}
.mi--scheda small{color:var(--n-tenue)}
.mi__stato{display:inline-flex;align-items:center;gap:6px;color:#16A34A;font-size:12.5px;font-weight:600}
.mi__stato i{width:8px;height:8px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.mi__mappa{position:relative;height:96px;margin:6px 0 4px;overflow:hidden;border-radius:12px;background-color:var(--n-chiaro);
  background-image:linear-gradient(color-mix(in srgb,var(--n-testo) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--n-testo) 9%,transparent) 1px,transparent 1px);background-size:16px 16px}
.mi__mappa::before{content:"";position:absolute;left:-10%;right:-10%;top:58%;height:10px;background:#fff;transform:rotate(-8deg)}
.mi__mappa i{position:absolute;left:48%;top:24%;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--n-scuro);box-shadow:0 0 0 4px #fff}
.mi__bt{display:block;padding:10px;border-radius:12px;background:var(--n-scuro);color:#fff;text-align:center;font-weight:600}
.mi--tabella table{width:100%;border-collapse:collapse}
.mi--tabella th{padding:0 0 8px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n-tenue)}
.mi--tabella th:last-child,.mi--tabella td:last-child{text-align:right}
.mi--tabella td{padding:10px 0;border-top:1px dashed color-mix(in srgb,var(--n-testo) 16%,transparent)}
.mi--tabella td:last-child{font-weight:700;color:var(--n-acc-testo)}
.mi--messaggi ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mi--messaggi li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--n-carta)}
.mi--messaggi li.nuovo{background:var(--n-velo);box-shadow:inset 3px 0 0 var(--n-acc)}
.mi__ico{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:#fff;color:var(--n-acc-testo)}
.mi__ico .ico{width:16px;height:16px}
.mi--messaggi li div{flex:1;min-width:0}
.mi--messaggi li b{display:block;font-size:13px}
.mi--messaggi li small{display:block;color:var(--n-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi--messaggi li em{font-style:normal;font-size:11.5px;color:var(--n-tenue)}
.dentro__num{text-transform:none}

/* ---------------------------------------------------------------- cosa c'è dentro */
.fz__griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fz__voce{display:flex;align-items:center;gap:12px;padding:18px;border-radius:18px;border:1px solid color-mix(in srgb,var(--n-testo) 8%,transparent);box-shadow:0 12px 30px -24px rgba(0,0,0,.4)}
.fz__voce i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--n-velo);color:var(--n-acc-testo)}
.fz__voce i .ico{width:18px;height:18px}
.fz__voce b{font-size:14.5px;line-height:1.35}

/* ---------------------------------------------------------------- meno spazio fra le sezioni (skill approdo-sezione-2, 17 ottobre)
   Alfredo: «tra la sezione dell'hero e l'inizio di questa sezione meno spazi, e idem tra tutte le varie sezioni»: circa la metà */
.att .sz{padding-top:clamp(36px,4vw,60px);padding-bottom:clamp(36px,4vw,60px)}
.ds-s2{position:relative}

/* ---------------------------------------------------------------- le altre attività */
.sz--alt{padding-top:0;padding-bottom:0}
.alt{display:grid;gap:14px;padding:26px;border-radius:24px;background:var(--n-chiaro)}
.alt h3{margin:0;font-size:22px}
.alt__lista{display:flex;flex-wrap:wrap;gap:8px}
.alt__voce{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;color:var(--n-testo);text-decoration:none;font-size:14.5px;
  border:1px solid color-mix(in srgb,var(--n-testo) 8%,transparent);transition:transform .2s}
.alt__voce:hover{transform:translateY(-2px)}
.alt__voce .ico{width:17px;height:17px;color:var(--n-acc-testo)}
.alt__voce--tutte{background:var(--n-scuro);color:#fff}
.alt__voce--tutte .ico{color:#fff}

@media (max-width:1100px){.fz__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .fz__griglia{grid-template-columns:1fr}
  .att__torna span{display:none}
  .mi{padding:14px}
}
.hg .gr--g>.testo>.att__torna{align-self:flex-start}