/* FloatPill — 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;
  /* 5,85:1 sullo sfondo e 5,6:1 sulle schede: il vecchio #6c7482 stava a
     4,15 e 3,97, sotto il 4,5 che serve al testo piccolo. */
  --testo-fioco: #858d9b;
  --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;

  /* 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;
}

/* 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;
  /* Il nome e' in SF Pro Rounded Bold. Non si puo' servire come webfont (licenza
     Apple): Safari lo prende dal sistema con ui-rounded, gli altri browser cadono
     sul grassetto di sistema. */
  font-family: ui-rounded, "SF Pro Rounded", var(--font);
  font-weight: 700;
  font-size: 19px;
  color: var(--testo);
  letter-spacing: -0.01em;
  /* Il nome non deve mai andare a capo sotto il marchio. */
  white-space: nowrap;
}
.marchio:hover { text-decoration: none; }
/* Il dominio accanto al nome. Serviva quando l'app si chiamava Dynamic Notch
   e c'era un omonimo su .tech; con FloatPill (3.0) il marchio non lo usa piu',
   la regola resta per chi volesse rimetterlo. */
.marchio .dominio {
  margin-left: 1px;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--testo-fioco);
}

/* 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; }
/* Il pulsante nel menu e' un link come gli altri: senza questa riga prendeva il
   grigio dei link e il testo spariva nel blu. */
.nav-link a.bottone-primario,
.nav-link a.bottone-primario:hover { color: #fff; }

/* Cinque voci piu' il pulsante non stanno accanto al marchio sotto gli 860 px. */
@media (max-width: 860px) {
  .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. */
/* Il pulsante del menu non va mai a capo: su due righe sembrava rotto. */
.nav-link .bottone { white-space: nowrap; }

@media (max-width: 480px) {
  /* Con ".app" accanto al nome la riga non ci stava piu': margini laterali da
     16 invece di 24 e un pulsante piu' compatto. */
  .contenitore { padding: 0 16px; }
  .nav-link { gap: 12px; }
  .nav-link .bottone-piccolo { padding: 8px 12px; font-size: 13px; }
  .marchio { font-size: 17px; 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 {
  text-wrap: balance;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 650;
  margin: 0 0 14px;
}

.sottotitolo-sezione {
  text-wrap: pretty;
  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; }

/* L'a capo del titolo e' pensato per lo schermo largo: su un telefono lasciava
   "vivono" da solo su una riga. */
@media (max-width: 560px) { .hero h1 br { display: none; } }

.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 {
  text-wrap: balance;
  font-size: clamp(38px, 6.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 680;
  margin: 0 0 22px;
}

.hero-sommario {
  text-wrap: pretty;
  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;

  /* 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;
  /* Lo schermo e' largo 1000 anche quando la scala lo rimpicciolisce: con un
     semplice hidden il browser poteva farlo scorrere di lato per mostrare un
     elemento (capitato: 98 px, la scrivania tagliata a sinistra). clip vieta
     anche lo scorrimento programmatico. */
  overflow: clip;
  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;
}
:is(.schermo, .mac) .riga-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}
:is(.schermo, .mac) .riga-file .scelta-riga { color: rgba(0, 0, 0, 0.28); display: flex; }
:is(.schermo, .mac) .riga-file .scelta-riga svg { width: 15px; height: 15px; }
:is(.schermo, .mac) .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);
}
:is(.schermo, .mac) .riga-file:nth-child(2) .icona-file { background: linear-gradient(160deg, #f6b96b, #d1495b); }
:is(.schermo, .mac) .riga-file:nth-child(3) .icona-file { background: linear-gradient(160deg, #7bdff2, #3d7ea6); }
:is(.schermo, .mac) .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; }

:is(.schermo, .mac) .riga-appunto {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
}
:is(.schermo, .mac) .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;
}
:is(.schermo, .mac) .riga-appunto .tondo {
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.1);
  color: var(--primario);
}
:is(.schermo, .mac) .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%);
}
:is(.schermo, .mac) .riga-impegno {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
:is(.schermo, .mac) .riga-impegno .banda {
  width: 3px;
  border-radius: 2px;
  flex: none;
  background: var(--tinta);
}
:is(.schermo, .mac) .riga-impegno .corpo { flex: 1; min-width: 0; }
:is(.schermo, .mac) .riga-impegno strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.schermo, .mac) .riga-impegno .quando {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 2px;
}
:is(.schermo, .mac) .riga-impegno .ora {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--secondario);
}
:is(.schermo, .mac) .riga-impegno .luogo { font-size: 10px; color: var(--terziario); }
:is(.schermo, .mac) .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);
}
:is(.schermo, .mac) .riga-impegno .spunta { display: flex; align-items: center; color: var(--secondario); }
:is(.schermo, .mac) .riga-impegno .spunta svg { width: 14px; height: 14px; }
:is(.schermo, .mac) .riga-impegno.scaduto .spunta,
:is(.schermo, .mac) .riga-impegno.scaduto .ora { color: #ff9f0a; }
:is(.schermo, .mac) .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%);
}
:is(.schermo, .mac) .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);
}
:is(.schermo, .mac) .riga-memo .capo {
  display: flex;
  align-items: center;
  gap: 10px;
}
:is(.schermo, .mac) .riga-memo .capo svg { width: 22px; height: 22px; color: var(--primario); }
:is(.schermo, .mac) .riga-memo .nome {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.schermo, .mac) .riga-memo .strumento { color: var(--secondario); display: flex; }
:is(.schermo, .mac) .riga-memo .strumento svg { width: 14px; height: 14px; }
:is(.schermo, .mac) .riga-memo .strumento.rosso { color: rgba(255, 69, 58, 0.8); }
:is(.schermo, .mac) .riga-memo .trascrizione {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding-left: 2px;
  font-size: 10px;
  color: var(--secondario);
}
:is(.schermo, .mac) .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;
  /* Sotto le finestre delle scene (3), come le icone del Finder. */
  z-index: 2;
  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. */
:is(.schermo, .mac) .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: var(--avanzamento, 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. */
:is(.schermo, .mac) .onda {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  width: 18px;
  flex: none;
}
:is(.schermo, .mac) .onda i {
  display: block;
  flex: 1;
  border-radius: 1px;
  background: var(--primario);
  transform-origin: bottom;
  animation: pulsa 1.15s ease-in-out infinite;
}
:is(.schermo, .mac) .onda i:nth-child(1) { height: 45%; animation-delay: 0s; }
:is(.schermo, .mac) .onda i:nth-child(2) { height: 95%; animation-delay: 0.16s; }
:is(.schermo, .mac) .onda i:nth-child(3) { height: 60%; animation-delay: 0.32s; }
:is(.schermo, .mac) .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; }
  :is(.schermo, .mac) .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; }

/* =====================================================================
   Home dalla 2.6: le funzioni si vedono, non si leggono soltanto.

   Ogni illustrazione qui sotto e' un pezzo vero dell'interfaccia, con le
   misure dell'app (le schede sotto la tacca sono 180/240/290 x 46, raggio 16,
   staccate 8 pt dalla pillola), posato su un ritaglio di scrivania. Stessa
   regola della demo: chi scarica deve ritrovare quello che ha visto.
   ===================================================================== */

/* L'aspetto chiaro dell'app fuori dalla demo: gli stessi colori misurati di
   .scena, per le vetrine e le tessere dei moduli. */
.mac {
  --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);
  position: relative;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  color: var(--primario);
  user-select: none;
  cursor: default;
}
.mac p,
.mac h4 { margin: 0; }

/* Sfondi di scrivania: solo gradienti, niente immagini da scaricare. */
.sfondo.tramonto {
  background:
    radial-gradient(ellipse 70% 90% at 18% 0%, rgba(255, 196, 150, 0.9), transparent 60%),
    radial-gradient(ellipse 70% 90% at 90% 100%, rgba(233, 110, 150, 0.75), transparent 62%),
    linear-gradient(160deg, #b0644f 0%, #8d4a78 55%, #4a3470 100%);
}
.sfondo.sera {
  background:
    radial-gradient(ellipse 70% 80% at 80% 0%, rgba(120, 190, 255, 0.8), transparent 60%),
    radial-gradient(ellipse 70% 90% at 10% 100%, rgba(170, 120, 255, 0.7), transparent 62%),
    linear-gradient(160deg, #3d58b8 0%, #5a3f96 55%, #2a2f6b 100%);
}
.sfondo.tinta {
  background:
    radial-gradient(ellipse 70% 100% at 22% 0%, color-mix(in srgb, var(--tinta) 70%, white 30%), transparent 65%),
    radial-gradient(ellipse 80% 100% at 92% 100%, color-mix(in srgb, var(--tinta) 55%, #ff9ad5), transparent 68%),
    linear-gradient(160deg, color-mix(in srgb, var(--tinta) 62%, #3b3f8a), color-mix(in srgb, var(--tinta) 34%, #25224f));
}

/* ---------- Etichetta dell'hero come collegamento ---------- */

a.etichetta { transition: border-color 0.2s, background 0.2s, color 0.2s; }
a.etichetta:hover {
  text-decoration: none;
  color: var(--testo);
  border-color: var(--bordo-forte);
  background: rgba(255, 255, 255, 0.07);
}
.etichetta .nuovo { color: #f0a283; font-weight: 650; }
.etichetta .freccia { color: var(--testo-fioco); transition: transform 0.2s ease; }
a.etichetta:hover .freccia { transform: translateX(2px); }

/* ---------- Occhiello e riflettori ---------- */

.occhiello {
  --tinta: var(--accento);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tinta) 72%, white);
}
.occhiello svg { width: 16px; height: 16px; }

/* Una sezione dedicata a una funzione sola: testo da una parte, la funzione
   vera dall'altra, e un alone del suo colore dietro. */
.riflettore { position: relative; overflow: hidden; }
.riflettore::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at var(--alone-x, 72%) 30%,
    color-mix(in srgb, var(--tinta) 13%, transparent), transparent 70%);
  pointer-events: none;
}
.riflettore > .contenitore { position: relative; }
.riflettore .titolo-sezione { font-size: clamp(30px, 4.6vw, 48px); }
.riflettore .sottotitolo-sezione { margin-bottom: 30px; }

.riflettore-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
/* Nel codice il testo viene prima (e' quello che si legge per primo su un
   telefono); su uno schermo largo l'illustrazione puo' stare a sinistra. */
.riflettore-griglia.rovescia { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.riflettore-griglia.rovescia > .riflettore-visivo { order: -1; }

@media (max-width: 900px) {
  .riflettore-griglia,
  .riflettore-griglia.rovescia { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .riflettore-griglia.rovescia > .riflettore-visivo { order: 0; }
}

.riflettore-visivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.punti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.punti li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  color: var(--testo-tenue);
  font-size: 16px;
  line-height: 1.55;
}
.punti li b { color: var(--testo); font-weight: 600; }
.punti .segno {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tinta) 16%, transparent);
  color: color-mix(in srgb, var(--tinta) 72%, white);
}
.punti .segno svg { width: 15px; height: 15px; }

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

/* ---------- Vetrina: un ritaglio della parte alta dello schermo ----------

   Disegnata in punti come l'app e scalata in blocco con --k: il contenuto
   occupa tutta la larghezza disponibile divisa per la scala, cosi' la barra
   dei menu arriva ai bordi e la tacca resta al centro a qualunque misura. */
.vetrina {
  --k: 1.25;
  position: relative;
  width: 100%;
  height: calc(var(--alto) * var(--k));
  border-radius: 20px;
  overflow: hidden;
  overflow: clip;
  background: #05060a;
  border: 1px solid var(--bordo-forte);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.vetrina > .mac {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--k));
  height: var(--alto);
  overflow: hidden;
  overflow: clip;
  transform: scale(var(--k));
  transform-origin: top left;
}
/* La vetrina dell'uso di Claude mostra una scheda sola: puo' essere piu' vicina. */
.vetrina.grande { --k: 1.6; }
@media (max-width: 560px) { .vetrina { --k: 0.95; } .vetrina.grande { --k: 1.1; } }
@media (max-width: 400px) { .vetrina { --k: 0.82; } .vetrina.grande { --k: 0.95; } }

/* Nelle vetrine la barra dei menu porta solo il nome dell'app in primo piano:
   e' quello che decide quale scheda compare sotto la tacca. */
.vetrina .barra-menu { font-size: 12.5px; }

.didascalia-vetrina {
  margin: 14px 0 0;
  min-height: 2.8em;
  max-width: 440px;
  text-align: center;
  color: var(--testo-fioco);
  font-size: 13.5px;
}
.didascalia-vetrina b { color: var(--testo-tenue); font-weight: 600; }

/* ---------- La scheda dell'uso dell'IA (UsoIACardView) ---------- */

/* 240 x 46, velo della tinta dal 40 al 12%, ombra della tinta al 22%. Finche'
   c'e' margine la tinta e' quella del fornitore; poi diventa l'allarme. */
.scheda-sotto[data-tipo="ia"] {
  --tinta: #d97757;
  --colore-ia: rgba(0, 0, 0, 0.6);
  --colore-cifra: var(--primario);
  gap: 10px;
  padding: 0 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tinta) 40%, transparent), color-mix(in srgb, var(--tinta) 12%, 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) 22%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
/* ChatGPT ha il grigio neutro che l'app gli da' (FornitoreIA.tinta = .gray).
   Viene prima dei livelli: arancione e rosso vincono su qualunque fornitore. */
.scheda-sotto[data-tipo="ia"][data-fornitore="chatgpt"] { --tinta: #8e8e93; }
.scheda-sotto[data-tipo="ia"][data-livello="alto"] {
  --tinta: #ff9500;
  --colore-ia: #ff9500;
  --colore-cifra: #ff9500;
}
.scheda-sotto[data-tipo="ia"][data-livello="critico"] {
  --tinta: #ff3b30;
  --colore-ia: #ff3b30;
  --colore-cifra: #ff3b30;
}
.scheda-sotto[data-tipo="ia"] .testo strong { font-size: 12px; }
.scheda-sotto[data-cambio="si"] { animation: sobbalzo 0.45s var(--molla-riga); }

@keyframes sobbalzo {
  from { scale: 0.94; }
  to { scale: 1; }
}

/* Le schede d'attivita' (avvisi, file ricevuti): velo dal 75 al 25%. */
.scheda-sotto[data-tipo="attivita"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tinta) 75%, transparent), color-mix(in srgb, var(--tinta) 25%, 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) 28%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
.scheda-sotto .icona-attivita {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  color: var(--tinta);
}
.scheda-sotto .icona-attivita svg { width: 15px; height: 15px; }

.anello-ia-scheda { position: relative; width: 28px; height: 28px; flex: none; }
.anello-ia-scheda .logo {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 14px;
  height: 14px;
  color: #d97757;
}
.anello-ia-scheda .logo.generico { color: rgba(0, 0, 0, 0.62); }

/* L'anello: fermo, nessuna animazione continua, come nell'app. Si muove solo
   quando cambia il valore. */
svg.anello { display: block; transform: rotate(-90deg); }
svg.anello .traccia { fill: none; stroke: rgba(0, 0, 0, 0.13); }
svg.anello .avanzamento {
  fill: none;
  stroke: var(--colore-ia, rgba(0, 0, 0, 0.6));
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s var(--molla), stroke 0.3s ease;
}
.anello-ia-scheda svg.anello { width: 28px; height: 28px; }
.anello-ia-scheda svg.anello circle { stroke-width: 3; }

.cifra-ia {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--colore-cifra);
  transition: color 0.3s ease;
}

/* ---------- L'anello accanto all'ingranaggio (UsoIAAnelloView) ---------- */

/* Nella stessa riga dell'ingranaggio, 10 pt alla sua sinistra: a destra del
   ritaglio restano circa 70 pt sul modulo piu' stretto e la capsula ne
   occupa una sessantina. */
.anello-ia {
  position: absolute;
  top: 15px;
  right: 46px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 3px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.07);
  outline: none;
}
.anello-ia:hover,
.anello-ia:focus-visible { background: rgba(0, 0, 0, 0.12); }
.anello-ia .segno { position: relative; width: 18px; height: 18px; flex: none; }
.anello-ia .segno svg.anello { width: 18px; height: 18px; }
.anello-ia .segno svg.anello circle { stroke-width: 2; }
.anello-ia .segno .logo {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  color: #d97757;
}
.anello-ia .cifra {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--secondario);
}

/* Il dettaglio compare sopra, allineato a destra, senza spostare niente. */
.dettaglio-ia {
  position: absolute;
  top: 28px;
  right: 0;
  width: 210px;
  padding: 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: rgba(244, 244, 246, 0.94);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: scale(0.9);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.3s var(--molla-riga);
}
.anello-ia:hover .dettaglio-ia,
.anello-ia:focus-visible .dettaglio-ia { opacity: 1; transform: none; }
.dettaglio-ia .capo-ia {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}
.dettaglio-ia .capo-ia svg { width: 12px; height: 12px; color: #d97757; }
.riga-ia { display: flex; flex-direction: column; gap: 3px; }
.riga-ia .etich {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
}
.riga-ia .etich b { font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(0, 0, 0, 0.6); }
.riga-ia .barra {
  height: 4px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
}
.riga-ia .barra i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.6);
}
.riga-ia small { font-size: 9px; font-weight: 500; color: var(--secondario); }

/* ---------- Interruttore dei livelli d'uso ---------- */

.interruttori {
  display: inline-flex;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
}
.interruttori button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--testo-tenue);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.interruttori button:hover { color: var(--testo); }
.interruttori button svg { width: 14px; height: 14px; flex: none; }
.interruttori .segno-claude { color: #d97757; }

/* Due gruppi affiancati: quale app e' in primo piano, e quanto si e' usato. */
.comandi-ia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.comandi-ia .interruttori { margin-top: 0; }
.interruttori button i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.interruttori button[data-livello="normale"] i { background: #d97757; }
.interruttori button[data-livello="alto"] i { background: #ff9500; }
.interruttori button[data-livello="critico"] i { background: #ff3b30; }
.interruttori button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: var(--testo); }

/* ---------- Gli avvisi degli agenti ---------- */

.avvisi-ia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 80px;
}
@media (max-width: 900px) { .avvisi-ia { grid-template-columns: minmax(0, 1fr); margin-top: 56px; } }

.avviso-ia {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--superficie);
  border: 1px solid var(--bordo);
}
.avviso-ia > .mac { height: 104px; overflow: hidden; flex: none; }
.avviso-ia .testo-avviso { padding: 20px 22px 24px; }
.avviso-ia h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 620; letter-spacing: -0.01em; }
.avviso-ia p { margin: 0; color: var(--testo-tenue); font-size: 14.5px; line-height: 1.6; }

.nota-ia {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 28px 0 0;
  padding: 18px 22px;
  border-radius: var(--raggio);
  border: 1px solid rgba(217, 119, 87, 0.3);
  background: rgba(217, 119, 87, 0.07);
  color: var(--testo-tenue);
  font-size: 15px;
}
.nota-ia svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #f0a283; }
.nota-ia b { color: var(--testo); font-weight: 600; }

/* ---------- Il video nella tacca: la proposta che diventa il player ---------- */

/* Una sola sagoma che cambia misura, come fa l'app: la pillola rossa da
   290 x 46 (PropostaVideoCardView) si apre nel player da 320 x 180 con raggio
   14 (VideoNotchCardView), con la stessa molla del pannello. */
.video-tacca {
  position: absolute;
  top: 41px;
  left: 50%;
  z-index: 4;
  width: 290px;
  height: 46px;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  transform: translateX(-50%);
  background: rgba(219, 31, 31, 0.88);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3), 0 8px 20px rgba(219, 31, 31, 0.35);
  transition:
    width var(--durata-molla) var(--molla),
    height var(--durata-molla) var(--molla),
    border-radius 0.4s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    opacity 0.28s ease;
}
.video-tacca[data-stato="video"] {
  width: 320px;
  height: 180px;
  border-radius: 14px;
  background: #0d0f14;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.35);
}
.video-tacca[data-stato="vuoto"] { opacity: 0; }

.proposta {
  position: absolute;
  top: 0;
  left: 0;
  width: 290px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  transition: opacity 0.18s ease;
}
.video-tacca[data-stato="video"] .proposta { opacity: 0; pointer-events: none; }
.proposta .icona-play {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
}
.proposta .icona-play svg { width: 14px; height: 14px; }
.proposta .testo { flex: 1; min-width: 0; }
.proposta .testo b {
  display: block;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.proposta .testo small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proposta button {
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.proposta .si { width: 26px; height: 26px; background: #fff; color: #db1f1f; }
.proposta .si svg { width: 14px; height: 14px; }
.proposta .no { width: 22px; height: 22px; background: rgba(255, 255, 255, 0.22); color: #fff; }
.proposta .no svg { width: 9px; height: 9px; }
.proposta .si:focus-visible,
.proposta .no:focus-visible,
.comandi-video button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.filmato {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 0.12s;
}
.video-tacca[data-stato="video"] .filmato { opacity: 1; pointer-events: auto; }

/* Un fotogramma inventato, non un video vero: cielo, sole a righe, monti. */
.fotogramma {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #1c1740 0%, #4b2a86 36%, #d6588c 66%, #ffb36b 78%);
}
.fotogramma .sole {
  position: absolute;
  left: 50%;
  top: 62px;
  width: 88px;
  height: 88px;
  margin-left: -44px;
  border-radius: 50%;
  background: linear-gradient(#ffe7a3, #ff7a6b);
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 52%, transparent 57%, #000 57%, #000 66%, transparent 66%, transparent 71%, #000 71%, #000 79%, transparent 79%, transparent 85%, #000 85%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 52%, transparent 57%, #000 57%, #000 66%, transparent 66%, transparent 71%, #000 71%, #000 79%, transparent 79%, transparent 85%, #000 85%);
}
.fotogramma .monti {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 38px;
  height: 58px;
  background: #3a1b52;
  clip-path: polygon(0 100%, 0 58%, 11% 30%, 21% 54%, 33% 16%, 46% 52%, 57% 36%, 69% 62%, 81% 24%, 92% 50%, 100% 36%, 100% 100%);
}
.fotogramma .suolo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 39px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 120, 200, 0.28) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(180deg, rgba(255, 120, 200, 0.22) 0 1px, transparent 1px 9px),
    linear-gradient(#2a1433, #120a1a);
}

.comandi-video {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}
.comandi-video span,
.comandi-video button,
.maniglia-video {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(40, 40, 50, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.comandi-video button { cursor: pointer; }
.comandi-video svg { width: 11px; height: 11px; }
.maniglia-video {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 20px;
  height: 20px;
}
.maniglia-video svg { width: 9px; height: 9px; }

/* ---------- La griglia dei moduli ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } }

.tessera {
  --tinta: var(--accento);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  transition: border-color 0.25s ease, transform 0.3s var(--molla-riga), box-shadow 0.3s ease;
}
.tessera:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tinta) 42%, var(--bordo));
  box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--tinta) 60%, transparent);
}
.tessera.larga { grid-column: span 2; }
@media (max-width: 640px) { .tessera.larga { grid-column: auto; } }

.tessera > .mac { height: 160px; overflow: hidden; flex: none; }

.tessera-testo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 22px;
}
.tessera h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.tessera h3 .pallino {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tinta) 20%, transparent);
  color: color-mix(in srgb, var(--tinta) 70%, white);
}
.tessera h3 .pallino svg { width: 15px; height: 15px; }
.tessera p { margin: 0; color: var(--testo-tenue); font-size: 15px; line-height: 1.6; }

.prova-demo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 16px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--tinta) 62%, white);
  cursor: pointer;
}
.prova-demo:hover { text-decoration: underline; }
.prova-demo svg { width: 13px; height: 13px; }

/* Il pannello aperto, visto dall'alto: la tacca lo copre al centro e il
   contenuto del modulo scende sotto, sfumando dove la tessera lo taglia. */
.pannello-mini {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--largo, 420px), calc(100% - 28px));
  height: 200px;
  padding: 46px 10px 0;
  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);
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.pannello-mini .intestazione h4 { font-size: 14px; }
.pannello-mini .riga-appunto { padding: 11px 12px; }
.pannello-mini .riga-appunto .tondo { width: 30px; height: 30px; }
.pannello-mini .cerchio-specchio {
  width: 150px;
  height: 150px;
  align-self: center;
  gap: 8px;
}
.pannello-mini .cerchio-specchio svg { width: 44px; height: 44px; }
.pannello-mini .cerchio-specchio span { font-size: 11px; max-width: 110px; }

/* Due schede impilate nella stessa tessera: un posto solo sotto la tacca, e
   quello che ci passa. */
.tessera .scheda-sotto.seconda { top: 95px; opacity: 0.55; transform: translateX(-50%) scale(0.94); }

/* ---------- Tre garanzie ---------- */

.garanzie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 860px) { .garanzie { grid-template-columns: minmax(0, 1fr); } }
.garanzia {
  padding: 26px 24px;
  border-radius: var(--raggio);
  background: var(--superficie);
  border: 1px solid var(--bordo);
}
.garanzia > svg { width: 24px; height: 24px; margin-bottom: 14px; color: #9dc0ff; }
.garanzia h3 { margin: 0 0 6px; font-size: 17px; font-weight: 620; letter-spacing: -0.01em; }
.garanzia p { margin: 0; color: var(--testo-tenue); font-size: 15px; line-height: 1.6; }

/* ---------- Meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  .video-tacca,
  .tessera,
  .dettaglio-ia,
  svg.anello .avanzamento { transition: none; }
  .scheda-sotto[data-cambio="si"] { animation: none; }
}

/* La scheda della registrazione (RegistrazioneCardView): velo piatto della
   tinta che respira fra il 16 e il 26%, bordo della tinta, pulsante Stop. */
.scheda-sotto[data-tipo="registrazione"] {
  gap: 10px;
  padding: 0 12px;
  background:
    linear-gradient(color-mix(in srgb, var(--tinta) 21%, transparent), color-mix(in srgb, var(--tinta) 21%, transparent)),
    var(--materiale);
  box-shadow:
    inset 0 0 0 0.5px color-mix(in srgb, var(--tinta) 35%, transparent),
    0 8px 18px color-mix(in srgb, var(--tinta) 25%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
.scheda-sotto[data-tipo="registrazione"] .testo strong { font-size: 12px; }
.punto-reg {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--tinta);
  box-shadow: 0 0 5px color-mix(in srgb, var(--tinta) 60%, transparent);
  animation: battito 1.96s ease-in-out infinite;
}
@keyframes battito {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.scheda-sotto .testo small.durata {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}
.stop-reg {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--tinta);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.stop-reg svg { width: 9px; height: 9px; }
@media (prefers-reduced-motion: reduce) { .punto-reg { animation: none; opacity: 1; } }

/* =====================================================================
   Parte bassa della home: confronto, prezzo, domande, chiusura e piede.
   Stesso linguaggio di sopra: superfici leggere, un colore per volta, e la
   tacca come segno ricorrente.
   ===================================================================== */

.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Tabella di confronto ---------- */

.tabella-avvolgi.confronto {
  /* Riferimento per i testi .nascosto delle celle: senza, il loro blocco
     contenitore era la pagina, sfuggivano allo scorrimento della tabella e sul
     telefono allargavano tutto a 469 px. */
  position: relative;
  border-radius: 20px;
  background: var(--superficie);
}
.confronto th,
.confronto td { padding: 16px 20px; vertical-align: middle; }
.confronto thead th {
  background: none;
  padding-top: 20px;
  font-size: 14px;
  color: var(--testo-tenue);
}
.confronto tbody th {
  background: none;
  text-align: left;
  font-size: 15px;
  font-weight: 550;
  color: var(--testo);
}
/* Sul telefono la tabella scorre di lato: la colonna delle voci resta ferma,
   altrimenti dopo mezzo scorrimento non si sa piu' di che riga si parla. */
.confronto tbody th,
.confronto thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #0f1116;
}
.confronto td small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--testo-fioco);
}

/* Sul telefono la colonna ferma deve lasciare posto alle altre. */
@media (max-width: 560px) {
  .confronto th,
  .confronto td { padding: 12px 14px; font-size: 14px; }
  .confronto tbody th { width: 118px; min-width: 118px; font-size: 13.5px; }
  .confronto table { min-width: 520px; }
  /* Col logo il nome non stava nella colonna e finiva sopra "NotchNook". */
  .marchio-tabella { white-space: normal; }
  .marchio-tabella img { display: none; }
}

/* La colonna di FloatPill: un velo del blu e una riga sopra. */
.confronto .nostra {
  background: rgba(76, 141, 255, 0.07);
  color: var(--testo);
}
.confronto thead .nostra {
  box-shadow: inset 0 2px 0 var(--accento);
  color: var(--testo);
}
.marchio-tabella {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  white-space: nowrap;
}
.marchio-tabella img { height: 24px; width: auto; margin: -4px -4px -4px -6px; }

.esito { display: inline-flex; align-items: center; gap: 8px; }
.esito svg { width: 20px; height: 20px; flex: none; }
.esito.si svg { color: var(--verde); }
.esito.no svg { color: #ff6b61; }
.esito.parziale svg { color: #ffb340; }
.esito.assente { color: var(--testo-fioco); }

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

/* Le guide di confronto scritte per esteso. */
.guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}
@media (max-width: 860px) { .guide { grid-template-columns: minmax(0, 1fr); } }
.guida {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 44px 20px 20px;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s var(--molla-riga);
}
.guida:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--bordo-forte);
  background: rgba(255, 255, 255, 0.06);
}
.guida-etich {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9dc0ff;
}
.guida b { font-size: 16px; font-weight: 620; }
.guida-testo { color: var(--testo-tenue); font-size: 14px; line-height: 1.5; }
.guida svg {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 16px;
  height: 16px;
  color: var(--testo-fioco);
  transition: transform 0.2s ease, color 0.2s ease;
}
.guida:hover svg { transform: translate(2px, -2px); color: var(--testo); }

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

/* Una scheda sola divisa in due: a sinistra quanto costa e i pulsanti, a
   destra cosa c'e' dentro e come va la settimana di prova. Il bordo e' un
   gradiente con i colori dei moduli, disegnato sul border-box. */
.offerta {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--sfondo-alt), var(--sfondo-alt)) padding-box,
    linear-gradient(140deg, rgba(76, 141, 255, 0.75), rgba(191, 90, 242, 0.35) 38%,
      rgba(255, 255, 255, 0.08) 62%, rgba(217, 119, 87, 0.5)) border-box;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 140px -50px rgba(76, 141, 255, 0.45);
}
@media (max-width: 820px) { .offerta { grid-template-columns: minmax(0, 1fr); } }

.offerta-prezzo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 36px 36px;
  text-align: center;
  border-right: 1px solid var(--bordo);
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(76, 141, 255, 0.15), transparent 70%);
}
@media (max-width: 820px) {
  .offerta-prezzo { border-right: 0; border-bottom: 1px solid var(--bordo); padding: 36px 24px 30px; }
}
.offerta-etich,
.offerta-titoletto {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.offerta-etich { color: #9dc0ff; }
.offerta-titoletto { color: var(--testo-fioco); }
.offerta .prezzo-cifra { font-size: clamp(52px, 7vw, 68px); }
.offerta .prezzo-nota { margin: 12px 0 26px; }
.offerta .bottone { width: 100%; }
.offerta .bottone + .bottone { margin-top: 10px; }
.offerta .microcopy { margin-top: 18px; }

.offerta-dettagli { padding: 38px 38px 36px; }
@media (max-width: 820px) { .offerta-dettagli { padding: 30px 24px; } }
.offerta .elenco-prezzo { margin: 0 0 32px; gap: 12px; }
.offerta .elenco-prezzo li b { color: var(--testo); font-weight: 600; }

/* La settimana di prova, come una piccola linea del tempo. */
.passi-prova {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.passi-prova li {
  position: relative;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 16px 20px;
  color: var(--testo-tenue);
  font-size: 14.5px;
  line-height: 1.55;
}
.passi-prova li:last-child { padding-bottom: 0; }
.passi-prova li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accento);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.18);
}
.passi-prova li::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 19px;
  bottom: 2px;
  width: 1px;
  background: var(--bordo-forte);
}
.passi-prova li:last-child::after { display: none; }
.passi-prova li b { color: var(--testo); font-weight: 600; font-size: 14px; }

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

.domande-griglia {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .domande-griglia { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.domande-intro { position: sticky; top: 96px; }
@media (max-width: 900px) { .domande-intro { position: static; } }
.domande-intro .sottotitolo-sezione { margin-bottom: 22px; font-size: 17px; }

/* Un elenco con i divisori invece di undici scatole. */
.domande-griglia .faq { gap: 0; border-top: 1px solid var(--bordo); }
.domande-griglia details,
.domande-griglia details[open] {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  border-radius: 0;
  background: none;
}
.domande-griglia summary { padding: 20px 0; font-size: 16.5px; }
.domande-griglia summary::after,
.domande-griglia details[open] summary::after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--bordo-forte);
  color: var(--testo-tenue);
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  transition: transform 0.35s var(--molla-riga), border-color 0.2s ease, color 0.2s ease;
}
.domande-griglia summary:hover::after { color: var(--testo); border-color: var(--testo-fioco); }
/* La croce ruotata di 45 gradi diventa la x per chiudere. */
.domande-griglia details[open] summary::after { transform: rotate(45deg); }
.domande-griglia details > p { margin: 0 0 20px; padding-right: 42px; }

/* Dove il browser sa animare l'altezza fino ad auto, la risposta si apre
   invece di comparire di colpo. Altrove resta il comportamento normale. */
@supports (interpolate-size: allow-keywords) {
  .domande-griglia { interpolate-size: allow-keywords; }
  .domande-griglia details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
  }
  .domande-griglia details[open]::details-content { height: auto; }
}

/* ---------- Chiusura ---------- */

.finale { padding-top: 24px; }
.finale-scheda {
  position: relative;
  overflow: hidden;
  padding: 104px 32px 64px;
  border-radius: 28px;
  text-align: center;
  border: 1px solid var(--bordo-forte);
  /* In basso, un arcobaleno appena accennato con le tinte dei moduli. */
  background:
    radial-gradient(ellipse 45% 55% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 70%),
    radial-gradient(ellipse 34% 70% at 8% 108%, rgba(10, 132, 255, 0.32), transparent 70%),
    radial-gradient(ellipse 34% 70% at 30% 112%, rgba(191, 90, 242, 0.26), transparent 70%),
    radial-gradient(ellipse 34% 70% at 52% 114%, rgba(255, 55, 95, 0.24), transparent 70%),
    radial-gradient(ellipse 34% 70% at 74% 112%, rgba(255, 159, 10, 0.24), transparent 70%),
    radial-gradient(ellipse 34% 70% at 94% 108%, rgba(48, 209, 88, 0.2), transparent 70%),
    var(--sfondo-alt);
}
@media (max-width: 560px) { .finale-scheda { padding: 88px 20px 48px; } }
/* La tacca: stessa sagoma della pillola dell'app, piatta sopra e tonda sotto,
   con il puntino della fotocamera. */
.finale-tacca {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 185px;
  height: 33px;
  transform: translateX(-50%);
  border-radius: 0 0 22px 22px;
  background: #000;
  box-shadow: 0 14px 44px rgba(76, 141, 255, 0.18);
}
.finale-tacca::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3550, #0b0d14 70%);
}
.finale-scheda .titolo-sezione { font-size: clamp(32px, 5.2vw, 54px); }
.finale-scheda .sottotitolo-sezione { margin: 0 auto 32px; }
.finale-scheda .azioni { margin-bottom: 16px; }

/* ---------- Piede della home ---------- */

footer.piede-ricco { padding: 64px 0 34px; }
.piede-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 860px) {
  .piede-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede-marchio { grid-column: 1 / -1; }
}
.piede-marchio p {
  max-width: 300px;
  margin: 14px 0 16px;
  color: var(--testo-fioco);
  font-size: 14.5px;
  line-height: 1.6;
}
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a {
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--bordo);
  color: var(--testo-tenue);
  font-size: 13px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.social a:hover { text-decoration: none; color: var(--testo); border-color: var(--bordo-forte); }
.piede-colonna { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.piede-colonna p {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.piede-colonna a { color: var(--testo-fioco); }
.piede-colonna a:hover { color: var(--testo); text-decoration: none; }
.piede-fondo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--bordo);
  font-size: 13.5px;
  color: var(--testo-fioco);
}
.lingua {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 99px;
  border: 1px solid var(--bordo);
  color: var(--testo-tenue);
}
.lingua:hover { text-decoration: none; color: var(--testo); border-color: var(--bordo-forte); }
.lingua svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .guida,
  .domande-griglia summary::after { transition: none; }
}


/* =====================================================================
   Chi non e' su un Mac: telefono, tablet, Windows. Un .dmg li' e' un vicolo
   cieco, quindi al posto di "Prova gratis" si propone di mandarsi il link.
   La classe .non-mac la mette uno script nel <head>, prima del disegno.
   ===================================================================== */

.solo-non-mac { display: none; }
.non-mac .solo-non-mac { display: revert; }
.non-mac .solo-mac { display: none; }

/* ---------- Striscia dei moduli sotto l'hero ---------- */

/* Subito dopo la demo, prima delle sezioni lunghe: chi non usa Claude ne' i
   video del browser vede in un colpo d'occhio che l'app e' utile anche a lui.
   Ogni modulo apre se stesso nella demo qui sopra. */
.striscia { padding: 0 0 40px; }
.striscia-titolo {
  margin: 0 0 16px;
  text-align: center;
  color: var(--testo-fioco);
  font-size: 14px;
}
.striscia-griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 860px) { .striscia-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip-modulo {
  --tinta: var(--accento);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s var(--molla-riga);
}
.chip-modulo:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tinta) 45%, var(--bordo));
  background: color-mix(in srgb, var(--tinta) 7%, var(--superficie));
}
.chip-icona {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tinta) 18%, transparent);
  color: color-mix(in srgb, var(--tinta) 72%, white);
}
.chip-icona svg { width: 17px; height: 17px; }
.chip-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.chip-testo b { font-size: 14.5px; font-weight: 620; }
.chip-testo small {
  font-size: 12.5px;
  color: var(--testo-fioco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- "Continua sul Mac" ---------- */

.manda-al-mac { text-align: center; }
.manda-al-mac .icona-mac {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 141, 255, 0.14);
  color: #9dc0ff;
}
.manda-al-mac .icona-mac svg { width: 34px; height: 34px; }
.manda-al-mac .aggiornato { max-width: 520px; margin: 0 auto 28px; font-size: 16.5px; color: var(--testo-tenue); }
.azioni-condividi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}
.azioni-condividi .bottone { width: 100%; }
/* hidden da solo non basta: .bottone dichiara display e vincerebbe. */
.azioni-condividi [hidden],
.manda-al-mac [hidden] { display: none; }
.azioni-condividi .bottone svg { width: 18px; height: 18px; flex: none; }
.collegamento-da-copiare {
  margin: 22px auto 0;
  padding: 10px 14px;
  max-width: 340px;
  border-radius: 12px;
  border: 1px dashed var(--bordo-forte);
  color: var(--testo-tenue);
  font-family: var(--mono);
  font-size: 14px;
  user-select: all;
}
.manda-al-mac .suggerimento { margin: 18px auto 0; max-width: 420px; color: var(--testo-fioco); font-size: 14px; }

/* ---------- /buy e /compra: il passaggio misurato verso il checkout ---------- */

.passaggio {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
}
.passaggio img { height: 56px; width: auto; }
.passaggio p { margin: 0; color: var(--testo-tenue); font-size: 17px; }
.passaggio .microcopy { margin: 0; }
.rotella {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--bordo-forte);
  border-top-color: var(--accento);
  animation: gira 0.8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotella { animation: none; } }


/* =====================================================================
   Demo viva: i comandi rispondono, e quattro scene mostrano la tacca che
   reagisce a quello che succede sul Mac. Ogni comportamento e' quello
   dell'app, letto nel codice Swift; quello che la demo non puo' fare davvero
   (AirDrop, la fotocamera, lo screenshot) lo spiega la didascalia.
   ===================================================================== */

/* Tutto quello che risponde a un clic lo dice col puntatore. */
.schermo .comandi-capsula button,
.schermo .comandi > *,
.schermo .bottone-registra,
.schermo .riga-memo .strumento,
.schermo .riga-impegno .spunta,
.schermo .riga-appunto .tondo,
.schermo .bottone-tinta,
.schermo .riga-file .tondo,
.schermo .bottone-materiale,
.schermo .bottone-camera,
.schermo .pulsante-angolo,
.schermo .campo,
.schermo .campo-promemoria,
.schermo .ferma-allarme,
.schermo .video-tacca button { cursor: pointer; }

/* Una riga tolta (promemoria fatto, file o memo cestinato) esce con una molla. */
.schermo .riga-in-uscita {
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.3s var(--molla-riga), height 0.3s ease 0.1s,
    padding 0.3s ease 0.1s, margin 0.3s ease 0.1s;
}

/* ---------- Timer: la scheda del conteggio e quella che squilla ---------- */

/* TimerCardView.schedaConteggio: velo della tinta dal 60 al 18%. */
.scheda-sotto[data-tipo="timer"] {
  gap: 10px;
  padding: 0 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--tinta) 60%, transparent), color-mix(in srgb, var(--tinta) 18%, 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) 30%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
.anello-scheda .avanzamento { transition: stroke-dasharray 0.9s linear; }

/* TimerCardView.schedaAllarme: 240 pt, rosso che respira fra il 75 e il 95%,
   campanella che dondola di 12 gradi, "Ferma" in una capsula bianca. */
.scheda-sotto[data-tipo="allarme"] {
  gap: 10px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255, 59, 48, 0.85);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35), 0 8px 20px rgba(255, 59, 48, 0.45);
  animation: squilla 0.52s ease-in-out infinite alternate;
}
@keyframes squilla {
  from { background-color: rgba(255, 59, 48, 0.75); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35), 0 8px 20px rgba(255, 59, 48, 0.35); }
  to { background-color: rgba(255, 59, 48, 0.95); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35), 0 8px 20px rgba(255, 59, 48, 0.6); }
}
.scheda-sotto .campana {
  display: flex;
  flex: none;
  transform-origin: 50% 15%;
  animation: dondola 0.26s ease-in-out infinite alternate;
}
.scheda-sotto .campana svg { width: 15px; height: 15px; }
@keyframes dondola {
  from { transform: rotate(-12deg); }
  to { transform: rotate(12deg); }
}
.scheda-sotto[data-tipo="allarme"] .testo strong { font-size: 12px; font-weight: 700; color: #fff; }
.scheda-sotto[data-tipo="allarme"] .testo small { color: rgba(255, 255, 255, 0.75); }
.ferma-allarme {
  flex: none;
  padding: 5px 10px;
  border: 0;
  border-radius: 99px;
  background: #fff;
  color: #ff3b30;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Memo: registrazione e trascrizione ---------- */

/* VoiceMemoView: in registrazione il tondo diventa un quadrato arrotondato da
   14 con lo stop, che pulsa; sotto, il tempo in rosso. */
.schermo .bottone-registra { transition: border-radius 0.3s var(--molla-riga); }
.schermo .bottone-registra[data-registra="si"] {
  border-radius: 14px;
  animation: pulsa-registra 0.8s ease-in-out infinite alternate;
}
@keyframes pulsa-registra {
  from { transform: scale(1); box-shadow: 0 0 8px rgba(255, 59, 48, 0.25); }
  to { transform: scale(1.04); box-shadow: 0 0 18px rgba(255, 59, 48, 0.55); opacity: 0.92; }
}
.schermo .tempo-registrazione {
  margin-top: -6px;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #ff3b30;
}
.schermo .rotella-piccola {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.6);
  animation: gira 0.8s linear infinite;
}

/* ---------- Finestre delle scene ---------- */

/* Generiche di proposito: dicono "qui c'e' un video", "qui lavora un agente",
   senza imitare l'interfaccia di nessuno. Compaiono solo durante le scene. */
.finestra {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s var(--molla-riga), filter 0.3s ease;
}
.finestra[data-visibile="si"] { opacity: 1; transform: none; }
.finestra[data-inattiva="si"] { filter: saturate(0.6) brightness(0.96); }
.barra-finestra {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 11px;
}
.semafori { display: flex; gap: 6px; flex: none; }
.semafori i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.semafori i:nth-child(2) { background: #febc2e; }
.semafori i:nth-child(3) { background: #28c840; }
.finestra[data-inattiva="si"] .semafori i { background: rgba(128, 128, 136, 0.45); }

.finestra-browser {
  left: 7%;
  top: 92px;
  width: min(470px, 86%);
  background: #f5f5f7;
  color: #1d1d1f;
}
.finestra-browser .barra-finestra { background: #e9e9ec; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.indirizzo {
  flex: 1;
  margin-right: 46px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
}
.video-browser { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.barra-video {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.barra-video i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 2px;
  background: #fff;
  animation: avanza-video 30s linear infinite;
}
@keyframes avanza-video {
  from { width: 42%; }
  to { width: 58%; }
}
.titolo-video { padding: 10px 12px 12px; font-size: 13px; font-weight: 600; }

.finestra-terminale {
  right: 7%;
  top: 112px;
  width: min(440px, 86%);
  background: rgba(28, 28, 30, 0.97);
  color: #e5e5e7;
}
.finestra-terminale .barra-finestra { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); }
.righe-terminale {
  min-height: 118px;
  padding: 12px 14px 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
}
.righe-terminale .prompt { margin-right: 7px; color: #d97757; }
.righe-terminale .lavoro { color: #d97757; }
.righe-terminale .conclusa { display: none; color: #32d74b; }
.finestra-terminale[data-fatto="si"] .lavoro { display: none; }
.finestra-terminale[data-fatto="si"] .conclusa { display: block; }
.puntini i { font-style: normal; animation: puntino 1.2s ease-in-out infinite; }
.puntini i:nth-child(2) { animation-delay: 0.2s; }
.puntini i:nth-child(3) { animation-delay: 0.4s; }
@keyframes puntino {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Con un pulsante sulla scheda la zona sensibile si ferma alla pillola. */
.scena[data-scheda-cliccabile="si"] .zona-tacca { height: 36px; }
.finestra[data-pausa="si"] .barra-video i { animation-play-state: paused; }

/* Il video nella demo usa la stessa sagoma della vetrina (.video-tacca). */
/* Sopra la scheda sotto la tacca (4), sotto il pannello (5, che viene dopo). */
.schermo .video-tacca { z-index: 5; }

/* ---------- La barra delle scene ---------- */

.scene-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 820px;
  margin: 18px auto 0;
}
.scene-etichetta { color: var(--testo-fioco); font-size: 14px; margin-right: 4px; }
.scena-demo {
  --tinta: var(--accento);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo-tenue);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.scena-demo:hover { color: var(--testo); border-color: var(--bordo-forte); }
.scena-demo .icona {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tinta) 20%, transparent);
  color: color-mix(in srgb, var(--tinta) 75%, white);
}
.scena-demo .icona svg { width: 13px; height: 13px; }
.scena-demo[aria-pressed="true"] {
  color: var(--testo);
  border-color: color-mix(in srgb, var(--tinta) 55%, var(--bordo));
  background: color-mix(in srgb, var(--tinta) 11%, var(--superficie));
}
/* Quanto manca alla fine della scena: una riga sottile che si riempie. */
.scena-demo .corsa {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--tinta);
}
.scena-demo[aria-pressed="true"] .corsa { animation: corsa var(--durata, 8s) linear forwards; }
@keyframes corsa { to { width: 100%; } }
@media (max-width: 560px) {
  .scene-etichetta { width: 100%; text-align: center; margin: 0 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .scheda-sotto[data-tipo="allarme"],
  .scheda-sotto .campana,
  .schermo .bottone-registra[data-registra="si"],
  .barra-video i,
  .puntini i,
  .scena-demo[aria-pressed="true"] .corsa { animation: none; }
  .finestra { transition: none; }
}

/* =====================================================================
   La demo su un telefono.

   Prima era il portatile intero rimpicciolito: un ritaglio da 480 punti al
   66% con la cornice intorno, testi dei moduli a 8,6 px. Qui si tiene solo la
   fascia alta dello schermo, larga quanto il modulo piu' largo (470 punti) e
   da bordo a bordo del telefono: la scala sale a circa 0,8. Sotto, i moduli
   come linguette da toccare; sul pannello si scorre col dito.
   ===================================================================== */

/* Niente cornice ne' base: lo schermo va da un bordo all'altro. La larghezza
   la scrive demo.js (--k), qui si toglie tutto quello che la restringeva. */
.scena[data-telefono="si"] .telaio {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.scena[data-telefono="si"] .vetro {
  border-radius: 0;
  /* E' un ritaglio: in basso sfuma, cosi' si capisce che lo schermo continua. */
  -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent);
  mask-image: linear-gradient(to bottom, #000 93%, transparent);
}
.scena[data-telefono="si"] .base-coperchio { display: none; }
/* Il pannello lascia passare lo scorrimento verticale della pagina e tiene
   per se' quello orizzontale, che cambia modulo. */
.scena[data-telefono="si"] .pannello { touch-action: pan-y; }

/* Le linguette sotto lo schermo: 44 px d'altezza, icona nel colore del modulo
   e nome. Scorrono di lato se non ci stanno, da bordo a bordo. */
.linguette-telefono { display: none; }
.scena[data-telefono="si"] .linguette-telefono {
  display: flex;
  gap: 8px;
  width: 100vw;
  margin-top: 14px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.linguette-telefono::-webkit-scrollbar { display: none; }
.linguetta-telefono {
  --tinta: var(--accento);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo-tenue);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.linguetta-telefono .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: color-mix(in srgb, var(--tinta) 75%, white);
}
.linguetta-telefono .icona svg { width: 15px; height: 15px; }
.linguetta-telefono[aria-selected="true"] {
  color: var(--testo);
  border-color: color-mix(in srgb, var(--tinta) 55%, var(--bordo));
  background: color-mix(in srgb, var(--tinta) 13%, var(--superficie));
}

/* Da telefono la striscia dei moduli sotto l'hero sarebbe un doppione delle
   linguette appena sopra. */
@media (max-width: 643px) { .striscia { display: none; } }

/* Da telefono il pannello aperto copre quasi tutto lo schermo: attraverso il
   materiale si leggevano il file sulla scrivania e le voci della barra dei
   menu, accavallate al pulsante rosso e all'ingranaggio. Su un Mac vero il
   materiale sfoca; qui si tolgono, finche' il pannello e' aperto. Il file
   resta se lo stai trascinando dentro. */
.scena[data-telefono="si"] .menu-sinistra,
.scena[data-telefono="si"] .menu-destra { transition: opacity 0.2s ease; }
.scena[data-telefono="si"][data-stato="aperto"] .file-scrivania:not([data-preso="si"]),
.scena[data-telefono="si"][data-stato="aperto"] .menu-sinistra,
.scena[data-telefono="si"][data-stato="aperto"] .menu-destra { opacity: 0; }

/* ---------- Il giro guidato a capitoli ---------- */

/* Prima della fila delle scene: un pulsante pausa/riprendi e a che punto si
   e' ("Giro guidato · 2 di 4"). Sostituisce l'etichetta "Guarda come
   reagisce", che il gruppo conserva come nome accessibile. */
.scene-demo .scene-etichetta { display: none; }
.giro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 6px;
}
.giro-comando {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bordo-forte);
  background: var(--superficie);
  color: var(--testo);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.giro-comando:hover { background: rgba(255, 255, 255, 0.08); }
.giro-comando svg { width: 13px; height: 13px; }
.giro-stato {
  min-width: 9.5em;
  color: var(--testo-fioco);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  transition: color 0.2s ease;
}
.giro-stato[data-tuo-turno="si"] { color: var(--testo); font-weight: 600; }
@media (max-width: 560px) {
  .giro { width: 100%; justify-content: center; margin: 0 0 2px; }
  .giro-stato { min-width: 0; }
}

/* I capitoli gia' visti in questo giro: la loro riga resta piena, piu' tenue.
   Insieme alla riga che si riempie sul capitolo in corso, la fila intera
   dice quanto manca. */
.scena-demo[data-visto="si"] .corsa { width: 100%; opacity: 0.35; }
.scena-demo[aria-pressed="true"] .corsa { opacity: 1; }