/* Monitoraggio ufficio — foglio di stile unico.
   Veste rifatta l'11/08/2026 sul modello «3D Creator» scelto da Antonio:
   fondo nero #0C0C0C, carattere Kanit, titoli enormi in maiuscolo con la
   sfumatura grigio → azzurrino, angoli molto tondi, pulsante con la sfumatura
   viola/arancio. Il tasto chiaro/scuro resta: al chiaro il mondo si ribalta
   (fondo bianco, testo nero) tenendo lo stesso linguaggio.

   Il carattere sta qui dentro (public/statico) e non su un sito di terzi: così la
   pagina si apre uguale anche se Google è lento, e non chiede niente a nessuno.
   In coda resta l'indirizzo originale, per sicurezza. */
@font-face{font-family:'Kanit';font-weight:300;font-style:normal;font-display:swap;
  src:url('/statico/kanit-300.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4-ORWnVaE.woff2') format('woff2')}
@font-face{font-family:'Kanit';font-weight:500;font-style:normal;font-display:swap;
  src:url('/statico/kanit-500.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5mOBWnVaE.woff2') format('woff2')}
@font-face{font-family:'Kanit';font-weight:700;font-style:normal;font-display:swap;
  src:url('/statico/kanit-700.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWnVaE.woff2') format('woff2')}
@font-face{font-family:'Kanit';font-weight:900;font-style:normal;font-display:swap;
  src:url('/statico/kanit-900.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4WPBWnVaE.woff2') format('woff2')}

/* ============================================================== colori === */
:root{
  --sf:#0C0C0C; --sf2:#161616; --carta:#141414; --carta2:#1c1c1c;
  --bordo:#242424; --bordo2:#343a3f;
  --testo:#D7E2EA; --testo2:#98a3ad; --testo3:#79838c;
  --acc:#5cbcff; --acc2:#ca45ff; --acc3:#fe881b; --accSf:#12233a;
  --ok:#3ddc84; --att:#ffb443; --no:#ff6b6b;
  --ombra:0 2px 10px #00000059, 0 1px 34px #0000003d;
  --ombra2:0 10px 34px #00000073, 0 2px 60px #00000059;
  /* la sfumatura dei titoli, come nel modello */
  --sfumatura:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);
  /* quella colorata: pulsante pieno, numeri importanti, stellina */
  --viva:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);
  --viva2:linear-gradient(100deg,#2ba7ff 0%,#ca45ff 48%,#fe881b 100%);
  /* la sezione che si ribalta (bianca al buio, nera alla luce) */
  --sezSf:#FFFFFF; --sezTesto:#0C0C0C; --sezBordo:rgba(12,12,12,.15); --sezCarta:#F2F3F4;
  --r:28px; --rG:clamp(28px,3.4vw,56px); --lato:264px;
  color-scheme:dark;
}
:root[data-tema="chiaro"]{
  --sf:#FFFFFF; --sf2:#F2F3F5; --carta:#F5F6F7; --carta2:#EAECEF;
  --bordo:rgba(12,12,12,.12); --bordo2:rgba(12,12,12,.24);
  --testo:#0C0C0C; --testo2:#4a5158; --testo3:#6c757d;
  --acc:#1478d4; --acc2:#a327d8; --acc3:#d96b00; --accSf:#eaf3ff;
  --ok:#12a150; --att:#c77700; --no:#e5484d;
  --ombra:0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a;
  --ombra2:0 6px 18px #3f4a7e14, 0 2px 48px #3f4a7e24;
  --sfumatura:linear-gradient(180deg,#0C0C0C 0%,#5a646e 100%);
  --sezSf:#0C0C0C; --sezTesto:#D7E2EA; --sezBordo:rgba(215,226,234,.18); --sezCarta:#161616;
  color-scheme:light;
}

/* ============================================================== base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--sf)}
html,body,input,select,textarea,button{font-family:'Kanit','Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
body{
  color:var(--testo); font-size:15px; font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; overflow-x:clip;
}
h1,h2,h3{margin:0 0 .35em;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(30px,4vw,58px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
h2{font-size:clamp(19px,1.8vw,27px);font-weight:500}
h3{font-size:clamp(15px,1.25vw,19px);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
a{color:var(--acc)}
b,strong{font-weight:500}
.mono,td,th,.val{font-variant-numeric:tabular-nums}
.mut{color:var(--testo3)}
.ok{color:var(--ok)} .no{color:var(--no)} .att{color:var(--att)}
.nascosto{display:none!important}

/* i titoli in sfumatura, come nel modello */
.sfumato,.testata h1{
  background-image:var(--sfumatura);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.testata h1 .sfumato{background-image:var(--viva2)}

/* la pillola con la stellina */
.pillola{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--carta2); color:var(--testo);
  border:1px solid var(--bordo); border-radius:999px;
  padding:7px 18px; font-size:.74rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
}
.pillola::before{
  content:""; width:17px; height:16px; flex:0 0 auto;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.50037 3.66955C7.53221 2.82462 6.41758 2.275 5.333 2.07887C4.11096 1.85888 2.84987 2.0826 1.96658 2.95885C1.10056 3.81944 0.866218 5.04172 1.06751 6.23193C1.24778 7.29835 1.7803 8.39907 2.60501 9.35959C2.41536 10.1071 2.46371 10.8946 2.7434 11.6137C3.02308 12.3327 3.52035 12.9481 4.16678 13.375C4.81321 13.802 5.57702 14.0195 6.35308 13.9976C7.12915 13.9758 7.87933 13.7157 8.50037 13.2531C9.12146 13.7161 9.87183 13.9765 10.6482 13.9985C11.4245 14.0205 12.1886 13.8029 12.8352 13.3758C13.4819 12.9487 13.9792 12.3331 14.2588 11.6137C14.5384 10.8943 14.5865 10.1065 14.3965 9.35884C15.2204 8.39832 15.753 7.29835 15.9325 6.23119C16.1338 5.04098 15.8994 3.81944 15.0334 2.9596C14.1501 2.0826 12.889 1.85888 11.667 2.07962C10.5824 2.275 9.46854 2.82537 8.50037 3.66955Z' fill='%23ca45ff'/%3E%3C/svg%3E");
}

/* la testata di ogni pagina */
.testata{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;margin:0 auto 40px;max-width:64rem}
.testata h1{margin:0;font-size:clamp(34px,6.4vw,96px);line-height:.95}
.testata .sottotitolo{margin:0;color:var(--testo2);font-weight:300;
  font-size:clamp(13px,1.05vw,16.5px);max-width:70ch}
.testata + .riga{justify-content:center}

/* comparsa dolce (la fa animazioni.js) */
.fade{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.25,.1,.25,1),transform .7s cubic-bezier(.25,.1,.25,1)}
.fade.dax{transform:translateX(-80px)}     /* arriva da sinistra */
.fade.dadx{transform:translateX(80px)}     /* arriva da destra */
.fade.dentro{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}

/* ============================================================ impianto === */
/* minmax(0,…) e non 1fr: altrimenti una tabella larga allarga tutta la pagina
   e sul telefono si scorre di lato. Vale anche per il figlio della griglia. */
#tutto{display:grid;grid-template-columns:var(--lato) minmax(0,1fr);min-height:100%}
#tutto > div{min-width:0;overflow-x:clip}

aside{
  background:var(--sf); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:26px 18px;
  border-right:1px solid var(--bordo);
}
.marchio{display:flex;gap:12px;align-items:center;padding:2px 8px 26px}
.marchio .sigla{
  width:44px;height:44px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--viva);color:#fff;font-weight:700;font-size:17px;
}
.marchio b{display:block;font-size:.86rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.marchio small{display:block;color:var(--testo3);font-size:.78rem;font-weight:300}

nav.menu{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
nav.menu button{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;color:var(--testo2);padding:11px 16px;border-radius:999px;
  cursor:pointer;font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:.09em;
  transition:opacity .2s,color .2s;
}
nav.menu button:hover{opacity:.7}
nav.menu button.on{background:var(--carta2);color:var(--testo)}
nav.menu button i{font-style:normal;font-size:1.05rem;width:20px;text-align:center;letter-spacing:0}
nav.menu .gruppo{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--testo3);
  padding:18px 16px 7px;font-weight:500}

.fondo{padding-top:12px;margin-top:10px;border-top:1px solid var(--bordo)}

/* barra in alto */
header.barra{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--sf) 88%,transparent);
  backdrop-filter:blur(10px);
  display:flex;gap:10px;align-items:center;padding:16px clamp(16px,3vw,40px);flex-wrap:wrap;
  border-bottom:1px solid var(--bordo);
}
header.barra .titolo{font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.16em}
header.barra .spazio{flex:1}
main{--padX:clamp(16px,3vw,40px);
  padding:clamp(18px,2vw,30px) var(--padX) 90px;max-width:1480px;margin:0 auto;width:100%}

/* barra in basso, solo telefono */
nav.basso{display:none}
@media(max-width:900px){
  #tutto{grid-template-columns:minmax(0,1fr)}
  aside{display:none}
  main{--padX:15px;padding:14px 15px 96px}
  header.barra{padding:12px 15px}
  nav.basso{
    display:grid;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:color-mix(in srgb,var(--sf) 92%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--bordo);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  nav.basso button{
    background:none;border:0;color:var(--testo3);display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:7px 2px;font-size:.6rem;font-weight:500;cursor:pointer;border-radius:14px;
    text-transform:uppercase;letter-spacing:.06em;
  }
  nav.basso button i{font-style:normal;font-size:1.25rem;letter-spacing:0}
  nav.basso button.on{color:var(--testo);background:var(--carta2)}
}

/* ========================================================= L'INGRESSO ==== */
/* Il saluto grande: «CIAO ANTONIO». Il carattere si stringe da solo secondo la
   lunghezza del nome (--lung, il numero di lettere), così sta sempre su una riga. */
.eroe{
  position:relative; display:flex; flex-direction:column;
  min-height:min(84vh,780px); margin:0 0 30px; overflow:clip;
}
/* con una faccia quadra al posto della figura intera l'ingresso è più basso:
   se no resterebbe un buco fra il saluto e la foto */
.eroe.bassa{min-height:min(68vh,620px)}
.eroe .saluto{overflow:hidden;padding-top:clamp(4px,2vw,26px)}
.eroe h1{
  margin:0; font-weight:900; text-transform:uppercase; letter-spacing:-.03em;
  line-height:.86; white-space:nowrap; width:100%;
  font-size:min(17.5vw, calc((100vw - var(--lato) - 2*var(--padX)) / (var(--lung,10) * .56)));
}
@media(max-width:900px){.eroe h1{font-size:min(17vw, calc((100vw - 30px) / (var(--lung,10) * .56)))}}
.eroe .sotto{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-top:auto;padding-bottom:clamp(18px,3vw,42px);position:relative;z-index:12;
}
.eroe .sotto p{
  margin:0;color:var(--testo2);font-weight:300;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.35;font-size:clamp(.75rem,1.4vw,1.2rem);
  max-width:clamp(170px,22vw,300px);
}
.eroe .sotto p b{color:var(--testo);font-weight:500}
.eroe .figura{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:5;
  width:clamp(250px,32vw,440px);pointer-events:none;
}
/* height:auto o l'altezza scritta nell'attributo allunga la figura */
.eroe .figura img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
/* le facce quadrate (foto, sticker) stanno più basse e più piccole della
   figura intera della mascotte, e hanno gli angoli tondi come le schede */
.eroe .figura.quadra{width:clamp(190px,24vw,330px);bottom:clamp(10px,3vw,40px)}
.eroe .figura.quadra img{border-radius:var(--rG)}
.magnete{will-change:transform;transition:transform .6s ease-in-out}
@media(max-width:640px){
  .eroe,.eroe.bassa{min-height:auto}
  .eroe .figura{position:relative;left:auto;transform:none;margin:18px auto -6px;width:min(260px,62vw)}
  .eroe .figura.quadra{bottom:auto;width:min(230px,58vw)}
  .eroe .sotto{margin-top:14px;flex-direction:column;align-items:flex-start}
}

/* ================================================== LA STRISCIA CHE SCORRE */
.striscia{margin:clamp(30px,5vw,70px) calc(-1 * var(--padX));padding:0;overflow:clip}
.striscia .fila{display:flex;gap:12px;margin-bottom:12px;width:max-content;will-change:transform}
.piastrella{
  width:clamp(210px,20vw,300px);flex:0 0 auto;border-radius:var(--r);
  background:var(--carta);border:1px solid var(--bordo);padding:18px 20px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:132px;
}
.piastrella .p-eti{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--testo3);font-weight:500}
.piastrella .p-val{font-size:clamp(20px,2vw,30px);font-weight:900;letter-spacing:-.02em;line-height:1}
.piastrella .p-sotto{font-size:.76rem;color:var(--testo2);font-weight:300}
.piastrella.viva{background:var(--viva);border-color:transparent;color:#fff}
.piastrella.viva .p-eti,.piastrella.viva .p-sotto{color:#ffffffbb}

/* ============================================== IL RACCONTO (a lettere) === */
.racconto{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(28px,4vw,54px);
  padding:clamp(50px,7vw,110px) clamp(0px,11vw,200px);overflow:clip}
.racconto h2{font-size:clamp(2.4rem,9vw,120px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.9;margin:0;position:relative;z-index:2;
  background-image:var(--sfumatura);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* pre-wrap: il testo è spezzato lettera per lettera e gli spazi vanno tenuti,
   ma la frase deve poter andare a capo lo stesso */
.racconto .testo{max-width:620px;font-size:clamp(1rem,2vw,1.3rem);font-weight:500;line-height:1.65;
  color:var(--testo);margin:0;position:relative;z-index:2;white-space:pre-wrap}
.racconto .testo .c{opacity:.2;transition:opacity .12s linear}
.racconto .deco{position:absolute;pointer-events:none;user-select:none;display:block;height:auto}
.racconto .d1{top:2%;left:0;width:clamp(84px,12vw,180px)}
.racconto .d2{bottom:6%;left:4%;width:clamp(70px,10vw,150px)}
.racconto .d3{top:2%;right:0;width:clamp(84px,12vw,180px)}
.racconto .d4{bottom:6%;right:4%;width:clamp(78px,11vw,165px)}
/* sul telefono non c'è spazio: gli oggetti finirebbero sopra le parole */
@media(max-width:820px){.racconto .deco{display:none}}

/* ======================================== LA SEZIONE CHE SI RIBALTA ======= */
.ribalta{
  background:var(--sezSf);color:var(--sezTesto);
  margin:clamp(30px,5vw,60px) calc(-1 * var(--padX)) 0;
  border-radius:var(--rG) var(--rG) 0 0;
  padding:clamp(44px,6vw,96px) var(--padX);
}
.ribalta h2{font-size:clamp(2.4rem,9vw,120px);font-weight:900;text-transform:uppercase;
  text-align:center;letter-spacing:-.03em;line-height:.9;margin:0 0 clamp(34px,5vw,72px);color:var(--sezTesto)}
.voci{max-width:66rem;margin:0 auto}
.voce{display:flex;gap:clamp(14px,2.5vw,36px);align-items:flex-start;
  padding:clamp(20px,2.6vw,40px) 0;border-top:1px solid var(--sezBordo);width:100%;
  background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;color:inherit;
  font-family:inherit;cursor:pointer}
.voce:last-child{border-bottom:1px solid var(--sezBordo)}
.voce .n{font-size:clamp(2.4rem,7vw,110px);font-weight:900;line-height:.8;letter-spacing:-.04em;
  flex:0 0 auto;opacity:.92}
.voce .d{display:flex;flex-direction:column;gap:8px;padding-top:.25em;min-width:0}
.voce .d b{font-size:clamp(1rem,2.2vw,1.9rem);font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.voce .d span{font-size:clamp(.85rem,1.5vw,1.1rem);font-weight:300;line-height:1.6;opacity:.62;max-width:52rem}
.voce:hover .d b{opacity:.7}

/* =================================== LE SCHEDE CHE SI IMPILANO =========== */
.impila{background:var(--sf);border-radius:var(--rG) var(--rG) 0 0;
  margin:calc(-1 * clamp(30px,4vw,56px)) calc(-1 * var(--padX)) 0;
  padding:clamp(40px,5vw,80px) var(--padX) 0;position:relative;z-index:10}
.impila h2{font-size:clamp(2.4rem,9vw,120px);font-weight:900;text-transform:uppercase;text-align:center;
  letter-spacing:-.03em;line-height:.9;margin:0 0 clamp(20px,3vw,40px);
  background-image:var(--sfumatura);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.pila{height:76vh;min-height:440px;position:relative}
@media(max-width:900px){.pila{height:auto;min-height:0;margin-bottom:20px}}
.pcarta{
  position:sticky;top:96px;border:2px solid var(--bordo2);border-radius:var(--rG);
  background:var(--carta);padding:clamp(16px,2vw,30px);will-change:transform;
}
@media(max-width:900px){.pcarta{position:static;transform:none!important}}
.pcarta .alto{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:clamp(14px,2vw,26px)}
.pcarta .alto .n{font-size:clamp(2.4rem,6vw,96px);font-weight:900;line-height:.8;letter-spacing:-.04em}
.pcarta .alto .t{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px;padding-top:.3em}
.pcarta .alto .t small{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--testo3);font-weight:500}
.pcarta .alto .t b{font-size:clamp(1.05rem,2.2vw,1.9rem);font-weight:500;text-transform:uppercase}
.pcarta .basso{display:grid;grid-template-columns:40fr 60fr;gap:clamp(10px,1.4vw,18px)}
@media(max-width:700px){.pcarta .basso{grid-template-columns:minmax(0,1fr)}}
.pcarta .col{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px)}
.pcarta .cella{background:var(--carta2);border-radius:var(--rG);padding:clamp(16px,2vw,28px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.pcarta .cella .eti{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--testo3);font-weight:500}
.pcarta .cella .val{font-size:clamp(22px,3vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1}
.pcarta .cella .sotto{font-size:.8rem;color:var(--testo2);font-weight:300}
.pcarta .cella.alta{min-height:clamp(160px,22vw,340px)}
.pcarta .cella.bassa{min-height:clamp(120px,15vw,220px)}
.pcarta .col > .cella:only-child{flex:1}

/* ============================================================ elementi === */
.scheda{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r);
  padding:clamp(16px,1.7vw,28px);margin-bottom:18px}
.scheda > h2,.scheda > h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aiuto{font-size:clamp(12.5px,1vw,15px);color:var(--testo3);margin:2px 0 16px;max-width:90ch;font-weight:300}
.griglia{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}

.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:22px}
@media(max-width:640px){.numeri{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.numero{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r);
  padding:18px 20px;min-width:0}
.numero .eti{font-size:.64rem;text-transform:uppercase;letter-spacing:.15em;color:var(--testo3);
  margin-bottom:8px;font-weight:500}
.numero .val{font-size:clamp(21px,2.1vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.numero .sotto{font-size:.8rem;color:var(--testo2);margin-top:6px;font-weight:300}
/* il numero forte va in sfumatura, ma solo se non ha già un colore suo
   (verde/rosso del margine): altrimenti la sfumatura coprirebbe il segnale */
.numero.forte .val:not([style]){background-image:var(--viva2);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media(max-width:640px){.numero{padding:14px 15px}.numero .eti{font-size:.58rem}}
.asta{height:5px;border-radius:999px;background:var(--sf2);margin-top:12px;overflow:hidden}
.asta i{display:block;height:100%;border-radius:999px}

.bollo{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:500;
  white-space:nowrap;letter-spacing:.03em}
.bollo.b-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.bollo.b-att{background:color-mix(in srgb,var(--att) 18%,transparent);color:var(--att)}
.bollo.b-no{background:color-mix(in srgb,var(--no) 16%,transparent);color:var(--no)}
.bollo.b-neutro{background:var(--carta2);color:var(--testo2)}

button.b,.b{
  background:transparent;border:2px solid var(--bordo2);color:var(--testo);
  padding:10px 24px;border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:500;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  text-transform:uppercase;letter-spacing:.14em;transition:background .2s,opacity .2s;
  font-family:inherit;
}
button.b:hover,.b:hover{background:color-mix(in srgb,var(--testo) 10%,transparent)}
/* i modificatori valgono anche sui collegamenti travestiti da tasto
   («Apri fuori», «Chiama», «Vai al portale»): prima li prendeva solo <button>,
   e un <a class="b piccolo"> restava grande come gli altri */
button.b.pieno,a.b.pieno{
  background:var(--viva);border-color:transparent;color:#fff;
  outline:2px solid #fff;outline-offset:-3px;
  box-shadow:0 4px 4px rgba(181,1,167,.25), 4px 4px 12px #7721B1 inset;
  padding:12px 30px;
}
button.b.pieno:hover,a.b.pieno:hover{opacity:.88;background:var(--viva)}
button.b.piano,a.b.piano{border-color:transparent;background:transparent;color:var(--testo2)}
button.b.piccolo,a.b.piccolo{padding:7px 15px;font-size:.7rem;border-width:1px}
button.b.rosso,a.b.rosso{color:var(--no);border-color:color-mix(in srgb,var(--no) 45%,transparent)}
button.b[disabled]{opacity:.4;cursor:not-allowed}
button.b:focus-visible,.b:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

input,select,textarea{
  background:var(--carta2);border:1px solid var(--bordo2);color:var(--testo);
  border-radius:14px;padding:10px 14px;font-size:.9rem;font-weight:300;outline:none;max-width:100%;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc2);cursor:pointer}
input[type=color]{padding:2px;width:46px;height:36px}
option{background:var(--carta)}
/* l'etichettina sopra un campo. Vale anche su un div: sopra i sette tasti del
   titolo non c'è una casella sola da etichettare, ma la scritta dev'essere quella */
.campo{display:flex;flex-direction:column;gap:6px;font-size:.64rem;color:var(--testo3);
  text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.riga{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.nota{background:var(--carta2);border:1px solid var(--bordo);border-radius:18px;padding:14px 18px;
  font-size:.87rem;color:var(--testo2);margin:12px 0;font-weight:300}
.nota.avviso{background:color-mix(in srgb,var(--att) 14%,transparent);color:var(--testo);border-color:transparent}
.vuoto{text-align:center;color:var(--testo3);padding:40px 18px;font-weight:300}

/* elenchi con la spunta e la croce */
.elenco{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.elenco li{display:flex;align-items:flex-start;gap:12px;background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--r);
  padding:clamp(12px,.97vw,16px) clamp(14px,1.25vw,20px);font-weight:300}
.elenco li::before{content:"";width:clamp(16px,1.25vw,20px);height:clamp(16px,1.25vw,20px);
  flex:0 0 auto;margin-top:3px;background:no-repeat center/contain}
.elenco.si li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233ddc84'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.1' fill='none' stroke='%230C0C0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.elenco.no li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ff6b6b'/%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4' fill='none' stroke='%230C0C0C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.elenco.no li{color:var(--testo3)}

/* tabelle */
.tab{overflow-x:auto;border-radius:20px;background:var(--carta2)}
table{border-collapse:collapse;width:100%;font-size:.86rem;font-weight:300}
th,td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--bordo);white-space:nowrap}
th{background:var(--carta);color:var(--testo3);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.14em;font-weight:500;position:sticky;top:0;z-index:2}
th.sx,td.sx{text-align:left}
tbody tr:last-child td{border-bottom:0}
tr.tot td{font-weight:500;background:var(--carta);border-top:1px solid var(--bordo2)}
tr.sep td{background:var(--carta);font-weight:500;color:var(--testo2);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.12em}
tr.mia td{background:color-mix(in srgb,var(--acc) 10%,transparent)}
td input{width:106px;text-align:right;padding:7px 11px;font-size:.85rem;border-radius:11px}
td input.largo{width:100%;min-width:150px;text-align:left}
td input.mini{width:80px}
.punto{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}

/* ------------------------------------------------- i controlli della home
   La prima pagina non saluta più: dice cosa non torna. Ogni controllo è una
   riga con la sua striscia colorata a sinistra — rosso da guardare subito,
   giallo da guardare, verde a posto. */
h2.sezione{margin:34px 0 16px;font-size:clamp(17px,1.5vw,23px);color:var(--testo2);
  text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.controlli{margin-bottom:26px}
/* i cinque numeri del periodo stanno su una riga sola dove c'è posto: sono
   pensati per essere letti tutti insieme, non a due a due */
@media(min-width:1180px){.numeri.cinque{grid-template-columns:repeat(5,minmax(0,1fr))}}
.lista-ctrl{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ctrl{background:var(--carta);border:1px solid var(--bordo);border-left:5px solid var(--bordo2);
  border-radius:var(--r);padding:18px 22px}
.ctrl.liv-2{border-left-color:var(--no)}
.ctrl.liv-1{border-left-color:var(--att)}
.ctrl.liv-0{border-left-color:var(--ok);opacity:.82}
.ctrl-t{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctrl-t b{font-size:clamp(15px,1.3vw,19px);font-weight:500;line-height:1.25}
.ctrl-d{margin:8px 0 12px;color:var(--testo2);font-weight:300;max-width:85ch;font-size:.92rem}
.altri-ctrl{margin-top:12px}
.altri-ctrl > summary,.altTab > summary{cursor:pointer;list-style:none;color:var(--testo3);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500;
  padding:10px 0;display:flex;align-items:center;gap:8px}
.altri-ctrl > summary::-webkit-details-marker,.altTab > summary::-webkit-details-marker{display:none}
.altri-ctrl > summary::before,.altTab > summary::before{content:"▸";transition:transform .15s;display:inline-block}
.altri-ctrl[open] > summary::before,.altTab[open] > summary::before{transform:rotate(90deg)}
.altri-ctrl > summary:hover,.altTab > summary:hover{color:var(--testo)}
.altri-ctrl > summary:focus-visible,.altTab > summary:focus-visible{outline:2px solid var(--acc);
  outline-offset:3px;border-radius:8px}
.altri-ctrl .lista-ctrl{margin-top:6px}
.altTab{margin-top:14px}

/* il perché del semaforo, dentro la tabella: sul telefono la parola da sola
   non basta, quindi la spiegazione va a capo sotto */
.perche{display:block;font-size:.7rem;color:var(--testo3);font-weight:300;
  white-space:normal;max-width:34ch;margin-top:4px}
.aiuto.nota{margin:-8px 0 22px}

/* «Cosa questo sito non sa» */
.mancano .buchi{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mancano .buchi li{background:var(--carta2);border-radius:20px;padding:16px 18px}
.mancano .buchi b{display:block;margin-bottom:6px;font-weight:500}
.mancano .buchi span{color:var(--testo3);font-size:.86rem;font-weight:300;line-height:1.5}

/* sul telefono «chi porta cosa» smette di essere una tabella da trascinare di
   lato e diventa una scheda per persona: nove colonne su 380px non le legge
   nessuno, e lo scorrimento orizzontale fa perdere la prima colonna, cioè il nome */
@media(max-width:760px){
  .tab-persone{overflow:visible;background:transparent;border-radius:0}
  .tab-persone table,.tab-persone tbody,.tab-persone tr,.tab-persone td{display:block;width:auto}
  .tab-persone thead{display:none}
  .tab-persone tr{background:var(--carta2);border-radius:20px;padding:14px 18px;margin-bottom:12px}
  .tab-persone tr.tot{background:var(--carta);border:1px solid var(--bordo2)}
  .tab-persone td{border:0;padding:7px 0;white-space:normal;text-align:right;
    display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  .tab-persone td::before{content:attr(data-eti);color:var(--testo3);font-size:.64rem;
    text-transform:uppercase;letter-spacing:.12em;text-align:left;flex:0 0 auto;font-weight:500}
  .tab-persone td.sx{display:block;font-size:1.05rem;font-weight:500;
    padding:0 0 11px;margin-bottom:5px;border-bottom:1px solid var(--bordo)}
  .tab-persone td.sx::before{content:none}
  .tab-persone .perche{max-width:none;text-align:right;flex:1 1 100%}
  .tab-persone td[data-eti="Stato"]{flex-wrap:wrap}
}

/* solo per chi legge con la voce */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* grafici */
.tela{position:relative;width:100%}
canvas{width:100%;display:block}
canvas:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:12px}
.suggerimento{position:absolute;pointer-events:none;background:var(--carta2);border:1px solid var(--bordo2);
  border-radius:14px;padding:10px 14px;font-size:.78rem;box-shadow:var(--ombra2);opacity:0;
  transition:opacity .12s;z-index:20;white-space:nowrap;color:var(--testo);font-weight:300}
.suggerimento b{display:block;margin-bottom:4px;color:var(--acc);font-size:.76rem;font-weight:500}
.suggerimento i.q{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:.72rem;color:var(--testo2);margin-top:12px;
  justify-content:center;text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.legenda i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;vertical-align:middle}

/* ============================================================== accesso == */
#accesso{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:100vh;padding:clamp(16px,3vw,40px);background:var(--sf);overflow:clip}
#accesso .titolone{
  font-size:min(16vw,120px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.86;text-align:center;margin:0 0 clamp(18px,3vw,34px);white-space:nowrap;
  background-image:var(--sfumatura);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
#accesso .riquadro{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--rG);
  text-align:center;padding:clamp(26px,3vw,42px) clamp(20px,2.5vw,36px);width:100%;max-width:440px}
#accesso .sigla{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;margin:0 auto 20px;
  background:var(--viva);color:#fff;font-size:26px}
#accesso h1{margin-bottom:10px;font-size:clamp(19px,2vw,26px);letter-spacing:.04em}
#accesso p{color:var(--testo3);font-size:.9rem;margin:0 0 24px;font-weight:300}
#accesso input{width:100%;font-size:1.35rem;text-align:center;letter-spacing:.24em;font-weight:500;
  padding:15px 10px;text-transform:uppercase;border-radius:18px}
#accesso button{width:100%;margin-top:16px;padding:15px;font-size:.82rem;justify-content:center}
#accesso .msg{min-height:1.3em;margin-top:14px;text-align:center;font-size:.85rem;font-weight:300}
#accesso .coda{margin-top:22px;text-align:center;color:var(--testo3);font-size:.74rem;line-height:1.8;font-weight:300}

/* messaggini in basso a destra */
#avvisi{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:9px}
@media(max-width:900px){#avvisi{bottom:88px;left:15px;right:15px}}
/* il colore del testo segue la carta, non è fisso bianco: al chiaro il fondo
   diventa scuro e un bianco fisso sparirebbe */
.avviso{background:var(--testo);color:var(--sf);padding:13px 20px;border-radius:999px;font-size:.8rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  box-shadow:var(--ombra2);animation:su .18s ease-out}
.avviso.male{background:var(--no);color:#0C0C0C}
.avviso.bene{background:var(--ok);color:#0C0C0C}
@keyframes su{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* finestrella */
#velo{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:150;display:grid;place-items:center;padding:18px;
  backdrop-filter:blur(4px)}
#velo .finestra{background:var(--carta);border:1px solid var(--bordo2);border-radius:var(--rG);
  padding:clamp(20px,2.2vw,32px);width:100%;max-width:580px;max-height:86vh;overflow:auto;box-shadow:var(--ombra2)}

.caricamento{padding:70px 20px;text-align:center;color:var(--testo3);font-weight:300;
  text-transform:uppercase;letter-spacing:.16em;font-size:.78rem}
.caricamento::after{content:"";display:block;width:26px;height:26px;margin:18px auto 0;
  border:3px solid var(--bordo);border-top-color:var(--acc2);border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

@media print{
  aside,header.barra,nav.basso,.nostampa,.eroe .figura,.striscia,.racconto .deco{display:none!important}
  body{background:#fff;color:#000}
  main{padding:0;max-width:none}
  .scheda,.numero,.pcarta,.ctrl{box-shadow:none;break-inside:avoid;position:static}
  .ribalta,.impila{margin:0;padding:0;background:#fff;color:#000}
  /* i pieghevoli li apre `beforeprint` in app.js, perché chi stampa non clicca;
     le tabelle gemelle dei grafici invece no: sulla carta il grafico si vede,
     e stamparle tutte e due raddoppierebbe le pagine per niente */
  .altTab{display:none}
  .ctrl{border:1px solid #ccc;border-left:5px solid #666;opacity:1}
  .ctrl-d,.perche,.aiuto{color:#333}
}

/* ============================================================== agenda === */
/* Il calendario condiviso: un mese a griglia, e sotto il giorno aperto per
   esteso. Sul telefono la griglia resta (serve a vedere «dove sono i buchi»)
   ma le righe degli appuntamenti diventano puntini: il dettaglio si legge
   nella scheda del giorno, non dentro una casella larga 40 pixel. */
.filtri{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:2px;background:var(--carta2);
  border:1px solid var(--bordo2);color:var(--testo);border-radius:999px;
  padding:7px 14px;font-size:.72rem;font-weight:300;cursor:pointer;font-family:inherit;
  transition:opacity .15s,background .15s}
.chip:hover{background:color-mix(in srgb,var(--testo) 8%,transparent)}
.chip.spento{opacity:.42}
.chip.spento .punto{background:var(--testo3)!important}
.chip.fermo{cursor:default;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem}
.chip.fermo:hover{background:var(--carta2)}
/* l'interruttore acceso (il «solo la mia» dell'agenda) si deve vedere che è acceso */
.chip.scelto{background:color-mix(in srgb,var(--c,var(--acc)) 24%,transparent);
  border-color:var(--c,var(--acc));color:var(--testo);font-weight:500}

.cal{margin-top:6px}
.cal-testa{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px}
.cal-testa div{text-align:center;font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--testo3);font-weight:500}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cg{background:var(--carta2);border:1px solid transparent;border-radius:16px;padding:6px 7px 8px;
  min-height:104px;cursor:pointer;overflow:hidden;transition:border-color .15s,background .15s}
.cg:hover{border-color:var(--bordo2)}
.cg:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cg.fuori{opacity:.34}
.cg.scelto{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--carta2))}
.cg-t{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:4px}
.cg-t span{font-size:.78rem;font-weight:500;color:var(--testo2)}
.cg.oggi .cg-t span{background:var(--viva2);color:#0C0C0C;border-radius:999px;padding:1px 8px;font-weight:700}
.cg-t i{font-style:normal;font-size:.6rem;font-weight:500;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 16%,transparent);border-radius:999px;padding:1px 7px}
.ev{font-size:.68rem;line-height:1.35;background:var(--carta);border-left:3px solid var(--bordo2);
  border-radius:0 7px 7px 0;padding:2px 6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-weight:300}
.ev b{font-weight:500;color:var(--testo2)}
.ev .punto{width:7px;height:7px;margin-right:5px}
.ev.altri{background:transparent;border-left-color:transparent;color:var(--testo3);padding-left:9px}

.giornata{display:grid;gap:10px}
.app{display:flex;gap:14px;align-items:center;background:var(--carta2);border-left:4px solid var(--bordo2);
  border-radius:0 18px 18px 0;padding:12px 16px;flex-wrap:wrap}
.app-ora{font-size:.8rem;font-weight:500;color:var(--testo2);min-width:96px;font-variant-numeric:tabular-nums}
.app-c{flex:1 1 220px;min-width:0}
.app-t{font-size:.95rem;line-height:1.35}
.app-s{font-size:.78rem;color:var(--testo3);margin-top:3px;display:flex;align-items:center;
  gap:4px;flex-wrap:wrap}
.app-b{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:760px){
  .cg{min-height:74px;padding:4px 4px 6px;border-radius:12px}
  .cg-t{margin-bottom:2px}
  /* la riga diventa un trattino del colore del tipo: il colore è già sul
     bordo sinistro, quindi basta allargarlo e togliere il testo */
  .ev{font-size:0;padding:0;margin-bottom:3px;height:6px;border-radius:999px;
    border-left-width:22px;background:transparent}
  .ev .punto{display:none}
  .ev.altri{display:none}
  .app-ora{min-width:auto}
}

/* i sette titoli come tasti: nella finestrella del nuovo appuntamento e sotto
   quelli arrivati dal telefono senza titolo. Il colore è quello del tipo. */
.chip.tit{padding:9px 15px;font-size:.75rem;letter-spacing:.02em}
.chip.tit.scelto{background:color-mix(in srgb,var(--c) 24%,transparent);
  border-color:var(--c);color:var(--testo);font-weight:500}
.chip.tit:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ======================================================= LA HOME APP ===== */
/* La prima pagina è un lanciatore: chi entra vede chi è, tre numeri, il
   prossimo appuntamento e i tasti per andare dove gli serve. Sul telefono i
   tasti diventano due per riga, alti, con l'icona sopra: come le app. */
.appTesta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 0 20px}
.appTesta .chi{display:flex;align-items:center;gap:13px;min-width:0}
.appTesta .faccia{width:46px;height:46px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--viva);color:#fff;font-weight:700;font-size:19px;overflow:hidden}
.appTesta .faccia img{width:100%;height:100%;object-fit:cover;display:block}
.appTesta b{display:block;font-size:1.05rem;font-weight:500;line-height:1.2}
.appTesta small{display:block;color:var(--testo3);font-size:.8rem;font-weight:300}
.appTesta small::first-letter{text-transform:uppercase}

.numeri.tre{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* la riga del prossimo appuntamento: si preme e si apre l'agenda */
.prossimo{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:var(--carta);border:1px solid var(--bordo);border-left:4px solid var(--acc);
  border-radius:0 var(--r) var(--r) 0;padding:14px 18px;margin:0 0 22px;cursor:pointer;
  font-family:inherit;color:var(--testo);transition:transform .12s,background .15s}
.prossimo:hover{background:var(--carta2)}
.prossimo:active{transform:scale(.985)}
.prossimo .q{font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--testo3);font-weight:500}
.prossimo .c{font-size:.95rem;font-weight:300}
.prossimo.vuoto{border-left-color:var(--bordo2)}
.prossimo.vuoto .c{color:var(--testo3)}

.lanciatore{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:26px}
.tasto{display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--carta);border:1px solid var(--bordo);border-radius:22px;padding:16px 18px;
  color:var(--testo);font-family:inherit;cursor:pointer;
  transition:transform .12s,border-color .15s,background .15s}
.tasto:hover{border-color:var(--bordo2);background:var(--carta2)}
.tasto:active{transform:scale(.97)}
.tasto:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tasto .ico{width:46px;height:46px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;
  font-size:1.3rem;background:var(--carta2);border:1px solid var(--bordo);line-height:1}
.tasto .testo{flex:1;min-width:0}
.tasto .testo b{display:block;font-weight:500;font-size:1rem;line-height:1.25}
.tasto .testo small{display:block;color:var(--testo3);font-size:.78rem;font-weight:300;
  line-height:1.35;margin-top:3px}
.tasto .via{color:var(--testo3);font-size:1.5rem;line-height:1;flex:0 0 auto}

@media(max-width:640px){
  .lanciatore{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tasto{flex-direction:column;align-items:flex-start;gap:9px;padding:14px;border-radius:20px;min-height:126px}
  .tasto .via{display:none}
  .tasto .ico{width:42px;height:42px;border-radius:13px}
  .tasto .testo small{font-size:.71rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden}
  .appTesta{margin-bottom:16px}
}

/* il tasto per tornare alla home, in cima */
.indietro{background:var(--carta2);border:1px solid var(--bordo);color:var(--testo);
  width:34px;height:34px;flex:0 0 auto;border-radius:12px;font-size:1.4rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;font-family:inherit;padding:0 2px 4px 0;
  transition:transform .12s,background .15s}
.indietro:hover{background:var(--carta)}
.indietro:active{transform:scale(.92)}

/* tocchi da applicazione: niente lampo azzurro sotto il dito, niente testo che
   si seleziona per sbaglio tenendo premuto, e ogni tasto risponde alla pressione */
button,.b,.tasto,.chip,.prossimo,nav.basso button,.cg{-webkit-tap-highlight-color:transparent}
button,.tasto,.chip,nav.basso button,.cg .cg-t{user-select:none;-webkit-user-select:none}
nav.basso button:active{transform:scale(.92)}
.b:active{transform:scale(.97)}
/* il consiglio per installarla: sul computer non serve, si nasconde */
.comeApp{margin-bottom:26px;line-height:1.6}
.comeApp b{color:var(--testo)}
@media(min-width:901px){.comeApp{display:none}}

/* in fondo alla home: chi sei, e come si esce. Sul telefono è l'unico posto
   dove trovarlo, perché la colonna di sinistra lì non c'è. */
.fondoHome{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--bordo);padding-top:18px;margin:6px 0 10px;
  color:var(--testo3);font-size:.85rem;font-weight:300}
.fondoHome b{color:var(--testo2);font-weight:500}
.fondoHome .tasti{display:flex;gap:8px;flex-wrap:wrap}
#velo .finestra .separa{border-top:1px solid var(--bordo);margin:16px 0 4px}

/* ============================== LA HOME A TASTI (rifatta il 26/08/2026) ===
   «Cosa vuoi fare» è la prima cosa che si vede aprendo il sito, in mezzo allo
   schermo: prima stava sotto ai numeri e al prossimo appuntamento, e sul
   computer i tasti finivano fuori dalla prima schermata. I numeri non sono
   spariti: si leggono sotto, dove non spingono via quello che si preme. */
.avvio{max-width:1060px;margin:0 auto}
h2.sezione.centro{text-align:center;margin:18px 0 18px}
.avvio .appTesta{justify-content:center;margin:2px 0 6px}

/* le tre aree principali: tasti più grandi, con l'icona a colori */
.lanciatore.primi{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-bottom:14px}
.tasto.primo{padding:20px 20px;border-color:var(--bordo2);background:var(--carta2)}
.tasto.primo .ico{background:var(--viva);border-color:transparent;color:#fff;
  width:52px;height:52px;border-radius:17px;font-size:1.5rem}
.tasto.primo .testo b{font-size:1.18rem;font-weight:700;letter-spacing:.01em}
.tasto.primo:hover{border-color:var(--acc)}

@media(max-width:640px){
  /* sul telefono le tre principali vanno una per riga: sono quelle che si
     premono col pollice mille volte al giorno */
  .lanciatore.primi{grid-template-columns:minmax(0,1fr);gap:10px}
  .tasto.primo{flex-direction:row;align-items:center;min-height:0;padding:14px 16px}
  .tasto.primo .via{display:block}
  .tasto.primo .testo small{-webkit-line-clamp:2}
}

/* ===================================== UNO STRUMENTO DENTRO LA PAGINA ====
   La consulenza e i calcolatori vivono su siti loro: qui si aprono dentro una
   cornice, con il nome in alto e il tasto per aprirli in una scheda a parte. */
.cornice{display:flex;flex-direction:column;height:calc(100vh - 170px);
  height:calc(100dvh - 170px);min-height:460px}
.corniceTesta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.corniceTesta .ct{flex:1;min-width:0}
.corniceTesta .ct b{display:block;font-weight:500;font-size:1rem;line-height:1.25}
.corniceTesta .ct small{display:block;color:var(--testo3);font-size:.78rem;font-weight:300}
.cornice .telaio{flex:1;width:100%;border:1px solid var(--bordo);border-radius:var(--r);
  background:var(--sf);display:block;opacity:1;transform:none}
@media(max-width:900px){
  .cornice{height:calc(100vh - 190px);height:calc(100dvh - 190px)}
  .cornice .telaio{border-radius:18px}
}

/* ============================================== I CONTATTI UTILI ========
   I numeri dell'assistenza Vitanuova. Il numero grande si legge da lontano
   (chi telefona dal fisso lo ricopia), il tasto da premere dopo è un
   quadratino come sulla tastiera del telefono, e ogni casella è un rettangolo
   che si preme: sul telefono apre la mail già intestata. */
.numerone{font-size:clamp(24px,2.6vw,38px);font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.tastone{display:inline-flex;align-items:center;gap:6px;background:var(--sf2);
  border:1px solid var(--bordo2);border-radius:10px;padding:5px 12px;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
/* auto-fill e non auto-fit: dove la casella è una sola (i sinistri,
   l’amministrazione) deve restare larga quanto le altre, non spalmarsi su
   tutta la riga */
.contatti{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.cnt{display:block;background:var(--carta2);border:1px solid var(--bordo);border-radius:16px;
  padding:12px 15px;min-width:0;color:var(--testo);text-decoration:none;
  transition:border-color .15s,background .15s}
a.cnt:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--carta2))}
a.cnt:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cnt b{display:block;font-weight:500;font-size:.94rem;line-height:1.3}
.cnt small{display:block;color:var(--testo3);font-size:.76rem;font-weight:300;
  margin-top:3px;line-height:1.35;word-break:break-word}
@media(max-width:640px){
  .contatti{grid-template-columns:minmax(0,1fr)}
}

/* ============================================= I DOCUMENTI UTILI ========
   Le cartelle sono i soliti tasti grandi (.tasto). Un file invece è un
   COLLEGAMENTO vero e non un tasto: così si può tenere premuto per aprirlo in
   un'altra scheda, copiarne l'indirizzo, mandarlo a un collega. Le righe sono
   fitte perché in una cartella ce ne stanno trenta. */
.documenti{display:grid;gap:8px}
.doc{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--testo);
  background:var(--carta2);border:1px solid var(--bordo);border-radius:16px;padding:10px 14px;
  min-width:0;transition:border-color .15s,background .15s}
.doc:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--carta2))}
.doc:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.doc .ico{flex:0 0 auto;font-size:1.25rem;line-height:1;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;background:var(--sf2);border:1px solid var(--bordo)}
.doc .testo{flex:1;min-width:0}
.doc .testo b{display:block;font-weight:400;font-size:.92rem;line-height:1.3;word-break:break-word}
.doc .testo small{display:block;color:var(--testo3);font-size:.72rem;font-weight:300;margin-top:2px;
  line-height:1.3;word-break:break-word}
.doc .via{flex:0 0 auto;color:var(--testo3);font-size:1rem}