/* ConFido — la «casa» (26/09/2026): banda blu del TEMPO, tasca d'oro del DENARO, mensola coi
   cerchi. La usano tutte e due le case: home.html (chi cerca una mano) e provider-home.html (chi
   la dà). Stessa testata di qua e di là: passando da un lato all'altro cambia solo quello che
   serve, non l'app. */
/* === Home (26/09/2026): la «B» scelta da Damiano ===
   Il blu è il TEMPO (la guida con la clessidra), l'oro è il DENARO (la guida col sacchetto).
   La banda blu tiene il tempo e «Chiedi una mano»; sotto, la tasca d'oro. Poi la mensola coi
   quattro cerchi, «Le tue cose» (quello che sta succedendo), chi c'è qui intorno, gli sponsor.
   La banda e la mensola si incastrano con due tagli arrotondati (l'idea viene da Pampers):
   l'angolo in basso a sinistra della banda mostra la mensola, l'angolo in alto a destra della
   mensola mostra la banda. I due quadratini sotto (::after / ::before, z-index:-1) sono il colore
   che si vede dentro ciascun taglio. */
.screen.hb{padding:0 0 140px;position:relative;z-index:0}
.hband{position:relative;background:linear-gradient(160deg,#2E5BFF,#1E3FCC);color:#fff;
       padding:calc(22px + env(safe-area-inset-top)) 18px 22px;border-bottom-left-radius:40px}
.hband::after{content:"";position:absolute;right:0;bottom:-40px;width:40px;height:40px;background:#1E3FCC;z-index:-1}
.hshelf{position:relative;background:#E3EAFF;border-radius:0 40px 40px 40px;padding:20px 8px 18px}
.hshelf::before{content:"";position:absolute;left:0;top:-40px;width:40px;height:40px;background:#E3EAFF;z-index:-1}

.hhello{display:flex;align-items:center;gap:12px}
.hhello .hav{line-height:0;flex:none}
.hhello .avatar-home{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#fff;display:block}
.hhello .hn{flex:1;min-width:0;font-family:'Bricolage Grotesque';font-weight:600;font-size:1.5rem;letter-spacing:-.02em;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hhello .bellbtn{width:44px;height:44px;background:transparent;border:1.5px solid rgba(255,255,255,.7);color:#fff}
.hhello .bellbadge{border-color:#2E5BFF}

/* il tempo: il numero grande, la guida blu accanto */
.htempo{display:flex;align-items:flex-end;gap:8px;margin-top:16px;color:#fff;text-decoration:none}
.htempo .tx{flex:1;min-width:0;padding-bottom:8px}
.htempo .k{font-size:0.875rem;font-weight:700;opacity:.88}
.htempo .v{font-family:'Bricolage Grotesque';font-weight:600;font-size:3rem;letter-spacing:-.03em;line-height:1;margin-top:4px}
.htempo .s{font-size:0.8125rem;opacity:.85;margin-top:7px;line-height:1.35}
/* la guida del tempo (26/09): poggia ESATTAMENTE sul riquadro sotto — il margine in basso è
   lo stesso spazio che c'è fra la riga del tempo e il riquadro (16px), così la base del disegno
   tocca il bordo senza passarci sopra (il riquadro è trasparente: si vedrebbe attraverso).
   26px da destra: il riquadro ha gli angoli tondi, e sulla curva la base resterebbe sospesa. */
.hguida.gscena{background:none;overflow:visible;width:auto;flex:none;align-self:flex-end;
  margin:-8px 26px -16px 0;transform-origin:60% 100%;pointer-events:none}
.hfig{position:relative;display:block;height:148px;aspect-ratio:326/520;transform-origin:50% 100%}
.hfig.gs-seduta{height:118px;aspect-ratio:402/464}
.hfig.gs-aiuola{height:108px;aspect-ratio:760/584}   /* larga: più bassa, o il numero resta senza spazio a 360 */
/* Le pose coi piedi a terra (il giardino, la seduta) hanno la base tonda: se toccano il bordo
   solo nel punto più basso, ai lati sembrano sospese. Scendono di 6px DAVANTI al riquadro,
   come su un gradino. La guida che saluta è tagliata in vita: lei resta appoggiata al bordo. */
.hguida.gscena{z-index:2}
.hfig.gs-aiuola,.hfig.gs-seduta{margin-bottom:-6px}
.hfig img{display:block;width:100%;height:100%;object-fit:contain}
/* vive: respira (g-respiro, styles.css), la sabbia scende, le scintille girano, e ogni tanto
   saluta con tutto il corpo. Con «riduci movimento» styles.css spegne tutto (.gscena.on *). */
.gscena.on .hfig{animation:g-respiro calc(4.4s / var(--gv)) ease-in-out infinite}
.hguida.gscena.on{animation:h-saluta 9s ease-in-out 1.4s infinite}
@keyframes h-saluta{0%,82%,100%{transform:none}86%{transform:rotate(-3deg)}90%{transform:rotate(2.2deg)}94%{transform:rotate(-1.2deg)}97%{transform:rotate(.4deg)}}
@media (prefers-reduced-motion:reduce){ .hguida.gscena.on{animation:none} }
.hguida .scintille{right:-18px;bottom:26%;width:60px;height:60%}
.hchiedi{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--terra);border-radius:999px;
         padding:15px;font-weight:700;font-size:1.0625rem;margin-top:16px;text-decoration:none;position:relative;z-index:1;
         box-shadow:0 10px 24px -12px rgba(20,32,58,.55)}
.hchiedi:focus-visible{outline:3px solid #FFC631;outline-offset:2px}
/* il denaro: la tasca d'oro, un gradino sotto il tempo. Niente bottone: si tocca tutta */
.horo{display:flex;align-items:center;gap:12px;background:#FFC631;color:#6B4F00;border-radius:24px;padding:11px 14px 11px 11px;
      margin-top:14px;text-decoration:none}
.horo img{width:54px;height:54px;object-fit:cover;object-position:top;border-radius:50%;background:#FFE08A;flex:none}
.horo .k{font-size:0.8125rem;font-weight:700}
.horo .v{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.375rem;line-height:1.15}
.horo i{margin-left:auto;font-size:1.125rem}

/* primo ingresso: le due guide grandi, al posto del tempo e del denaro, finché non dici «Ho capito» */
.hbenv{position:relative;background:#fff;color:var(--ink);border-radius:26px;padding:16px 18px 18px;margin-top:18px;text-align:center}
.hbenv[hidden]{display:none}
.hbenv img{display:block;width:190px;height:auto;margin:0 auto 6px}
.hbenv .t{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.375rem;letter-spacing:-.02em;line-height:1.15}
.hbenv .d{font-size:0.875rem;color:var(--ink-soft);margin-top:8px;line-height:1.45}
.hbenv .d b.bl{color:var(--terra)} .hbenv .d b.or{color:#B8860B}
.hbenv .x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:none;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft)}
.hbenv .x i{width:30px;height:30px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center}
.hbenv .go{display:flex;justify-content:center;gap:8px;margin-top:14px}
.hbenv .go a,.hbenv .go button{border:none;border-radius:999px;padding:12px 17px;font:inherit;font-weight:700;font-size:0.9375rem;cursor:pointer;text-decoration:none}
.hbenv .go a{background:var(--terra);color:#fff}
.hbenv .go button{background:var(--paper-2);color:var(--ink)}

/* i quattro cerchi */
.hcirc{display:flex;justify-content:space-around}
.hcirc a,.hcirc button{display:flex;flex-direction:column;align-items:center;gap:8px;width:82px;text-align:center;font:inherit;
      font-size:0.8125rem;font-weight:700;color:var(--ink);line-height:1.2;text-decoration:none;background:none;border:none;padding:0;cursor:pointer}
.hcirc .c{width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--terra);
          font-size:1.5rem;box-shadow:0 2px 8px -4px rgba(20,32,58,.25);position:relative}
.hcirc .counter{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;background:var(--terra);color:#fff;
                font-size:0.6875rem;font-weight:800;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px #E3EAFF}

.hsec{padding:26px 18px 0}
.hsec h2{font-family:'Bricolage Grotesque';font-weight:600;font-size:1.375rem;letter-spacing:-.02em;margin:0}
.hsec .sub{font-size:0.875rem;color:var(--ink-soft);margin:4px 0 14px;line-height:1.4}
.hsech{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hsech a{font-size:0.875rem;font-weight:700;color:var(--terra);text-decoration:none}

/* «Le tue cose»: quello che sta succedendo adesso, una riga per cosa */
.hlist{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.hlist > .r{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;position:relative}
.hlist > .r:last-child{border-bottom:none}
.hlist .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:1.25rem}
.hlist .ic.bl{background:#E3EAFF;color:var(--terra)}
.hlist .ic.or{background:#FFF3CF;color:#B8860B}
.hlist .ic img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top}
.hlist .tx{flex:1;min-width:0}
.hlist .t{font-weight:700;font-size:0.9375rem;line-height:1.3}
.hlist .t b{font-weight:700}
.hlist .m{font-size:0.8125rem;color:var(--ink-soft);margin-top:2px;line-height:1.35}
.hlist .ca{color:var(--ink-faint);flex:none}
.horo.nascosta{display:none}
.hlist .xx{flex:none;width:40px;height:40px;margin-right:-8px;border:none;background:none;color:var(--ink-faint);cursor:pointer;display:grid;place-items:center}

/* chi c'è qui intorno: volti piccoli, col nome e quanto è lontano */
.hppl{display:flex;gap:14px;overflow-x:auto;margin:0 -18px;padding:4px 18px 6px;scrollbar-width:none}
.hppl::-webkit-scrollbar{display:none}
.hppl a{flex:none;width:66px;text-align:center;font-size:0.8125rem;font-weight:700;color:var(--ink);text-decoration:none}
.hppl .f{width:60px;height:60px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;overflow:hidden;
         color:#fff;font-weight:700;font-size:1.375rem;box-shadow:0 0 0 3px var(--paper),0 0 0 5px #C9CFDB}
.hppl .f.on{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--sage)}
.hppl .f img{width:100%;height:100%;object-fit:cover}
.hppl small{display:block;font-weight:600;color:var(--ink-faint);font-size:0.6875rem;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hvuoto{padding:16px;border:1.5px dashed var(--line);border-radius:18px;color:var(--ink-soft);font-size:0.9375rem;line-height:1.5}
.hvuoto a{color:var(--terra-deep);font-weight:700}


/* ── lo specchio: chi DÀ una mano (26/09) ─────────────────────────────────
   Come i fumetti di una chat: le due case hanno il taglio dalle parti opposte, così si capisce
   da che parte stai senza leggere. Chi CHIEDE (home, `.hb.specchio`): banda arrotondata in basso
   a DESTRA, mensola in alto a SINISTRA. Chi DÀ (provider-home): il contrario, cioè la regola
   base qui sopra. (Deciso da Damiano il 26/09, dopo aver visto la prima versione al rovescio.) */
.hb.specchio .hband{border-bottom-left-radius:0;border-bottom-right-radius:40px}
.hb.specchio .hband::after{right:auto;left:0}
.hb.specchio .hshelf{border-radius:40px 0 40px 40px}
.hb.specchio .hshelf::before{left:auto;right:0}

/* ── i vicini del palazzo (26/09): badge sul volto e scritta forte ── */
.hppl .fw{position:relative;display:block;width:60px;margin:0 auto 6px}
.hppl .fw .f{margin:0}
.hppl .pb{position:absolute;right:-4px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--terra);color:#fff;
          display:grid;place-items:center;font-size:0.8125rem;box-shadow:0 0 0 2.5px var(--paper)}
.hppl a.pal small{color:var(--terra-deep);font-weight:800}