/* style-collaboratori.css */
/* ========================================
   CSS Variables & Reset
======================================== */
:root {
  /* Noble heritage palette */
  --background: hsl(40, 30%, 96%);
  --foreground: hsl(30, 20%, 15%);
  --card: hsl(40, 25%, 94%);
  --primary: hsl(350, 45%, 25%);
  --primary-foreground: hsl(40, 30%, 96%);
  --secondary: hsl(38, 35%, 90%);
  --muted: hsl(75, 15%, 85%);
  --muted-foreground: hsl(30, 15%, 38%); /* 5.4:1 su --background e --card (AA) */
  --accent: hsl(75, 25%, 35%);
  --border: hsl(35, 20%, 85%);
  /* Punto di dissolvenza del diorama collaboratori: il bianco esatto di
     .categorie-mission, cosi' il quadrato sfuma nello sfondo reale. */
  --diorama-fade: 0 0% 100%;

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Cardo', Georgia, serif;
  
  /* Transitions */
  --transition-slow: 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-gentle: 0.5s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  overflow-x: hidden;
}

/* overflow-x:hidden trasforma il body in scroll container e spegne
   position:sticky; clip taglia allo stesso modo senza quell'effetto. */
@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ========================================
   Header SEMPRE FISSO - CON EFFETTO SCROLL
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s ease;
  pointer-events: none;
}

.header.scrolled {
  background: color-mix(in srgb, var(--background) 95%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  pointer-events: auto;
}

/* Logo container */
.combined-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-gentle);
  max-width: 200px;
  pointer-events: auto;
  position: relative;
}

.logo-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* Container per i loghi simbolo */
.logo-symbol-container {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stile per i loghi simbolo */
.logo-default, .logo-scrolled {
  width: 62px;
  height: 62px;
  object-fit: contain;
  transition: opacity 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
}

/* Logo di default (logo-1.webp) visibile quando NON scrolled */
.logo-default {
  opacity: 1;
}

/* Logo scrolled (logo-1w.png) nascosto quando NON scrolled */
.logo-scrolled {
  opacity: 0;
}

/* Quando la header è scrolled */
.header.scrolled .logo-default {
  opacity: 0;
}

.header.scrolled .logo-scrolled {
  opacity: 1;
}

/* Container per i loghi testo */
.logo-text {
  margin-left: 1rem;
  position: relative;
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
}

/* Stile per i loghi di testo */
.logo-text-default, .logo-text-scrolled {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  max-height: 50px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Logo di testo default (logo-2.webp) visibile quando NON scrolled */
.logo-text-default {
  opacity: 1;
}

/* Logo di testo scrolled (logo-2w.png) nascosto quando NON scrolled */
.logo-text-scrolled {
  opacity: 0;
}

/* Quando la header è scrolled */
.header.scrolled .logo-text-default {
  opacity: 0;
}

.header.scrolled .logo-text-scrolled {
  opacity: 1;
}

/* Separatore verticale tra logo e testo */
.logo-main::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background: color-mix(in srgb, var(--background) 30%, transparent);
  transition: all var(--transition-gentle);
}

/* Navigation */
.nav {
  display: none;
  gap: 2.5rem;
  pointer-events: auto;
}


.nav-link {
  font-size: 0.875rem;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
  pointer-events: auto;
  font-weight: 400;
}

.header.scrolled .nav-link {
  color: var(--foreground);
  text-shadow: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* La navbar naviga tra pagine, non tra sezioni: la pagina corrente e'
   marcata in HTML con aria-current, non calcolata allo scroll. */
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  z-index: 1001;
  pointer-events: auto;
}

.mobile-menu-btn span {
  width: 24px;
  height: 1px;
  background: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: all 0.3s ease;
}

.header.scrolled .mobile-menu-btn span {
  background: var(--foreground);
  filter: none;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}


/* Open mobile nav overlay */


/* ========================================
   Layout del contenuto principale
======================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.main-content {
  position: relative;
  z-index: 10;
  background: var(--background);
}

.section {
  padding: 6rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 8rem 0;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 10rem 0;
  }
}

/* ========================================
   Hero Section - PARALLAX
======================================== */
.hero-collaboratori {
  background-image: url("../../assets/collab.webp");
  background-size: cover;
  background-position: center;
  color: var(--primary-foreground);
  text-align: center;
  padding: 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-collaboratori::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 80px;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  .hero-content {
    margin-top: 100px;
    padding: 4rem 2rem;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    margin-top: 120px;
    padding: 6rem 3rem;
  }
}

.hero-label {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
}

.divider {
  width: 60px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  margin: 2rem auto;
}

.divider-center {
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-size: 1.125rem;
  max-width: 64rem;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.8;
  font-weight: 400;
}

/* ========================================
   Rete Section - CON ANIMAZIONI MIGLIORATE
======================================== */
.rete {
  background: var(--secondary);
}

.rete-header {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 4.5rem;
}

.rete-intro {
  color: var(--muted-foreground);
  font-size: 1.125rem;
  line-height: 1.8;
  text-wrap: pretty;
}

/* Quattro cifre tenute insieme da un filo continuo: una sola riga,
   non quattro card isolate. */
.rete-network {
  display: grid;
  gap: 2.5rem;
  max-width: 560px;
  margin: 0 auto;
}

.rete-node {
  text-align: center;
}

.rete-node + .rete-node {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .rete-network {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .rete-node {
    padding: 0 1.5rem;
  }

  .rete-node + .rete-node {
    border-top: 0;
    border-left: 1px solid var(--border);
    padding-top: 0;
  }
}

/* ========================================
   Rete Logos — striscia a scorrimento continuo dei loghi delle
   cantine partner. Resta dentro .rete (stesso sfondo --secondary)
   ma esce da .container per andare edge-to-edge: la maschera in
   dissolvenza ai bordi ha bisogno di piena larghezza per funzionare.
======================================== */
.rete-logos {
  margin-top: 4rem;
}

.rete-logos-caption {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 2rem;
}

.rete-logos-viewport {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.rete-logos-track {
  display: flex;
  width: max-content;
  animation: reteLogosScroll 36s linear infinite;
}

.rete-logos-viewport:hover .rete-logos-track {
  animation-play-state: paused;
}

.rete-logos-set {
  display: flex;
  align-items: center;
  flex: none;
  gap: 3.5rem;
  padding: 0 1.75rem;
}

/* Nessuna card: i loghi galleggiano direttamente sullo sfondo della
   sezione, solo l'altezza e' fissa cosi' la riga resta allineata. */
.rete-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}

.rete-logo img {
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* Loghi bianchi in origine (pensati per sfondi scuri): invertiti
   diventano scuri e leggibili sulla card chiara, mantenendo lo stesso
   trattamento in bianco e nero degli altri fino all'hover. */
.rete-logo.is-inverted img {
  filter: invert(1) grayscale(1);
}

.rete-logo:hover img {
  transform: scale(1.06);
}

.rete-logo:not(.is-inverted):hover img {
  filter: grayscale(0);
  opacity: 1;
}

.rete-logo.is-inverted:hover img {
  filter: invert(1);
  opacity: 1;
}

@keyframes reteLogosScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .rete-logo {
    height: 64px;
  }

  .rete-logo img {
    max-width: 170px;
  }

  .rete-logos-set {
    gap: 2rem;
    padding: 0 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rete-logos-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .rete-logos-track {
    animation: none;
  }

  .rete-logos-set[aria-hidden="true"] {
    display: none;
  }
}

.stat-number {
  display: block;
  font-family: var(--font-serif);
  /* Cormorant Garamond usa di default le cifre "oldstyle" (testo): "1" alto
     come una maiuscola, "5" o "3" che scendono sotto la riga, ognuna alla
     sua altezza. Bellissimo per un numero dentro una frase, ma qui il
     numero è la frase — ed era proprio questo disallineamento verticale,
     non la velocità dell'animazione, a far sembrare il conteggio traballante
     invece che fluido. lining-nums porta le cifre tutte alla stessa altezza
     e alla stessa base; tabular-nums le tiene alla stessa larghezza così il
     numero non trema neanche in orizzontale cambiando cifra a ogni frame. */
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 2.75rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1;
}

/* Il respiro che chiude il conteggio: un fermo immagine morbido sul
   valore finale, non un altro passaggio numerico. */
.stat-number.is-settled {
  animation: statSettle 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes statSettle {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stat-number.is-settled {
    animation: none;
  }
}

@media (min-width: 768px) {
  .stat-number {
    font-size: 3.5rem;
  }
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 700;
}

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
  font-weight: 700;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

/* ========================================
   Categorie Section - DIORAMA STICKY
======================================== */
.categorie-mission {
  background: #ffffff;
}

.categorie-mission .mission-header {
  text-align: center;
  max-width: 72rem;
  margin: 0 auto 6rem;
}

.categorie-mission .mission-intro {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--muted-foreground);
  margin-top: 2rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Base: mobile. Schermo diviso a metà: la prima metà è sempre e solo
   l'immagine (palco sticky, sfondo opaco), la seconda è sempre e solo il
   capitolo a fuoco (anch'esso sticky, stessa altezza, impilato sopra il
   precedente) — mai un pixel dell'uno nel territorio dell'altro. --- */
.rete-diorama {
  display: block;
  position: relative;
}

.diorama-stage {
  position: sticky;
  /* 80px di header fisso piu' un margine di respiro */
  top: 5.5rem;
  height: calc((100svh - 5.5rem) / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}

.diorama-arch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Un solo lato comanda (la larghezza): resta un quadrato vero sia che a
     stringere sia la colonna sia la meta' schermo disponibile in altezza
     (il binario sotto si prende 1.75rem del budget). */
  width: min(100%, calc((100svh - 5.5rem) / 2 - 1.75rem));
}

/* Il testo dei capitoli resta sempre sopra il palco sticky (che lo
   precede nel DOM): niente z-index a inseguire, basta essere entrambi
   elementi posizionati e lasciare che l'ordine del markup decida. */
.diorama-track {
  position: relative;
}

.diorama-inline img,
.diorama-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  border: 1px solid var(--border);
}

/* Il cambio fra le due foto — stesso gesto delle parole che cambiano
   in "Le nostre tecniche": pellicola verticale. Chi esce scorre nel
   verso dello scorrimento, chi entra arriva dal lato opposto, e tutte
   e due passano per una sfocatura breve. Con una sola direzione il
   cambio sembrerebbe un rimbalzo invece di un avanzamento.

   --deriva la scrive il JS con il verso, esattamente come fa
   cosa-facciamo.js con le schede delle tecniche.

   L'inquadratura sborda di 1.25rem su ogni lato oltre la cornice, che
   ha overflow nascosto: cosi' ne' la deriva ne' la sfocatura possono
   scoprire un bordo della foto. */
.diorama-frame {
  position: absolute;
  inset: -1.25rem;
  /* Larghezza e altezza esplicite, non "auto": le due foto hanno width e
     height nell'HTML, e con l'altezza automatica l'immagine si sarebbe
     ridisegnata sulle proprie proporzioni invece di riempire la cornice. */
  width: calc(100% + 2.5rem);
  height: calc(100% + 2.5rem);
  /* Il reset globale "img { max-width: 100% }" taglierebbe la sbordatura
     laterale proprio dove serve. */
  max-width: none;
  z-index: 0;
  opacity: 0;
  transform: translateY(var(--deriva, 1.15rem));
  filter: blur(5px);
  pointer-events: none;
  /* Niente will-change: promuoverebbe due livelli sfocati in permanenza
     per un passaggio che dura mezzo secondo ogni tanto. */
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.diorama-frame.is-active {
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .diorama-frame,
  .diorama-frame.is-active {
    transform: none;
    filter: none;
    transition: opacity 0.15s linear;
  }
}

/* Il binario: su mobile quattro tacche, perche' il nome della categoria
   e' gia' nel titolo subito sotto. Da 1024px torna a leggersi per esteso. */
.diorama-rail {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  /* Il palco lo centra con align-items:center (serve al quadrato sopra):
     senza questo si stringerebbe al contenuto invece di restare a piena
     larghezza. */
  width: 100%;
}

.diorama-rail-item {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--border);
  /* Stesso passo della dissolvenza: la tacca non deve arrivare prima
     dell'immagine, se no il cambio si sente in due tempi. */
  transition: background-color 0.7s cubic-bezier(0.37, 0, 0.2, 1);
}

.diorama-rail-item.is-active {
  background: var(--primary);
}

.diorama-rail-item span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Su mobile comanda il palco sticky: la copia inline serve solo al fallback */
.diorama-inline {
  display: none;
  margin: 0 0 2rem;
}

.diorama-chapter {
  position: sticky;
  /* Attacca esattamente dove finisce la metà immagine: le due metà non si
     toccano mai a meno che non sia questo preciso confine. */
  top: calc(5.5rem + (100svh - 5.5rem) / 2);
  min-height: calc((100svh - 5.5rem) / 2);
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.75rem 0 2.5rem;
  background: #ffffff;
}

.diorama-title {
  font-size: 1.625rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.diorama-text {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--muted-foreground);
  max-width: 68ch;
}

.diorama-facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
}

.diorama-facts li {
  font-size: 0.8125rem;
  padding: 0.4rem 0.9rem;
  background: var(--card);
  border-radius: 4px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* --- Telefono: il quadrato non ha senso qui. La misura del lato la
   detta l'altezza disponibile (meta' schermo), non la larghezza, e su
   una colonna da 390px veniva fuori un francobollo da 294px con due
   fasce bianche ai fianchi — e il binario sotto, largo quanto la
   colonna, che sporgeva da entrambe le parti.

   A tutta larghezza in formato orizzontale la foto ha finalmente peso,
   e il binario le va a filo. Il tetto in altezza resta, perche' la
   meta' di schermo assegnata al palco non si sfonda. --- */
@media (max-width: 767.98px) {
  .diorama-arch {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    max-height: calc((100svh - 5.5rem) / 2 - 2.25rem);
  }
}

/* --- Tablet: il quadrato puo' respirare, il testo resta sopra --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .diorama-stage {
    max-width: 30rem;
  }

  .diorama-chapter {
    max-width: 38rem;
  }
}

/* --- Desktop: il quadrato passa a fianco e sconfina sotto il testo,
   dissolvendo nel bianco della sezione — stessa idea di .philosophy-image
   in home, ruotata sull'asse orizzontale di questo layout. --- */
@media (min-width: 1024px) {
  .rete-diorama {
    display: grid;
    grid-template-columns: 46fr 54fr;
    gap: 5rem;
    align-items: start;
  }

  .diorama-stage {
    /* 7rem libera l'header fisso (80px) e lascia respiro sopra il quadrato */
    top: 7rem;
    height: auto;
    display: block;
    max-width: none;
    margin: 0;
    background: none;
  }

  .diorama-arch {
    height: auto;
    width: 100%;
    /* Sconfina nel gutter (5rem) e prosegue sotto il testo */
    margin-right: -9rem;
  }

  /* Solo qui il quadrato dissolve: a fianco del testo (non sopra o sotto
     come su mobile), il bordo destro sfuma nel bianco della sezione —
     stessa tecnica di .philosophy-image in home, ruotata in orizzontale. */
  .diorama-arch::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: 1;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
      to right,
      hsl(var(--diorama-fade) / 0) 32%,
      hsl(var(--diorama-fade) / 0.5) 58%,
      hsl(var(--diorama-fade) / 0.85) 76%,
      hsl(var(--diorama-fade) / 0.96) 88%,
      hsl(var(--diorama-fade) / 1) 97%
    );
    -webkit-mask-image: linear-gradient(to right, transparent 36%, #000 84%);
    mask-image: linear-gradient(to right, transparent 36%, #000 84%);
    pointer-events: none;
  }

  .diorama-rail {
    margin-top: 1.75rem;
    gap: 1.5rem;
  }

  .diorama-rail-item {
    height: auto;
    border-radius: 0;
    background: none;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    text-align: center;
    transition: color 0.4s ease, border-color 0.4s ease;
  }

  .diorama-rail-item.is-active {
    background: none;
    color: var(--primary);
    border-top-color: var(--primary);
  }

  .diorama-rail-item span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .diorama-chapter {
    position: static;
    top: auto;
    background: none;
    max-width: none;
    margin: 0;
    min-height: 85vh;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .diorama-title {
    font-size: 2.125rem;
    margin-bottom: 1.25rem;
  }

  .diorama-text {
    font-size: 1.125rem;
  }
}

/* Senza position:sticky il diorama ricade sull'impilamento verticale */
@supports not (position: sticky) {
  .rete-diorama { display: block; }
  .diorama-stage { display: none; }
  .diorama-inline { display: block; height: 300px; }
  .diorama-chapter {
    max-width: 34rem;
    margin: 0 auto 4rem;
    min-height: 0;
    padding: 0;
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diorama-frame {
    transition-duration: 0.01ms;
    transform: none;
  }
  .diorama-frame.is-active {
    transform: none;
  }
}

/* ========================================
   Partners Section
======================================== */
.partners {
  background: var(--secondary);
}

.partners-header {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 4rem;
}

/* ========================================
   Recensioni Google (unico contenuto di "I nostri partner")
======================================== */

.google-reviews-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Punteggio sopra, bottone sotto — entrambi allineati a destra, sotto le
   stelle come nel resto dell'header. */
.google-reviews-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}

.google-reviews-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--foreground);
}

.google-g {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.google-reviews-score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.google-reviews-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary);
}

.google-reviews-stars,
.review-stars {
  color: #ee9d0d;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.google-reviews-count {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}

.google-reviews-slider {
  max-width: 720px;
}

.google-review {
  display: none;
}

.google-review-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.review-avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
}

/* Quando la recensione arriva davvero da Google, al posto dell'iniziale
   c'e' la foto del profilo di chi l'ha scritta. Stesso cerchio, stessa
   misura: cambia solo il contenuto. */
.review-avatar-foto {
  object-fit: cover;
  background: var(--muted, #eee);
}

/* Il nome dell'autore rimanda alla sua recensione su Google, come
   Google chiede: resta un nome, non deve sembrare un pulsante. */
.review-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}

.review-name a:hover,
.review-name a:focus-visible {
  text-decoration-color: currentColor;
}

/* Sezione non configurata o Google irraggiungibile: sparisce del tutto,
   non si ripiega sulle recensioni di esempio. */
.google-reviews[hidden] {
  display: none;
}

.review-identity {
  flex: 1;
  min-width: 0;
}

.review-name {
  color: var(--foreground);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.review-date {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.review-text {
  color: var(--foreground);
  line-height: 1.8;
  font-size: 1.05rem;
}

/* Stessa famiglia del pulsante "Invia" in Contatti/"Contattaci" in CTA:
   bordo sottile, spigolo vivo, maiuscolo trackato, freccia che scivola al
   hover. Qui in versione per sfondo chiaro (--secondary della sezione
   Partner), quindi colori non invertiti come nella CTA scura. */
.google-reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--primary);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.google-reviews-link:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

.google-reviews-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.google-reviews-link svg {
  transition: transform 0.3s ease;
}

.google-reviews-link:hover svg {
  transform: translateX(4px);
}

/* ========================================
   Carosello recensioni Google — una card, due frecce sottili ai lati,
   rotazione automatica in pausa su hover/focus (motoreo in collaboratori.js)
======================================== */
.google-reviews-carousel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.google-reviews-carousel .google-reviews-slider {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 auto;
}

/* Nessun cerchio, nessun bordo: solo il segno, sottile, con un'area di
   tocco generosa attorno rimasta invisibile. */
.review-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--muted-foreground);
  transition: color 0.3s ease, transform 0.3s ease;
}

.review-arrow:hover {
  color: var(--primary);
}

.review-arrow-prev:hover {
  transform: translateX(-2px);
}

.review-arrow-next:hover {
  transform: translateX(2px);
}

.review-arrow:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Stessa famiglia del pulsante "Invia" del form in Contatti: bordo
   sottile, spigolo vivo, maiuscolo trackato, si riempie al hover con la
   freccia che scivola — non il pulsante a pillola con ombra usato
   altrove sul sito. Qui i colori sono invertiti (bordo e testo chiari)
   perché il pulsante vive sullo scrim scuro della sezione CTA. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.75rem;
  border-radius: 0;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-primary {
  background: transparent;
  color: var(--primary-foreground);
  border: 1px solid var(--primary-foreground);
}

.btn-primary:hover {
  background: var(--primary-foreground);
  color: var(--primary);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 3px;
}

.btn-primary svg {
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}


.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: var(--primary) 1px solid;
  border-radius: 9999px;
  border: 1px solid var(--primary);
}

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

/* ========================================
   CTA Section — due colonne compatte: niente più foto/scrim, solo un
   blocco basso in --primary con due azioni indipendenti (contatto e
   newsletter) separate da un filo verticale che sparisce quando le due
   metà si impilano su mobile.
======================================== */
.cta {
  background-color: var(--primary);
  background-image: none;
  color: var(--primary-foreground);
  text-align: center;
  padding: 3.5rem 0;
}

@media (min-width: 768px) {
  .cta {
    padding: 4rem 0;
  }
}

@media (min-width: 1024px) {
  .cta {
    padding: 4.5rem 0;
  }
}

.cta-split {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.cta-half {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-divider {
  display: none;
}

@media (min-width: 768px) {
  .cta-split {
    flex-direction: row;
    gap: 3rem;
  }

  .cta-half {
    flex: 1 1 0;
    justify-content: center;
  }

  /* Nessun bordo fisso: si estende all'altezza della metà più alta
     grazie allo stretch di default del flex item. */
  .cta-divider {
    display: block;
    width: 1px;
    background: color-mix(in srgb, var(--primary-foreground) 22%, transparent);
  }
}

.cta-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.cta-newsletter-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-newsletter-field {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  width: 100%;
  max-width: 22rem;
}

.cta-newsletter-field input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-foreground) 45%, transparent);
  padding: 0.6rem 0;
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color 0.3s ease;
}

.cta-newsletter-field input::placeholder {
  color: color-mix(in srgb, var(--primary-foreground) 70%, transparent);
}

.cta-newsletter-field input:focus {
  outline: none;
  border-color: var(--primary-foreground);
}

.cta-newsletter-field input[aria-invalid="true"] {
  border-color: hsl(4, 70%, 78%);
}

.cta-newsletter-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1px;
  border: 1px solid var(--primary-foreground);
  color: var(--primary-foreground);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-newsletter-submit:hover {
  background: var(--primary-foreground);
  color: var(--primary);
}

.cta-newsletter-submit:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 3px;
}

.cta-newsletter-submit svg {
  transition: transform 0.3s ease;
}

.cta-newsletter-submit:hover svg {
  transform: translateX(2px);
}

.cta-newsletter-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cta-newsletter-message {
  margin-top: 0.85rem;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--primary-foreground) 85%, transparent);
}

.cta-newsletter-message[data-state="error"] {
  color: hsl(4, 70%, 78%);
}

.cta-newsletter-message[data-state="success"] {
  color: hsl(90, 40%, 78%);
}

/* Footer — nessun sigillo e nessuna cornice a doppio filo: il footer
   attacca direttamente dopo l'ultima sezione, separato solo dal filo di
   bordo. Sfondo chiaro, niente fotografia: il tocco distintivo è
   tipografico. */
.footer {
  position: relative;
  background: var(--card);
  color: var(--foreground);
  padding: 5rem 0 3rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .footer {
    padding: 6rem 0 3rem;
  }
}

/* Senza il sigillo sopra non c'è più niente da scavalcare: il padding
   che gli faceva spazio sparisce con lui. */
.footer-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
  }

  /* Nel markup il form viene prima (così su una colonna è la prima cosa
     che si vede): qui, su due colonne, le info tornano a sinistra e il
     form a destra, il disegno originale — solo l'ordine visivo cambia,
     non quello del DOM/tab. */
  .footer-info {
    order: 1;
  }

  .footer-form {
    order: 2;
  }
}

.footer-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
  color: var(--primary);
}

.footer-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.footer-detail-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.footer-detail p {
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* 44px di area toccabile su chiamare e scrivere, senza aprire lo spazio
   tra le righe (il margin negativo riassorbe il padding). */
.footer-detail a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.45rem;
  transition: color 0.3s ease;
}

.footer-detail a:hover,
.footer-detail a:focus-visible {
  color: var(--primary);
}

.footer-form {
  position: relative;
}

.form-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  margin-bottom: 1.75rem;
  color: var(--primary);
}

.form-field {
  position: relative;
  margin-bottom: 1.75rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid hsl(40, 30%, 92%, 0.3);
  padding: 0.75rem 0;
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color 0.3s ease;
  resize: none;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: hsl(40, 45%, 85%, 0.7);
}

.form-field label {
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-size: 1rem;
  color: hsl(40, 30%, 92%, 0.55);
  transition: all 0.3s ease;
  pointer-events: none;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--background) 80%, transparent);
  transition: color 0.3s ease;
  margin-top: 1rem;
}

.form-submit:hover {
  color: var(--primary-foreground);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-submit svg {
  transition: transform 0.3s ease;
}

.form-submit:hover svg {
  transform: translateX(4px);
}

.footer-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.footer-quicklink {
  display: inline-block;
  width: fit-content;
  padding: 0.65rem 0;
  min-height: 44px;
  font-size: 1.05rem;
  color: var(--muted-foreground);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.footer-quicklink:hover,
.footer-quicklink:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateX(4px);
}

.footer-quicklink:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Stessa famiglia di .btn/.form-submit: spigolo vivo, non più il cerchio
   icona-sola — il nome del social ora è scritto, non solo suggerito. */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-quicklink:hover,
  .footer-quicklink:focus-visible {
    transform: none;
  }
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Il logotipo, centrato, sempre sulla propria riga sopra P.IVA/copyright
   — anche nel layout a riga di desktop (vedi flex-basis sotto). */
.footer-logo {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
}

.footer-logo img {
  height: 2rem;
  width: auto;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  color: var(--primary);
}

@media (min-width: 768px) {
  .footer-brand {
    justify-content: flex-start;
  }
}

.footer-piva {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .footer-legal {
    align-items: flex-end;
  }
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Firma di chi ha realizzato il sito: dicitura piu' logo, una riga sola.
   Resta sotto il copyright, ma leggibile — niente opacita' addosso: il
   passo indietro lo fa gia' il corpo piccolo e il colore attenuato. */
.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .footer-credit {
    justify-content: flex-end;
  }
}

/* Segnaposto cliccabile: <a> senza href — e' la forma che l'HTML prevede
   per "qui ci andra' un link". Focus e puntatore ci sono gia', cosi'
   il giorno che arriva l'indirizzo basta aggiungere href. */
.footer-credit-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Al passaggio il marchio fa solo un piccolo "pop": nessuna linea sotto,
   solo scala e un filo di sollevamento. */
.footer-credit-logo:hover,
.footer-credit-logo:focus-visible {
  transform: translateY(-1px) scale(1.08);
}

.footer-credit-logo:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* Il file ha circa il 15% di margine interno sopra e sotto: l'altezza
   dichiarata qui e' quindi piu' alta del segno che si vede davvero.
   Sta alla pari con il corpo del testo accanto, un po' piu' presente. */
.footer-credit-logo img {
  display: block;
  height: 1.4rem;
  width: auto;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .footer-credit-logo {
    transition-duration: 0.01ms;
  }

  .footer-credit-logo:hover,
  .footer-credit-logo:focus-visible {
    transform: none;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
}

@media (min-width: 768px) {
  .footer-legal-links {
    justify-content: flex-end;
  }
}

.footer-legal-link {
  display: inline-block;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  background: none;
  border: none;
  padding: 0;
  /* Area di tocco alta 44px riassorbita dal margine negativo, cosi' il
     dito ha dove premere senza che la riga si allarghi. Le due
     dichiarazioni vanno dopo il "padding: 0" del reset del <button>:
     prima, veniva azzerata l'imbottitura e restava il margine negativo
     da solo — e su mobile, dove i link vanno a capo, le due righe si
     sovrapponevano. */
  padding-block: 0.7rem;
  margin-block: -0.55rem;
  cursor: pointer;
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.footer-legal-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-network {
  font-size: 0.875rem;
  opacity: 0.8;
}

.footer-network strong {
  color: var(--primary);
  font-weight: 600;
}

/* ========================================
   Banner cookie — informativo: spiega cosa carica il sito da domini
   esterni (Google Fonts, script da CDN) e registra la scelta, ma non
   blocca nulla — il sito non usa cookie di profilazione/tracciamento.
======================================== */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  max-width: 640px;
  margin: 0 auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(40, 15, 20, 0.18);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.cookie-banner[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.cookie-banner-text a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.cookie-banner-btn {
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cookie-banner-btn-accept {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

.cookie-banner-btn-accept:hover {
  background: hsl(350, 45%, 20%);
  transform: translateY(-1px);
}

.cookie-banner-btn-reject {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

.cookie-banner-btn-reject:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
}

.cookie-banner-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .cookie-banner-btn-accept:hover {
    transform: none;
  }
}

@media (min-width: 640px) {
  .cookie-banner {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 420px;
  }
}

/* ========================================
   Animations
======================================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes counterIncrement {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes progressBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease forwards;
}

.counter-animate {
  animation: counterIncrement 0.5s ease-out forwards;
}

.progress-animate {
  animation: progressBar 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 768px) {
  /* Logo responsive */
  .logo-default, .logo-scrolled {
    width: 60px;
    height: 60px;
  }
  
  .logo-main::after {
    height: 50px;
    right: -1rem;
  }
  
  .logo-text {
    width: 120px;
    height: 40px;
  }
  
  /* Hero section */
  .hero-collaboratori {
    min-height: 80vh;
  }
  
  .hero-content {
    margin-top: 60px;
  }
  
  /* Rete: la rete resta un filo verticale, non più card */
  .stat-number {
    font-size: 2.5rem;
  }

  /* Categorie: il diorama ha gia' le sue regole mobile-first */
  .diorama-title {
    font-size: 1.5rem;
  }

}

@media (max-width: 480px) {
  /* Logo molto piccolo */
  .logo-default, .logo-scrolled {
    width: 50px;
    height: 50px;
  }
  
  .logo-main::after {
    height: 40px;
  }
  
  .logo-text {
    width: 100px;
    height: 35px;
  }
  
  /* Hero section */
  .hero-collaboratori {
    min-height: 70vh;
  }
  
  .hero-content {
    margin-top: 40px;
  }
  
  /* Section padding */
  .section {
    padding: 4rem 0;
  }
  
  /* Rete: filo verticale più compatto sugli schermi minori */
  .rete-network {
    gap: 2rem;
  }

  /* CTA buttons */
  .btn {
    min-width: 180px;
    padding: 0.875rem 1.5rem;
  }
}

/* ========================================
   Mobile — menu a tutto schermo
======================================== */
@media (max-width: 767.98px) {
  /* Il simbolo scende alla stessa altezza del logo testuale */
  .logo-symbol-container,
  .logo-default,
  .logo-scrolled {
    width: 52px;
    height: 52px;
  }

  /* A menu chiuso resta solo il simbolo: il lettering collassa
     senza spostare il simbolo, e rientra al suo posto all'apertura. */
  .logo-main {
    gap: 0;
  }

  .logo-text {
    width: 0;
    height: 52px;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-14px);
    transition:
      width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      margin-left 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
      opacity 0.45s ease 0.12s;
  }

  .logo-text-default,
  .logo-text-scrolled {
    max-height: 44px;
    width: 140px;
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 1rem;
    opacity: 1;
    transform: translateX(0);
  }

  /* Sul crema del menu servono le versioni a colori */
  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }

  /* Il separatore verticale appartiene alla lettura desktop */
  .logo-main::after {
    display: none;
  }

  /* Il logo vive sopra l'overlay, non sotto */
  .combined-logo {
    z-index: 1001;
  }

  /* --- Overlay --- */
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 96px 1.5rem 3rem;
    background:
      radial-gradient(120% 90% at 12% 0%, hsl(38, 55%, 94%) 0%, transparent 62%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:active {
    color: var(--primary);
  }

  /* L'underline desktop non ha senso su una lista a tutta pagina */
  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .logo-text,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

@media (max-width: 767.98px) {
  .combined-logo {
    max-width: none;
  }
}

/* WCAG 2.4.7. Fuori da ogni media query apposta: la regola era intrappolata
   dentro un blocco a movimento ridotto e sul desktop non si applicava mai.
   Sull'header trasparente in cima alla hero il primary non si vede: il ring
   e' bianco finche' l'header non e' .scrolled. */
.nav .nav-link:focus-visible,
.combined-logo:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.header:not(.scrolled) .nav .nav-link:focus-visible,
.header:not(.scrolled) .combined-logo:focus-visible,
.header:not(.scrolled) .mobile-menu-btn:focus-visible {
  outline-color: var(--primary-foreground);
}


/* ========================================
   Menu a overlay anche da desktop
   L'hamburger e' l'unica porta della navigazione: sopra i 768px
   l'overlay riprende la logica mobile, con piu' respiro.
======================================== */
@media (min-width: 768px) {
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 140px clamp(3rem, 10vw, 10rem) 5rem;
    background:
      radial-gradient(110% 80% at 10% 0%, hsl(38, 55%, 94%) 0%, transparent 60%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    width: 100%;
    max-width: 780px;
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:hover {
    color: var(--primary);
  }

  /* L'underline desktop non ha senso su una lista a tutta pagina */
  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }

  /* Il logo resta leggibile sopra il crema dell'overlay */
  .combined-logo {
    z-index: 1001;
  }

  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .logo-main::after {
    background: var(--border);
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* ========================================
   Pagina corrente dentro l'overlay
   Porpora del sito piu' un segno a margine: il colore da solo
   non basterebbe a distinguere la voce attiva.
======================================== */
.nav .nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
  padding-left: 1.75rem;
}

.nav .nav-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

/* ========================================
   Lettering al centro della navbar
   Il simbolo resta a sinistra, il lettering sta al centro esatto della
   barra: si misura quindi sul contenitore dell'header, non sull'ancora
   del logo (per questo nell'HTML vive fuori da essa). Decorativo e
   inerte: il bersaglio "home" resta il simbolo.
======================================== */
.header-content {
  position: relative;
}

.logo-text {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 0;
  transform: translate(-50%, -50%);
  z-index: 1001;
  pointer-events: none;
}

/* La barra verticale separava il simbolo dal lettering che gli stava
   accanto. Ora che il lettering e' altrove non separa piu' niente. */
.logo-main::after {
  display: none;
}

/* Su telefono il lettering compare solo a menu aperto. Non si allarga
   piu' da destra del simbolo (era agganciato a lui): ora e' gia' al
   centro e semplicemente entra. */
@media (max-width: 767.98px) {
  .logo-text {
    width: 140px;
    height: 52px;
    margin-left: 0;
    overflow: visible;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transition:
      opacity 0.4s ease,
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 0;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .logo-text {
    transition-duration: 0.01ms;
  }
}

/* ========================================
   Il lampo blu al tocco su mobile
   Non e' una cosa sola, e "-webkit-tap-highlight-color" ne spegne solo
   la prima delle tre:
   1. l'highlight del tap — gia' spento nel reset, ribadito qui su html
      perche' la proprieta' si eredita e va dichiarata sulla radice;
   2. la selezione del testo — basta che il dito si sposti di un pixel
      mentre tocca e il browser seleziona la parola, dipingendola di blu.
      E' questa che di solito sopravvive al reset;
   3. il callout di iOS al tocco prolungato.
   Il testo dei contenuti resta selezionabile: si blocca solo la parte
   interattiva dell'interfaccia, dove selezionare non serve.
======================================== */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

a,
button,
label,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Telefono e mail si copiano: qui la selezione serve davvero. */
a[href^="tel:"],
a[href^="mailto:"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* E se una selezione avviene comunque, che sia nei colori del sito. */
::selection {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--foreground);
}

/* ========================================
   Blocco dello scorrimento quando l'overlay del menu e' aperto.
   Vedi il commento in "bloccaScorrimento" nel JS: si tiene ferma la
   pagina senza toglierla dal flusso, cosi' l'apertura del menu non
   paga un rilayout dell'intero documento nel fotogramma sbagliato.
   Il posto della barra resta prenotato sempre, cosi' toglierla non
   sposta di un pixel quello che c'e' sotto.
======================================== */
html {
  scrollbar-gutter: stable;
}

html.scorrimento-bloccato,
html.scorrimento-bloccato body {
  overflow: hidden;
}

/* Alcuni blocchi a piena larghezza si misurano con
   "--scrollbar: calc(100vw - 100%)". A barra nascosta quel calcolo
   diventa negativo e la sezione si allarga di quindici pixel proprio
   mentre il menu si apre: un rilayout di una sezione alta quanto lo
   schermo, nel fotogramma peggiore. Senza barra la compensazione da'
   fare e' zero, e messa qui il valore non oscilla. */
html.scorrimento-bloccato {
  --scrollbar: 0px;
}

/* L'overlay non passa lo scorrimento a quello che ha dietro. */
.nav {
  overscroll-behavior: contain;
}

/* L'indirizzo di sede e' un <address>: e' l'elemento che i motori di
   ricerca leggono come recapito dell'attivita'. Il corsivo di default
   qui non c'entra niente con il resto del footer. */
.footer-address {
  font-style: normal;
  line-height: inherit;
}