/* Pagina «funzioni»: prefisso .funzioni- ; vale il contratto di style.css (README). */

/* 01. Palco scuro con la webmail viva */
.funzioni-palco { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-bg); color: var(--hero-text); border-radius: var(--radius); padding: clamp(14px, 3.5vw, 40px); box-shadow: var(--ombra-forte); }
.funzioni-palco::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 88% 0%, rgba(30,123,255,.5), transparent 70%), radial-gradient(45% 55% at 0% 100%, rgba(11,61,145,.95), transparent 70%); }
.funzioni-palco .finestra, .funzioni-tasti, .funzioni-palco-nota { max-width: 980px; margin-inline: auto; }
.funzioni-palco .webmail { position: relative; }
.funzioni-palco .webmail-riga.funzioni-sel { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.funzioni-stella { color: var(--warning); width: 14px; height: 14px; margin-right: 4px; vertical-align: -3px; }
.funzioni-ghost { position: absolute; z-index: 3; left: 176px; top: 104px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--primary); box-shadow: var(--ombra-forte); font-weight: 600; font-size: .75rem; white-space: nowrap; visibility: hidden; pointer-events: none; }
.funzioni-ghost .ico { width: 14px; height: 14px; color: var(--primary); }
.funzioni-tasti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); margin-bottom: 0; color: var(--hero-muted); font-size: .875rem; }
.funzioni-tasti kbd { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; background: var(--hero-chip); color: var(--hero-text); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 2px 0 rgba(0,0,0,.4); font-family: inherit; font-weight: 700; font-size: .9375rem; }
.funzioni-palco-nota { margin-top: var(--space-4); margin-bottom: 0; color: var(--hero-muted); font-size: .875rem; max-width: 72ch; text-align: center; }
.funzioni-palco-nota kbd, .funzioni-kbd kbd { font-family: inherit; font-size: .875em; font-weight: 700; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; color: var(--text); }
.funzioni-card-grid { margin-top: var(--space-8); }
.funzioni-ricerca, .funzioni-strati-riga { margin-top: clamp(40px, 6vw, 64px); }
.funzioni-ricerca .sottotitolo { margin-top: 0; }

/* Ricerca full-text */
.funzioni-cerca { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--ombra); padding: var(--space-4); font-size: .875rem; }
.funzioni-cerca-box { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 10px 14px; border: 1px solid var(--primary); border-radius: 999px; box-shadow: 0 0 0 3px var(--primary-soft); color: var(--text); font-weight: 500; }
.funzioni-cerca-box .ico { color: var(--primary); width: 18px; height: 18px; }
.funzioni-cerca-testo { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; border-right: 2px solid var(--primary); padding-right: 1px; }
.funzioni-cerca-ris li { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px 4px; border-top: 1px solid var(--border); color: var(--text); }
.funzioni-cerca-ris em { font-style: normal; color: var(--text-muted); }
.funzioni-cerca-ris mark { background: var(--warning-soft); color: var(--warning); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.funzioni-cerca-n { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: .8125rem; display: flex; align-items: center; gap: 6px; }
.funzioni-cerca-n .ico { width: 16px; height: 16px; color: var(--success); }

/* 02. Finestra di scrittura */
.funzioni-compose .finestra-barra { font-weight: 600; color: var(--text); justify-content: space-between; }
.funzioni-compose .finestra-barra .ico { width: 18px; height: 18px; color: var(--text-muted); }
.funzioni-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); position: relative; }
.funzioni-campo > b { color: var(--text-muted); font-weight: 600; min-width: 2.5em; }
.funzioni-dest { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--text); font-weight: 600; }
.funzioni-dest i { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: inline-grid; place-items: center; font-style: normal; font-size: .6875rem; font-weight: 700; }
.funzioni-digitato { border-right: 2px solid var(--primary); padding-right: 1px; }
.funzioni-sugg { position: absolute; left: 56px; top: calc(100% - 2px); z-index: 2; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: var(--ombra-forte); padding: 4px; }
.funzioni-sugg li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 10px; border-radius: 6px; color: var(--text); }
.funzioni-sugg li.attiva { background: var(--primary-soft); }
.funzioni-sugg li em { font-style: normal; color: var(--text-muted); font-size: .75rem; }
.funzioni-strumenti { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.funzioni-strumenti span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 6px; font-weight: 700; }
.funzioni-strumenti span.attivo { background: var(--primary-soft); color: var(--primary); }
.funzioni-strumenti .ico { width: 16px; height: 16px; }
.funzioni-corpo { padding: 14px; color: var(--text); min-height: 90px; }
.funzioni-corpo p { margin: 0 0 6px; }
.funzioni-allegati { padding: 10px 14px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.funzioni-allegato { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; color: var(--text); }
.funzioni-allegato .ico { width: 18px; height: 18px; color: var(--primary); }
.funzioni-allegato small { color: var(--text-muted); font-size: .75rem; }
.funzioni-barra { grid-column: 2 / -1; height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.funzioni-barra i { display: block; height: 100%; width: 100%; background: var(--primary); border-radius: 999px; }
.funzioni-allegato .pill, .funzioni-dispositivi .pill, .funzioni-doc .pill { font-size: .75rem; padding: 2px 10px; }
.funzioni-allegato .pill::before, .funzioni-dispositivi .pill::before, .funzioni-doc .pill::before { display: none; }
.funzioni-piede { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 10px 14px; border-top: 1px solid var(--border); color: var(--text-muted); }
.funzioni-invia { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 8px 16px; font-weight: 700; }
.funzioni-invia .ico { width: 16px; height: 16px; }
.funzioni-salvata { display: inline-flex; align-items: center; gap: 6px; }
.funzioni-salvata .ico { width: 16px; height: 16px; color: var(--success); }
.funzioni-quota { margin-left: auto; font-variant-numeric: tabular-nums; }

/* 03. Lettura protetta */
.funzioni-palco figure, .funzioni-lettura, .funzioni-compose, .funzioni-cal, .funzioni-download, .funzioni-doc { margin: 0; }
.funzioni-msg-testa { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.funzioni-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); display: grid; place-items: center; font-weight: 700; grid-row: 1 / 3; }
.funzioni-msg-testa small, .funzioni-msg-testa time { color: var(--text-muted); font-size: .75rem; }
.funzioni-msg-testa time { grid-row: 1 / 3; grid-column: 3; align-self: start; }
.funzioni-oggetto { padding: 12px 14px 4px; font-weight: 700; font-size: .9375rem; color: var(--text); margin: 0; }
.funzioni-avviso { display: flex; gap: 10px; align-items: flex-start; margin: 10px 14px 0; padding: 10px 12px; border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); }
.funzioni-avviso .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--text-muted); }
.funzioni-avviso p { margin: 0; }
.funzioni-avviso b { display: block; }
.funzioni-mostra { margin-left: auto; color: var(--primary); font-weight: 700; white-space: nowrap; }
.funzioni-avviso-ko { border-color: var(--danger); background: var(--danger-soft); }
.funzioni-avviso-ko .ico { color: var(--danger); }
.funzioni-msg-corpo { padding: 14px; color: var(--text); }
.funzioni-msg-corpo p { margin: 0 0 8px; }
.funzioni-img-bloccata { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-alt); color: var(--text-muted); font-size: .75rem; margin: 0 4px 8px 0; }
.funzioni-img-bloccata .ico { width: 14px; height: 14px; }
.funzioni-link-finto { color: var(--primary); text-decoration: underline wavy var(--danger); text-underline-offset: 3px; }
.funzioni-link-finto .ico { width: 14px; height: 14px; color: var(--danger); vertical-align: -2px; }
/* tre anelli: ogni minaccia si ferma a un anello. Container (size): le minacce si muovono con transform in cqh/cqw, mai con top/left */
.funzioni-strati { position: relative; margin: 0 auto; width: min(100%,460px); aspect-ratio: 1; container-type: size; }
.funzioni-anello { position: absolute; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); box-shadow: var(--ombra); }
.funzioni-anello-1 { inset: 0; }
.funzioni-anello-2 { inset: 16%; border-color: var(--primary); border-style: dashed; }
.funzioni-anello-3 { inset: 32%; border-color: var(--primary); background: var(--primary-soft); }
.funzioni-anello > span { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); white-space: nowrap; background: inherit; padding: 0 6px; }
.funzioni-anello-3 > span { color: var(--primary); }
.funzioni-anello-2 > span { top: 4%; bottom: auto; }
.funzioni-centro { position: absolute; inset: 38%; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; gap: 2px; font-size: .6875rem; line-height: 1.15; font-weight: 700; text-align: center; padding: 4px; }
.funzioni-minaccia { position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); font-size: .6875rem; font-weight: 700; white-space: nowrap; translate: -50% -50%; }
.funzioni-minaccia .ico { width: 12px; height: 12px; }
.funzioni-m-1 { left: 50%; top: 35%; }
.funzioni-m-2 { left: 80%; top: 50%; }
.funzioni-m-3 { left: 50%; top: 87%; }
.funzioni-m-4 { left: 20%; top: 50%; }
@media (max-width: 639.98px) { .funzioni-centro { inset: 39%; font-size: .625rem; } .funzioni-centro .ico { width: 20px; height: 20px; } .funzioni-anello > span { letter-spacing: .03em; } }
@media (max-width: 419.98px) { .funzioni-minaccia { padding: 2px 7px; } }

/* 04. Calendario */
.funzioni-cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 600; }
.funzioni-cal-viste { display: inline-flex; gap: 2px; margin-left: auto; background: var(--surface-alt); border-radius: 999px; padding: 3px; }
.funzioni-cal-viste span { padding: 4px 12px; border-radius: 999px; color: var(--text-muted); font-weight: 600; }
.funzioni-cal-viste span.attiva { background: var(--surface); color: var(--primary); }
.funzioni-cal-griglia { display: grid; grid-template-columns: 44px repeat(5, 1fr); }
.funzioni-cal-ore { display: grid; grid-template-rows: 28px repeat(8, 40px); }
.funzioni-cal-ore span { font-size: .6875rem; color: var(--text-muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.funzioni-cal-ore span:first-child { transform: none; }
.funzioni-cal-giorno { position: relative; border-left: 1px solid var(--border); background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% 40px; background-position: 0 28px; height: 348px; }
.funzioni-cal-giorno > b { display: block; height: 28px; line-height: 28px; text-align: center; font-size: .75rem; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--surface); }
.funzioni-cal-giorno.oggi > b { color: var(--primary); font-weight: 700; }
.funzioni-ev { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 4px 6px; font-size: .6875rem; line-height: 1.25; overflow: hidden; color: var(--text); background: var(--primary-soft); border-left: 3px solid var(--primary); }
.funzioni-ev b { display: block; font-weight: 700; }
.funzioni-ev .ico { width: 12px; height: 12px; vertical-align: -2px; }
.funzioni-ev-verde { background: var(--success-soft); border-left-color: var(--success); }
.funzioni-ev-verde .pill { font-size: .6875rem; padding: 1px 7px; margin-top: 3px; }
.funzioni-ev-verde .pill::before { width: 6px; height: 6px; }
.funzioni-ev-grigio { background: repeating-linear-gradient(135deg, var(--surface-alt) 0 6px, var(--surface) 6px 10px); border-left-color: var(--text-muted); color: var(--text-muted); }
.funzioni-ev-nuovo { background: var(--surface); border: 2px dashed var(--primary); }
.funzioni-ev-nuovo small { color: var(--text-muted); display: block; font-size: inherit; }
.funzioni-ev-a { top: 48px; height: 20px; }
.funzioni-ev-b { top: 108px; height: 60px; }
.funzioni-ev-c { top: 268px; height: 60px; }
.funzioni-ev-d { top: 228px; height: 40px; }
.funzioni-ev-e { top: 68px; height: 40px; }
.funzioni-ev-f { top: 188px; height: 60px; }
@media (max-width: 639.98px) {
  .funzioni-cal-griglia { grid-template-columns: 40px repeat(3, 1fr); }
  .funzioni-cal-giorno.g1, .funzioni-cal-giorno.g5 { display: none; }
  .funzioni-cal-viste span { padding: 4px 8px; font-size: .75rem; }
}

/* 05. Telefono, porte, password per le app */
.funzioni-programmi { display: grid; gap: var(--space-8); align-items: start; }
.funzioni-programmi > * { min-width: 0; }
@media (min-width: 900px) { .funzioni-programmi { grid-template-columns: 300px 1fr; gap: var(--space-12); } }
.funzioni-telefono { margin: 0 auto; width: 280px; max-width: 100%; aspect-ratio: 9 / 18.5; border-radius: 40px; border: 9px solid #1B2232; background: var(--bg); box-shadow: var(--ombra-forte); position: relative; overflow: hidden; color: var(--text); font-size: .8125rem; line-height: 1.4; display: flex; flex-direction: column; }
.funzioni-tel-stato { display: flex; justify-content: space-between; padding: 10px 18px 4px; font-size: .75rem; font-weight: 700; }
.funzioni-tel-testa { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-weight: 700; font-size: .9375rem; }
.funzioni-tel-vista { flex: 1; overflow: hidden; }
.funzioni-tel-track { display: flex; width: 200%; height: 100%; transform: translateX(-50%); }
.funzioni-tel-schermo { width: 50%; flex: none; padding: 0 12px; }
.funzioni-tel-schermo li { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.funzioni-tel-schermo li .ico { width: 18px; height: 18px; color: var(--primary); flex: none; }
.funzioni-tel-schermo li b { margin-left: auto; color: var(--primary); font-weight: 700; }
.funzioni-tel-schermo li.attiva { background: var(--primary-soft); border-radius: 8px; font-weight: 600; }
.funzioni-tel-schermo .funzioni-tel-titolo { display: block; font-weight: 700; font-size: .9375rem; padding: 4px 8px 8px; border-bottom: 0; }
.funzioni-tel-schermo .funzioni-tel-riga { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 8px; }
.funzioni-tel-schermo .funzioni-tel-riga b { margin: 0; color: var(--text); }
.funzioni-tel-riga time { color: var(--text-muted); font-size: .6875rem; }
.funzioni-tel-riga span { grid-column: 1 / -1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funzioni-tel-riga .webmail-chip { grid-column: 1; justify-self: start; }
.funzioni-tel-riga.nonletto span { color: var(--text); font-weight: 600; }
.funzioni-tel-nav { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px 14px; border-top: 1px solid var(--border); background: var(--surface); font-size: .6875rem; font-weight: 600; color: var(--text-muted); text-align: center; }
.funzioni-tel-nav li { display: grid; justify-items: center; gap: 2px; }
.funzioni-tel-nav .ico { width: 20px; height: 20px; }
.funzioni-tel-nav li.attiva { color: var(--primary); }
.funzioni-tel-scrivi { position: absolute; right: 14px; bottom: 70px; width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; box-shadow: var(--ombra-forte); }
.funzioni-tel-scrivi .ico { width: 22px; height: 22px; }
.funzioni-didascalia { text-align: center; color: var(--text-muted); font-size: .9375rem; margin: var(--space-3) auto 0; max-width: 36ch; }
.funzioni-porte td:first-child { font-weight: 600; }
.funzioni-porte td:nth-child(-n+3) { white-space: nowrap; }
.funzioni-porte .ico { width: 16px; height: 16px; color: var(--success); vertical-align: -3px; margin-right: 4px; }
/* schermi stretti: una scheda per riga */
@media (max-width: 639.98px) {
  .tabella .funzioni-porte { min-width: 0; }
  .funzioni-porte thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .funzioni-porte tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
  .funzioni-porte tbody tr:last-child { border-bottom: 0; }
  .funzioni-porte tbody td { display: block; padding: 0; border: 0; }
  .funzioni-porte td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 600; }
  .funzioni-porte td:nth-child(3) { grid-column: 1; grid-row: 2; color: var(--text-muted); font-size: .875rem; }
  .funzioni-porte td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; color: var(--text-muted); font-size: .875rem; }
}
.funzioni-dispositivi { margin-top: var(--space-6); }
.funzioni-dispositivi h3 { display: flex; align-items: center; gap: var(--space-2); }
.funzioni-dispositivi h3 .ico { margin: 0; }
.funzioni-dispositivi li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: .9375rem; }
.funzioni-dispositivi li b { color: var(--text); }
.funzioni-dispositivi li small { color: var(--text-muted); font-size: .8125rem; }
.funzioni-dispositivi li .pill { grid-row: 1 / 3; grid-column: 2; font-size: .8125rem; }
.funzioni-programmi-checks { margin-top: var(--space-6); }

/* 06. File grandi */
.funzioni-pipeline { display: grid; gap: var(--space-4); margin: 0; }
.funzioni-passo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--ombra); display: grid; grid-template-columns: 44px 1fr; gap: 4px var(--space-3); align-items: start; align-content: start; }
.funzioni-passo-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; grid-row: 1 / 3; }
.funzioni-passo b { color: var(--text); }
.funzioni-passo small { color: var(--text-muted); font-size: .8125rem; }
.funzioni-segmenti { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: var(--space-2); }
.funzioni-segmenti i { height: 8px; border-radius: 3px; background: var(--primary); }
.funzioni-pronto { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-weight: 700; font-size: .9375rem; border: 1px solid var(--success); }
.funzioni-pronto .ico { width: 18px; height: 18px; }
@media (min-width: 720px) { .funzioni-pipeline { grid-template-columns: repeat(3, 1fr); } }
.funzioni-download .finestra { font-size: .875rem; }
.funzioni-dl-marchio { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 14px 18px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); }
.funzioni-dl-marchio i { width: 22px; height: 22px; border-radius: 7px; background: var(--primary); flex: none; }
.funzioni-dl-corpo { padding: 18px; display: grid; gap: var(--space-3); color: var(--text); }
.funzioni-dl-corpo p { margin: 0; }
.funzioni-dl-file { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface-alt); }
.funzioni-dl-file b { color: var(--text); word-break: break-all; }
.funzioni-dl-file small { color: var(--text-muted); font-size: .8125rem; }
.funzioni-dl-scansione { display: flex; align-items: center; gap: 6px; color: var(--success); font-weight: 600; }
.funzioni-dl-scansione .ico { width: 18px; height: 18px; }
.funzioni-dl-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.funzioni-dl-segnala { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600; margin-left: auto; }
.funzioni-dl-segnala .ico { width: 16px; height: 16px; }

/* 07. Documenti (beta) */
.funzioni-doc .finestra-barra { font-weight: 700; color: var(--text); gap: var(--space-2); }
.funzioni-doc li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.funzioni-doc li .ico { width: 20px; height: 20px; color: var(--primary); grid-row: 1 / 3; }
.funzioni-doc li small { color: var(--text-muted); font-size: .75rem; }
.funzioni-doc li .pill { grid-row: 1 / 3; grid-column: 3; }

/* 08. Accessibilita' */
.funzioni-fuoco { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--space-4); border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 600; outline: 3px solid var(--primary); outline-offset: 3px; font-size: .9375rem; margin-top: var(--space-3); }
.funzioni-misura { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); color: var(--text-muted); font-size: .875rem; }
.funzioni-misura i { width: 44px; height: 44px; border: 2px dashed var(--primary); border-radius: 10px; flex: none; display: grid; place-items: center; font-style: normal; font-size: .6875rem; font-weight: 700; color: var(--primary); }
.funzioni-contrasto { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: var(--space-3); }
.funzioni-contrasto .webmail-chip { padding: 6px 10px; border-radius: 8px; font-size: .8125rem; text-align: center; }

/* Movimento: le scene a ciclo girano da sole; quelle a scatto unico partono con .vista o .gioca (stato nascosto solo con JavaScript). */
@media (prefers-reduced-motion: no-preference) {
  /* 01. palco (14 s, a scatti) */
  .funzioni-palco .funzioni-r1 { animation: funzioni-sel1 14s step-end infinite; }
  .funzioni-palco .funzioni-r2 { animation: funzioni-sel2 14s step-end infinite; }
  .funzioni-palco .funzioni-chip-drop { animation: funzioni-chip 14s step-end infinite; }
  .funzioni-palco .funzioni-stella { animation: funzioni-stellaon 14s step-end infinite; }
  .funzioni-palco .funzioni-label-drop { animation: funzioni-label 14s step-end infinite; }
  .funzioni-palco .webmail-cerca { animation: funzioni-fuoco-cerca 14s step-end infinite; }
  /* pressione dei tasti al 40, 50 e 70 % (ritardo negativo) */
  .funzioni-tasti .funzioni-k-j { animation: funzioni-tasto 14s step-end -8.4s infinite; }
  .funzioni-tasti .funzioni-k-s { animation: funzioni-tasto 14s step-end -7s infinite; }
  .funzioni-tasti .funzioni-k-barra { animation: funzioni-tasto 14s step-end -4.2s infinite; }
  .funzioni-palco .webmail-riga.nuova { animation: arrivo 14s cubic-bezier(.2,.7,.2,1) infinite; }
  @media (min-width: 640px) { .funzioni-ghost { animation: funzioni-ghost 14s cubic-bezier(.4,0,.2,1) infinite; } }
  /* ricerca */
  html.js .funzioni-cerca .funzioni-cerca-testo { max-width: 0; }
  html.js .funzioni-cerca .funzioni-cerca-ris li, html.js .funzioni-cerca .funzioni-cerca-n { visibility: hidden; }
  html.js .funzioni-cerca:is(.vista, .gioca) .funzioni-cerca-testo { animation: funzioni-scrivi 1.2s steps(8) .2s forwards; }
  html.js .funzioni-cerca:is(.vista, .gioca) .funzioni-cerca-ris li:nth-child(1) { animation: funzioni-mostra .1s step-end 1.7s forwards; }
  html.js .funzioni-cerca:is(.vista, .gioca) .funzioni-cerca-ris li:nth-child(2) { animation: funzioni-mostra .1s step-end 1.9s forwards; }
  html.js .funzioni-cerca:is(.vista, .gioca) .funzioni-cerca-n { animation: funzioni-mostra .1s step-end 2.2s forwards; }
  /* 02. scrittura */
  html.js .funzioni-compose .funzioni-sugg { visibility: hidden; transform: translateY(6px); }
  html.js .funzioni-compose .funzioni-barra i { width: 0; }
  html.js .funzioni-compose .funzioni-caricato, html.js .funzioni-compose .funzioni-comelink, html.js .funzioni-compose .funzioni-salvata { visibility: hidden; }
  html.js .funzioni-compose:is(.vista, .gioca) .funzioni-sugg { animation: funzioni-scende .45s cubic-bezier(.2,.7,.2,1) .4s forwards; }
  html.js .funzioni-compose:is(.vista, .gioca) .funzioni-barra i { animation: funzioni-riempi 1.8s ease-in-out .6s forwards; }
  html.js .funzioni-compose:is(.vista, .gioca) .funzioni-caricato { animation: funzioni-mostra .1s step-end 2.4s forwards; }
  html.js .funzioni-compose:is(.vista, .gioca) .funzioni-comelink { animation: funzioni-mostra .1s step-end 2.9s forwards; }
  html.js .funzioni-compose:is(.vista, .gioca) .funzioni-salvata { animation: funzioni-mostra .1s step-end 3.4s forwards; }
  /* 03. tre livelli (9 s) */
  .funzioni-m-1 { animation: funzioni-m1 9s cubic-bezier(.3,.9,.4,1) infinite; }
  .funzioni-m-2 { animation: funzioni-m2 9s cubic-bezier(.3,.9,.4,1) infinite; }
  .funzioni-m-3 { animation: funzioni-m3 9s cubic-bezier(.3,.9,.4,1) infinite; }
  .funzioni-m-4 { animation: funzioni-m4 9s cubic-bezier(.3,.9,.4,1) infinite; }
  .funzioni-anello-3 { animation: funzioni-anello-batte 9s ease-out infinite; }
  /* 04. calendario (12 s) */
  .funzioni-ev-nuovo { animation: funzioni-disegna 12s cubic-bezier(.2,.7,.2,1) infinite; }
  .funzioni-ev-nuovo b, .funzioni-ev-nuovo small { animation: funzioni-titolo 12s step-end infinite; }
  .funzioni-ev-verde .pill { animation: funzioni-accetta 12s step-end infinite; }
  /* 05. telefono (10 s) */
  .funzioni-tel-track { animation: funzioni-scorri 10s cubic-bezier(.4,0,.2,1) infinite; }
  /* 06. file grandi */
  html.js .funzioni-pipeline .funzioni-segmenti i { transform: scaleX(0); transform-origin: left; }
  html.js .funzioni-pipeline :is(.funzioni-passo-2, .funzioni-passo-3) .funzioni-passo-ico { background: var(--surface-alt); color: var(--text-muted); }
  html.js .funzioni-pipeline .funzioni-pronto { visibility: hidden; transform: translateY(6px); }
  html.js .funzioni-pipeline:is(.vista, .gioca) .funzioni-segmenti i { animation: funzioni-pezzo .3s ease-out forwards; }
  .funzioni-segmenti i:nth-child(2) { animation-delay: .25s; } .funzioni-segmenti i:nth-child(3) { animation-delay: .5s; } .funzioni-segmenti i:nth-child(4) { animation-delay: .75s; } .funzioni-segmenti i:nth-child(5) { animation-delay: 1s; }
  .funzioni-segmenti i:nth-child(6) { animation-delay: 1.25s; } .funzioni-segmenti i:nth-child(7) { animation-delay: 1.5s; } .funzioni-segmenti i:nth-child(8) { animation-delay: 1.75s; }
  html.js .funzioni-pipeline:is(.vista, .gioca) .funzioni-passo-2 .funzioni-passo-ico { animation: funzioni-accende .4s ease-out 2.2s forwards; }
  html.js .funzioni-pipeline:is(.vista, .gioca) .funzioni-passo-3 .funzioni-passo-ico { animation: funzioni-accende .4s ease-out 3s forwards; }
  html.js .funzioni-pipeline:is(.vista, .gioca) .funzioni-pronto { animation: funzioni-scende .4s cubic-bezier(.2,.7,.2,1) 3.8s forwards; }
}
@keyframes funzioni-sel1 { 0%,39% { background-color: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); } 40%,100% { background-color: transparent; box-shadow: none; } }
@keyframes funzioni-sel2 { 0%,39% { background-color: transparent; box-shadow: none; } 40%,100% { background-color: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); } }
@keyframes funzioni-chip { 0%,23% { visibility: hidden; } 24%,100% { visibility: visible; } }
@keyframes funzioni-stellaon { 0%,50% { visibility: hidden; } 51%,100% { visibility: visible; } }
@keyframes funzioni-label { 0%,17% { background-color: transparent; box-shadow: none; } 18%,23% { background-color: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); } 24%,100% { background-color: transparent; box-shadow: none; } }
@keyframes funzioni-fuoco-cerca { 0%,69% { box-shadow: none; border-color: var(--border); } 70%,100% { box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--primary); } }
@keyframes funzioni-ghost { 0%,6% { visibility: hidden; transform: none; } 7% { visibility: visible; transform: none; } 20%,23% { visibility: visible; transform: translate(-154px,222px) scale(.96); } 24%,100% { visibility: hidden; transform: translate(-154px,222px) scale(.96); } }
@keyframes funzioni-tasto { 0%,2% { background-color: var(--hero-accent); color: var(--hero-bg); transform: translateY(2px); box-shadow: none; } 2.5%,100% { background-color: var(--hero-chip); color: var(--hero-text); transform: none; box-shadow: 0 2px 0 rgba(0,0,0,.4); } }
@keyframes funzioni-scrivi { from { max-width: 0; } to { max-width: 5em; } }
@keyframes funzioni-mostra { from { visibility: hidden; } to { visibility: visible; } }
@keyframes funzioni-scende { from { transform: translateY(6px); } to { visibility: visible; transform: none; } }
@keyframes funzioni-riempi { from { width: 0; } to { width: 100%; } }
/* le minacce partono dal centro e si fermano sul loro anello: solo transform */
@keyframes funzioni-m1 { 0%,4% { transform: translateY(15cqh); visibility: hidden; } 4.1% { transform: translateY(15cqh); visibility: visible; } 18%,100% { transform: none; visibility: visible; } }
@keyframes funzioni-m2 { 0%,24% { transform: translateX(-30cqw); visibility: hidden; } 24.1% { transform: translateX(-30cqw); visibility: visible; } 38%,100% { transform: none; visibility: visible; } }
@keyframes funzioni-m3 { 0%,44% { transform: translateY(-37cqh); visibility: hidden; } 44.1% { transform: translateY(-37cqh); visibility: visible; } 58%,100% { transform: none; visibility: visible; } }
@keyframes funzioni-m4 { 0%,64% { transform: translateX(30cqw); visibility: hidden; } 64.1% { transform: translateX(30cqw); visibility: visible; } 78%,100% { transform: none; visibility: visible; } }
@keyframes funzioni-anello-batte { 0%,16% { box-shadow: var(--ombra); } 18% { box-shadow: 0 0 0 6px var(--primary-soft); } 24%,100% { box-shadow: var(--ombra); } }
/* l'evento si disegna con un ritaglio (clip-path), non cambiando l'altezza */
@keyframes funzioni-disegna { 0%,8% { clip-path: inset(0 0 100% 0); visibility: hidden; } 9% { clip-path: inset(0 0 100% 0); visibility: visible; } 28%,100% { clip-path: inset(0 0 0 0); visibility: visible; } }
@keyframes funzioni-titolo { 0%,31% { visibility: hidden; } 32%,100% { visibility: visible; } }
@keyframes funzioni-accetta { 0%,54% { visibility: hidden; } 55%,100% { visibility: visible; } }
@keyframes funzioni-scorri { 0%,28% { transform: translateX(0); } 36%,86% { transform: translateX(-50%); } 94%,100% { transform: translateX(0); } }
@keyframes funzioni-pezzo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes funzioni-accende { from { background-color: var(--surface-alt); color: var(--text-muted); } to { background-color: var(--primary-soft); color: var(--primary); } }