/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

/* ──────────────────────────────────────────────────────────────────────────
   Font Inter self-hosted (NIENTE Google Fonts).
   Il styles.css originale del pacchetto apriva con
       @import url('https://fonts.googleapis.com/css2?family=Inter...');
   che è VIETATO qui: la piattaforma deve funzionare nelle reti sanitarie
   chiuse (nessun CDN/font/script esterno). L'@import è quindi rimosso e
   sostituito dai @font-face locali qui sotto. Il carattere è Inter (asse
   peso variabile 100–900), sottoinsiemi latino + latino esteso, vendorizzato
   in static/vendor/fonts/inter/ con la licenza SIL OFL 1.1 (OFL.txt).
   Il resto del foglio è il pacchetto «Nocturne» COSÌ COM'È (non modificarlo),
   più la sezione «layout vetrina» in fondo per le pagine landing.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900; /* font variabile: un solo file copre tutti i pesi */
  src: url("../vendor/fonts/inter/inter-latin-wght.260c81a4759b.woff2") format("woff2");
  /* Latino base + Latin-1 (accenti italiani à è é ì ò ù) + punteggiatura
     tipografica (trattino lungo, punto medio, virgolette curve). */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/fonts/inter/inter-latin-ext-wght.1ad231aac0a8.woff2") format("woff2");
  /* Latino esteso: caratteri europei fuori dall'italiano, per robustezza. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9; /* review round 7 (Barron): the accent moves to
     the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
     accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
     accent held (L 0.660, so the documented ratios survive) and chroma
     in the product blurple's own range (its token sits at C 0.118; the
     accent takes 0.125, from the old steel's 0.030):
     the accent now reads as an accent rather than another neutral. */
  --color-accent-2: #a7a1db; /* the machine-derived stand-in follows: same
     hue, same L 0.734, chroma at the same 2:3 proportion it held */
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* Deck section-divider ground — review round 3: saturation as presence.
     Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
     family; C 0.094 — written when the accent held C 0.030, before the
     round-7 blurple raised it past the ground's) with a lighter bloom and
     a ghost tint of the same hue, while the slide grounds stay
     desaturated. Deck-scale fills only — not interface colors. */
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten{mix-blend-mode:lighten;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
/* Rules fade to transparent at both ends instead of stopping cleanly — a
   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
   painted from the same divider token. Freestanding rules fade; box
   outlines, in-control separators, and short accent marks stay solid. */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
.table thead tr {
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  /* the hover tint layers over the row rule, which keeps painting */
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT VETRINA — aggiunte Qualimed/Nora (NON fanno parte del pacchetto).
   Questo blocco impagina le landing pubbliche (base_vetrina.html) riusando i
   componenti Nocturne qui sopra (.btn, .card, .tag, .nav…). Le pagine vetrina
   caricano SOLO questo foglio (mai insieme a qualimed.css), quindi i nomi di
   classe del pacchetto restano quelli. Misure dedotte da README + screen del
   designer. Commenti in italiano; nomi delle classi in inglese/coerenti.
   ══════════════════════════════════════════════════════════════════════ */

/* Sfondo pagina: due radiali di profondità (accent-900 in alto a destra,
   nero al 32% in basso a sinistra), come negli screen. Fisso allo scroll. */
body.vetrina {
  min-height: 100vh;
  background:
    radial-gradient(70% 55% at 100% 0%, var(--color-accent-900), transparent 60%),
    radial-gradient(65% 55% at 0% 100%, rgba(0, 0, 0, 0.32), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
}

/* Skip-link: identico per comportamento a quello dell'app (visibile solo al
   focus da tastiera), ridipinto sui token Nocturne. */
.vetrina .salta-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-md); text-decoration: none;
}
.vetrina .salta-contenuto:focus { left: 16px; top: 16px; }

/* Contenitore comune: le sezioni a piena larghezza applicano il padding
   orizzontale «di gronda» (72px da design, ridotto in responsive). */
.vetrina .nastro,
.vetrina .nav,
.vetrina .hero,
.vetrina .console-section,
.vetrina .moduli,
.vetrina .cta-band,
.vetrina .site-footer { padding-left: 72px; padding-right: 72px; }

/* — Nastro «NORA per:» (sopra la nav, allineato a destra, 12.5px) — */
.vetrina .nastro {
  display: flex; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; gap: 6px 14px;
  padding-top: 12px; padding-bottom: 0;
  font-size: 12.5px;
}
.vetrina .nastro-label { color: var(--color-neutral-500); }
.vetrina .nastro a {
  color: var(--color-neutral-500); text-decoration: none;
}
.vetrina .nastro a:hover { color: var(--color-text); }
/* Voce corrente: accent + underline (accoppiata con aria-current="page"). */
.vetrina .nastro a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.vetrina .nastro-sep { color: var(--color-neutral-700); }

/* — Nav (padding 14px 72px 20px: il verticale è qui, l'orizzontale sopra) — */
.vetrina .nav {
  gap: 28px;
  padding-top: 14px; padding-bottom: 20px;
}
.vetrina .nav .nav-brand {
  display: inline-flex; align-items: center; margin-right: auto;
}
.vetrina .nav-links {
  display: flex; align-items: center; gap: 28px;
}
.vetrina .nav-links a { font-size: 14px; }
/* Il .btn-primary «Prova gratis» chiude la nav a destra. */

/* — Hero manifesto (padding 84px 72px 72px) — */
.vetrina .hero { padding-top: 84px; padding-bottom: 72px; }
.vetrina .hero-kicker {
  margin: 0 0 20px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent);
}
/* H1 96px con clamp 48–96px sotto i 1100px (la clamp vale sempre e si tappa
   a 96 sui grandi schermi). Ultima riga/parole in accent via .accent. */
.vetrina .hero-title {
  margin: 0 0 40px;
  font-size: clamp(48px, 9vw, 96px);
  line-height: 1.02; letter-spacing: -0.03em;
}
.vetrina .hero-title .accent { color: var(--color-accent); }
/* Riga sottotitolo (max 52ch, testo all'82%) + CTA a destra. */
.vetrina .hero-lead {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px;
}
.vetrina .hero-sub {
  margin: 0; max-width: 52ch;
  font-size: 17px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.vetrina .hero-actions { display: flex; flex: none; gap: 12px; }
/* Trust line (uppercase, 12.5px, neutral-500). */
.vetrina .hero-trust {
  margin: 28px 0 0;
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-500);
}

/* — Sezione «console come prova» (grid 7fr/4fr, gap 64px) — */
.vetrina .console-section {
  display: grid; grid-template-columns: 7fr 4fr; gap: 64px;
  align-items: start;
  padding-top: 8px; padding-bottom: 64px;
}
/* La card prodotto con un glow radiale accent-900 dietro. Le righe gestiscono
   il proprio padding, quindi azzeriamo quello della .card. */
.vetrina .console { position: relative; padding: 6px 0 10px; gap: 0; }
.vetrina .console::before {
  content: ""; position: absolute; inset: -36px -28px; z-index: -1;
  background: radial-gradient(60% 60% at 32% 18%,
    var(--color-accent-900), transparent 70%);
  filter: blur(22px);
}
/* Intestazione della console: etichetta (kicker) + tag a destra. */
.vetrina .console-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 8px 24px 16px;
}
.vetrina .console-head .card-kicker { margin: 0; }
/* Righe [etichetta | testo | tag] con divider sfumato ai bordi a 24px. */
.vetrina .console-row {
  display: grid; grid-template-columns: 84px 1fr auto;
  align-items: center; gap: 16px; padding: 14px 24px;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 24px,
    var(--color-divider) calc(100% - 24px), transparent) no-repeat bottom / 100% 1px;
}
.vetrina .console-row .r-label {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.vetrina .console-row .r-label.accent { color: var(--color-accent); }
.vetrina .console-row .r-text { font-size: 14px; }
.vetrina .console-row .r-tag { justify-self: end; }
/* Piede della console: bottone ghost «Apri…». */
.vetrina .console-foot { padding: 16px 24px 6px; }

/* Colonna feature (a destra): h4 15.5px + p 13.5px neutral-500. */
.vetrina .features {
  display: flex; flex-direction: column; gap: 28px;
  padding-top: 44px;
}
.vetrina .feature h4 {
  margin: 0 0 6px; font-size: 15.5px; line-height: 1.25;
}
.vetrina .feature p {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: var(--color-neutral-500);
}

/* — Riga moduli (tag pill 13px + frase guida) — */
.vetrina .moduli {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 26px; padding-bottom: 26px;
}
/* I tag della riga moduli sono più grandi dei tag base (13px, hit target
   comodo). Riusano .tag-outline (moduli d'ingresso) e .tag-neutral (gli altri). */
.vetrina .moduli .tag {
  font-size: 13px; padding: 8px 14px; border-radius: var(--radius-md);
}
.vetrina .moduli-nota {
  margin: 0 0 0 8px; font-size: 14px; color: var(--color-neutral-500);
}
/* Un filo sfumato separa i moduli dalla banda CTA (come negli screen). */
.vetrina .moduli { position: relative; }
.vetrina .moduli::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 72px,
    var(--color-divider) calc(100% - 72px), transparent);
}

/* — Banda CTA (--color-section con glow, h3 34px) — */
.vetrina .cta-band {
  position: relative; overflow: hidden;
  padding-top: 56px; padding-bottom: 56px;
  background: var(--color-section);
}
.vetrina .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(55% 120% at 18% 0%,
    var(--color-section-glow), transparent 60%);
  opacity: 0.7;
}
.vetrina .cta-inner {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px;
}
.vetrina .cta-band h3 { margin: 0 0 8px; font-size: 34px; }
.vetrina .cta-band .cta-sub { margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.vetrina .cta-actions { display: flex; flex: none; gap: 12px; }

/* — Footer disclaimer (13px, testo al 50%) — */
.vetrina .site-footer {
  padding-top: 24px; padding-bottom: 48px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* — Logo n◌ra (wordmark inline) — hook di classe opzionale. Il partial
   templates/includes/logo_nora.html usa gli stili inline ESATTI del README;
   queste classi servono solo se si vuole comporre il logo senza il partial. */
.logo-nora {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading); font-weight: 500;
  font-size: 19px; letter-spacing: -0.02em;
  color: var(--color-text); text-decoration: none;
}
.logo-nora svg { margin: 1px 2px 0; }
.logo-nora--hero { font-size: 62px; }
.logo-nora--hero svg { margin-top: 7px; }

/* — Schermata / stato di caricamento (anello che ruota) — replica di
   loading.html del pacchetto. Usata dal partial spinner_nora.html. */
.loader { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.loader .ring {
  width: 48px; height: 48px;
  animation: nora-spin 1.3s linear infinite; /* 1.3s/giro, lineare */
}
@keyframes nora-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loader-label {
  margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
/* Spinner inline (piccolo, dentro i bottoni/UI). */
.spinner-nora { display: inline-flex; }
.spinner-nora .ring { animation: nora-spin 1.3s linear infinite; }
/* Rispetto delle preferenze di movimento: anello fermo. */
@media (prefers-reduced-motion: reduce) {
  .loader .ring, .spinner-nora .ring { animation: none; }
}

/* — Responsive: sotto i 1100px (grid a colonna, nastro che collassa,
     hit target ≥ 44px su mobile) — */
@media (max-width: 1100px) {
  .vetrina .nastro,
  .vetrina .nav,
  .vetrina .hero,
  .vetrina .console-section,
  .vetrina .moduli,
  .vetrina .cta-band,
  .vetrina .site-footer { padding-left: 24px; padding-right: 24px; }

  .vetrina .hero { padding-top: 56px; padding-bottom: 48px; }

  /* Il nastro collassa a sinistra e può andare a capo. */
  .vetrina .nastro { justify-content: flex-start; }

  /* Nav a capo: brand sopra, voci sotto. */
  .vetrina .nav { flex-wrap: wrap; gap: 16px 20px; }
  .vetrina .nav-links { flex-wrap: wrap; gap: 8px 20px; }

  /* Hero e sezioni a colonna. */
  .vetrina .hero-lead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .vetrina .console-section { grid-template-columns: 1fr; gap: 40px; }
  .vetrina .features { padding-top: 0; }
  .vetrina .cta-inner { flex-direction: column; align-items: flex-start; }
  .vetrina .moduli::before { left: 24px; right: 24px; background:
    linear-gradient(to right, var(--color-divider), var(--color-divider)); }

  /* Hit target ≥ 44px: link di nav e nastro comodi da toccare. */
  .vetrina .nav-links a,
  .vetrina .nastro a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   — aggiunte landing principale (B1) —
   Sezione «NORA per il tuo lavoro»: tre porte-card verso le landing di
   pubblico, oltre alle sezioni comuni già impaginate sopra. Riusa il
   componente .card di Nocturne; la card intera è un link a blocco. Le sezioni
   comuni (.hero, .console-section, .moduli, .cta-band) prendono già il padding
   «di gronda» dalla lista condivisa in alto: qui lo aggiungiamo solo per la
   nuova sezione .porte, che non ne fa parte.
   ══════════════════════════════════════════════════════════════════════ */

.vetrina .porte { padding: 56px 72px 8px; }
.vetrina .porte-head { margin-bottom: 24px; }
.vetrina .porte-head .card-kicker { display: block; margin-bottom: 10px; }
.vetrina .porte-titolo {
  margin: 0 0 6px; font-size: 28px; letter-spacing: -0.02em;
}
.vetrina .porte-sub { margin: 0; color: var(--color-neutral-500); }

.vetrina .porte-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
/* La porta è la .card resa link: eredita background/superficie e hairline
   (.elev-sm), aggiunge la freccia in basso e gli stati hover/focus. */
.vetrina .porta {
  text-decoration: none; color: var(--color-text);
  gap: 10px; padding: var(--space-4); min-height: 44px;
}
.vetrina .porta .card-title { color: var(--color-text); }
.vetrina .porta .card-body { color: var(--color-neutral-500); }
/* card-body ha flex:1 e spinge la freccia in fondo: le porte restano
   allineate anche con testi di lunghezza diversa. */
.vetrina .porta-freccia {
  font-size: 13.5px; letter-spacing: 0.02em; color: var(--color-accent);
}
.vetrina .porta:hover { box-shadow: var(--shadow-md); }
.vetrina .porta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 1100px) {
  .vetrina .porte { padding-left: 24px; padding-right: 24px; }
  .vetrina .porte-grid { grid-template-columns: 1fr; }
  /* Hit target ≥ 44px anche per i tag-modulo quando diventano link. */
  .vetrina .moduli .tag { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   — aggiunte landing pubblico (B2) —
   Le tre landing (aziende/cooperative/sorveglianza) usano i .tag della riga
   «moduli» anche come link, quando il modulo ha una pagina pubblica dedicata
   (servizio_sorveglianza/turni/gare): il pacchetto originale li prevedeva
   solo come span decorativi, quindi qui si toglie la sottolineatura di
   default degli <a>. Il target di tocco ≥44px su mobile per «.moduli .tag»
   è già coperto dalla sezione B1 qui sopra (non duplicato).
   ══════════════════════════════════════════════════════════════════════ */
.vetrina .moduli a.tag { text-decoration: none; }
.vetrina .moduli a.tag:hover { filter: brightness(1.15); }

/* ══════════════════════════════════════════════════════════════════════════
   — aggiunte pagine servizio (C) —
   Prezzi (/prezzi/), pagine di modulo (/servizi/...) e pagine di ingresso
   di allauth (login, registrazione, recupero password, verifica email...)
   portate su Nocturne. Riusa i componenti sopra (.card, .tag, .hr, .btn);
   qui solo il layout specifico di queste pagine.
   ══════════════════════════════════════════════════════════════════════ */

/* Ritaglio orizzontale «di gronda» per le nuove sezioni di /prezzi/ e
   /servizi/...: stesso valore della lista condivisa in alto, non
   aggiunto lì per non toccare la sezione di un altro agente. */
.vetrina .pricing-section,
.vetrina .servizio-section {
  padding-left: 72px; padding-right: 72px;
}
.pricing-section { padding-top: 8px; padding-bottom: 56px; }
.servizio-section { padding-top: 48px; padding-bottom: 8px; }

/* — Griglia dei piani (/prezzi/) — */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px; margin: 0 0 40px;
}
/* Le schede hanno tutte la stessa altezza (align-items:stretch di default
   nella grid): il bottone resta ancorato in fondo con margin-top:auto,
   anche quando i piani hanno un numero diverso di moduli inclusi. */
.pricing-card { position: relative; padding: 28px 24px; }
.pricing-card .btn { margin-top: auto; }
.pricing-card-featured { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-accent); }
.pricing-card-badge { position: absolute; top: -12px; right: 20px; }
.pricing-price { display: flex; align-items: baseline; gap: 6px; }
.pricing-currency { font-size: 15px; color: var(--color-neutral-500); }
.pricing-figure {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 34px; line-height: 1;
}
.pricing-period { font-size: 13px; color: var(--color-neutral-500); }
/* Elenco dei moduli/vantaggi inclusi: pallino tipografico invece di
   un'icona (regola Nocturne: niente icone decorative). */
.pricing-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.pricing-features li { position: relative; padding-left: 14px; }
.pricing-features li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent);
}
.pricing-included {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: 13.5px; color: var(--color-neutral-500);
}
.pricing-included li { position: relative; padding-left: 14px; }
.pricing-included li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-2);
}
.pricing-note { font-size: 13px; }

/* Riquadro prezzo nella hero di una pagina di modulo (/servizi/...): la
   stessa .card della griglia prezzi, col prezzo del piano «solo modulo»
   reale (il blocco scompare da solo se il piano è disattivato — la view
   non passa `piano` in quel caso, niente logica qui). */
.servizio-price { max-width: 320px; margin-top: 32px; padding: 20px 24px; }

@media (max-width: 1100px) {
  .vetrina .pricing-section,
  .vetrina .servizio-section { padding-left: 24px; padding-right: 24px; }
}

/* — Pagine di ingresso di allauth (login, registrazione, recupero
   password, verifica email...) — vedi templates/allauth/layouts/
   entrance.html e templates/allauth/elements/*__entrance.html. Scheda
   stretta e centrata, componenti del design system riusati com'erano. */
.entrance { display: flex; justify-content: center; padding: 64px 24px 96px; }
.entrance-shell { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.entrance-brand { text-decoration: none; }
.entrance-card { width: 100%; padding: 32px; gap: var(--space-3); }
.entrance-card h1 { font-size: 22px; margin-bottom: 4px; }
/* I campi/bottoni sono figli diretti del <form> (l'elemento "form" di
   allauth non aggiunge contenitori): il flex a colonna qui dà lo stesso
   ritmo verticale della card, e stretch (default) allarga anche i
   bottoni al posto di un .btn-block su misura per ognuno. */
.entrance-card form { display: flex; flex-direction: column; gap: var(--space-3); }
.entrance-card hr {
  height: 1px; border: 0; margin: var(--space-2) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 24px,
    var(--color-divider) calc(100% - 24px), transparent);
}
.entrance-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.entrance-message {
  font-size: 13px; padding: 8px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
/* I tag di django.contrib.messages ("error", "success"...) sfumano il
   bordo verso un colore leggibile, senza inventare un'altra palette. */
.entrance-message.error { border-color: color-mix(in srgb, #e5877a 55%, var(--color-divider)); color: #f0a99d; }
.entrance-message.success { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-divider)); }

/* Campo di un form d'ingresso: label sempre visibile (mai il solo
   placeholder), errori leggibili sul tema scuro e collegati al campo con
   aria-describedby (vedi field__entrance.html) oltre che dal colore. */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.field-help { display: block; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
/* Rapporto di contrasto verificato: #f0a99d su #232532 ≈ 7,85:1 (AA anche
   per testo piccolo). Non è il rosso puro: resta leggibile sul tema scuro. */
.field-error { display: block; font-size: 12.5px; color: #f0a99d; }
.field.has-error .input { border-color: #e5877a; }
.entrance-form-errors { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }