/* =========================================================
   PORTFOLIO SITE — STYLE.CSS
   Design system dark-mode. Le variabili qui sotto controllano
   colori, spaziature e forme di TUTTO il sito: cambiale qui e
   si aggiornano ovunque.
   ========================================================= */

:root {
  /* Colori base — restyle 2026: nero quasi puro con una punta fredda
     d'indaco invece del grigio-blu neutro di prima. */
  --bg: #0a0a12;
  --bg-elevated: #10121f;
  --bg-card: #151829;
  --bg-card-hover: #1c2036;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Testo */
  --text-primary: #f4f4fc;
  --text-secondary: #a7aec9;
  /* Questo grigio passava la soglia di leggibilità su tre delle quattro
     superfici del sito e falliva sulla quarta: il fondo più chiaro
     (--bg-card-hover), che è quello della scheda centrale dei pacchetti
     e di qualunque scheda mentre ci passi sopra col mouse. Lì arrivava
     a 4.14 contro i 4.5 richiesti. Schiarito quel tanto che basta a
     passare anche là: ora il caso peggiore delle quattro è 4.65. */
  --text-muted: #8189a9;

  /* Accento (cambia questi due per un'identità colore diversa).
     Indaco + verde smeraldo: più ricco e meno "template" del viola-turchese
     di prima, restando nella stessa famiglia fredda e tecnologica. */
  --accent: #6c63ff;
  --accent-2: #2dd4bf;
  --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
  --accent-soft: rgba(108, 99, 255, 0.14);

  --danger: #ff6b6b;
  --success: #34d399;

  /* --- TAVOLOZZA DELLE AREE ---
     Sei tinte, una per area di lavoro. Servono a far capire a colpo d'occhio
     dove finisce un'area e ne inizia un'altra, su pagine che altrimenti sono
     lunghi elenchi tutti uguali.

     La versione precedente era sei colori scelti uno per uno — indaco,
     turchese, oro, blu, rosa, verde — e messi in fila non sembravano un
     sistema: sembravano un arcobaleno. Il problema non erano le tonalità,
     era che avevano luminosità e intensità molto diverse fra loro. L'oro
     era chiaro e caldo, l'indaco cupo, il rosa saturissimo: alcuni colori
     urlavano più forte degli altri e l'occhio non li leggeva come parenti.

     Questi sono generati, non scelti: hanno tutti la STESSA luminosità
     percepita e cambia solo la tonalità, lungo un arco che va dal verde
     acqua al magenta passando per ciano, blu, indaco e viola. È la metà
     fredda della ruota, cioè quella dove sta già il marchio. È la stessa
     regola con cui sono costruite le scale dei sistemi di design seri, ed
     è il motivo per cui sei colori diversi possono stare in fila senza
     litigare.

     Effetto collaterale utile: passano tutte il contrasto per il testo su
     ogni fondo del sito (la peggiore è 6:1 contro il 4.5 richiesto), quindi
     la stessa variabile va bene per un bordo, una fascia o una parola.
     Prima serviva una versione schiarita a parte per l'indaco. */
  --tinta-1: #8e9cfa; /* indaco   — Automazione & IA */
  --tinta-2: #2ebf91; /* verde    — Scrittura, Consulenza */
  --tinta-3: #bf89ec; /* viola    — Grafica & Video */
  --tinta-4: #30aff8; /* blu      — Marketing, Acquisizione */
  --tinta-5: #e17cc2; /* magenta  — Sviluppo, Web */
  --tinta-6: #2bbac1; /* ciano    — Community */

  /* Forme — raggi leggermente più morbidi e ombre più profonde,
     per una sensazione più "premium" rispetto a prima. */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 1px rgba(108, 99, 255, 0.28), 0 10px 28px rgba(108, 99, 255, 0.2);

  --max-width: 1120px;

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Serif editoriale: solo per il nome in Home e i titoli di Mirion —
     un accento, non un cambio di sistema tipografico. */
  --font-serif: "Fraunces", "Playfair Display", Georgia, serif;

  /* --- MOVIMENTO ---
     Quattro durate e tre curve, usate da tutto il sito. Il motivo per cui
     stanno qui e non sparse nel foglio: un'interfaccia si sente coerente
     quando ogni cosa si muove con lo stesso ritmo. Se un giorno il sito
     ti sembra troppo (o troppo poco) animato, cambi questi numeri e
     cambia tutto insieme, senza toccare una regola alla volta.

     Le durate seguono lo standard: 150-300ms per le reazioni al mouse.
     Sopra i 500ms un'interfaccia inizia a sembrare lenta, non elegante. */
  --dur-istante: 120ms;   /* colore di un testo, cose che devono sembrare immediate */
  --dur-rapida: 180ms;    /* bordi, sfondi, piccoli spostamenti */
  --dur-media: 260ms;     /* sollevamento delle schede, bottoni */
  --dur-lenta: 420ms;     /* comparse allo scorrimento, entrate */

  /* "ease-out" per ciò che entra: parte veloce e si posa piano, come un
     oggetto che rallenta arrivando. "ease-in" per ciò che esce. */
  --curva-entrata: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-uscita: cubic-bezier(0.4, 0, 1, 1);
  --curva-molla: cubic-bezier(0.34, 1.4, 0.5, 1); /* un filo di rimbalzo, per i clic */
}

/* =========================================================
   RESET & BASE
   ========================================================= */
* , *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Sfondo con leggero gradiente radiale per profondità */
body {
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(108, 99, 255, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(45, 212, 191, 0.10), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; color: var(--text-secondary); }

a { color: inherit; text-decoration: none; }

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

ul, ol { padding-left: 1.2em; color: var(--text-secondary); }

::selection { background: var(--accent); color: #fff; }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ATTENZIONE: solo padding verticale. Questa classe convive con
   .container sullo stesso elemento, e "padding: 88px 0" azzererebbe
   il margine laterale lasciando il testo attaccato ai bordi. */
.section {
  padding-top: 88px;
  padding-bottom: 88px;
  border-bottom: 1px solid var(--border);
}

.section:last-of-type { border-bottom: none; }

.section-head {
  max-width: 620px;
  margin: 0 0 48px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-gradient);
  display: inline-block;
}

.section-head p { font-size: 1.05rem; }

.grid {
  display: grid;
  gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(10, 10, 18, 0.72);
  border-bottom: 1px solid var(--border);
}

.navbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-gradient);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: #0a0a12;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  font-size: 0.88rem;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color var(--dur-istante) ease;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 2px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Qui c'era il vecchio menu a tendina per il telefono: i collegamenti
   diventavano una colonna sovrapposta alla pagina, nascosta finché non
   si premeva un bottone "hamburger".

   È stato tolto perché quel bottone non esiste in nessuna delle ventotto
   pagine — era codice morto da tempo — e perché continuava a fare danni:
   le sue regole (posizione assoluta, colonna verticale) restavano attive
   e trasformavano la barra nuova in un elenco impilato sopra il
   contenuto. Meglio eliminare la causa che aggiungere righe per
   annullarla una per una. */

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-istante) ease, box-shadow var(--dur-istante) ease, border-color var(--dur-istante) ease, background var(--dur-istante) ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--accent-gradient);
  color: #0a0a12;
}

.btn-primary:hover { box-shadow: var(--shadow-glow); }

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-outline:hover { border-color: var(--accent-2); color: var(--accent-2); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   HERO (Home)
   ========================================================= */
.hero {
  padding-top: 96px;
  padding-bottom: 60px;
}

.hero-kicker {
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: 1.15rem;
  max-width: 640px;
  margin-bottom: 32px;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 36px;
}

/* Se i chip sono l'ultimo elemento dell'hero (niente pulsanti sotto),
   niente margine extra: evita il buco di spazio vuoto prima della
   sezione successiva. */
.hero .hero-chips:last-child { margin-bottom: 0; }
.hero:has(.hero-chips:last-child) { padding-bottom: 24px; }

/* =========================================================
   CHIPS / TAGS
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* Chip cliccabile (es. tag collegato a un'area di Competenze teoriche) */
a.chip {
  cursor: pointer;
  transition: border-color var(--dur-istante) ease, color var(--dur-istante) ease;
}

a.chip:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform var(--dur-rapida) ease, border-color var(--dur-rapida) ease, background var(--dur-rapida) ease;
}

.card {
  position: relative;
  overflow: hidden;
}

/* Un filo di colore che compare in alto quando ci passi sopra. Due pixel:
   abbastanza per accorgersene, troppo pochi per cambiare l'aria della pagina. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-gradient);
  opacity: 0;
  transition: opacity var(--dur-rapida) ease;
}

.card:hover::before { opacity: 1; }

.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 16px;
  font-family: var(--font-display);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.card-tags .chip { font-size: 0.75rem; padding: 4px 10px; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--accent-2);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Project card media placeholder */
.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(108,99,255,0.25), rgba(45,212,191,0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  border: 1px dashed var(--border-strong);
}

/* =========================================================
   SKILLS (Competenze)
   ========================================================= */
.skill-category {
  margin-bottom: 40px;
}

/* Il ">" è importante: lo stile vale SOLO per il titolo della categoria,
   non per i titoli delle card o degli articoli annidati dentro di essa
   (altrimenti il quadratino colorato comparirebbe anche lì). */
.skill-category > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.skill-category > h3::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--tinta, var(--accent));
  box-shadow: 0 0 14px -1px var(--tinta, var(--accent));
  display: inline-block;
  flex: 0 0 auto;
}

/* Le sei tinte si distribuiscono da sole sulle categorie, in ordine.
   Se ne aggiungi una settima, riparte dalla prima: nessuna manutenzione. */
.skill-category:nth-of-type(6n + 1) { --tinta: var(--tinta-1); }
.skill-category:nth-of-type(6n + 2) { --tinta: var(--tinta-2); }
.skill-category:nth-of-type(6n + 3) { --tinta: var(--tinta-3); }
.skill-category:nth-of-type(6n + 4) { --tinta: var(--tinta-4); }
.skill-category:nth-of-type(6n + 5) { --tinta: var(--tinta-5); }
.skill-category:nth-of-type(6n + 6) { --tinta: var(--tinta-6); }

/* La tinta si vede anche sulle tendine dell'area, ma solo mentre ci passi
   sopra o quando sono aperte: a riposo la pagina resta calma. */
.skill-category .acc {
  border-left: 2px solid transparent;
  transition: border-color var(--dur-rapida) ease;
}

.skill-category .acc:hover,
.skill-category .acc.is-open,
.skill-category details.acc[open] {
  border-left-color: var(--tinta, var(--accent));
}

.skill-category .acc.is-open .acc-chevron,
.skill-category details.acc[open] .acc-chevron { border-color: var(--tinta, var(--accent)); }

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
}

.skill-level {
  display: flex;
  gap: 3px;
}

.skill-level i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}

/* I pallini pieni prendono la tinta della loro area invece di un
   turchese uguale per tutte. Prima erano l'unico elemento della
   scheda che non rispettava il codice colore della categoria: il
   bordo, il quadratino e la freccia dicevano "area 1", i pallini
   dicevano sempre la stessa cosa. Ora la scheda parla con una voce
   sola. Il ripiego dopo la virgola serve ai pallini che dovessero
   comparire fuori da un'area con tinta assegnata. */
.skill-level i.filled { background: var(--tinta, var(--accent-2)); }

/* Card estesa per una competenza con sottocompetenze/curiosità */
.skill-item {
  flex-basis: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.skill-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.skill-item-head strong { font-size: 0.98rem; }

.subskill-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.subskill-list li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.subskill-list li:first-child { border-top: none; padding-top: 0; }

.subskill-name {
  color: var(--text-primary);
  font-weight: 600;
  margin-right: 6px;
}

.skill-note {
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 44px;
}

.skill-note strong { color: var(--text-primary); }

/* =========================================================
   TIMELINE (Chi sono)
   ========================================================= */
.timeline {
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--border-strong);
}

.timeline-item {
  position: relative;
  padding-bottom: 34px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 4px var(--bg);
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-2);
  margin-bottom: 6px;
  display: block;
}

/* =========================================================
   VALUES / GENERIC ICON LIST
   ========================================================= */
.values-grid { margin-top: 12px; }

/* =========================================================
   BLOG
   ========================================================= */
.post-card {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  display: block;
}

.post-card:last-child { border-bottom: none; }

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.post-card h3 { margin-bottom: 8px; transition: color var(--dur-istante) ease; }
.post-card:hover h3 { color: var(--accent-2); }

.post-excerpt { margin-bottom: 0; }

.article-header { margin-bottom: 40px; }

.article-body {
  font-size: 1.05rem;
  max-width: 720px;
}

.article-body h2 { margin-top: 1.6em; }
.article-body h3 { margin-top: 1.4em; }
.article-body p { color: var(--text-secondary); }
.article-body code {
  font-family: var(--font-mono);
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--accent-2);
}
.article-body pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
  overflow-x: auto;
}
.article-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.4em 0;
  padding: 0.2em 1.2em;
  color: var(--text-secondary);
  font-style: italic;
}
.article-body ul, .article-body ol { color: var(--text-secondary); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  margin-bottom: 30px;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--accent-2); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.contact-item .card-icon { margin-bottom: 0; flex-shrink: 0; }

.form-field { margin-bottom: 18px; }

.form-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-field textarea { min-height: 140px; resize: vertical; }

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent-2);
}

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.social-row a {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-istante) ease, color var(--dur-istante) ease;
  color: var(--text-secondary);
}

.social-row a:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }

.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

/* =========================================================
   RIQUADRO "IN BREVE" (Chi sono)
   Popolato da main.js con i dati di siteConfig (età, città,
   valore guida). Se non compili quei campi, non compare.
   ========================================================= */
.fact-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  margin-top: 32px;
}

.fact-box-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}

.fact-list { margin: 0; }

.fact-row {
  display: flex;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}

.fact-row:first-child { border-top: none; padding-top: 0; }

.fact-row dt {
  flex: 0 0 116px;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding-top: 2px;
}

.fact-row dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

.fact-note {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .fact-row { flex-direction: column; gap: 4px; }
  .fact-row dt { flex: none; }
}

/* =========================================================
   LANDING DI PROGETTO (mirion.html, nilion.html)
   Componenti riusabili da entrambe le pagine. I colori NON
   sono scritti qui: arrivano dalle variabili, così ogni
   landing può avere la sua palette (vedi blocco TEMI sotto).
   ========================================================= */
.landing-hero {
  padding-top: 88px;
  padding-bottom: 72px;
  position: relative;
  overflow: hidden;
}

.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(680px 340px at 78% 8%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}

.landing-hero > * { position: relative; z-index: 1; }

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 22px;
}

.landing-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
}

.landing-hero h1 {
  max-width: 800px;
  font-size: clamp(2.4rem, 6vw, 4rem);
}

.landing-lead {
  font-size: 1.18rem;
  max-width: 680px;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

/* Passi numerati (il processo dietro al progetto) */
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.step-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 30px 62px;
  border-left: 1px solid var(--border-strong);
  margin-left: 19px;
}

.step-list li:last-child { padding-bottom: 0; border-left-color: transparent; }

.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -20px;
  top: -2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-list h3 { margin-bottom: 6px; font-size: 1.12rem; }
.step-list p { margin-bottom: 0; }

/* Fascia finale con invito all'azione */
.cta-band {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 52px 44px;
  text-align: center;
  background-image: radial-gradient(520px 240px at 50% 0%, var(--accent-soft), transparent 70%);
}

.cta-band h2 { max-width: 620px; margin-left: auto; margin-right: auto; }
.cta-band p { max-width: 560px; margin: 0 auto 26px; }
.cta-band .btn-row { justify-content: center; }

@media (max-width: 600px) {
  .cta-band { padding: 38px 24px; }
}

/* Nota "stato del progetto" */
.status-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 28px;
}

.status-note strong { color: var(--text-primary); }

/* Pallino pulsante accanto allo stato del progetto (niente emoji:
   così l'aspetto è identico su ogni dispositivo e sistema) */
.status-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* =========================================================
   TEMI DELLE LANDING — palette diverse ma parenti
   Il sito principale resta viola + turchese. Ogni landing
   cambia solo le due variabili di accento (e le ombre che
   ne derivano): stessa struttura, identità riconoscibile.
   MODIFICA QUI se vuoi cambiare i colori di una landing.
   ========================================================= */

/* MIRION — editoriale, caldo: viola più intenso + oro (l'oro non cambia:
   era già giusto). Sulle intestazioni di questa pagina interviene anche
   --font-serif, impostato più sotto in un blocco dedicato. */
body[data-theme="mirion"] {
  --accent: #a855f7;
  --accent-2: #f0a63c;
  --accent-gradient: linear-gradient(135deg, #a855f7, #f0a63c);
  --accent-soft: rgba(168, 85, 247, 0.16);
  --shadow-glow: 0 0 0 1px rgba(168, 85, 247, 0.28), 0 8px 24px rgba(240, 166, 60, 0.18);
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(168, 85, 247, 0.20), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(240, 166, 60, 0.12), transparent 55%);
}

/* Nota sulla pulizia fatta qui: il vecchio blocco "NILION" (blu+verde) non
   era più agganciato a nessuna pagina — Nilion è diventato Velion, ma il
   tema CSS non era stato rinominato nel passaggio, e per errore la pagina
   Velion aveva invece ereditato la palette rosa-ciano pensata per un
   momento successivo. Corretto qui sotto: ora VELION ha davvero la
   palette "community, fredda" blu+verde descritta nella guida. */

/* La navbar resta scura su tutte le pagine, tema o no */
body[data-theme] .navbar { background: rgba(10, 10, 18, 0.72); }

/* Etichetta di stato su una card progetto (es. "Secondario · già avviato") */
.project-status {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Esempi concreti dentro la scheda di uno strumento */
.tool-examples {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}

.tool-examples li {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tool-examples li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* VELION — spazio digitale, community: blu + verde smeraldo (freddo,
   per marcare la distanza dal calore editoriale di Mirion) */
body[data-theme="velion"] {
  --accent: #4f8dff;
  --accent-2: #34d399;
  --accent-gradient: linear-gradient(135deg, #4f8dff, #34d399);
  --accent-soft: rgba(79, 141, 255, 0.16);
  --shadow-glow: 0 0 0 1px rgba(79, 141, 255, 0.28), 0 8px 24px rgba(52, 211, 153, 0.18);
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(79, 141, 255, 0.20), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(52, 211, 153, 0.12), transparent 55%);
}

/* =========================================================
   CARD PRODOTTO (vendita — pagina Nilion)
   Come .card ma con prezzo e pulsante allineati in fondo,
   così le card restano della stessa altezza anche se i testi
   hanno lunghezze diverse.
   ========================================================= */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform var(--dur-rapida) ease, border-color var(--dur-rapida) ease, background var(--dur-rapida) ease;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}

.product-card h3 { margin-bottom: 8px; }

/* Il piede si appoggia da solo in fondo alla scheda: così i prezzi delle
   tre edizioni restano allineati anche se le descrizioni hanno lunghezze
   diverse, senza dover far crescere per forza il paragrafo. */
.product-card > p { flex-grow: 0; }

.product-list {
  flex-grow: 1;
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* La spunta è disegnata in CSS: nessuna immagine da caricare. */
.product-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(45deg);
}

/* =========================================================
   PAGINE DI DETTAGLIO DEI SERVIZI
   Una per servizio, generate da strumenti/genera-servizi.js
   ========================================================= */
.det-briciole {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.det-briciole a { color: var(--accent-2); }
.det-briciole a:hover { text-decoration: underline; }

.det-problema {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 30px;
  border-left: 2px solid var(--accent-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-card);
}

.det-problema h2 { font-size: 1.15rem; margin-bottom: 12px; }
.det-problema p { margin-bottom: 0; font-size: 1.03rem; line-height: 1.75; }

.det-blocco h2 { font-size: 1.2rem; margin-bottom: 16px; }
.det-blocco .product-list { flex-grow: 0; margin-top: 0; }

.det-livelli {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.det-livello {
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.det-livello p { margin-bottom: 0; }

.det-livello-nome {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* Da un servizio si passa al successivo senza tornare all'elenco */
.det-vicini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.det-vicino {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  transition: border-color var(--dur-rapida) ease, background var(--dur-rapida) ease;
}

.det-vicino:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
.det-vicino span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.det-vicino strong { color: var(--text-primary); font-size: 1.02rem; }
.det-vicino-avanti { text-align: right; grid-column: 2; }

/* Le azioni in fondo a una tendina dei servizi */
.acc-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
}

.card-link-forte { color: var(--accent-2); font-weight: 600; }

@media (max-width: 700px) {
  .det-livelli { grid-template-columns: 1fr; }
  .det-vicini { grid-template-columns: 1fr; }
  .det-vicino-avanti { text-align: left; grid-column: 1; }
  .det-problema { padding: 20px 18px; }
}

/* =========================================================
   VELION — gli scaffali dello spazio
   Quattro schede-collegamento: da ognuna si raggiungono le altre.
   ========================================================= */
.card-scaffale {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 78px;
  text-decoration: none;
}

.card-scaffale .card-link { margin-top: auto; padding-top: 14px; }

.scaffale-numero {
  position: absolute;
  left: 26px;
  top: 26px;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-2);
  opacity: 0.5;
}

@media (max-width: 600px) {
  .card-scaffale { padding-left: 20px; padding-top: 58px; }
  .scaffale-numero { left: 20px; top: 18px; }
}

/* =========================================================
   CHI C'È DENTRO — collaboratori e clienti
   Due gruppi separati con la stessa impaginazione: la differenza
   la fa l'etichetta del ruolo, non la forma della scheda.
   ========================================================= */
.persone { margin-top: 44px; }
.persone-gruppo + .persone-gruppo { margin-top: 40px; }

.persone-testa {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.persone-testa h3 { margin: 0; font-size: 1.15rem; }
.persone-testa p { margin: 0; font-size: 0.94rem; color: var(--text-muted); }

.persona h4 { margin-bottom: 6px; font-size: 1.2rem; }
.persona p { margin-bottom: 0; font-size: 0.95rem; }

.persona-ruolo {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.persona-cliente .persona-ruolo {
  background: transparent;
  color: var(--text-secondary);
}

/* =========================================================
   PACCHETTI DI SERVIZI
   Tre schede affiancate: l'elenco cresce per riempire lo spazio,
   così la riga in fondo resta allineata anche se un pacchetto
   comprende una voce in più degli altri.
   ========================================================= */
.pack-grid { margin-bottom: 28px; }

.pack-card {
  display: flex;
  flex-direction: column;
}

/* L'etichetta del livello, con tre tacche che si accendono a salire:
   si capisce a colpo d'occhio che è una scala, non tre cose diverse. */
.pack-livello {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.pack-tacche { display: inline-flex; gap: 3px; }

.pack-tacche i {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
}

.pack-tacche i.on { background: var(--accent-2); }

.pack-card h3 { margin-bottom: 10px; line-height: 1.25; }

.pack-grado {
  font-size: 1.6rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pack-card > p { margin-bottom: 4px; }

/* Il bonus non è un quarto pacchetto: sta in orizzontale, sotto ai tre,
   con il bordo tratteggiato che dice «questo si aggiunge». */
.pack-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  margin-bottom: 28px;
  padding: 22px 26px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.pack-bonus-testa { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pack-bonus-testa h3 { margin: 0; font-size: 1.25rem; }
.pack-bonus p { margin: 0; flex: 1 1 320px; font-size: 0.97rem; }

.pack-bonus-etichetta {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  color: #0a0a12;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================
   COMMISSIONI SINGOLE — tendina nativa del browser
   È un <details>: si apre anche dove il JavaScript non parte,
   e tiene i sedici servizi fuori dai piedi finché non servono.
   ========================================================= */
.commissioni {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}

.commissioni-pulsante {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-rapida) ease;
}

.commissioni-pulsante::-webkit-details-marker { display: none; }
.commissioni-pulsante:hover { background: var(--bg-card-hover); }

.commissioni-testo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.commissioni-conta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.commissioni[open] > .commissioni-pulsante {
  border-bottom: 1px solid var(--border);
}

.commissioni[open] > .commissioni-pulsante .acc-chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
  border-color: var(--accent-2);
}

.commissioni-corpo { padding: 26px; }

.commissioni-intro {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
  font-size: 0.97rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .commissioni-pulsante { flex-wrap: wrap; padding: 18px; gap: 6px 12px; }
  .commissioni-testo { flex: 1 1 100%; font-size: 1.05rem; }
  .commissioni-conta { margin-left: 0; }
  .commissioni-pulsante .acc-chevron { margin-left: auto; }
  .commissioni-corpo { padding: 18px; }
  .commissioni-intro { text-align: left; }
  .pack-bonus { padding: 18px; }
}

.pack-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* La scheda intera è un collegamento: si solleva come le altre card
   e la riga d'invito si accende al passaggio del mouse. */
a.pack-card { text-decoration: none; }
a.pack-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }

.pack-apri {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-2);
  font-weight: 600;
  font-size: 0.95rem;
}

a.pack-card:hover .pack-apri { text-decoration: underline; }

.pack-bonus-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
}

.pack-price {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* Il pacchetto centrale è quello che porta più lavoro: si distingue appena */
.pack-card-accent { border-color: var(--border-strong); background: var(--bg-card-hover); }

.pack-nota {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
  font-size: 0.97rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .pack-nota { text-align: left; margin-bottom: 40px; }
}

/* L'edizione completa si distingue senza gridare */
.product-badge-top {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #0a0a12;
  font-weight: 700;
}

.product-badge {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.product-price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}

.product-foot .btn { padding: 10px 18px; font-size: 0.9rem; }

/* =========================================================
   BLOCCO D'ACQUISTO
   ---------------------------------------------------------
   La legge europea chiede che, per un file consegnato subito,
   chi compra dichiari espressamente di accettarlo — perché da
   quel momento perde il diritto di ripensarci. Qui la spunta
   sblocca il pulsante, e lo fa in CSS: funziona anche se il
   JavaScript non parte, che è esattamente il caso in cui non
   vorresti che il consenso saltasse.
   ========================================================= */
.product-foot-acquisto { display: block; }
.product-foot-acquisto .product-price { display: block; margin-bottom: 14px; }

.acquisto { display: block; }

.acquisto-consenso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.acquisto-consenso input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.acquisto .btn-acquista {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Finché la spunta non c'è, il pulsante è spento e non cliccabile. */
.acquisto:has(input:not(:checked)) .btn-acquista {
  pointer-events: none;
  opacity: 0.4;
  filter: grayscale(0.6);
}

.acquisto:has(input:not(:checked)) .acquisto-consenso { color: var(--text-secondary); }

/* =========================================================
   HOME — HERO CENTRATO CON FOTO
   ========================================================= */
.hero-centered {
  padding-top: 72px;
  padding-bottom: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-centered h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  margin-bottom: 14px;
}

.hero-centered .hero-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 620px;
}

.hero-centered .hero-chips { justify-content: center; margin: 0 auto; }

/* Riquadro foto */
.hero-photo {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 28px;
  border: 2px solid var(--border-strong);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  padding: 3px;
  background: var(--accent-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-photo.is-empty { padding: 14px; }

.photo-initials {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.photo-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 460px;
  margin: 16px auto 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}

.photo-hint code {
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-size: 0.92em;
}

/* Blocco "una sezione = descrizione + pulsante" nella Home */
.home-block {
  padding-top: 72px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--border);
}

.home-block:last-of-type { border-bottom: none; }

.home-block h2 { margin-bottom: 14px; }

.home-block p {
  max-width: 680px;
  font-size: 1.05rem;
  margin-bottom: 24px;
}

/* Card compatta per i progetti secondari (svago / portfolio tecnico) */
.side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  transition: border-color var(--dur-rapida) ease, transform var(--dur-rapida) ease;
}

.side-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.side-card .project-status { margin-bottom: 12px; }
.side-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.side-card p { font-size: 0.92rem; margin-bottom: 14px; max-width: none; }

/* =========================================================
   LIVELLI DI SERVIZIO (pagina Servizi)
   ========================================================= */
.service-levels {
  margin: 16px 0 4px;
  border-top: 1px solid var(--border);
}

.service-level {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.service-level:last-child { border-bottom: none; }

.service-level-label {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.service-level p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Copertina reale del prodotto (sostituisce il riquadro segnaposto) */
.product-cover {
  width: 100%;
  aspect-ratio: 1 / 1.414; /* proporzioni di un foglio A4 */
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}

/* =========================================================
   INTESTAZIONE MINIMA — solo il nome, centrato
   ========================================================= */
.navbar-minimal .navbar-inner { justify-content: center; }
.navbar-minimal .brand { font-size: 1.2rem; }

/* =========================================================
   HERO DELLA HOME — versione con più impatto
   ========================================================= */
.hero-stage {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  border-bottom: 1px solid var(--border);
}

/* Alone luminoso che respira lentamente dietro alla foto */
.hero-aura {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 900px;
  height: 640px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(108, 99, 255, 0.30), transparent 72%),
    radial-gradient(closest-side at 68% 42%, rgba(45, 212, 191, 0.24), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  animation: aura-breathe 9s ease-in-out infinite;
}

@keyframes aura-breathe {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.07); }
}

/* Chi preferisce meno movimento non vede l'animazione */
@media (prefers-reduced-motion: reduce) {
  .hero-aura { animation: none; }
}

/* Solo il padding verticale va azzerato: quello laterale arriva da
   .container ed è ciò che tiene il testo lontano dai bordi dello schermo. */
.hero-stage .hero-centered {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.hero-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  line-height: 1.03;
}

.hero-role {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}

.hero-stage .hero-lead {
  font-size: 1.04rem;
  line-height: 1.65;
  max-width: 880px;
  margin: 0 auto 28px;
}

.hero-actions { justify-content: center; margin-bottom: 6px; }

/* Foto: cerchio più grande con doppio anello luminoso */
.hero-stage .hero-photo {
  width: 132px;
  height: 132px;
  margin-bottom: 16px;
  box-shadow: 0 0 0 10px rgba(108, 99, 255, 0.07), 0 18px 50px rgba(0, 0, 0, 0.55);
}

.hero-stage .photo-initials { font-size: 2.1rem; }

/* =========================================================
   BLOCCO HOME CENTRATO (sezione contatti)
   ========================================================= */
.home-block-center { text-align: center; }
.home-block-center .eyebrow { justify-content: center; }
.home-block-center p { margin-left: auto; margin-right: auto; }
.home-block-center .btn-row { justify-content: center; }

/* =========================================================
   BANNER PICCOLO IN BASSO A DESTRA (NeoGalaxy)
   ========================================================= */
.mini-banner {
  max-width: 430px;
  margin: 0 0 64px auto; /* "auto" a sinistra = allineato a destra */
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-rapida) ease;
}

.mini-banner:hover { border-color: var(--border-strong); }

.mini-banner-tag {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mini-banner strong { font-size: 0.95rem; }

.mini-banner p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.mini-banner > a {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .mini-banner { max-width: none; flex-wrap: wrap; }
}

/* =========================================================
   NOME IN ALTO = PULSANTE HOME
   Il nome nell'intestazione è l'unico elemento di navigazione:
   è integrato in un pulsante che riporta sempre alla Home.
   ========================================================= */
.brand-home {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 18px 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color var(--dur-rapida) ease, background var(--dur-rapida) ease, transform var(--dur-rapida) ease,
    box-shadow 0.18s ease;
}

.brand-home:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.brand-home .brand-name { line-height: 1; }

/* La scritta "Home" compare accanto al nome al passaggio del mouse:
   così si capisce dove porta, senza appesantire la grafica a riposo. */
.brand-home-hint {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  transition: max-width var(--dur-media) ease, opacity var(--dur-rapida) ease, margin-left var(--dur-media) ease;
}

.brand-home:hover .brand-home-hint,
.brand-home:focus-visible .brand-home-hint {
  max-width: 70px;
  opacity: 1;
  margin-left: 2px;
}

/* Sulla Home il pulsante c'è ma resta discreto: sei già lì */
body[data-page="home"] .brand-home {
  background: transparent;
  border-color: transparent;
}

body[data-page="home"] .brand-home:hover {
  background: var(--bg-card);
  border-color: var(--border);
}

@media (max-width: 600px) {
  .brand-home { padding: 7px 14px 7px 8px; }
  .brand-home-hint { display: none; }
}

/* =========================================================
   HOME A SCHERMATA UNICA
   Tutta la navigazione sta qui: tre schede che portano alle
   pagine del sito. Niente sezioni sotto da scorrere.
   ========================================================= */
/* Sulla Home non c'è né la barra col nome né il piè di pagina: il nome è
   già al centro in grande e i contatti hanno il loro pulsante. Quindi la
   schermata è tutta a disposizione del contenuto — niente sottrazioni. */
.hero-full {
  min-height: 100vh;
  min-height: 100svh; /* sul telefono esclude la barra del browser che compare e scompare */
  display: flex;
  align-items: center;
  border-bottom: none;
  padding: 40px 0 36px;
}

/* Il contenitore dell'hero è più largo del resto del sito:
   la Home deve respirare da bordo a bordo. */
.hero-full .container { max-width: 1240px; }

.hero-full .hero-centered { width: 100%; }

.hero-cta-line {
  font-size: 0.94rem;
  color: var(--text-muted);
  max-width: 820px;
  margin: 0 auto 22px;
}

/* --- Le tre schede di navigazione --- */
.hero-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 20px; /* due schede: Servizi e Progetti, centrate */
}

.hero-nav-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 3px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform var(--dur-rapida) ease, border-color var(--dur-rapida) ease, background var(--dur-rapida) ease,
    box-shadow 0.18s ease;
}

.hero-nav-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.hero-nav-kicker {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-nav-card strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-primary);
}

.hero-nav-desc {
  font-size: 0.88rem;
  line-height: 1.48;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.hero-nav-go {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-2);
}

/* La scheda "Assumimi" si distingue: è quella per le aziende */
.hero-nav-card-accent {
  border-color: rgba(108, 99, 255, 0.4);
  background: linear-gradient(160deg, var(--accent-soft), var(--bg-card) 65%);
}

.hero-nav-card-accent:hover { box-shadow: var(--shadow-glow); }

@media (max-width: 820px) {
  .hero-nav { grid-template-columns: 1fr; max-width: 460px; }
  .hero-full .container { max-width: 100%; }
  .hero-full { min-height: 0; padding: 40px 0; }
}

/* =========================================================
   FOOTER — solo contatti
   ========================================================= */
.footer-contacts { padding: 20px 0 26px; border-top: 1px solid var(--border); }

.footer-contacts .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-mail {
  font-size: 0.92rem;
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-istante) ease, border-color var(--dur-istante) ease;
}

.footer-mail:hover { color: var(--accent-2); border-color: var(--accent-2); }

.footer-contacts .social-row { margin-top: 0; }

/* =========================================================
   BADGE NEOGALAXY — icona che si allarga al passaggio del mouse
   Sta fissa in basso a destra, sopra al resto della pagina.
   ========================================================= */
.fun-badge {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
}

.fun-badge > a {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 62px;
  padding: 7px;
  border-radius: var(--radius-pill);
  background: rgba(21, 24, 41, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: max-width var(--dur-media) var(--curva-entrata), gap var(--dur-media) ease,
    border-color 0.2s ease, box-shadow 0.2s ease, padding 0.32s ease;
}

.fun-badge > a:hover,
.fun-badge > a:focus-visible {
  max-width: 372px;
  gap: 12px;
  padding-right: 20px;
  border-color: rgba(178, 102, 255, 0.55);
  box-shadow: 0 10px 34px rgba(140, 70, 220, 0.3);
}

.fun-badge img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
}

.fun-badge-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-rapida) ease 0.06s;
}

.fun-badge > a:hover .fun-badge-body,
.fun-badge > a:focus-visible .fun-badge-body { opacity: 1; }

.fun-badge-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c58bff;
}

.fun-badge-body strong { font-size: 0.92rem; color: var(--text-primary); }
.fun-badge-body span:last-child { font-size: 0.76rem; color: var(--text-muted); }

/* Su touch non esiste il passaggio del mouse: il badge resta chiuso
   (il logo si riconosce da solo) e il tocco apre direttamente il link,
   così non copre mai il contenuto della pagina. */

@media (max-width: 560px) {
  .fun-badge { right: 14px; bottom: 14px; }
  .fun-badge > a { max-width: 56px; padding: 6px; }
  .fun-badge img { width: 40px; height: 40px; }
}

/* Pulsantino contatti nella Home, sotto i tag */
.hero-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  transition: color var(--dur-istante) ease, border-color var(--dur-istante) ease, background var(--dur-istante) ease;
}

.hero-contact-btn:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: var(--bg-card);
}

/* =========================================================
   INTESTAZIONE DI PAGINA CENTRATA
   Usata su tutte le pagine interne: titolo e descrizione al
   centro, con la stessa larghezza di lettura ovunque.
   ========================================================= */
.page-head {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-head .eyebrow { justify-content: center; }

.page-head h1,
.page-head h2 { margin-left: auto; margin-right: auto; }

/* L'intestazione di pagina ha bisogno di aria: è la prima cosa che si
   legge e stabilisce il tono di tutto quello che viene dopo. Titolo e
   testo staccati, righe più larghe, riga di lettura corta. */
.page-head { margin-bottom: 60px; }

.page-head h1,
.page-head h2 { margin-bottom: 22px; }

.page-head p {
  font-size: 1.12rem;
  line-height: 1.78;
  margin-left: auto;
  margin-right: auto;
  max-width: 660px;
}

.page-head p + p { margin-top: 18px; }
.page-head p:last-child { margin-bottom: 0; }

/* La riga chiave dell'intestazione: staccata e più marcata delle altre.
   Il selettore è doppio (.page-head p.page-lead) perché deve avere più
   peso della regola generica qui sopra, altrimenti la misura non cambia. */
.page-head p.page-lead,
.page-lead {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 500;
  max-width: 620px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .page-head { margin-bottom: 44px; }
  .page-head h1, .page-head h2 { margin-bottom: 18px; }
  .page-head p { font-size: 1.04rem; line-height: 1.72; }
  .page-lead { font-size: 1.12rem; }
}

/* Sulle landing il pulsante "torna indietro" resta a sinistra */
.landing-hero .back-link { align-self: flex-start; }

/* Immagine reale al posto del riquadro segnaposto in una card progetto */
.card-media-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  background: var(--bg-elevated);
}

/* =========================================================
   PAGINA DI VENDITA (mirion.html)
   Volutamente diversa dal resto del sito: barra col marchio
   del prodotto, hero su due colonne, niente menu.
   ========================================================= */
.shop-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(10, 10, 18, 0.78);
  border-bottom: 1px solid var(--border);
}

.shop-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.shop-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shop-bar-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  transition: border-color var(--dur-istante) ease, background var(--dur-istante) ease;
}

.shop-bar-cta:hover { border-color: var(--accent-2); background: var(--bg-card); }

/* Hero su due colonne: testo a sinistra, copertina a destra */
.shop-hero {
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--border);
  background-image: radial-gradient(780px 420px at 78% 10%, var(--accent-soft), transparent 70%);
}

.shop-hero-inner {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: center;
}

.shop-hero-text h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.shop-hero-text .landing-lead { font-size: 1.02rem; margin-bottom: 16px; }
.shop-hero-text .btn-row { margin-top: 26px; }

.shop-hero-cover img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
  transform: rotate(1.4deg);
}

@media (max-width: 860px) {
  .shop-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .shop-hero-cover { max-width: 300px; margin: 0 auto; }
}

/* Riga di rassicurazioni sotto le edizioni */
.shop-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.shop-reassure span {
  position: relative;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.shop-reassure span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* Footer minimo della pagina di vendita */
.shop-footer {
  padding: 26px 0 32px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.shop-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.shop-footer a { color: var(--accent-2); }
.shop-footer a:hover { text-decoration: underline; }

/* =========================================================
   LEGGIBILITÀ SU SCHERMI PICCOLI
   Le etichette in maiuscoletto stavano sotto gli 11px: su un
   telefono diventano illeggibili. Qui le riporto a una misura
   leggibile e allargo le aree toccabili.
   ========================================================= */
@media (max-width: 600px) {
  .hero-nav-kicker,
  .service-level-label,
  .product-badge,
  .project-status,
  .mini-banner-tag,
  .fun-badge-tag,
  .landing-badge,
  .eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }

  .hero-role { font-size: 0.78rem; letter-spacing: 0.1em; }

  .card-media,
  .post-meta,
  .shop-reassure span,
  .shop-footer,
  .footer-contacts { font-size: 0.86rem; }

  .subskill-list li,
  .tool-examples li,
  .service-level p,
  .hero-nav-desc,
  .side-card p,
  .mini-banner p { font-size: 0.9rem; }

  .photo-hint { font-size: 0.82rem; }

  /* aree toccabili più comode: minimo consigliato 44px */
  .btn { padding: 13px 22px; }
  .chip { padding: 9px 15px; font-size: 0.86rem; }
  .card-link,
  .footer-mail,
  .back-link { display: inline-block; padding: 6px 0; }
  .social-row a { width: 46px; height: 46px; }

  /* margini laterali un filo più stretti: più spazio al testo */
  .container { padding: 0 18px; }

  /* titoli che non spezzano male le parole lunghe */
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
}

/* Schermi molto stretti (iPhone SE e simili) */
@media (max-width: 380px) {
  .container { padding: 0 15px; }
  .hero-name { font-size: 2.2rem; }
  .brand-home { padding: 6px 13px 6px 7px; font-size: 1rem; }
  .brand-mark { width: 26px; height: 26px; font-size: 0.75rem; }
  .product-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .product-foot .btn { justify-content: center; }
}

/* Tablet in verticale: due colonne invece di tre, niente righe strette */
@media (min-width: 601px) and (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Su schermi molto grandi il testo non deve diventare una riga infinita */
@media (min-width: 1600px) {
  .hero-stage .hero-lead { max-width: 900px; }
}

/* =========================================================
   CORREZIONI PER SCHERMI MOLTO STRETTI (sotto i 380px)
   Su un iPhone SE l'email lunga e le colonne della griglia
   uscivano dal bordo: qui glielo impedisco.
   ========================================================= */
/* In una griglia gli elementi possono allargarsi oltre la colonna se il
   contenuto non sa dove spezzarsi: "min-width: 0" glielo consente. */
.contact-grid > *,
.grid > * { min-width: 0; }

.contact-item p,
.footer-mail,
.article-body a { overflow-wrap: anywhere; }

@media (max-width: 380px) {
  .contact-item { gap: 10px; }
  .contact-item .card-icon { width: 36px; height: 36px; }
  .contact-item p { font-size: 0.9rem; }
  .card { padding: 20px; }
  .product-card { padding: 20px; }
  .footer-contacts .container { gap: 14px; }
}

/* =========================================================
   SEZIONI A TENDINA
   Titolo sempre visibile, contenuto che si apre al clic.
   L'altezza è animata con una griglia 0fr → 1fr: è l'unico
   modo di animare un'altezza variabile senza far ricalcolare
   l'impaginazione a ogni fotogramma.
   ========================================================= */
.acc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-rapida) ease, background var(--dur-rapida) ease;
}

.acc.is-open { border-color: var(--border-strong); }

.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-rapida) ease;
}

.acc-head:hover { background: var(--bg-card-hover); }
.acc-head:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }

.acc-title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-primary);
}

.acc-meta { flex-shrink: 0; }

.acc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* Freccia che ruota all'apertura */
.acc-chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-media) var(--curva-molla), border-color var(--dur-rapida) ease;
}

.acc-head:hover .acc-chevron { border-color: var(--accent-2); }
.acc.is-open .acc-chevron { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--accent-2); }

/* Il corpo: da altezza zero ad altezza naturale */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc.is-open .acc-body { grid-template-rows: 1fr; }

.acc-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-rapida) ease;
}

.acc.is-open .acc-inner { opacity: 1; transition-delay: 0.1s; }

.acc-inner > * { margin-left: 20px; margin-right: 20px; }
.acc-inner > *:last-child { margin-bottom: 20px; }

.acc-desc { margin-top: 0; color: var(--text-secondary); }

/* Servizi: le tendine impilate diventano un elenco pulito */
.acc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.acc-servizio .card-link { display: inline-block; margin-top: 14px; }

/* Competenze: la voce occupa tutta la riga dell'elenco */
.skill-item-wrap { flex-basis: 100%; list-style: none; }
/* La riga di separazione sopra la PRIMA voce è stata tolta: una
   linea subito sotto al titolo non separa niente (sopra c'è già il
   titolo) e schiacciava la prima descrizione contro l'intestazione.
   Le righe fra una voce e l'altra restano — lì separano davvero. */
.acc-competenza .subskill-list li:first-child { border-top: none; padding-top: 0; }

/* Strumenti: tendina più piccola dentro la scheda */
.acc-strumento { margin-top: 14px; background: var(--bg-elevated); }
.acc-strumento .acc-head { padding: 11px 14px; }
.acc-strumento .acc-title { font-size: 0.88rem; }
.acc-strumento .acc-inner > * { margin-left: 14px; margin-right: 14px; }
.acc-strumento .acc-inner > *:last-child { margin-bottom: 14px; }
.acc-strumento .tool-examples { margin-top: 0; }

/* =========================================================
   COMPARSA GRADUALE ALLO SCORRIMENTO
   Solo opacità e spostamento: sono le due proprietà che il
   browser anima sulla scheda grafica, senza rifare i calcoli
   di impaginazione. Nessun rallentamento anche su telefono.
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-lenta) ease, transform var(--dur-lenta) var(--curva-entrata);
  transition-delay: var(--ritardo, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

/* La copertina sulla pagina di vendita entra da destra */
.shop-hero-cover.reveal { transform: translateY(16px) scale(0.97); }
.shop-hero-cover.reveal.is-in { transform: rotate(1.4deg); }

/* =========================================================
   ENTRATA DELLA HOME
   ---------------------------------------------------------
   La prima schermata non aspetta lo scorrimento: si compone
   da sola all'apertura, un pezzo dopo l'altro. È l'unica
   animazione "a tempo" del sito, e sta tutta qui in CSS —
   così parte insieme alla pagina, senza aspettare che il
   JavaScript sia stato scaricato ed eseguito.

   "backwards" serve perché l'elemento resti invisibile
   durante il proprio ritardo invece di lampeggiare.
   ========================================================= */
@keyframes entra-su {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

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

.page-home .hero-photo,
.page-home .hero-name,
.page-home .hero-role,
.page-home .hero-lead,
.page-home .hero-nav,
.page-home .hero-contact-btn {
  animation: entra-su 0.62s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.page-home .hero-photo { animation-name: entra-foto; animation-duration: 0.75s; }
.page-home .hero-name { animation-delay: 0.09s; }
.page-home .hero-role { animation-delay: 0.17s; }
.page-home .hero-lead { animation-delay: 0.25s; }
.page-home .hero-nav { animation-delay: 0.33s; }
.page-home .hero-contact-btn { animation-delay: 0.44s; }

/* Le tre schede entrano una dopo l'altra dentro il loro contenitore */
.page-home .hero-nav-card {
  animation: entra-su 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.page-home .hero-nav-card:nth-child(1) { animation-delay: 0.38s; }
.page-home .hero-nav-card:nth-child(2) { animation-delay: 0.46s; }
.page-home .hero-nav-card:nth-child(3) { animation-delay: 0.54s; }

/* L'icona in basso a destra arriva per ultima, quando il resto è fermo */
.page-home .fun-badge {
  animation: entra-su 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.75s backwards;
}

/* Chi ha chiesto meno animazioni non vede nulla di tutto questo */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .acc-body { transition: none; }
  .acc-chevron { transition: none; }
  .hero-aura { animation: none; }
  * { scroll-behavior: auto !important; }

  /* Anche l'entrata della Home: niente movimento, tutto già al suo posto */
  .page-home .hero-photo,
  .page-home .hero-name,
  .page-home .hero-role,
  .page-home .hero-lead,
  .page-home .hero-nav,
  .page-home .hero-nav-card,
  .page-home .hero-contact-btn,
  .page-home .fun-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   ALONI DI FONDO
   ---------------------------------------------------------
   Le pagine lunghe sono un nero uniforme dall'inizio alla fine, e questo
   le fa sembrare più lunghe di quanto sono. Un alone larghissimo e quasi
   invisibile dietro ogni sezione, alternato a destra e a sinistra, dà alla
   pagina un respiro senza che nessun elemento cambi di un pixel.

   È tutto disegnato dal browser: nessuna immagine da scaricare, e
   "pointer-events: none" garantisce che non intercetti mai un clic.
   ========================================================= */
/* "clip" e non "hidden": hidden trasformerebbe main in un contenitore di
   scorrimento e romperebbe qualunque elemento appiccicato in alto. clip
   taglia e basta, che è esattamente quello che serve qui. */
main { overflow-x: clip; }

main .section {
  position: relative;
  isolation: isolate;
}

main .section::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  width: 60vw;
  max-width: 900px;
  height: 120%;
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent 70%
  );
}

main .section:nth-of-type(odd)::after { right: -18vw; }
main .section:nth-of-type(even)::after {
  left: -18vw;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent-2) 10%, transparent),
    transparent 70%
  );
}

/* Sui telefoni gli aloni restano ma più stretti: su uno schermo piccolo
   uno alone largo mezzo viewport diventa una velatura sul testo. */
@media (max-width: 700px) {
  main .section::after { width: 90vw; opacity: 0.4; }
  main .section:nth-of-type(odd)::after { right: -30vw; }
  main .section:nth-of-type(even)::after { left: -30vw; }
}

/* Se il browser non conosce color-mix, semplicemente non disegna niente:
   il sito resta esattamente com'era prima. Nessun ripiego necessario. */


/* =========================================================
   MOVIMENTO E MICRO-INTERAZIONI
   ---------------------------------------------------------
   Tutto quello che si muove nel sito, in un posto solo.

   Il criterio con cui è scritta questa sezione: il movimento
   qui dentro non serve a stupire, serve a far capire. Una
   scheda che si solleva sta dicendo "sono cliccabile", una
   freccia che scivola sta dicendo "si va di là", un bottone
   che si abbassa sta confermando che il clic è arrivato.
   Niente si muove da solo mentre leggi — parte tutto da un
   tuo gesto o dallo scorrimento.

   Due regole tecniche rispettate ovunque qui sotto:
   1) si animano solo "transform" e "opacity", che la scheda
      grafica gestisce da sola senza rifare l'impaginazione;
   2) chi ha attivato "riduci animazioni" nel sistema non vede
      niente di tutto questo (blocco in fondo alla sezione).
   ========================================================= */

/* ---------------------------------------------------------
   1. BARRA DI AVANZAMENTO DELLA LETTURA
   Una riga sottile in cima che si riempie mentre scorri.
   Su pagine lunghe come Mirion e Velion dice a colpo d'occhio
   quanto manca alla fine. La larghezza la scrive il
   JavaScript, qui c'è solo l'aspetto.
   --------------------------------------------------------- */
.progresso-lettura {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 200;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent-gradient);
  pointer-events: none;
  will-change: transform;
}

/* ---------------------------------------------------------
   2. LA BARRA IN ALTO QUANDO SI SCORRE
   Appena la pagina si muove, la barra si stringe un po' e il
   fondo diventa più solido: si stacca dal contenuto che le
   passa sotto invece di confondersi con esso.
   --------------------------------------------------------- */
.navbar,
.shop-bar {
  transition: background var(--dur-media) ease,
              border-color var(--dur-media) ease,
              box-shadow var(--dur-media) ease;
}

.navbar.is-scrolled,
.shop-bar.is-scrolled {
  background: rgba(10, 10, 18, 0.9);
  border-bottom-color: var(--border-strong);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.36);
}

/* 02-11, Marco: «quando vado su… il sito inizia a buggarsi, andare su e giù, soprattutto la navigation bar».
   Qui la barra, scorrendo, passava da 18 a 10 px di margine: essendo «sticky» occupa spazio, quindi tutta la
   pagina saliva di 16 px, vicino alla cima si tornava sotto la soglia degli 8 px e la barra si riallargava: un
   su e giù senza fine. Ora scorrendo cambiano solo sfondo, bordo e ombra, che non spostano niente. */

/* ---------------------------------------------------------
   3. SCHEDE
   Prima si alzavano di 3 pixel e basta. Ora sotto compare
   anche un'ombra: è l'ombra, più dello spostamento, a far
   leggere la scheda come un oggetto staccato dalla pagina
   che si può prendere.
   --------------------------------------------------------- */
.card,
.product-card,
.hero-nav-card {
  transition: transform var(--dur-media) var(--curva-entrata),
              border-color var(--dur-rapida) ease,
              background var(--dur-rapida) ease,
              box-shadow var(--dur-media) ease;
}

.card:hover,
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}

/* Il clic abbassa la scheda: la conferma fisica del gesto. */
.card:active,
.product-card:active {
  transform: translateY(-1px);
  transition-duration: var(--dur-istante);
}

/* L'immagine dentro una scheda progetto si avvicina appena.
   Il ritaglio ce l'ha già .card più sopra ("overflow: hidden"),
   ed è quello che fa sì che l'ingrandimento riempia il riquadro
   invece di sbordare fuori dalla scheda. */
.card-media-img {
  transition: transform var(--dur-lenta) var(--curva-entrata);
}

.card:hover .card-media-img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------
   4. BOTTONI
   Salgono passando sopra, si abbassano al clic. Il rimbalzo
   della curva "molla" è appena percettibile: serve a far
   sembrare il bottone un oggetto e non un rettangolo.
   --------------------------------------------------------- */
.btn {
  transition: transform var(--dur-rapida) var(--curva-molla),
              box-shadow var(--dur-media) ease,
              border-color var(--dur-rapida) ease,
              background var(--dur-rapida) ease,
              color var(--dur-rapida) ease;
}

.btn:hover { transform: translateY(-2px); }

.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-istante);
}

/* ---------------------------------------------------------
   5. COLLEGAMENTI CON LA FRECCIA
   La freccia scivola in avanti: dice "porta da un'altra parte"
   prima ancora di leggere cosa c'è scritto.
   --------------------------------------------------------- */
.card-link,
.back-link,
.chip {
  transition: color var(--dur-istante) ease,
              border-color var(--dur-rapida) ease,
              background var(--dur-rapida) ease,
              transform var(--dur-rapida) var(--curva-entrata);
}

/* Solo la freccia si muove, non tutta la scritta: il testo che
   si sposta sotto il cursore è fastidioso da leggere. */
.card-link { display: inline-block; }

.card-link:hover { transform: translateX(3px); }

.back-link:hover { transform: translateX(-3px); }

.chip:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------
   6. VOCI DEL MENU
   La sottolineatura cresce dal centro invece di comparire di
   colpo. La voce attiva ce l'ha già larga e resta ferma.
   --------------------------------------------------------- */
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--dur-rapida) var(--curva-entrata);
}

.nav-links a:hover::before { transform: scaleX(1); }

/* Quella attiva ha già il suo segno: non le serve anche questo. */
.nav-links a.active::before { display: none; }

/* ---------------------------------------------------------
   7. CAMPI DEL MODULO CONTATTI
   Il campo su cui stai scrivendo si illumina di un alone
   tenue: in un modulo lungo si vede subito dove sei.
   --------------------------------------------------------- */
.form-field input,
.form-field textarea,
input[type="text"],
input[type="email"],
textarea {
  transition: border-color var(--dur-rapida) ease,
              box-shadow var(--dur-rapida) ease,
              background var(--dur-rapida) ease;
}

.form-field input:focus,
.form-field textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* ---------------------------------------------------------
   8. NAVIGAZIONE DA TASTIERA
   Chi gira il sito col tasto Tab deve vedere dov'è, sempre.
   Questo non è decorazione: è la stessa informazione che il
   mouse riceve dal passaggio del cursore.
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------
   9. ENTRATA DELLA PAGINA
   Ogni pagina che non sia la Home compare con una dissolvenza
   brevissima. Serve a togliere lo scatto secco fra una pagina
   e l'altra quando si naviga: il sito sembra un posto solo
   invece di una serie di documenti separati.

   La Home è esclusa perché ha già la sua entrata a tempo, e
   sovrapporre le due cose la farebbe animare due volte.
   --------------------------------------------------------- */
@keyframes pagina-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

body:not(.page-home) main {
  animation: pagina-entra var(--dur-media) ease-out backwards;
}

/* ---------------------------------------------------------
   10. COMPARSA ALLO SCORRIMENTO
   Il sistema c'era già: qui si allunga appena la durata e si
   usa la curva condivisa, così le comparse hanno lo stesso
   ritmo di tutto il resto invece di una loro velocità.
   --------------------------------------------------------- */
.reveal {
  transition: opacity var(--dur-lenta) ease,
              transform var(--dur-lenta) var(--curva-entrata);
  transition-delay: var(--ritardo, 0ms);
}

/* ---------------------------------------------------------
   11. QUADRATINI DELLE AREE (pagina Competenze)
   Il quadratino colorato davanti al nome di una categoria si
   ingrandisce appena quando passi sull'area. Non è una classe:
   è il ::before del titolo, ed è lì che va agganciato.
   --------------------------------------------------------- */
.skill-category > h3::before {
  transition: transform var(--dur-media) var(--curva-molla);
}

.skill-category:hover > h3::before {
  transform: scale(1.3);
}

/* =========================================================
   SE HAI CHIESTO MENO ANIMAZIONI
   ---------------------------------------------------------
   Questo blocco chiude la sezione MOVIMENTO e spegne tutto
   quello che sta qui sopra. La regola da ricordare è che ogni
   sezione che anima qualcosa si chiude con un blocco come
   questo: la sezione TRE DIMENSIONI più sotto ha il suo.

   Non è una gentilezza opzionale: per chi soffre di disturbi
   vestibolari il movimento su schermo provoca nausea vera, e
   l'impostazione di sistema esiste apposta per dirlo.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .progresso-lettura { display: none; }

  .card, .product-card, .hero-nav-card,
  .card-media-img, .btn, .card-link, .back-link, .chip,
  .nav-links a::before, .skill-category > h3::before,
  .navbar, .shop-bar, .navbar-inner, .shop-bar-inner {
    transition: none !important;
  }

  .card:hover, .product-card:hover,
  .card:active, .product-card:active,
  .btn:hover, .btn:active,
  .card-link:hover, .back-link:hover, .chip:hover,
  .card:hover .card-media-img,
  .skill-category:hover > h3::before {
    transform: none !important;
  }

  body:not(.page-home) main { animation: none !important; }

  /* Il contorno da tastiera resta: non è movimento, è
     informazione, e toglierlo renderebbe il sito inutilizzabile
     per chi naviga senza mouse. */
}


/* =========================================================
   TRE DIMENSIONI
   ---------------------------------------------------------
   Qui c'è del 3D vero — prospettiva, facce, profondità — e
   non c'è dentro nemmeno un kilobyte di libreria.

   La scelta merita una riga di spiegazione, perché la strada
   normale sarebbe stata un'altra. Per fare 3D sul web di
   solito si usa Three.js: 150KB circa, una tela WebGL, un
   motore di rendering completo. Serve quando devi disegnare
   oggetti veri — un personaggio, un terreno, una superficie
   curva con la luce che ci rimbalza sopra.

   Un libro però è una scatola. Sei facce piane ad angolo
   retto, ed è esattamente la figura che il browser sa già
   costruire da solo con "transform-style: preserve-3d".
   Portarsi dietro un motore 3D per disegnare un
   parallelepipedo è come accendere il forno per scaldare
   l'acqua: funziona, ma paghi tutto quel calore per niente.

   Cosa ci guadagni concretamente: la pagina di vendita resta
   leggera come le altre, il libro si vede anche sui telefoni
   vecchi che con WebGL arrancano, la copertina resta
   un'immagine nitida invece di diventare una texture
   ricampionata, e se un domani un browser non capisse niente
   di tutto questo resterebbe la copertina piatta di prima.
   ========================================================= */

/* ---------------------------------------------------------
   1. INCLINAZIONE DELLE SCHEDE
   La scheda ruota di pochi gradi seguendo il cursore, come
   una foto appoggiata su un tavolo che inclini con un dito.

   I due angoli li scrive il JavaScript in --incl-x e --incl-y.
   Restano a zero finché non entra il mouse, quindi questa
   regola da sola non fa niente: è il motivo per cui non serve
   nessun ripiego se il JavaScript non parte.
   --------------------------------------------------------- */
.tilt-scena {
  perspective: 900px;
}

/* Il sollevamento c'era già: qui si aggiungono le due
   rotazioni in coda, così i due effetti si sommano invece di
   sovrascriversi. */
.tilt-scena .card:hover,
.tilt-scena .product-card:hover,
.hero-nav-card.tilt-attivo:hover {
  transform: translateY(-3px)
             rotateX(var(--incl-x, 0deg))
             rotateY(var(--incl-y, 0deg));
}

/* Mentre il cursore è sopra, la scheda insegue il mouse senza
   ritardo: una transizione qui darebbe la sensazione di una
   scheda che arranca dietro al dito. Il ritorno alla posizione
   dritta invece è morbido, ed è gestito dalla transizione
   normale che la scheda ha già quando il mouse esce. */
.tilt-scena .card.sta-inclinando,
.tilt-scena .product-card.sta-inclinando,
.hero-nav-card.sta-inclinando {
  transition: none;
}

/* ---------------------------------------------------------
   2. PROFONDITÀ DELLA HOME
   Foto, nome e alone stanno su tre piani diversi e si spostano
   di poco seguendo il mouse, ciascuno di una quantità diversa.

   È lo stesso principio per cui in auto il guardrail sfreccia
   e le montagne stanno ferme: quando due cose si muovono a
   velocità diverse, l'occhio deduce che una è più lontana.
   Qui gli spostamenti sono di pochi pixel — non deve sembrare
   un effetto, deve solo dare aria.

   Legato al MOUSE e non allo scorrimento, di proposito: il
   parallasse legato allo scorrimento è la cosa che provoca
   nausea a chi è sensibile al movimento, ed è segnalata come
   problema grave in ogni linea guida seria sull'accessibilità.
   --------------------------------------------------------- */
.hero-stage {
  --prof-x: 0px;
  --prof-y: 0px;
}

.hero-stage .hero-photo {
  transform: translate3d(
    calc(var(--prof-x) * 1.6),
    calc(var(--prof-y) * 1.6),
    0
  );
  transition: transform 380ms var(--curva-entrata);
}

.hero-stage .hero-name {
  transform: translate3d(var(--prof-x), var(--prof-y), 0);
  transition: transform 460ms var(--curva-entrata);
}

.hero-stage .hero-aura {
  transform: translate3d(
    calc(var(--prof-x) * -2.4),
    calc(var(--prof-y) * -2.4),
    0
  );
  transition: transform 620ms var(--curva-entrata);
}

/* L'entrata all'apertura della pagina ha la precedenza: finché
   sta comparendo, la profondità non tocca niente (le due cose
   scriverebbero sullo stesso transform e l'entrata perderebbe). */
.page-home .hero-photo,
.page-home .hero-name { animation-fill-mode: backwards; }

/* ---------------------------------------------------------
   3. IL LIBRO
   Sei facce disposte nello spazio a formare un volume vero.

   Le misure vengono da tre variabili: larghezza, altezza
   (calcolata dal rapporto reale della copertina, 1.415) e
   spessore. Cambiare edizione vuol dire cambiare un numero.
   --------------------------------------------------------- */
.libro3d {
  --larghezza: 300px;
  --altezza: calc(var(--larghezza) * 1.415);
  --spessore: 34px;
  --rot-x: 0deg;
  --rot-y: -26deg;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(--altezza) + 70px);
  perspective: 1500px;
  cursor: grab;
  touch-action: pan-y; /* il dito in verticale continua a scorrere la pagina */
  user-select: none;
  -webkit-user-select: none;
}

.libro3d.sta-girando { cursor: grabbing; }

.libro3d-corpo {
  position: relative;
  width: var(--larghezza);
  height: var(--altezza);
  transform-style: preserve-3d;
  transform: rotateX(var(--rot-x)) rotateY(var(--rot-y));
  transition: transform 620ms var(--curva-entrata);
}

/* Durante il trascinamento il libro deve stare incollato al
   dito: qualunque transizione qui diventerebbe elastico. */
.libro3d.sta-girando .libro3d-corpo { transition: none; }

/* Ogni faccia parte centrata sul centro del volume e da lì
   viene spinta fuori fino alla sua posizione. Ragionare così
   evita di dover calcolare a mano sei origini diverse. */
.libro3d-faccia {
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
  overflow: hidden;
}

.libro3d-faccia-piatta {
  width: var(--larghezza);
  height: var(--altezza);
  margin-left: calc(var(--larghezza) / -2);
  margin-top: calc(var(--altezza) / -2);
  border-radius: 3px 6px 6px 3px; /* il lato del dorso è vivo, l'altro arrotondato */
}

.libro3d-faccia-lato {
  width: var(--spessore);
  height: var(--altezza);
  margin-left: calc(var(--spessore) / -2);
  margin-top: calc(var(--altezza) / -2);
}

.libro3d-faccia-testa {
  width: var(--larghezza);
  height: var(--spessore);
  margin-left: calc(var(--larghezza) / -2);
  margin-top: calc(var(--spessore) / -2);
}

/* --- Fronte: la copertina vera --- */
.libro3d-fronte {
  transform: translateZ(calc(var(--spessore) / 2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.libro3d-fronte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* L'ombra della piega vicino al dorso: su un libro vero la
   copertina si incurva lì, e senza questa sfumatura le sei
   facce sembrano sei figurine incollate. */
.libro3d-fronte::after,
.libro3d-retro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0,
    rgba(0, 0, 0, 0.12) 4%,
    transparent 11%
  );
}

.libro3d-retro::after { transform: scaleX(-1); }

/* --- Retro: generato, non fotografato ---
   Marco: se un giorno hai la quarta di copertina vera, mettila
   in assets/collana/cover-retro.jpg e comparirà da sola al
   posto di questa — il codice la cerca e la usa se la trova. */
.libro3d-retro {
  transform: rotateY(180deg) translateZ(calc(var(--spessore) / 2));
  background:
    radial-gradient(120% 80% at 50% 0%, #241a3a, #12101f 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.libro3d-retro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.libro3d-retro-testo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 26px;
  text-align: left;
}

.libro3d-retro-testo p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(244, 244, 252, 0.62);
}

.libro3d-retro-testo .libro3d-marchio {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(244, 244, 252, 0.4);
}

/* --- Dorso --- */
.libro3d-dorso {
  transform: rotateY(-90deg) translateZ(calc(var(--larghezza) / 2));
  background: linear-gradient(
    to right,
    #0d0a17,
    #241a3a 42%,
    #1a1330
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.libro3d-dorso span {
  font-family: var(--font-serif);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(244, 244, 252, 0.82);
  transform: rotate(90deg); /* il titolo corre lungo il dorso, come sugli scaffali */
}

/* --- Taglio delle pagine (lato destro) ---
   Le righine sottili sono i fogli visti di taglio. È il
   dettaglio che più di ogni altro fa leggere l'oggetto come
   un libro invece che come una scatola con una foto sopra. */
.libro3d-taglio {
  transform: rotateY(90deg) translateZ(calc(var(--larghezza) / 2));
  background:
    linear-gradient(to right, rgba(0,0,0,0.42), transparent 30%, rgba(0,0,0,0.3)),
    repeating-linear-gradient(
      to right,
      #efeae0 0px, #efeae0 1px,
      #cfc7b6 1px, #cfc7b6 2px
    );
}

/* --- Testa e piede (sopra e sotto) --- */
.libro3d-testa,
.libro3d-piede {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 40%),
    repeating-linear-gradient(
      to bottom,
      #efeae0 0px, #efeae0 1px,
      #cfc7b6 1px, #cfc7b6 2px
    );
}

.libro3d-testa { transform: rotateX(90deg) translateZ(calc(var(--altezza) / 2)); }
.libro3d-piede { transform: rotateX(-90deg) translateZ(calc(var(--altezza) / 2)); }

/* --- L'ombra a terra ---
   Non ruota col libro: sta sul pavimento e si allarga appena
   quando il volume gira, come farebbe un'ombra vera. */
.libro3d-ombra {
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: calc(var(--larghezza) * 0.92);
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50%, rgba(0, 0, 0, 0.62), transparent 72%);
  filter: blur(9px);
  pointer-events: none;
}

/* --- L'invito a girarlo ---
   Sparisce per sempre al primo trascinamento: un suggerimento
   che resta lì dopo che l'hai capito diventa rumore. */
.libro3d-suggerimento {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.85;
  transition: opacity var(--dur-media) ease;
  pointer-events: none;
}

.libro3d.gia-usato .libro3d-suggerimento { opacity: 0; }

/* Contorno da tastiera: il libro si gira anche con le frecce. */
.libro3d:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 10px;
  border-radius: var(--radius-md);
}

@media (max-width: 860px) {
  .libro3d { --larghezza: 240px; --spessore: 28px; }
}

@media (max-width: 380px) {
  .libro3d { --larghezza: 200px; --spessore: 24px; }
}

/* Se il browser non sa impilare gli elementi nello spazio, il
   3D non parte proprio: il JavaScript controlla questa stessa
   condizione e lascia la copertina piatta al suo posto. */
@supports not (transform-style: preserve-3d) {
  .libro3d { display: none; }
}

/* =========================================================
   SE HAI CHIESTO MENO ANIMAZIONI (sezione TRE DIMENSIONI)
   ---------------------------------------------------------
   Il libro resta tridimensionale e resta girabile a mano: il
   volume non è movimento, è informazione sul prodotto, e
   toglierlo vorrebbe dire mostrare meno merce a chi ha una
   sensibilità al movimento. Quello che si spegne è tutto ciò
   che si muove DA SOLO: il dondolio, l'inseguimento del mouse
   e l'inclinazione delle schede.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .tilt-scena .card:hover,
  .tilt-scena .product-card:hover,
  .hero-nav-card.tilt-attivo:hover {
    transform: none !important;
  }

  .hero-stage .hero-photo,
  .hero-stage .hero-name,
  .hero-stage .hero-aura {
    transform: none !important;
    transition: none !important;
  }

  .libro3d-corpo { transition: none !important; }
}

/* =========================================================
   ARIA FRA IL TITOLO DI UNA TENDINA E IL SUO CONTENUTO
   ---------------------------------------------------------
   In tutte le tendine del sito il primo paragrafo partiva
   incollato al titolo: misurato, lo spazio fra il fondo del
   titolo e la prima riga di testo era fra 0 e 10 pixel, mentre
   fra una voce e l'altra ce n'erano venti. L'occhio leggeva la
   prima descrizione come parte del titolo invece che come la
   risposta che si è appena chiesto aprendo la tendina.

   Una regola sola per tutte le tendine — area di competenza,
   strumento, servizio, domande frequenti — perché lo stesso
   difetto c'era in tutte e quattro, e perché da qui in avanti
   si corregge in un punto solo.
   ========================================================= */
.acc-inner > *:first-child { margin-top: 14px; }

/* Le tendine degli strumenti sono più compatte di loro natura
   (titolo più piccolo, padding minore): stessa proporzione, non
   stesso numero. */
.acc-strumento .acc-inner > *:first-child { margin-top: 10px; }

/* =========================================================
   LA GRIGLIA DEI PROGETTI SI ADATTA AL NUMERO DI PROGETTI
   ---------------------------------------------------------
   Era fissa a tre colonne. Finché i progetti erano tre andava
   bene; da quando sono due lasciava una colonna vuota a destra
   e le due schede sembravano spinte in un angolo.

   "auto-fit" fa sparire le colonne che restano vuote, quindi
   due progetti occupano metà larghezza ciascuno, tre ne
   occupano un terzo, e il giorno che ne aggiungi un quarto va
   a capo da solo. Nessuna classe da cambiare a mano quando
   l'elenco cresce: è il tipo di cosa che ci si dimentica di
   fare, e si nota subito.

   Il minimo di 300px è la larghezza sotto la quale una scheda
   progetto, con immagine e tag, inizia a stare stretta.
   ========================================================= */
#projects-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


/* =========================================================
   IL COLORE COME INFORMAZIONE
   ---------------------------------------------------------
   Fino a qui le sei tinte vivevano su elementi minuscoli: un
   quadratino, un bordo sottile, un alone quasi invisibile. Si
   vedeva che c'era una tavolozza solo guardando da vicino.

   Da qui in avanti il colore ha un compito: dire in che area
   del lavoro ti trovi. Automazione è indaco in Competenze, in
   Servizi e nella pagina di ogni servizio di quell'area. Il
   colore lo riconosci prima di leggere il titolo, ed è per
   questo che vale la pena farlo vedere.

   Due regole rispettate ovunque qui sotto:

   1) IL COLORE NON È MAI L'UNICA INFORMAZIONE. Accanto a ogni
      tinta c'è sempre il nome scritto dell'area. Chi non
      distingue i colori non perde niente: legge, come farebbe
      comunque. Questa è la ragione per cui il colore qui può
      permettersi di essere abbondante.

   2) OGNI COPPIA COLORE/SFONDO È STATA MISURATA. Le sei tinte
      nascono a luminosità costante proprio perché passino tutte
      il contrasto per il testo su ogni fondo del sito: la
      peggiore delle ventiquattro combinazioni è 6:1, contro il
      4.5 richiesto. Per questo la stessa variabile va bene per
      un bordo, una fascia o una parola, senza varianti.

   3) IL COLORE STA SOLO DOVE SIGNIFICA QUALCOSA. Una prima
      versione di questa sezione tingeva anche gli aloni di
      fondo a rotazione, gli strumenti uno per uno e le terne di
      schede sotto ai titoli di sezione. Ma quelle schede non
      sono categorie: sono tre paragrafi impaginati, e dargli
      tre colori diversi affermava una differenza che non
      esiste. Tolto. Era rumore, e rendeva più difficile notare
      il colore là dove invece dice "sei in quest'area".
   ========================================================= */

/* ---------------------------------------------------------
   1. QUALE TINTA A QUALE AREA
   L'attributo lo scrive il JavaScript in base al NOME
   dell'area, non alla sua posizione nella pagina. Le regole
   "in ordine di comparsa" più sopra restano come rete di
   sicurezza per un'area che non fosse in elenco.
   --------------------------------------------------------- */
/* Vale per QUALUNQUE elemento porti l'attributo, non solo per le
   categorie. Il primo tentativo elencava solo .skill-category e body,
   e nel menu di navigazione i pallini delle cinque aree venivano tutti
   indaco: ereditavano la tinta della PAGINA invece della propria — il
   contrario di quello che devono fare, visto che lì il colore serve
   proprio a distinguere le aree fra loro.

   :where() azzera il peso di queste righe, così non scavalcano niente
   per sbaglio e restano facilissime da sovrascrivere. */
:where([data-tinta="1"]) { --tinta: var(--tinta-1); }
:where([data-tinta="2"]) { --tinta: var(--tinta-2); }
:where([data-tinta="3"]) { --tinta: var(--tinta-3); }
:where([data-tinta="4"]) { --tinta: var(--tinta-4); }
:where([data-tinta="5"]) { --tinta: var(--tinta-5); }
:where([data-tinta="6"]) { --tinta: var(--tinta-6); }

/* Le categorie invece hanno bisogno di peso vero, perché devono battere
   le regole "in ordine di comparsa" scritte più in alto nel foglio. */
.skill-category[data-tinta="1"], body[data-tinta="1"] { --tinta: var(--tinta-1); }
.skill-category[data-tinta="2"], body[data-tinta="2"] { --tinta: var(--tinta-2); }
.skill-category[data-tinta="3"], body[data-tinta="3"] { --tinta: var(--tinta-3); }
.skill-category[data-tinta="4"], body[data-tinta="4"] { --tinta: var(--tinta-4); }
.skill-category[data-tinta="5"], body[data-tinta="5"] { --tinta: var(--tinta-5); }
.skill-category[data-tinta="6"], body[data-tinta="6"] { --tinta: var(--tinta-6); }

/* ---------------------------------------------------------
   2. IL TITOLO DI UN'AREA DIVENTA UNA FASCIA
   Prima era un titolo con un quadratino davanti. Ora è una
   fascia con il colore dell'area che sfuma verso destra: è il
   punto in cui il colore si vede di più, ed è giusto che sia
   quello che annuncia dove inizia una zona nuova.
   --------------------------------------------------------- */
.skill-category > h3 {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--tinta, var(--accent));
  /* La sfumatura è scesa dal 20% all'11% e si spegne prima. Al 20% la
     fascia era un blocco colorato che competeva con il testo dentro;
     così è un fondo che si nota solo perché è diverso da quello sopra,
     che è tutto quello che deve fare. */
  background: var(--bg-elevated); /* ripiego se color-mix non c'è */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tinta, var(--accent)) 11%, transparent),
    transparent 46%
  );
}

/* Il quadratino cresce e diventa una pastiglia piena. */
.skill-category > h3::before {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: 0 0 18px -2px var(--tinta, var(--accent));
}

/* La descrizione sotto la fascia si allinea al testo del
   titolo invece di partire dal bordo del riquadro. */
.skill-category > h3 + p {
  padding-left: 18px;
  border-left: 1px solid color-mix(in srgb, var(--tinta, var(--accent)) 22%, transparent);
}

/* ---------------------------------------------------------
   3. LE TENDINE PORTANO ADDOSSO LA TINTA DELLA LORO AREA
   Prima il bordo colorato compariva solo al passaggio del
   cursore: una pagina di Servizi ferma era grigia dall'inizio
   alla fine. Ora la riga colorata c'è sempre, tenue, e si
   accende al passaggio. In un elenco lungo è quello che fa
   capire dove finisce un'area e ne inizia un'altra senza
   dover rileggere i titoli.
   --------------------------------------------------------- */
.skill-category .acc {
  border-left-color: var(--border-strong);
  border-left-color: color-mix(in srgb, var(--tinta, var(--accent)) 38%, transparent);
}

/* La freccia della tendina è tinta anche da chiusa. */
.skill-category .acc-chevron {
  border-color: color-mix(in srgb, var(--tinta, var(--accent)) 62%, var(--text-muted));
}

.skill-category .acc-head:hover .acc-chevron { border-color: var(--tinta, var(--accent-2)); }

/* Aperta, la tendina prende un fondo appena tinto: si distingue
   da quelle chiuse anche con la coda dell'occhio. */
.skill-category .acc.is-open {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tinta, var(--accent)) 7%, transparent),
    transparent 40%
  );
}

/* I pallini vuoti prendono un'ombra della loro tinta invece del
   grigio: anche il "quanto non è pieno" appartiene all'area. */
.skill-category .skill-level i {
  background: color-mix(in srgb, var(--tinta, var(--accent)) 22%, var(--border-strong));
}

/* Il nome della sottocompetenza si tinge: è la parola che
   distingue una voce dall'altra dentro la tendina. */
.skill-category .subskill-name { color: var(--tinta, var(--text-primary)); }

/* Le etichette dentro un'area seguono l'area. */
.skill-category .chip {
  border-color: color-mix(in srgb, var(--tinta, var(--accent)) 34%, transparent);
  background: color-mix(in srgb, var(--tinta, var(--accent)) 9%, var(--bg-card));
}

.skill-category .card-link,
.skill-category .card-link-forte { color: var(--tinta, var(--accent-2)); }

/* ---------------------------------------------------------
   4. LE PAGINE DEI SINGOLI SERVIZI SI TINGONO DELLA LORO AREA
   Chi arriva su una di queste pagine da una ricerca non ha
   visto l'elenco: il colore è la sola cosa che gli dice, prima
   del titolo, in che zona del lavoro è finito. Ed è la stessa
   tinta che ritroverà tornando a Servizi.
   --------------------------------------------------------- */
body[data-tinta] .eyebrow { color: var(--tinta); }

body[data-tinta] .eyebrow::before,
body[data-tinta] .section-head .eyebrow::before {
  background: var(--tinta);
}

body[data-tinta] .det-briciole a { color: var(--tinta); }

/* Il riquadro del problema: la barra verticale prende la tinta
   piena e il fondo una sua sfumatura. */
body[data-tinta] .det-problema {
  border-left-color: var(--tinta);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--tinta) 13%, var(--bg-card)),
    var(--bg-card) 62%
  );
}

/* I numeri dei passaggi: cerchi tinti lungo la linea del tempo. */
body[data-tinta] .step-list li::before {
  border-color: color-mix(in srgb, var(--tinta) 52%, transparent);
  color: var(--tinta);
  background: color-mix(in srgb, var(--tinta) 10%, var(--bg-card));
}

body[data-tinta] .step-list li {
  border-left-color: color-mix(in srgb, var(--tinta) 26%, var(--border-strong));
}

/* Le spunte degli elenchi "cosa mi serve / cosa ricevi". */
body[data-tinta] .product-list li::before {
  border-right-color: var(--tinta);
  border-bottom-color: var(--tinta);
}

/* L'etichetta del livello. */
body[data-tinta] .det-livello-nome {
  background: color-mix(in srgb, var(--tinta) 16%, transparent);
  border-color: color-mix(in srgb, var(--tinta) 42%, transparent);
  color: var(--tinta);
}

body[data-tinta] .det-livello {
  border-left: 2px solid color-mix(in srgb, var(--tinta) 34%, transparent);
}

/* Gli aloni di fondo della pagina seguono l'area invece dei
   colori generali: è ciò che tinge l'intera schermata, non
   solo i dettagli. */
body[data-tinta] main .section::after {
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--tinta) 15%, transparent),
    transparent 70%
  );
}

/* Anche i collegamenti al servizio precedente e successivo. */
body[data-tinta] .det-vicino:hover {
  border-color: color-mix(in srgb, var(--tinta) 50%, transparent);
}

/* ---------------------------------------------------------
   5. LE SCHEDE PROGETTO PORTANO I COLORI DEL LORO PROGETTO
   La scheda di Mirion è viola e oro come la pagina di Mirion,
   quella di Velion blu e verde come la sua. Chi clicca non ha
   la sensazione di essere finito su un altro sito: il colore
   della scheda era già una promessa di dove stava andando.
   --------------------------------------------------------- */
.card[data-marchio="mirion"] {
  --marchio: #a855f7;
  --marchio-2: #f0a63c;
}

.card[data-marchio="velion"] {
  --marchio: #4f8dff;
  --marchio-2: #34d399;
}

.card[data-marchio] {
  border-color: color-mix(in srgb, var(--marchio) 26%, var(--border));
}

/* La riga in cima non aspetta più il passaggio del cursore:
   su una scheda progetto è l'insegna del marchio. */
.card[data-marchio]::before {
  opacity: 1;
  height: 3px;
  background: linear-gradient(90deg, var(--marchio), var(--marchio-2));
}

.card[data-marchio]:hover {
  border-color: color-mix(in srgb, var(--marchio) 55%, transparent);
  box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--marchio) 45%, transparent),
              var(--shadow-card);
}

.card[data-marchio] .project-status {
  border-color: color-mix(in srgb, var(--marchio) 45%, transparent);
  background: color-mix(in srgb, var(--marchio) 14%, var(--bg-elevated));
  color: color-mix(in srgb, var(--marchio-2) 70%, white);
}

.card[data-marchio] .chip {
  border-color: color-mix(in srgb, var(--marchio) 30%, transparent);
  background: color-mix(in srgb, var(--marchio) 8%, var(--bg-card));
}

.card[data-marchio] .card-link { color: var(--marchio-2); }

/* L'immagine del progetto si stacca dal fondo con un bordo del
   suo colore invece del grigio comune a tutto. */
.card[data-marchio] .card-media-img {
  border-color: color-mix(in srgb, var(--marchio) 32%, transparent);
}

/* ---------------------------------------------------------
   6. I TRE PACCHETTI COME SCALA, NON COME TRE COSE DIVERSE
   Le tacche c'erano già ma erano tutte dello stesso turchese:
   dicevano "livello 1, 2, 3" solo contandole. Con tre colori
   che salgono — turchese, blu, viola — la differenza si vede
   prima di contare, e ogni pacchetto porta il suo colore anche
   sul bordo e sul titolo.
   --------------------------------------------------------- */
/* Tre tonalità VICINE lungo l'arco della tavolozza — ciano, blu, indaco —
   e non tre tinte prese a caso. È la differenza fra una scala e tre cose
   diverse: salendo di livello il colore si sposta di poco, come deve fare
   una progressione. */
.pack-grid .pack-card:nth-child(1) { --grado: var(--tinta-6); }
.pack-grid .pack-card:nth-child(2) { --grado: var(--tinta-4); }
.pack-grid .pack-card:nth-child(3) { --grado: var(--tinta-1); }

.pack-card {
  border-top: 3px solid var(--grado, var(--accent));
}

.pack-card .pack-tacche i.on { background: var(--grado, var(--accent-2)); }

.pack-card .pack-tacche i {
  background: color-mix(in srgb, var(--grado, var(--accent)) 20%, var(--border-strong));
}

.pack-card .pack-grado {
  background: linear-gradient(
    120deg,
    var(--grado, var(--accent)),
    color-mix(in srgb, var(--grado, var(--accent)) 45%, white)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.pack-card .product-list li::before {
  border-right-color: var(--grado, var(--accent-2));
  border-bottom-color: var(--grado, var(--accent-2));
}

.pack-card:hover {
  border-color: color-mix(in srgb, var(--grado, var(--accent)) 40%, transparent);
  border-top-color: var(--grado, var(--accent));
}

/* La stessa scala vale sulle tre pagine di pacchetto. */
body[data-page="pacchetto"] .pack-tacche i.on { background: var(--accent); }

/* =========================================================
   SE IL BROWSER NON CONOSCE color-mix
   ---------------------------------------------------------
   Tutte le regole qui sopra che usano color-mix hanno, dove
   serviva, una dichiarazione semplice scritta subito prima:
   un browser che non capisce la seconda tiene la prima e
   mostra il sito com'era, senza buchi. Le sfumature di fondo
   semplicemente non vengono disegnate.
   ========================================================= */

/* Quando si arriva su una tendina da un risultato di ricerca, questa si
   accende per un paio di secondi: senza, dopo lo scorrimento non è
   ovvio QUALE delle tendine sia quella cercata. */
.acc-appena-arrivata {
  box-shadow: 0 0 0 2px var(--tinta, var(--accent-2));
  transition: box-shadow 1.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .acc-appena-arrivata { transition: none; }
}

/* =========================================================
   LA BARRA DI NAVIGAZIONE
   ---------------------------------------------------------
   Tre parti: il nome a sinistra, i cinque collegamenti al
   centro, la ricerca a destra. Niente bottone che apre un
   menu: cinque voci stanno benissimo in chiaro, e nasconderle
   dietro un clic costerebbe un'apertura in più per la cosa
   che si fa più spesso.
   ========================================================= */
.navbar-inner.ha-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
}

/* Senza i cinque link (le pagine di vendita) restano due parti sole. */
.shop-bar-inner.ha-cerca,
.navbar-inner.ha-cerca:not(.ha-nav) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.nav-links a {
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color var(--dur-istante) ease, background var(--dur-istante) ease;
}

.nav-links a:hover { color: var(--text-primary); background: var(--bg-card); }

.nav-links a.active {
  color: var(--text-primary);
  background: var(--bg-card);
}

/* La pagina in cui sei ha anche una riga sotto: non solo un colore, così
   la si riconosce anche senza distinguere i colori. */
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-gradient);
}

.nav-links a { position: relative; }

/* --- La casella di ricerca --- */
.nav-cerca {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 220px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  transition: width var(--dur-media) var(--curva-entrata),
              border-color var(--dur-rapida) ease,
              box-shadow var(--dur-rapida) ease;
}

/* Cliccandoci si allarga: mentre scrivi hai più spazio, e a riposo la
   casella non ruba larghezza ai collegamenti. È legata al FUOCO e non
   alla tendina, perché lo spazio serve per scrivere — e a campo vuoto la
   tendina non c'è. */
.nav-cerca.is-attiva {
  width: 320px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* La lente è disegnata col bordo: nessuna immagine da caricare. */
.nav-cerca-icona {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  position: relative;
}

.nav-cerca-icona::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-muted);
  transform: rotate(45deg);
}

.nav-campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.86rem;
  outline: none;
}

.nav-campo::placeholder {
  color: var(--text-muted);
  transition: opacity var(--dur-rapida) ease;
}

/* Appena si entra nella casella la scritta di aiuto sparisce, invece di
   restare lì mentre si scrive sopra. */
.nav-campo:focus::placeholder { opacity: 0; }

.nav-campo::-webkit-search-cancel-button { filter: invert(0.6); }

/* --- La tendina dei risultati --- */
.nav-tendina {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 170;
  width: min(460px, calc(100vw - 32px));
  max-height: min(66vh, 560px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
}

.nav-gruppo { margin-bottom: 12px; }
.nav-gruppo:last-child { margin-bottom: 0; }

.nav-gruppo-titolo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  padding: 0 10px 6px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-quanti {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.62rem;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.nav-elenco { display: flex; flex-direction: column; gap: 1px; }

.nav-voce {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  transition: background var(--dur-istante) ease, color var(--dur-istante) ease;
}

.nav-voce:hover,
.nav-voce-scelta {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-left-color: var(--tinta, var(--accent-2));
}

/* Dove sta la cosa trovata: l'area del servizio, la competenza che
   contiene quel dettaglio, il progetto che porta quell'etichetta.
   Senza, due voci con lo stesso nome sarebbero indistinguibili. */
.nav-voce-dove {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Il cartellino del tipo: tutti della stessa forma, così sono
   confrontabili da una riga all'altra. */
.nav-tipo {
  grid-row: 1;
  grid-column: 2;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.nav-voce[data-tinta] .nav-tipo {
  border-color: color-mix(in srgb, var(--tinta) 42%, transparent);
  background: color-mix(in srgb, var(--tinta) 12%, var(--bg-card));
  color: var(--tinta);
}

.nav-vuoto {
  margin: 0;
  padding: 20px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* La ricerca sospesa, per la Home che non ha barra in alto. */
.nav-sospesa {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 120;
}

/* --- Schermi stretti ---
   I cinque collegamenti vanno su una riga loro, che scorre di lato se
   non ci stanno. Meglio una riga in più che nasconderli: sono le
   destinazioni principali del sito. */
@media (max-width: 900px) {
  .navbar-inner.ha-nav {
    grid-template-columns: auto auto;
    grid-template-areas: "marchio cerca" "links links";
    gap: 12px;
    row-gap: 10px;
    justify-content: space-between;
  }

  .navbar-inner.ha-nav > .brand { grid-area: marchio; }
  .navbar-inner.ha-nav > .nav-cerca { grid-area: cerca; }
  .navbar-inner.ha-nav > .nav-links { grid-area: links; }

  /* Una riga sola che scorre di lato, non due righe che vanno a capo.
     Andando a capo la barra diventava alta 172 pixel su uno schermo da
     844: un quinto della pagina occupato da un'intestazione appiccicata
     in alto, prima ancora di aver letto una parola. "nowrap" va scritto
     perché il contenitore in griglia comprime i figli e li manda a capo
     lo stesso, anche se di norma un flex non andrebbe a capo. */
  .nav-links {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; padding: 6px 11px; }

  /* Barra più compatta: su schermo piccolo ogni pixel dell'intestazione
     è un pixel tolto al contenuto. */
  .navbar-inner.ha-nav { padding: 12px 16px; }

  .nav-cerca { width: 190px; }
  .nav-cerca.is-aperta { width: 230px; }

  .nav-tendina {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 58vh;
  }
}

@media (max-width: 460px) {
  .nav-cerca { width: 44px; padding: 8px 12px; }
  .nav-cerca .nav-campo { opacity: 0; }
  .nav-cerca.is-aperta { width: min(60vw, 240px); }
  .nav-cerca.is-aperta .nav-campo { opacity: 1; }
  .nav-sospesa { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cerca { transition: none !important; }
  .nav-campo::placeholder { transition: none !important; }
}

/* Il prezzo da cui parte ogni pacchetto, nelle schede di servizi.html (dal 29-10) */
.pack-prezzo { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); }

/* 30-10: in home per ora c'è solo Servizi (Marco: «metterai… solo servizi»): la scheda sola sta al centro */
.hero-nav:has(> .hero-nav-card:only-of-type) { grid-template-columns: minmax(0, 380px); justify-content: center; }

/* 30-10: tre tinte in più per le nove aree del negozio (e la ricerca) */
:root { --tinta-7: #f2a65a; --tinta-8: #f06c8b; --tinta-9: #a3d977; }
:where([data-tinta="7"]) { --tinta: var(--tinta-7); }
:where([data-tinta="8"]) { --tinta: var(--tinta-8); }
:where([data-tinta="9"]) { --tinta: var(--tinta-9); }

/* 30-10: ogni pacchetto, quando ci entri, ha il suo colore (Marco: «quando entro su Retention… rendilo un po' tutta viola») */
body[data-pacchetto="1"] { --accent: #2bbac1; --accent-2: #5eead4; --accent-gradient: linear-gradient(135deg, #2bbac1, #5eead4); --accent-soft: rgba(43, 186, 193, 0.14);
  background-image: radial-gradient(1200px 600px at 12% -10%, rgba(43, 186, 193, 0.22), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(94, 234, 212, 0.10), transparent 55%); }
body[data-pacchetto="2"] { --accent: #30aff8; --accent-2: #7cc8ff; --accent-gradient: linear-gradient(135deg, #30aff8, #7cc8ff); --accent-soft: rgba(48, 175, 248, 0.14);
  background-image: radial-gradient(1200px 600px at 12% -10%, rgba(48, 175, 248, 0.22), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(124, 200, 255, 0.10), transparent 55%); }
body[data-pacchetto="3"] { --accent: #8e7cf6; --accent-2: #c4b5fd; --accent-gradient: linear-gradient(135deg, #8e7cf6, #c4b5fd); --accent-soft: rgba(142, 124, 246, 0.16);
  background-image: radial-gradient(1200px 600px at 12% -10%, rgba(142, 124, 246, 0.26), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(196, 181, 253, 0.12), transparent 55%); }
body[data-pacchetto] .card { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

/* 30-10: il tasto «Scopri di più» della home, al centro sotto i mestieri */
.btn-scopri { margin: 26px auto 0; font-size: 1.05rem; padding: 14px 32px; border-radius: 999px; }
.page-home .btn-scopri { animation: entra-su 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.28s backwards; }

/* 30-10 sera, il controllo da telefono: la casella di ricerca era alta 36 px, sotto i 44 che servono a un dito */
@media (hover: none) and (pointer: coarse) { .nav-cerca { min-height: 44px; } .nav-campo { min-height: 44px; font-size: 16px; } }

/* 30-10 notte: nel menu c'è una voce sola, «Contatti»: da telefono sta sulla stessa riga del marchio e della lente,
   invece di prendersi una seconda riga (la barra era alta 133 px su 844) */
@media (max-width: 900px) {
  .navbar-inner.ha-nav { grid-template-columns: auto 1fr auto; grid-template-areas: "marchio links cerca"; align-items: center; }
  .navbar-inner.ha-nav > .nav-links { justify-content: flex-end; overflow: visible; }
  .navbar-inner.ha-nav > .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 380px) { .navbar-inner.ha-nav .brand-name { font-size: 0.95rem; } }

/* 30-10 notte, fotogramma per fotogramma: la barra nasce già com'è dopo lo script (marchio a sinistra, stessa altezza),
   così quando main.js aggiunge «Contatti» e la ricerca non si sposta niente */
.navbar-minimal .navbar-inner { justify-content: space-between; }
@media (max-width: 900px) { .navbar-minimal .navbar-inner { padding: 12px 16px; } .navbar-minimal { min-height: 87px; } }
/* 30-10 notte: con Home, Clara e Contatti la barra da telefono è piena: voci e nome un po' più stretti, così il nome
   resta intero e niente si sovrappone */
@media (max-width: 440px) {
  .navbar-inner.ha-nav { column-gap: 6px; }
  .navbar-inner.ha-nav > .nav-links { gap: 0; }
  .navbar-inner.ha-nav > .nav-links a { padding: 6px 6px; font-size: 0.82rem; }
  .navbar-inner.ha-nav .brand { gap: 6px; }
  .navbar-inner.ha-nav .brand-name { font-size: 0.92rem; }
  .navbar-inner.ha-nav .brand-mark { width: 28px; height: 28px; font-size: 0.75rem; }
}

/* 30-10 notte: il nome a sinistra è un link (riporta alla presentazione), ma resta com'era */
a.brand { color: inherit; text-decoration: none; }
a.brand:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 4px; border-radius: 8px; }

/* =========================================================
   LE TENDINE — 01-11, Marco: «Tutte le finestre con la spuntina che va dall'alto in basso, rendile come sullo stile
   del sito». Come le altre tendine del sito (pacchetti, confronto, pagamento): niente triangolino del browser, a destra
   «+» chiuso e «−» aperto nel verde-acqua. I menu a scelta (select) con la freccia dello stesso colore.
   ========================================================= */
.metodo-apri > summary, .carrello-informativa > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer;
}
.metodo-apri > summary::-webkit-details-marker, .carrello-informativa > summary::-webkit-details-marker { display: none; }
.metodo-apri > summary::after, .carrello-informativa > summary::after {
  content: "+"; color: var(--accent-2); font-family: var(--font-display); font-size: 1.2rem; line-height: 1;
}
.metodo-apri[open] > summary::after, .carrello-informativa[open] > summary::after { content: "−"; }
.metodo-apri > summary:hover, .carrello-informativa > summary:hover { color: var(--accent-2); }
.carrello-informativa > summary { padding: 6px 0; }

select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important;
  padding-right: 38px !important;
}
select:hover { border-color: var(--accent-2); }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select option { background: var(--bg-card); color: var(--text-primary); }

/* =========================================================
   IL CARRELLO — 01-11, Marco: «Anche l'interfaccia del carrello rendila bella… loro possono togliere con facilità».
   «Togli» è un pulsante vero in ogni riga; «Nel carrello ✓» si clicca di nuovo e toglie: passandoci sopra diventa rosso,
   senza cambiare scritta né misura (la scritta che cambiava faceva lampeggiare il pulsante: 01-11, «si bugga»).
   ========================================================= */
.carrello-riga .carrello-togli {
  font: inherit; font-size: .82rem; font-weight: 600; line-height: 1; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.carrello-riga .carrello-togli:hover, .carrello-riga .carrello-togli:focus-visible { color: var(--danger); border-color: var(--danger); background: rgba(255, 107, 107, .08); }
.carrello-riga { gap: 12px; padding: 12px 0; }
.carrello-aggiungi.dentro, .chat-aggiungi.dentro { position: relative; }
@media (hover: hover) {
  .carrello-aggiungi.dentro:hover, .chat-aggiungi.dentro:hover { color: var(--danger) !important; border-color: var(--danger) !important; background: transparent !important; }
}

/* =========================================================
   02-11 sera — LA BARRA CON I SOTTOMENU (main.js, MENU)
   Marco: «la navigation bar deve essere funzionale… con le stesse regole delle animazioni». Quattro voci; Servizi e
   Collaborazioni hanno un sottomenu che si apre al passaggio del mouse o con la freccina (al tocco e da tastiera).
   Al telefono il sottomenu scende sotto la barra, largo quanto lo schermo, perché la riga delle voci scorre di lato.
   ========================================================= */
.barra-voce { position: relative; display: flex; align-items: center; }
.nav-apri { width: 22px; height: 30px; margin-left: -8px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-muted); border-radius: 6px; }
.nav-apri::before { content: ""; display: block; width: 6px; height: 6px; margin: 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.barra-voce.aperta .nav-apri::before { transform: translateY(1px) rotate(-135deg); }
.nav-apri:hover, .barra-voce.aperta .nav-apri { color: var(--text-primary); }
.nav-sotto { position: absolute; top: calc(100% + 8px); left: 0; z-index: 120; min-width: 220px; display: none; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-elevated, #141522); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.nav-sotto::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* il ponte: il mouse ci passa senza chiuderlo */
.nav-links .nav-sotto a { padding: 9px 12px; border-radius: 8px; color: var(--text-secondary); font-size: 0.9rem; white-space: nowrap; }
.nav-links .nav-sotto a::before, .nav-links .nav-sotto a::after { display: none; }
.nav-links .nav-sotto a:hover { background: var(--bg-card); color: var(--text-primary); }
.barra-voce.aperta .nav-sotto { display: flex; }
@media (hover: hover) and (min-width: 901px) {
  .barra-voce.ha-sotto:hover .nav-sotto, .barra-voce.ha-sotto:focus-within .nav-sotto { display: flex; }
}
@media (max-width: 900px) {
  .nav-sotto { position: fixed; top: 100%; left: 12px; right: 12px; min-width: 0; }
  .nav-apri { height: 28px; }
}
/* 02-11 sera: con quattro voci e le freccine, al telefono la barra va su due righe: il nome e la ricerca sopra, le voci
   sotto, centrate (scorrono di lato solo se lo schermo è più stretto di loro). Il sottomenu è fissato alla barra, quindi
   la riga che scorre non lo taglia */
@media (max-width: 900px) {
  .navbar-inner.ha-nav { grid-template-columns: auto auto; grid-template-areas: "marchio cerca" "links links"; row-gap: 6px; }
  .navbar-inner.ha-nav > .nav-links { justify-content: safe center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .navbar-inner.ha-nav > .nav-links::-webkit-scrollbar { display: none; }
  .navbar-inner.ha-nav > .nav-links .barra-voce > a { min-height: 40px; }
}
@media (max-width: 440px) {
  .navbar-inner.ha-nav > .nav-links .barra-voce > a { padding: 6px 7px; font-size: 0.84rem; }
  .navbar-inner.ha-nav > .nav-links .nav-apri { width: 18px; margin-left: -5px; }
}

/* 02-11 notte, Marco: «quando si andava sopra col cursore [su Marco Gianì], si illuminava e appariva Home, rifallo».
   Come il .brand-home del 30-10, ma a riposo il nome resta com'è: la luce e «Home» arrivano solo al passaggio (main.js) */
a.brand.brand-luce { position: relative; display: inline-flex; align-items: center; padding: 6px 14px 6px 6px; margin: -6px -14px -6px -6px; border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease; }
a.brand.brand-luce .brand-mark { transition: box-shadow 0.25s ease; }
a.brand.brand-luce .brand-home-hint { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); transition: max-width 0.35s ease, opacity 0.2s ease, margin-left 0.35s ease; }
@media (hover: hover) {
  a.brand.brand-luce:hover, a.brand.brand-luce:focus-visible { border-color: var(--border-strong); background: var(--bg-card-hover, var(--bg-card)); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
  a.brand.brand-luce:hover .brand-mark, a.brand.brand-luce:focus-visible .brand-mark { box-shadow: 0 0 18px var(--accent-2); }
  a.brand.brand-luce:hover .brand-home-hint, a.brand.brand-luce:focus-visible .brand-home-hint { max-width: 70px; opacity: 1; margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { a.brand.brand-luce, a.brand.brand-luce .brand-home-hint { transition: none; } }

/* 02-11 notte: la rete dei fotografi si apre il 15 gennaio 2027 (candidatura.js). Il modulo ha display: grid, che vince su [hidden] */
[data-dal-giorno][hidden], [data-prima-del][hidden] { display: none !important; }
.rete-chiusa { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); }

/* 02-11 notte, Marco: «La barra di ricerca mettila in alto a destra, non lì in mezzo. Quando si apre, adagiala bene a
   schermo… e Marco Gianì, levalo». Al telefono, in home: niente nome (c'è già grande sotto), le voci a sinistra e la
   lente in fondo a destra, su una riga sola */
@media (max-width: 900px) {
  body[data-page="home"] .navbar-inner.ha-nav > .brand { display: none; }
  body[data-page="home"] .navbar-inner.ha-nav { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "links cerca"; align-items: center; column-gap: 8px; }
  body[data-page="home"] .navbar-inner.ha-nav > .nav-links { justify-content: safe center; }
}
/* aperta, al telefono, la ricerca copre la barra da un bordo all'altro, e i risultati scendono subito sotto la barra, larghi
   quanto lo schermo. La barra ha backdrop-filter: per i figli «fixed» il riferimento è lei, non la finestra */
@media (max-width: 600px) {
  .navbar-inner.ha-nav > .nav-cerca:is(.is-attiva, .is-aperta) { position: absolute; top: 50%; left: 12px; right: auto; width: calc(100vw - 24px); transform: translateY(-50%); z-index: 180; }
  body:not([data-page="home"]) .navbar-inner.ha-nav > .nav-cerca:is(.is-attiva, .is-aperta) { top: 12px; transform: none; }
  .nav-tendina { position: fixed; top: calc(100% + 8px); left: 12px; right: 12px; width: auto; max-height: min(62vh, 520px); }
}
/* la lente chiusa è un cerchio, non un ovale: il campo dentro restava alto 44 px più il bordo */
@media (max-width: 460px) {
  .navbar-inner.ha-nav > .nav-cerca { height: 44px; padding-top: 0; padding-bottom: 0; align-self: center; }
  .navbar-inner.ha-nav > .nav-cerca .nav-campo { min-height: 0; height: 42px; }
}
/* in tutte le pagine, al telefono, la lente sta in fondo a destra (prima restava a metà della prima riga) */
@media (max-width: 900px) {
  body:not([data-page="home"]) .navbar-inner.ha-nav { grid-template-columns: minmax(0, 1fr) auto; }
  body:not([data-page="home"]) .navbar-inner.ha-nav > .brand { justify-self: start; }
  .navbar-inner.ha-nav > .nav-cerca { justify-self: end; }
}
/* aperta, la ricerca esce dalla sua casella della griglia: altrimenti «left/right» contano dalla casella e non dallo schermo */
@media (max-width: 600px) { .navbar-inner.ha-nav > .nav-cerca:is(.is-attiva, .is-aperta) { grid-area: auto; } }