/* Dynamic Notch — foglio di stile unico, nessuna dipendenza esterna.
   Le note sono in italiano per coerenza col resto del progetto. */

:root {
  --sfondo: #0b0c0f;
  --sfondo-alt: #101218;
  --superficie: rgba(255, 255, 255, 0.04);
  --bordo: rgba(255, 255, 255, 0.09);
  --bordo-forte: rgba(255, 255, 255, 0.16);
  --testo: #f5f6f8;
  --testo-tenue: #9aa1ad;
  --testo-fioco: #6c7482;
  --accento: #4c8dff;
  --accento-scuro: #2f6fe0;
  --verde: #35c26b;
  --raggio: 16px;
  --raggio-s: 10px;
  --larghezza: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Il sito e' scuro per scelta: e' un'app per la tacca, vive nel nero della
   barra dei menu. Niente tema chiaro, ma i colori sono dichiarati espliciti
   cosi' nessun browser li eredita dal sistema. */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 24px;
}

.stretto { max-width: 760px; }

/* ---------- Barra di navigazione ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 12, 15, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bordo);
}

.nav-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 60px;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--testo);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  /* Il nome non deve mai andare a capo sotto il marchio. */
  white-space: nowrap;
}
.marchio:hover { text-decoration: none; }

/* Il marchio e' l'icona dell'app, non un disegno a parte: la pillola con il
   microfono, i comandi e l'anello. E' ritagliata dall'AppIcon e resa
   trasparente ricavando l'alfa dalla luminosita', cosi' l'alone sfuma sul
   fondo del sito invece di portarsi dietro il suo rettangolo nero. */
.marchio-logo {
  height: 38px;
  width: auto;
  flex: none;
  /* Il ritaglio comprende l'aria dell'alone: recuperata ai lati, altrimenti il
     marchio sembrerebbe staccato dalla scritta. */
  margin: -4px -6px -4px -8px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}
.nav-link a { color: var(--testo-tenue); }
.nav-link a:hover { color: var(--testo); text-decoration: none; }

@media (max-width: 720px) {
  .nav-link .nascondi-mobile { display: none; }
}

/* Sul telefono la riga e' stretta: il marchio resta intero, il nome si
   restringe quel tanto che basta a starci accanto al pulsante. */
@media (max-width: 480px) {
  .marchio { font-size: 12px; letter-spacing: 0.07em; gap: 7px; }
  .marchio-logo { height: 32px; margin: -3px -5px -3px -7px; }
}

/* ---------- Pulsanti ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.18s;
}
.bottone:hover { text-decoration: none; transform: translateY(-1px); }

.bottone-primario { background: var(--accento); color: #fff; }
.bottone-primario:hover { background: var(--accento-scuro); }

.bottone-fantasma {
  background: var(--superficie);
  border-color: var(--bordo-forte);
  color: var(--testo);
}
.bottone-fantasma:hover { background: rgba(255, 255, 255, 0.08); }

.bottone-piccolo { padding: 8px 16px; font-size: 14px; }
.bottone-grande { padding: 15px 30px; font-size: 17px; }

/* ---------- Sezioni ---------- */

section { padding: 96px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

.titolo-sezione {
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 650;
  margin: 0 0 14px;
}

.sottotitolo-sezione {
  color: var(--testo-tenue);
  font-size: 18px;
  margin: 0 0 48px;
  max-width: 620px;
}

.centrato { text-align: center; }
.centrato .sottotitolo-sezione { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 60px 0 64px;
  text-align: center;
  overflow: hidden;
}

/* Alone morbido dietro il titolo: da' profondita' senza usare un'immagine. */
.hero::before {
  content: "";
  position: absolute;
  top: -280px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 620px;
  background: radial-gradient(
    ellipse at center,
    rgba(76, 141, 255, 0.16),
    transparent 68%
  );
  pointer-events: none;
}

.hero > * { position: relative; }

.etichetta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo-tenue);
  font-size: 13.5px;
  margin-bottom: 20px;
}

.punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
  flex: none;
}

h1 {
  font-size: clamp(38px, 6.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 680;
  margin: 0 0 22px;
}

.hero-sommario {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--testo-tenue);
  max-width: 620px;
  margin: 0 auto 28px;
}

.azioni {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.nota-hero {
  color: var(--testo-fioco);
  font-size: 14px;
  margin: 0;
}

/* Su schermi bassi il blocco di testo spingerebbe la demo tutta sotto la
   piega. Il titolo resta il titolo, ma respira di meno: quello che deve
   restare visibile senza scorrere e' la tacca. */
@media (max-height: 900px) {
  .hero { padding: 34px 0 48px; }
  .etichetta { margin-bottom: 16px; font-size: 13px; }
  h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 14px; }
  .hero-sommario { font-size: 16.5px; margin-bottom: 22px; }
  .azioni { margin-bottom: 12px; }
  .scena { margin-top: 26px; }
}

/* ---------- Demo interattiva della tacca ----------

   Non e' una fotografia e non e' un video: e' l'interfaccia dell'app
   ricostruita in HTML dentro un finto schermo di MacBook, cosi' la prova
   comincia dal sito.

   Regola che vale per tutto quello che segue: **le misure, i materiali e le
   sagome sono quelli veri del codice**, non un'interpretazione. Chi scarica
   deve ritrovare quello che ha visto qui. In particolare:

   - il pannello e' `.ultraThinMaterial` come `sagomaNotch` in AppDelegate,
     non un rettangolo nero: da aperto si vede la scrivania attraverso;
   - il nero che si vede da chiusa e' il ritaglio fisico dello schermo, che
     sta *sopra* il pannello e ne nasconde i primi 33 pt al centro. E' anche
     il motivo per cui la fila dei moduli comincia a 44 pt e i due pulsanti
     dell'app stanno negli angoli, ai lati della tacca;
   - ogni modulo ha l'intestazione dell'app: simbolo da 11 pt in tinta e
     titolo da 16 pt bold rounded con tracking 2, colore secondario.

   Lo schermo finto misura 1000x660 "punti" e viene scalato in blocco con
   --k, come uno screenshot: i moduli restano alle misure vere di
   NotchStateManager.currentExpandedSize e i testi scalano con loro. */

.scena {
  /* Vicina ai pulsanti: e' il primo posto dove si guarda dopo il titolo. */
  margin: 38px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  --k: 0.9;
  --larghezza-schermo: 1000px;
  --altezza-schermo: 660px;

  /* Curva presa dall'app: .spring(response: 0.4, dampingFraction: 0.7),
     convertita nei suoi campioni. Lo scatto oltre il bordo e il rientro
     sono quelli veri, non un'imitazione a occhio. */
  --molla: linear(0.0, 0.0367, 0.1274, 0.2477, 0.3796, 0.5101, 0.6307,
    0.7364, 0.825, 0.896, 0.9504, 0.9901, 1.0172, 1.0341, 1.043, 1.0459,
    1.0448, 1.0409, 1.0355, 1.0295, 1.0234, 1.0178, 1.0128, 1.0086, 1.0052,
    1.0026, 1.0007, 0.9994, 0.9985, 0.9981, 0.9979, 0.9979, 0.9981, 0.9983, 1);
  --durata-molla: 0.63s;
  /* Molla piu' corta per l'arrivo di un file nel vassoio:
     .spring(response: 0.3, dampingFraction: 0.8) di DropManager. */
  --molla-riga: linear(0.0, 0.0461, 0.1541, 0.2893, 0.429, 0.5596, 0.6736,
    0.7683, 0.8437, 0.9012, 0.9434, 0.973, 0.9927, 1.0049, 1.0116, 1.0146,
    1.0151, 1.0141, 1.0124, 1.0103, 1.0082, 1.0062, 1.0046, 1.0032, 1.0021,
    1.0013, 1);
  --durata-molla-riga: 0.41s;

  /* I colori di sistema che SwiftUI chiama .primary / .secondary / .tertiary,
     in aspetto CHIARO come l'app sul Mac di riferimento, e il materiale sottile.
     Non sono stimati: vengono da due misure sulle catture dell'app.
     La pillola sopra il nero del ritaglio rende 92, il pannello sopra una
     pagina bianca rende 227; risolvendo il sistema, il materiale e' un velo
     chiaro (198) al 46%. Il testo secondario misurato e' #6c su fondo #da,
     cioe' nero al 50%. */
  --primario: rgba(0, 0, 0, 0.85);
  --secondario: rgba(0, 0, 0, 0.5);
  --terziario: rgba(0, 0, 0, 0.26);
  --materiale: rgba(198, 198, 199, 0.46);
}

.telaio {
  position: relative;
  padding: 10px;
  border-radius: calc(20px + 10px * var(--k));
  background: linear-gradient(180deg, #23262e 0%, #14161c 60%, #0d0e12 100%);
  border: 1px solid var(--bordo-forte);
  box-shadow: 0 44px 100px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vetro {
  width: calc(var(--larghezza-schermo) * var(--k));
  height: calc(var(--altezza-schermo) * var(--k));
  overflow: hidden;
  border-radius: calc(20px * var(--k));
  background: #05060a;
}

.schermo {
  position: relative;
  width: var(--larghezza-schermo);
  height: var(--altezza-schermo);
  transform: scale(var(--k));
  transform-origin: top left;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  /* L'hero e' centrato: dentro lo schermo il testo torna a sinistra, come in
     un'interfaccia vera. */
  text-align: left;
  color: var(--primario);
  user-select: none;
  cursor: default;
}

/* Un Text di SwiftUI non ha margini: quelli predefiniti del browser toglievano
   26 pt al vassoio e l'elenco finiva sopra la scritta SCREENSHOT. */
.schermo p,
.schermo h4 { margin: 0; }

/* Sfondo: niente immagine da scaricare, solo gradienti. Serve chiaro e vario,
   perche' e' quello che si deve vedere attraverso il materiale del pannello. */
.sfondo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 820px 460px at 24% 8%, rgba(120, 170, 255, 0.75), transparent 60%),
    radial-gradient(ellipse 660px 540px at 86% 70%, rgba(236, 120, 190, 0.6), transparent 62%),
    radial-gradient(ellipse 900px 520px at 46% 106%, rgba(255, 176, 106, 0.5), transparent 64%),
    linear-gradient(160deg, #3b4fa8 0%, #5a3f96 48%, #2a2f6b 100%);
}

/* ---------- Barra dei menu ---------- */

.barra-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
  z-index: 2;
}

.menu-sinistra,
.menu-destra {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
}
.menu-sinistra .mela { font-size: 14px; }
.menu-sinistra b { font-weight: 600; }
.menu-sinistra span,
.menu-destra span { color: rgba(255, 255, 255, 0.8); }
.menu-destra svg { width: 15px; height: 15px; opacity: 0.85; }

/* ---------- Dock ---------- */

.schermo .dock {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.schermo .dock i {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.schermo .dock i:nth-child(2) { background: linear-gradient(160deg, #5aa9ff, #2f63d8); }
.schermo .dock i:nth-child(4) { background: linear-gradient(160deg, #ff7a8a, #d1345b); }
.schermo .dock i:nth-child(6) { background: linear-gradient(160deg, #6ee7a8, #17a06a); }
.schermo .dock i:nth-child(7) { background: linear-gradient(160deg, #ffd36e, #e8933a); }

.scena[data-compatto="si"] .schermo .dock { display: none; }
.scena[data-compatto="si"] .file-scrivania { left: 24px; top: 330px; }
.scena[data-compatto="si"] .menu-sinistra span,
.scena[data-compatto="si"] .menu-destra svg { display: none; }

/* ---------- Il pannello ---------- */

/* Come nell'app: un solo pannello agganciato in alto al centro che cambia
   misura. Non si sposta mai, e' il riquadro a crescere verso il basso.
   Angoli superiori vivi e inferiori a 24: e' `sagomaNotch`. */
.pannello {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  /* Misura compatta di partenza (NotchStateManager.compactSize). Da aperto la
     misura del modulo la scrive demo.js in `style.width`, non in una variabile
     CSS: cambiare una custom property non registrata non fa scattare la
     transizione, e il pannello restava largo 185 con la molla che non partiva
     mai. Prima non si vedeva solo perche' insieme cambiava anche il raggio. */
  width: 185px;
  height: 33px;
  transform: translateX(-50%);
  border-radius: 0 0 24px 24px;
  background: var(--materiale);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(0, 0, 0, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Il ridisegno del pannello non deve costringere la pagina a rifare i conti
     su tutto il resto mentre la molla e' in corso. */
  contain: layout paint;
  transition:
    width var(--durata-molla) var(--molla),
    height var(--durata-molla) var(--molla);
}

/* Il contorno dell'app e' una riga da 0,5 pt in gradiente: bianco al 22% in
   alto a sinistra, nulla al centro, 6% in basso a destra. */
/* Il contorno dell'app e' una riga da 0,5 pt in gradiente. Qui e' un bordo
   interno pieno: la versione in gradiente si disegnava con una maschera, e una
   maschera su un elemento che cambia misura va ricalcolata a ogni fotogramma. */

/* Il ritaglio fisico dello schermo: sta SOPRA il pannello e ne nasconde i
   primi 33 pt al centro. Da chiusa e' tutto quello che si vede, ed e' il
   motivo per cui il pannello puo' essere di materiale traslucido senza che
   la pillola sembri un oggetto appoggiato sulla barra dei menu. */
.ritaglio {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 185px;
  height: 33px;
  background: #000;
  border-radius: 0 0 24px 24px;
  z-index: 7;
  pointer-events: none;
}

.contenuto-pannello {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.scena[data-stato="aperto"] .contenuto-pannello {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.26s ease 0.1s;
}

/* I due pulsanti dell'app vivono negli angoli in alto, ai lati del ritaglio:
   a 16 pt dal bordo finiscono nelle "orecchie" e restano visibili. */
.pulsante-angolo {
  position: absolute;
  top: 16px;
  width: 20px;
  height: 20px;
  border: none;
  padding: 0;
  background: none;
  cursor: default;
  z-index: 3;
}
.pulsante-angolo svg { width: 20px; height: 20px; display: block; }
.pulsante-spegni { left: 16px; color: rgba(255, 69, 58, 0.8); }
.pulsante-impostazioni { right: 16px; color: var(--secondario); }

/* La fila dei moduli: 44 pt di aria sopra (li' passa il ritaglio), icone da
   40x40 con 16 di spazio, poi 6 pt e il divisorio. */
.fila-moduli {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  padding-top: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  /* La fila e' larga quanto il pannello e passa sopra i due pulsanti
     d'angolo: lascia loro gli eventi, li prendono solo le icone. */
  pointer-events: none;
}

.icona-modulo {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--secondario);
  cursor: pointer;
  flex: none;
  transition: background 0.15s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.icona-modulo svg { width: 18px; height: 18px; }
.icona-modulo:hover { background: rgba(0, 0, 0, 0.08); }
.icona-modulo[aria-selected="true"] {
  background: color-mix(in srgb, var(--tinta) 20%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tinta) 30%, transparent);
  color: var(--tinta);
}

.divisorio {
  position: absolute;
  top: 95px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* ---------- Contenuto dei moduli ---------- */

/* Area del modulo. Misurata sulle catture dell'app: la fila dei moduli
   occupa 44..84, +6 di padding = 90, +5 di spacing della VStack, il divisorio
   a 95, +1 di riga +5 di spacing = 101. Ai lati 10 pt, sotto 30 (20 del modulo
   piu' 10 del contenitore). Il player fa eccezione: nell'app non ha margini,
   arriva ai bordi del pannello. */
.schermo .modulo {
  position: absolute;
  top: 101px;
  left: 10px;
  display: none;
  flex-direction: column;
  min-height: 0;
}

/* Misura fissa invece di ancorarsi ai bordi del pannello. Sembra un dettaglio
   e invece e' la voce piu' cara dell'animazione: legato al pannello, il
   riquadro del modulo cambiava a ogni fotogramma della molla e con lui si
   rifaceva la disposizione di tutto quello che contiene, decine di volte per
   apertura. Cosi' la disposizione si calcola una volta sola e durante la molla
   resta solo il ritaglio del pannello, che non costa niente.
   I numeri sono le misure vere meno i margini: larghezza -20 (10 per lato),
   altezza -131 (44+40+6 della fila, 5+1+5 del divisorio, 20+10 sotto). */
.schermo .modulo[data-modulo="tray"] { width: 440px; height: 259px; }
.schermo .modulo[data-modulo="clipboard"] { width: 380px; height: 419px; }
.schermo .modulo[data-modulo="calendario"] { width: 420px; height: 369px; }
.schermo .modulo[data-modulo="pomodoro"] { width: 380px; height: 399px; }
.schermo .modulo[data-modulo="memo"] { width: 410px; height: 349px; }
.schermo .modulo[data-modulo="mirror"] { width: 400px; height: 419px; }
.schermo .modulo[data-attivo="si"] {
  display: flex;
  animation: entra-modulo 0.3s ease both;
}
.schermo .modulo[data-modulo="media"] {
  top: 91px;
  left: 0;
  width: 400px;
  height: 145px;
}

@keyframes entra-modulo {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

/* Intestazione comune a tutti i moduli. */
.intestazione {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--secondario);
  flex: none;
}
.intestazione .simbolo {
  display: flex;
  color: var(--tinta);
}
.intestazione .simbolo svg { width: 11px; height: 11px; }
.intestazione h4 {
  margin: 0;
  font-family: "SF Pro Rounded", ui-rounded, var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2px;
  color: var(--secondario);
}
.intestazione .coda {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--terziario);
  letter-spacing: 0;
}

.elenco {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Tray ---------- */

.schermo .modulo[data-modulo="tray"] .intestazione { padding-bottom: 8px; }

.file-vassoio {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Centrato come nell'app, ma "safe": un `center` normale, quando il
     contenuto e' piu' alto dello spazio, sborda da *entrambi* i lati e la
     prima riga finiva sopra l'intestazione. Nell'app non succede perche' li'
     l'elenco e' una ScrollView, che non esce mai dalla sua cornice. */
  justify-content: safe center;
  overflow: hidden;
  gap: 12px;
}
.schermo .riga-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}
.schermo .riga-file .scelta-riga { color: rgba(0, 0, 0, 0.28); display: flex; }
.schermo .riga-file .scelta-riga svg { width: 15px; height: 15px; }
.schermo .riga-file .icona-file {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  flex: none;
  background: linear-gradient(160deg, #9fb6d8, #5d7ba6);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5);
}
.schermo .riga-file:nth-child(2) .icona-file { background: linear-gradient(160deg, #f6b96b, #d1495b); }
.schermo .riga-file:nth-child(3) .icona-file { background: linear-gradient(160deg, #7bdff2, #3d7ea6); }
.schermo .riga-file .nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tondo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tondo svg { width: 14px; height: 14px; }
.tondo.invia { background: color-mix(in srgb, var(--tinta) 12%, transparent); color: var(--tinta); }
.tondo.cestina { background: rgba(255, 69, 58, 0.1); color: rgba(255, 69, 58, 0.7); }

.titolo-screenshot {
  flex: none;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.5px;
  color: var(--secondario);
  padding-top: 16px;
  padding-bottom: 4px;
}

.riga-screenshot {
  flex: none;
  display: flex;
  gap: 8px;
}
.bottone-materiale {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.12);
  color: var(--primario);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  cursor: default;
}
.bottone-materiale svg { width: 13px; height: 13px; }

/* ---------- Clipboard ---------- */

.schermo .modulo[data-modulo="clipboard"] .intestazione { padding-bottom: 10px; }

.riga-ricerca {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.campo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--secondario);
  font-size: 13px;
}
.campo svg { width: 14px; height: 14px; flex: none; }
.bottone-tinta {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tinta) 12%, transparent);
  color: var(--tinta);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
}
.bottone-tinta svg { width: 12px; height: 12px; }

.schermo .riga-appunto {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
}
.schermo .riga-appunto p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: var(--primario);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.schermo .riga-appunto .tondo {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.1);
  color: var(--primario);
}
.schermo .riga-appunto .tondo svg { width: 16px; height: 16px; }

/* ---------- Calendario ---------- */

.schermo .modulo[data-modulo="calendario"] .intestazione { padding-bottom: 4px; }

.giornata {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  /* Nell'app l'elenco sfuma sui bordi invece di essere tagliato di netto. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%);
}
.schermo .riga-impegno {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.schermo .riga-impegno .banda {
  width: 3px;
  border-radius: 2px;
  flex: none;
  background: var(--tinta);
}
.schermo .riga-impegno .corpo { flex: 1; min-width: 0; }
.schermo .riga-impegno strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schermo .riga-impegno .quando {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
}
.schermo .riga-impegno .ora {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--secondario);
}
.schermo .riga-impegno .luogo { font-size: 10px; color: var(--terziario); }
.schermo .riga-impegno .in-corso {
  align-self: center;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 15%, transparent);
}
.schermo .riga-impegno .spunta { display: flex; align-items: center; color: var(--secondario); }
.schermo .riga-impegno .spunta svg { width: 14px; height: 14px; }
.schermo .riga-impegno.scaduto .spunta,
.schermo .riga-impegno.scaduto .ora { color: #ff9f0a; }
.schermo .riga-impegno.promemoria strong { font-weight: 500; }

.campo-promemoria {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--secondario);
  font-size: 12px;
}
.campo-promemoria .piu { color: var(--tinta); display: flex; }
.campo-promemoria svg { width: 12px; height: 12px; }
.campo-promemoria .segnaposto { flex: 1; color: var(--terziario); }

/* ---------- Pomodoro ---------- */

.schermo .modulo[data-modulo="pomodoro"] {
  align-items: center;
  padding: 16px;
  gap: 10px;
}
.capsula-modo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--secondario);
}
.capsula-modo .simbolo { color: var(--tinta); display: flex; }
.capsula-modo .simbolo svg { width: 11px; height: 11px; }
.capsula-modo b {
  font-family: "SF Pro Rounded", ui-rounded, var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}
.capsula-modo .scambia svg { width: 12px; height: 12px; display: block; }

.quadrante {
  position: relative;
  width: 220px;
  height: 220px;
  flex: none;
}
.quadrante svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quadrante .traccia { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 8; }
.quadrante .avanzamento {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 8;
  stroke-linecap: round;
}
.quadrante .tempo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 54px;
  font-weight: 300;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--primario);
  text-shadow: 0 0 10px color-mix(in srgb, var(--tinta) 28%, transparent);
}

.stato-sessione {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
}
.stato-sessione i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tinta);
}

.comandi-capsula {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 0.7px rgba(255, 255, 255, 0.18);
}
.comandi-capsula button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.comandi-capsula button svg { width: 14px; height: 14px; }
.comandi-capsula button.acceso {
  color: var(--tinta);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tinta) 30%, transparent);
}

.sessioni-fatte {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--secondario);
}
.sessioni-fatte .verde { color: #32d74b; display: flex; }
.sessioni-fatte svg { width: 13px; height: 13px; }

/* ---------- Memo ---------- */

.schermo .modulo[data-modulo="memo"] { align-items: center; gap: 16px; }
.schermo .modulo[data-modulo="memo"] .intestazione {
  align-self: stretch;
  padding-bottom: 8px;
}

.bottone-registra {
  width: 76px;
  height: 76px;
  border: none;
  border-radius: 50%;
  flex: none;
  background: #ff453a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.bottone-registra svg { width: 30px; height: 30px; }

.elenco-memo {
  align-self: stretch;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%);
}
.schermo .riga-memo {
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.schermo .riga-memo .capo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.schermo .riga-memo .capo svg { width: 22px; height: 22px; color: var(--primario); }
.schermo .riga-memo .nome {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schermo .riga-memo .strumento { color: var(--secondario); display: flex; }
.schermo .riga-memo .strumento svg { width: 14px; height: 14px; }
.schermo .riga-memo .strumento.rosso { color: rgba(255, 69, 58, 0.8); }
.schermo .riga-memo .trascrizione {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding-left: 2px;
  font-size: 10px;
  color: var(--secondario);
}
.schermo .riga-memo .trascrizione svg { width: 10px; height: 10px; flex: none; margin-top: 2px; }

/* ---------- Media ---------- */

/* Il player arriva ai bordi del pannello e porta la tinta della copertina:
   materiale, sopra il gradiente della tinta, sopra un velo nero al 22% che
   tiene leggibile il testo bianco anche su copertine chiare. */
.schermo .modulo[data-modulo="media"] {
  padding: 10px 12px 12px;
  gap: 4px;
  border-radius: 0 0 24px 24px;
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    linear-gradient(135deg, color-mix(in srgb, var(--tinta) 90%, transparent), color-mix(in srgb, var(--tinta) 40%, transparent)),
    var(--materiale);
  color: #fff;
}
.marchio-player {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}
.marchio-player svg { width: 10px; height: 10px; }

.schermo .brano {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto 0;
}
.copertina {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: none;
  background: linear-gradient(150deg, #ff7ab8, #7a5cff 60%, #2a1a4a);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.schermo .brano .testi { flex: 1; min-width: 0; }
.schermo .brano .titolo {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schermo .brano .artista {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schermo .comandi {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  flex: none;
}
.schermo .comandi svg { width: 14px; height: 14px; display: block; }
.schermo .comandi .grande svg { width: 22px; height: 22px; }

.riga-tempo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.cursore-tempo {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
}
.cursore-tempo i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 99px;
  background: #fff;
}
.cursore-tempo i::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ---------- Specchio ---------- */

.schermo .modulo[data-modulo="mirror"] { align-items: center; }
.schermo .modulo[data-modulo="mirror"] .intestazione {
  align-self: center;
  padding-bottom: 20px;
}
.cerchio-specchio {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.3), 0 5px 10px rgba(0, 0, 0, 0.4);
  color: rgba(0, 0, 0, 0.3);
}
.cerchio-specchio svg { width: 80px; height: 80px; }
.cerchio-specchio span {
  font-size: 13px;
  font-weight: 600;
  color: var(--secondario);
  max-width: 200px;
}
.bottone-camera {
  width: 56px;
  height: 56px;
  margin-top: 24px;
  border: none;
  border-radius: 50%;
  flex: none;
  background: var(--tinta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.bottone-camera svg { width: 22px; height: 22px; }


/* ---------- Il file da trascinare dentro la tacca ---------- */

/* Sta sulla scrivania come una qualsiasi icona del Finder. Trascinandolo verso
   la tacca il pannello si apre da solo: nell'app succede perche' il monitor
   degli eventi osserva anche .leftMouseDragged, non solo il movimento. */
.file-scrivania {
  position: absolute;
  left: 96px;
  top: 300px;
  z-index: 3;
  width: 96px;
  padding: 8px 6px 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  cursor: grab;
  touch-action: none;
  transition: transform 0.28s var(--molla-riga), opacity 0.2s ease,
    box-shadow 0.2s ease, background 0.2s ease;
}
.file-scrivania:hover { background: rgba(255, 255, 255, 0.12); }
.file-scrivania .icona-file {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(160deg, #7bdff2, #3d7ea6);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.file-scrivania .nome {
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  line-height: 1.25;
  /* Un nome corto sta su una riga come nel Finder: spezzarlo a meta' parola
     faceva sembrare l'icona rotta proprio mentre la si trascina. */
  white-space: nowrap;
}

/* Mentre lo si trascina segue il puntatore e si stacca dal fondo. */
.file-scrivania[data-preso="si"] {
  cursor: grabbing;
  z-index: 9;
  background: none;
  transition: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
  opacity: 0.92;
}

/* Suggerimento: chi guarda deve capire che quel file si puo' prendere. */
.file-scrivania::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.scena[data-stato="chiuso"] .file-scrivania:not([data-preso="si"])::after { opacity: 1; }

/* Bersaglio: nell'app e' un tratteggio da 2 pt nel colore del vassoio,
   con il ritmo 8-4, che compare quando il file passa sopra la lista. */
.file-vassoio[data-bersaglio="si"] {
  outline: 2px dashed color-mix(in srgb, var(--tinta) 70%, transparent);
  outline-offset: -1px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--tinta) 10%, transparent);
}

/* La riga appena arrivata entra con la sua molla. */
.schermo .riga-file[data-nuova="si"] {
  animation: entra-riga var(--durata-molla-riga) var(--molla-riga) both;
}

@keyframes entra-riga {
  from { opacity: 0; transform: scale(0.84); }
  to { opacity: 1; transform: none; }
}

/* ---------- Scheda sotto la tacca ---------- */

/* Misure vere: 180x46, staccata di 8 dalla pillola, raggio 16. Il fondo e' il
   materiale con sopra il velo della tinta, come CompactMediaCard. */
.scheda-sotto {
  position: absolute;
  top: 41px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 180px;
  height: 46px;
  padding: 0 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tinta) 85%, transparent), color-mix(in srgb, var(--tinta) 32%, transparent)),
    var(--materiale);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 8px 18px color-mix(in srgb, var(--tinta) 42%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--primario);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.scena[data-stato="aperto"] .scheda-sotto,
.scheda-sotto[data-uscita="si"] {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}
.scheda-sotto .miniatura {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex: none;
  background: linear-gradient(150deg, #ff7ab8, #7a5cff 60%, #2a1a4a);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scheda-sotto .miniatura svg { width: 14px; height: 14px; }
/* Icona in tondo della scheda impegno: 28 pt, fondo in tinta al 18%. */
.scheda-sotto .cerchio-icona {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tinta) 18%, transparent);
  color: var(--tinta);
}
.scheda-sotto .cerchio-icona svg { width: 14px; height: 14px; }
.scheda-sotto .testo strong.cifre {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.scheda-sotto .testo small.minuto {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--secondario);
}
.scheda-sotto .testo { flex: 1; min-width: 0; }
.scheda-sotto .testo strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scheda-sotto .testo small {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--secondario);
}
.scheda-sotto .filo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: rgba(0, 0, 0, 0.16);
}
.scheda-sotto .filo::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: color-mix(in srgb, var(--tinta) 82%, white);
}

/* Equalizzatore: nell'app e' Core Animation per non far lavorare la CPU.
   Qui bastano quattro barre in CSS, ferme se l'utente chiede meno movimento. */
.schermo .onda {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  width: 18px;
  flex: none;
}
.schermo .onda i {
  display: block;
  flex: 1;
  border-radius: 1px;
  background: var(--primario);
  transform-origin: bottom;
  animation: pulsa 1.15s ease-in-out infinite;
}
.schermo .onda i:nth-child(1) { height: 45%; animation-delay: 0s; }
.schermo .onda i:nth-child(2) { height: 95%; animation-delay: 0.16s; }
.schermo .onda i:nth-child(3) { height: 60%; animation-delay: 0.32s; }
.schermo .onda i:nth-child(4) { height: 80%; animation-delay: 0.48s; }

@keyframes pulsa {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Anello del timer sulla scheda: 28 pt, riga da 3. */
.anello-scheda { width: 28px; height: 28px; flex: none; }
.anello-scheda svg { width: 28px; height: 28px; transform: rotate(-90deg); }
.anello-scheda .traccia { fill: none; stroke: rgba(0, 0, 0, 0.14); stroke-width: 3; }
.anello-scheda .avanzamento {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linecap: round;
}

/* ---------- Zona sensibile e cursore guida ---------- */

/* Nell'app l'ingresso e' rilevato da un monitor NSEvent che confronta la
   posizione del mouse con un rettangolo. Qui il rettangolo e' un elemento. */
.zona-tacca {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 245px;
  height: 58px;
  z-index: 8;
}
.scena[data-stato="aperto"] .zona-tacca { pointer-events: none; }

/* Cursore guida: se nessuno avvicina il mouse, la demo si fa da sola. */
.cursore-guida {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  transition: opacity 0.3s ease, transform 0.9s cubic-bezier(0.4, 0.02, 0.2, 1);
}
.cursore-guida[data-visibile="si"] { opacity: 1; }
.cursore-guida[data-premuto="si"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 26px;
  height: 26px;
  margin: -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  animation: tocco 0.45s ease-out;
}

@keyframes tocco {
  from { transform: scale(0.2); opacity: 0.9; }
  to { transform: scale(1.5); opacity: 0; }
}

/* Dove non c'e' un puntatore la guida non e' una freccia: e' un polpastrello. */
.scena[data-tocco="si"] .cursore-guida path { display: none; }
.scena[data-tocco="si"] .cursore-guida {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}

/* ---------- Contorno del portatile e didascalia ---------- */

.base-coperchio {
  height: 11px;
  width: 42%;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #2a2e38, #14161c);
  border: 1px solid var(--bordo);
  border-top: none;
  position: relative;
}
/* L'incavo per aprire il coperchio: due pixel, ma e' quello che lo fa
   leggere come un portatile e non come un riquadro. */
.base-coperchio::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14%;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: rgba(0, 0, 0, 0.45);
}

.didascalia {
  text-align: center;
  color: var(--testo-fioco);
  font-size: 13.5px;
  margin: 18px 0 0;
  min-height: 40px;
}
.didascalia b { color: var(--testo-tenue); font-weight: 600; }

/* Chi ha chiesto meno movimento non lo subisce: niente molla, niente
   equalizzatore, niente cursore guida (lo spegne anche demo.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bottone { transition: none; }
  .schermo .onda i { animation: none; }
  .pannello { transition: none; }
  .schermo .modulo[data-attivo="si"] { animation: none; }
  .scheda-sotto { transition: none; }
  .cursore-guida { display: none; }
}

/* ---------- Griglia dei moduli ---------- */

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 26px 24px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.scheda:hover {
  border-color: var(--bordo-forte);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.scheda-icona {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 141, 255, 0.14);
  color: #9dc0ff;
  margin-bottom: 16px;
}
.scheda-icona svg { width: 19px; height: 19px; }

.scheda h3 {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.scheda p {
  margin: 0;
  color: var(--testo-tenue);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Fascia dei fatti ---------- */

.fatti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--bordo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}

.fatto { background: var(--sfondo-alt); padding: 28px 24px; }

.fatto-valore {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}

.fatto-etichetta { color: var(--testo-tenue); font-size: 14.5px; margin: 0; }

/* ---------- Prezzo ---------- */

.prezzo-scheda {
  max-width: 460px;
  margin: 0 auto;
  background: var(--sfondo-alt);
  border: 1px solid var(--bordo-forte);
  border-radius: 20px;
  padding: 40px 34px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.prezzo-cifra {
  font-size: 56px;
  font-weight: 680;
  letter-spacing: -0.04em;
  margin: 0;
  line-height: 1;
}

.prezzo-nota { color: var(--testo-tenue); margin: 10px 0 26px; font-size: 15.5px; }

.elenco-prezzo {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  text-align: left;
  display: grid;
  gap: 11px;
}
.elenco-prezzo li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--testo-tenue);
  font-size: 15px;
}
.elenco-prezzo svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--verde); }

.microcopy { color: var(--testo-fioco); font-size: 13px; margin: 22px 0 0; }

/* ---------- Confronto ---------- */

.tabella-avvolgi { overflow-x: auto; border-radius: var(--raggio); border: 1px solid var(--bordo); }

table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }

th, td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--bordo); }
th { background: var(--sfondo-alt); font-weight: 600; font-size: 14px; color: var(--testo-tenue); }
td { color: var(--testo-tenue); }
td:first-child { color: var(--testo); font-weight: 550; }
tr:last-child td { border-bottom: none; }

/* ---------- Domande ---------- */

.faq { display: grid; gap: 12px; }

details {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  padding: 4px 20px;
}
details[open] { border-color: var(--bordo-forte); }

summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 570;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--testo-fioco);
  font-size: 20px;
  font-weight: 400;
  flex: none;
}
details[open] summary::after { content: "\2212"; }

details > p {
  margin: 0 0 18px;
  color: var(--testo-tenue);
  font-size: 15.5px;
}

/* ---------- Pagine di testo ---------- */

.pagina-testo { padding: 64px 0 88px; }
.pagina-testo h1 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: 8px; }
.pagina-testo h2 {
  font-size: 20px;
  font-weight: 620;
  letter-spacing: -0.015em;
  margin: 40px 0 12px;
}
.pagina-testo p, .pagina-testo li { color: var(--testo-tenue); font-size: 16.5px; }
.pagina-testo ul { padding-left: 20px; }
.pagina-testo li { margin-bottom: 8px; }

.aggiornato { color: var(--testo-fioco); font-size: 14.5px; margin: 0 0 8px; }

.avviso {
  border: 1px solid rgba(76, 141, 255, 0.35);
  background: rgba(76, 141, 255, 0.08);
  border-radius: var(--raggio-s);
  padding: 16px 20px;
  margin: 28px 0;
}
.avviso p { margin: 0; font-size: 15px; }

/* ---------- Changelog ---------- */

.versione {
  border-left: 2px solid var(--bordo-forte);
  padding: 0 0 28px 24px;
  position: relative;
}
.versione::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accento);
}
.versione h2 { margin: 0 0 2px; font-size: 19px; }
.versione .data { color: var(--testo-fioco); font-size: 14px; margin: 0 0 12px; }
.versione ul { margin: 0; padding-left: 20px; }

/* ---------- Piede ---------- */

footer {
  border-top: 1px solid var(--bordo);
  padding: 44px 0;
  color: var(--testo-fioco);
  font-size: 14.5px;
}

.piede-interno {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.piede-link { display: flex; gap: 20px; flex-wrap: wrap; }
.piede-link a { color: var(--testo-fioco); }
.piede-link a:hover { color: var(--testo); text-decoration: none; }