/* ==========================================================================
   FRENETIC — stili delle due pagine.
   Sta in un file separato da stile.css, che tiene il sistema di base
   (colori, tipografia, impalcatura). Qui non si ridefinisce nessuna classe
   gia' esistente la' dentro, per non innescare guerre di specificita'.
   ========================================================================== */

.navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.marchio {
  font-weight: 900; letter-spacing: -0.03em; font-size: 1.05rem;
  text-decoration: none;
}
.marchio b {
  font-weight: 900;
  background: var(--flame);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-torna {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ash); text-decoration: none;
  padding: 8px 16px; border: 1px solid var(--rule-strong); border-radius: 999px;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.nav-torna:hover {
  color: var(--paper); border-color: var(--flame-mid);
  background: rgba(255, 138, 60, 0.08);
}

/* La hero non occupa piu' tutto lo schermo: sotto c'e' subito
   l'installazione, e nasconderla dietro uno scorrimento intero era il modo
   piu' rapido per far credere che non ci fosse. */
.hero { min-height: auto; padding-top: 48px; padding-bottom: 64px; }

/* --- presenza dell'assistente su questa macchina ----------------------- */
.presenza {
  margin-top: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.presenza-riga {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 0.78rem; color: var(--ash);
}
.spia {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ash-dim);
  transition: background 300ms ease, box-shadow 300ms ease;
}
.presenza[data-stato="verifica"] .spia { animation: beat 1.4s ease-in-out infinite; }
.presenza[data-stato="presente"] .spia {
  background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}
.presenza[data-stato="presente"] .presenza-testo { color: var(--paper); }
.presenza[data-stato="assente"] .spia { background: var(--flame-low); }

.enter-vuoto {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--rule-strong);
  box-shadow: none;
}
.enter-vuoto:hover {
  border-color: var(--flame-mid);
  background: rgba(255, 138, 60, 0.10);
  box-shadow: none;
}

/* --- installazione ----------------------------------------------------- */
.passi { display: grid; gap: clamp(26px, 4vw, 48px); }
@media (min-width: 940px) { .passi { grid-template-columns: 1.25fr 1fr; align-items: start; } }
/* min-width:0 obbligatorio: i figli di una griglia non scendono sotto la
   larghezza del contenuto, e un blocco di comando lungo allargherebbe la
   sua colonna schiacciando l'altra. */
.passi > * { min-width: 0; }

.passi-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.passi-lista li {
  background: var(--ink);
  padding: clamp(22px, 2.8vw, 30px);
  display: grid; grid-template-columns: 42px 1fr; gap: 18px;
}
.passi-lista .k {
  font-family: var(--mono); font-size: 0.9rem;
  font-variant-numeric: tabular-nums; color: var(--flame-mid);
  padding-top: 3px;
}
.passo-corpo { min-width: 0; }
.passo-corpo h3 { font-size: var(--step-0); font-weight: 700; margin: 0 0 8px; }
.passo-corpo p { color: var(--ash); font-size: var(--step-1); }
@media (max-width: 480px) { .passi-lista li { grid-template-columns: 1fr; gap: 8px; } }

.comando {
  display: flex; align-items: stretch;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--ink-raised);
  margin: 12px 0;
  overflow: hidden;
}
.comando code {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.5;
  color: var(--paper);
  overflow-x: auto; white-space: nowrap;
}
.copia {
  flex: none;
  border: none; border-left: 1px solid var(--rule-strong);
  background: transparent; color: var(--ash);
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 16px; cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.copia:hover { background: rgba(255, 138, 60, 0.12); color: var(--paper); }
.copia.fatto { color: #22C55E; }

.nota-costo {
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--ink-raised);
  padding: clamp(22px, 2.8vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
}
.nota-costo p { color: var(--ash); font-size: var(--step-1); }
.costo-cifra {
  font-size: var(--step-3); font-weight: 900; letter-spacing: -0.04em;
  background: var(--flame);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nota-costo a { color: var(--flame-mid); }

/* --- interruttore del richiamo ---------------------------------------- */
.interruttore-blocco {
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--ink-raised);
  padding: clamp(24px, 3vw, 34px);
}
.interruttore-riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.interruttore-riga h3 { font-size: var(--step-1u); margin: 0 0 6px; }
.interruttore-riga p { color: var(--ash); font-size: var(--step-1); max-width: 56ch; }

/* 44px di lato: e' la misura minima perche' un dito lo prenda al primo
   colpo su uno schermo tattile. */
.interruttore {
  flex: none;
  width: 76px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  cursor: pointer; position: relative;
  transition: background 220ms ease, border-color 220ms ease;
}
.interruttore .cursore {
  position: absolute; top: 50%; left: 5px;
  width: 32px; height: 32px; border-radius: 50%;
  transform: translateY(-50%);
  background: var(--ash);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
}
.interruttore[aria-checked="true"] {
  background: rgba(255, 138, 60, 0.22);
  border-color: var(--flame-mid);
}
.interruttore[aria-checked="true"] .cursore {
  transform: translateY(-50%) translateX(30px);
  background: var(--flame);
}

.interruttore-dettaglio {
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.interruttore-dettaglio p { color: var(--ash); font-size: var(--step-1); }
.interruttore-dettaglio strong { color: var(--paper); }
.avvertenza {
  margin-top: 10px; padding: 14px 16px;
  border-left: 2px solid var(--flame-mid);
  background: rgba(255, 138, 60, 0.06);
}

/* --- cosa sa fare ------------------------------------------------------ */
.capacita {
  display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (min-width: 760px) { .capacita { grid-template-columns: 1fr 1fr; } }
.cap {
  background: var(--ink);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 10px;
}
.cap h3 { font-size: var(--step-1u); }
.cap p { color: var(--ash); font-size: var(--step-1); }
.collega {
  color: var(--flame-mid); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.collega:hover { border-bottom-color: var(--flame-mid); }

/* --- pagina informativa ----------------------------------------------- */
.intro-info { padding-bottom: clamp(30px, 4vw, 48px); }
.titolo-info {
  font-size: var(--step-4); font-weight: 900;
  letter-spacing: -0.045em; margin: 14px 0 0;
}
.occhiello {
  margin-top: 18px; color: var(--ash);
  font-size: var(--step-1u); max-width: 58ch; line-height: 1.5;
}
.occhiello strong { color: var(--paper); font-weight: 600; }
.foot-in a { color: inherit; }