/* ========================================
   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%);

  /* Le card prodotto dissolvono la fotografia nel fondo della sezione:
     stesso valore di --card, dichiarato anche in componenti per poterlo
     usare dentro i gradienti con alpha variabile. */
  --product-fade: 40 25% 94%;
  /* Stesso principio nella sezione Filosofia, dove il fondo è --secondary */
  --philosophy-fade: 38 35% 90%;

  /* 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;
 -webkit-tap-highlight-color: transparent;
}

html {
  /* Lo scroll fluido è già gestito via JS (smooth esplicito sui link,
     GSAP ScrollToPlugin sul bottone "Scorri"): lasciare "smooth" qui
     fa sì che il browser rianimi anche i micro-scatti che GSAP scrive
     frame per frame, producendo uno scroll a scatti invece che fluido. */
  scroll-behavior: auto;
}

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-y: auto;
  height: 100%;
  touch-action: pan-y;
}

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

/* Visibile solo agli screen reader — testo reale per chi non vede il logo */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Header SEMPRE FISSO - CON EFFETTO SCROLL
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
}

/* Sfondo e sfocatura vivono su uno pseudo-elemento, non sull'header
   stesso: "backdrop-filter" (come "transform" o "filter") rende
   l'elemento che lo porta il containing block dei discendenti
   "position: fixed" — qui .nav, l'overlay del menu — confinandoli al
   proprio riquadro invece che a tutto lo schermo. Da scrolled il menu
   restava alto quanto la sola navbar (80px) e sembrava aprirsi e
   fermarsi a meta'. Uno pseudo-elemento non ha discendenti, quindi
   non ha questo effetto collaterale; con z-index negativo resta
   comunque dietro al logo/nav/bottone, visivamente identico a prima. */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s ease;
}

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

.header.scrolled {
  pointer-events: auto;
}

/* A menu aperto l'header (che e' lo stacking context di .nav) deve
   salire sopra il banner cookie (z-index: 2000): alzare lo z-index
   di .nav da sola non basta, resta comunque intrappolata sotto
   quello dell'header. Senza questo il banner taglia in due
   l'overlay a schermo intero e l'apertura sembra bloccarsi a meta'. */
.header.menu-open {
  z-index: 2001;
}

.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 (bianco/chiaro) visibile quando NON scrolled */
.logo-default {
  opacity: 1;
}

/* Logo scrolled (colore) 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 (bianco/chiaro) visibile quando NON scrolled */
.logo-text-default {
  opacity: 1;
}

/* Logo di testo scrolled (colore) 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);
}

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

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

.header.scrolled .nav-link::after {
  background: var(--primary);
}

.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);
}


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

/* ========================================
   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);
  pointer-events: auto;
}

@media (max-width: 768px) {
  .main-content {
    touch-action: pan-y pinch-zoom;
  }
}

.section {
  padding: 6rem 0;
  background-image: url(./assets/sfondo.webp);
  background-size: cover;
}

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

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

/* ========================================
   Philosophy Section
======================================== */
.philosophy {
  background: var(--secondary);
}

.philosophy-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .philosophy-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
}

.philosophy-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* Da tablet in su la fotografia non si ferma alla sua colonna: sconfina
   verso destra e passa sotto la colonna di testo, dissolvendosi lungo il
   bordo destro fino al colore esatto della sezione. La stessa idea delle
   card prodotto, ruotata di 90°: lì la foto sprofonda verso il basso,
   qui rientra nella pagina lateralmente. Sotto i 1024px la griglia si
   impila e l'effetto non avrebbe senso, quindi resta confinato qui. */
@media (min-width: 1024px) {
  .philosophy-image {
    position: relative;
    isolation: isolate;
    /* Sconfina nel gutter (4rem) e prosegue sotto il testo */
    margin-right: -9rem;
  }

  .philosophy-image img {
    height: 600px;
  }

  .philosophy-image::after {
    content: '';
    position: absolute;
    /* Debordo di sicurezza: evita che il livello con backdrop-filter,
       rasterizzato a pixel interi, lasci affiorare una riga nitida. */
    top: -2px;
    bottom: -2px;
    left: 0;
    right: -2px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* La colonna di testo comincia intorno all'89% della larghezza della
       foto (che sconfina di 9rem): la velatura arriva quindi al pieno
       colore di fondo solo al 97%, così sotto le prime parole resta un
       ultimo respiro di fotografia invece di uno stacco netto. */
    background: linear-gradient(
      to right,
      hsl(var(--philosophy-fade) / 0) 32%,
      hsl(var(--philosophy-fade) / 0.5) 58%,
      hsl(var(--philosophy-fade) / 0.85) 76%,
      hsl(var(--philosophy-fade) / 0.96) 88%,
      hsl(var(--philosophy-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;
  }

  /* Il testo resta sopra la coda sfocata della fotografia */
  .philosophy-content {
    position: relative;
    z-index: 1;
  }
}

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

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

.philosophy-text {
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.philosophy-quote {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--primary);
  padding-left: 1.5rem;
  border-left: 2px solid var(--primary);
  margin-top: 2rem;
}

.divider {
  width: 60px;
  height: 1px;
  background: rgba(115, 46, 56, 0.4);
  margin-bottom: 1.5rem;
}

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

/* ========================================
   Territory Section — l'unica pausa scura fra due sezioni chiare.
   La carta `sfondo.webp` si ferma qui: al suo posto la fotografia delle
   colline affonda in un bordeaux quasi nero, con la luce che sale dalla
   base invece di scendere dall'alto — i tre segni poggiano su quella
   linea di orizzonte come rilievi controluce.
======================================== */
.territory {
  position: relative;
  overflow: hidden;
  /* Sostituisce la texture di carta condivisa da `.section`. */
  background-image: none;
  background-color: hsl(350, 55%, 8%);
  color: hsl(40, 32%, 92%);
}

/* Stessa scala di tagli dell'hero, non un taglio a sé: è la stessa
   fotografia, e chiederne una seconda misura significava scaricarla e
   decodificarla due volte nella stessa pagina. */
.territory-backdrop {
  position: absolute;
  inset: 0;
  background-image: url(./assets/hero-bg-1280.webp);
  background-size: cover;
  background-position: center 65%;
  opacity: 0.26;
}

@media (min-width: 900px) {
  .territory-backdrop { background-image: url(./assets/hero-bg-1920.webp); }
}

@media (min-width: 1600px), (min-resolution: 1.5dppx) and (min-width: 900px) {
  .territory-backdrop { background-image: url(./assets/hero-bg-2560.webp); }
}

/* Il velo: stessa temperatura bordeaux dell'hero e del preloader, mai un
   nero neutro. L'alone chiaro sta in basso, all'altezza della linea di
   base condivisa dai tre disegni. */
.territory-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 75% at 50% 88%, hsl(350 45% 16% / 0.25), hsl(350 58% 8% / 0.9) 55%, hsl(350 60% 5%) 100%),
    linear-gradient(to bottom, hsl(350 60% 5% / 0.75), transparent 22%);
}

.territory .container {
  position: relative;
  z-index: 1;
}

.territory .section-label {
  color: hsl(40, 42%, 76%);
}

.territory .section-title {
  color: hsl(40, 35%, 96%);
}

.territory .divider {
  background: hsl(45, 45%, 65%, 0.55);
}

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

.territory-intro {
  color: hsl(40, 22%, 86%);
  font-size: 1.125rem;
  line-height: 1.8;
}

/* Il Territorio — una fascia continua, non tre schede.
   I tre segni condividono una linea di base e nessun bordo a riposo: la
   sezione legge come un solo rilievo del territorio in tre registri.
   Tre riquadri uguali con grafica sopra e numero sotto sono il template
   che rende una pagina intercambiabile con qualunque altra. */
.territory-stats {
  display: grid;
  gap: 3rem 2rem;
  align-items: end;
  justify-items: center;
}

@media (min-width: 768px) {
  .territory-stats {
    /* Tre, non quattro: la quarta colonna era fantasma e spingeva
       tutto il gruppo a sinistra. */
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
  }
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 24rem;
  padding: 0 1rem;
}

/* All'hover non compare nessun riquadro: il riquadro era un contenitore
   che a riposo non esisteva. Passa solo un po' di luce in piu' sul segno,
   come se il disegno venisse avvicinato alla lampada. */
.stat .stat-segno,
.stat .stat-number {
  transition: color var(--transition-gentle), opacity var(--transition-gentle);
}

.stat:hover .stat-segno,
.stat:focus-within .stat-segno {
  color: hsl(42, 52%, 82%);
}

.stat:hover .stat-number,
.stat:focus-within .stat-number {
  color: hsl(45, 55%, 88%);
}

@media (prefers-reduced-motion: reduce) {
  .stat .stat-segno,
  .stat .stat-number {
    transition: none;
  }
}

/* Altezza fissa, larghezza libera: i tre segni si allineano sulla stessa
   base perche' occupano la stessa fascia, non perche' hanno lo stesso
   disegno. Larghezze diverse sono volute. */
.stat-segno {
  height: 8.5rem;
  width: auto;
  max-width: 100%;
  margin-bottom: 2.25rem;
  overflow: visible;
  color: hsl(40, 34%, 86%);
}

@media (min-width: 768px) {
  .stat-segno {
    height: 11rem;
  }
}

@media (min-width: 1024px) {
  .stat-segno {
    height: 13rem;
  }
}

.segno-tratto {
  stroke: currentColor;
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* I divisori di parcella stanno sotto ai bordi del campo: il frazionamento
   e' informazione secondaria, il perimetro no. */
.segno-tratto-fine {
  stroke-width: 0.5;
  opacity: 0.42;
}

.segno-sagoma {
  stroke-width: 0.8;
  opacity: 0.6;
}

.segno-crinale {
  stroke-width: 1.1;
}

.segno-base {
  stroke-width: 0.8;
  opacity: 0.5;
}

.segno-tratteggio {
  stroke: currentColor;
  stroke-width: 0.45;
  stroke-linecap: round;
  opacity: 0.32;
}

/* La quota e' l'unica linea tratteggiata del disegno: e' una misura
   presa, non un bordo del terreno. */
.segno-quota {
  stroke: hsl(45, 52%, 62%);
  stroke-width: 0.7;
  stroke-dasharray: 3 2.4;
  stroke-linecap: round;
}

.segno-tacca {
  stroke-width: 0.85;
  stroke: hsl(45, 52%, 62%);
}

.segno-quota-testo {
  fill: hsl(45, 52%, 68%);
  font-family: var(--font-sans);
  font-size: 6px;
  letter-spacing: 0.08em;
}

.segno-punti circle {
  fill: currentColor;
  opacity: 0.7;
}

.stat-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: hsl(40, 35%, 96%);
  margin-bottom: 0.65rem;
  /* Il conteggio cambia la larghezza a ogni fotogramma: senza cifre a
     passo fisso l'etichetta sotto trema per tutta la salita. */
  font-variant-numeric: tabular-nums;
}

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

.stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(40, 24%, 80%);
}

/* ---- Ingresso: i tratti si disegnano, una volta sola ---- */
.territory-stats[data-anima] .segno-tratto,
.territory-stats[data-anima] .segno-tratteggio {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.territory-stats[data-anima] .segno-quota {
  transform: scaleX(0);
  transform-origin: left center;
}

.territory-stats[data-anima] .segno-punti {
  opacity: 0;
}

.territory-stats[data-anima] .segno-quota-testo {
  opacity: 0;
}

.stat.stat-disegna .segno-tratto,
.stat.stat-disegna .segno-tratteggio {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat.stat-disegna .segno-tratteggio {
  transition-duration: 0.7s;
  transition-delay: 0.5s;
}

/* La quota arriva per ultima: prima la collina, poi la misura presa sopra. */
.stat.stat-disegna .segno-quota {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}

.stat.stat-disegna .segno-quota-testo {
  opacity: 1;
  transition: opacity 0.4s ease 1.25s;
}

.stat.stat-disegna .segno-punti {
  opacity: 1;
  transition: opacity 0.9s ease 0.45s;
}

/* I divisori di parcella entrano dopo il perimetro, cosi' il campo si
   legge prima intero e poi frazionato. */
.stat.stat-disegna .segno-tratto-fine {
  transition-delay: 0.45s;
  transition-duration: 0.8s;
}

@media (prefers-reduced-motion: reduce) {
  /* Tutto gia' al suo posto: nessun tratto da disegnare, nessun
     conteggio. Il JS non aggiunge nemmeno data-anima, questo e' la rete. */
  .territory-stats[data-anima] .segno-tratto,
  .territory-stats[data-anima] .segno-tratteggio {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .territory-stats[data-anima] .segno-quota {
    transform: none;
  }

  .territory-stats[data-anima] .segno-punti,
  .territory-stats[data-anima] .segno-quota-testo {
    opacity: 1;
  }

  .stat.stat-disegna .segno-tratto,
  .stat.stat-disegna .segno-tratteggio,
  .stat.stat-disegna .segno-quota,
  .stat.stat-disegna .segno-punti,
  .stat.stat-disegna .segno-quota-testo {
    transition: none;
  }
}

/* ========================================
   Products Section
======================================== */
.products {
  background: var(--card);
}

.products-header {
  text-align: center;
  margin-bottom: 4rem;
}

.products-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

/* Card prodotto — la fotografia non sta *sopra* la card: è la card.
   L'immagine riempie il riquadro, si sfoca progressivamente verso il
   basso (backdrop-filter mascherato con un gradiente) e sprofonda in
   una velatura bruno-scura, così che il testo appoggi su una superficie
   leggibile senza mai perdere il contatto con la foto sottostante.
   Stesso principio delle schede territorio di Vallebelbo. */
.product-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 26rem;
  background-color: var(--card);
}

@media (min-width: 768px) {
  .product-card {
    min-height: min(84vh, 44rem);
  }
}

.product-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

/* Il blocco di testo si porta dietro la propria velatura: il padding
   superiore è la zona di dissolvenza, così la foto comincia a sfocarsi
   sempre appena sopra il titolo, qualunque sia la lunghezza del testo
   (le due schede hanno testi molto diversi e resterebbero disallineate
   se la sfumatura fosse ancorata al bordo della card). La velatura non
   è un nero: arriva esattamente al colore di fondo della sezione, così
   la fotografia sembra sciogliersi nella pagina invece di stare dentro
   un riquadro scuro appoggiato sopra. */
.product-content {
  position: relative;
  z-index: 2;
  padding: 7rem 2rem 2.25rem;
}

@media (min-width: 768px) {
  .product-content {
    padding: 9rem 2.75rem 2.75rem;
  }
}

.product-content::before {
  content: '';
  position: absolute;
  /* Debordo di qualche pixel oltre i bordi della card (che li ritaglia
     con overflow:hidden): durante il sollevamento in hover il livello
     con backdrop-filter viene rasterizzato su una texture arrotondata
     al pixel, e senza questo margine affiora una striscia di foto
     nitida lungo il bordo inferiore. */
  top: 0;
  left: -2px;
  right: -2px;
  bottom: -6px;
  z-index: -1;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(
    to bottom,
    hsl(var(--product-fade) / 0) 0%,
    hsl(var(--product-fade) / 0.55) 36%,
    hsl(var(--product-fade) / 0.92) 60%,
    hsl(var(--product-fade) / 1) 78%
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  pointer-events: none;
}

.product-title {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  color: var(--foreground);
  margin-bottom: 0.4rem;
}

.product-subtitle {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.25rem;
}

.product-description {
  max-width: 46ch;
  color: var(--muted-foreground);
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .product-image img {
    transition: none;
  }
  .product-card:hover .product-image img {
    transform: none;
  }
}

/* ========================================
   Footer / Contact — un momento fotografico come .cta di Chi Siamo /
   Cosa Facciamo / Collaboratori, non più un blocco piatto: le stesse
   colline delle Langhe (qui in bianco e nero, dallo stesso scatto usato
   in fondo alle altre pagine) sotto il velo bordeaux del brand, che dà
   alla foto in scala di grigi la temperatura di colore della casa.
======================================== */
/* 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-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  color: var(--primary);
}

@media (min-width: 768px) {
  .footer-brand {
    align-items: 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;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up {
    animation-duration: 0.01ms;
    animation-name: fadeUp;
  }
}

/* ========================================
   Hero / Nuvole
======================================== */
/* La corsa di scroll dell'hero: il contenuto interno resta appiccicato
   in cima per tutta la sua altezza, poi il flusso riprende normalmente. */
.hero-scroll-wrapper {
  position: relative;
  height: 280vh;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #e8d9c2;
  z-index: 1;
}

@media (max-width: 768px) {
  .hero-sticky {
    touch-action: pan-y pinch-zoom;
  }
}

.hero-layer {
  position: absolute;
  inset: 0;
}

/* Lo sfondo deborda leggermente: lo zoom in scroll non scopre i bordi.
   Il master e' 6720x4480 (30 megapixel, 3,6 MB): serviva l'intera pagina
   da sola. Qui si servono tre tagli WebP scelti per viewport — anche il
   piu' grande copre un 1280 a densita' doppia. */
.hero-bg {
  inset: -6%;
  background-image: url('./assets/hero-bg-1280.webp');
  background-size: cover;
  background-position: center 55%;
  will-change: transform;
}

@media (min-width: 900px) {
  .hero-bg { background-image: url('./assets/hero-bg-1920.webp'); }
}

@media (min-width: 1600px), (min-resolution: 1.5dppx) and (min-width: 900px) {
  .hero-bg { background-image: url('./assets/hero-bg-2560.webp'); }
}

.hero-grade {
  background: linear-gradient(
    to bottom,
    rgba(44, 20, 14, 0.34) 0%,
    rgba(44, 20, 14, 0.05) 32%,
    rgba(255, 241, 214, 0.06) 70%,
    rgba(122, 60, 30, 0.22) 100%
  );
}

.hero-glow {
  background: radial-gradient(
    circle at 78% 22%,
    rgba(255, 226, 168, 0.55) 0%,
    rgba(255, 226, 168, 0.16) 34%,
    rgba(255, 226, 168, 0) 62%
  );
  mix-blend-mode: screen;
}

.hero-clouds {
  overflow: hidden;
  pointer-events: none;
  will-change: opacity;
}

/* Le tre fasce sono più larghe del viewport: la deriva orizzontale
   e lo zoom non devono mai mostrare un bordo. In più ciascuna porta un
   riquadro di nuvole in eccesso a destra (--cloud-tile, misurato da
   script.js): è lo spazio che la deriva percorre prima di ripartire da
   capo, e permette di muoverla con un transform invece che spostando lo
   sfondo — stesso movimento, senza ridisegnare la fascia ogni fotogramma. */
.hero-cloud {
  position: absolute;
  right: auto;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 0;
  will-change: transform, opacity;
}

.hero-cloud-far {
  left: -25%;
  width: calc(150% + var(--cloud-tile, 0px));
  top: -14%;
  height: 82%;
  background-image: url('./assets/cloud-far.webp');
  opacity: 0.5;
  transform-origin: 52% 28%;
}

.hero-cloud-mid {
  left: -28%;
  width: calc(156% + var(--cloud-tile, 0px));
  top: -4%;
  height: 96%;
  background-image: url('./assets/cloud-mid.webp');
  opacity: 0.34;
  transform-origin: 50% 42%;
}

.hero-cloud-near {
  left: -30%;
  width: calc(160% + var(--cloud-tile, 0px));
  top: 0;
  height: 104%;
  background-image: url('./assets/cloud-near.webp');
  opacity: 0.18;
  transform-origin: 50% 60%;
}

/* Foschia crema: entra a metà corsa e porta la scena verso il colore pagina. */
.hero-mist {
  background: radial-gradient(
    circle at 50% 60%,
    rgba(255, 252, 246, 1) 0%,
    rgba(255, 250, 240, 0.95) 40%,
    rgba(250, 242, 229, 0.85) 74%,
    rgba(247, 241, 230, 0.72) 100%
  );
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}

/* Velo finale sul colore di sfondo: chiude il passaggio al contenuto. */
.hero-veil {
  background: var(--background, #f7f1e6);
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}

.hero-text {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  text-align: center;
  color: white;
  pointer-events: none;
  /* Solo transform, mai opacity: `will-change: opacity` fa di questo
     elemento un backdrop root, e la sfocatura della pergamena qui
     dentro smetterebbe di campionare il paesaggio — resterebbe accesa
     nei computed style e invisibile sullo schermo. La corsa di scroll
     anima comunque anche l'opacità: perde solo il suggerimento. */
  will-change: transform;
}

/* ============================================================
   La cornice dell'hero
   ------------------------------------------------------------
   Non più una pergamena a rulli, ma un rettangolo a doppio filo
   porpora con un vetro semitrasparente dentro: lascia intravedere
   cielo e nuvole senza perdere la leggibilità del testo. In apertura
   la cornice è già intera, solo schiacciata in altezza attorno alla
   sua mezzeria, e si distende in verticale fino alla misura piena:
   non linee che si compongono, un pezzo che prende respiro.

   Il vetro è solo tinta, mai sfocatura: nessun backdrop-filter, così
   il paesaggio dietro il testo resta sempre leggibile e nitido, non
   solo dopo il primo scroll.

   Struttura:
     .hero-frame          l'ingombro totale del pezzo
       .hero-frame-glass  il vetro: solo tinta
       .hero-frame-side   i due lati verticali
       .hero-frame-edge   i due bordi orizzontali
       .hero-frame-corner i quattro tasselli d'angolo, con lo scasso
                          circolare e il filetto che ne segue il
                          profilo
   Tutto è posizionato rispetto a .hero-frame: basta cambiarne
   l'altezza e l'intera forma la segue, senza deformarsi.
   ============================================================ */

/* Una sola grandezza comanda l'apertura: 0 = cornice schiacciata alla
   sua altezza minima (--frame-rest), 1 = altezza piena. Muove top e
   bottom insieme, quindi i due bordi non possono sfasarsi. */
@property --unfurl {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.hero-plate {
  position: relative;
  /* Niente `isolation: isolate` qui: isolare crea un backdrop root e
     spegne la sfocatura del foglio. Non serve comunque — .hero-text
     è già un contesto di impilamento e trattiene lo z-index negativo
     della pergamena. */
  /* La larghezza la detta il titolo (30ch); la pergamena lo veste. */
  max-width: min(100%, 41rem);
  padding: 2.75rem 3rem 3rem;
}

/* Il testo sta su un proprio strato sopra la carta: entra solo a
   pergamena ferma, quindi deve poter essere mosso da solo. */
.hero-plate-content {
  position: relative;
  z-index: 1;
}

.hero-frame {
  --unfurl: 1;
  --frame-band: 0.5rem;
  /* Raggio dello scasso circolare che sostituisce ogni spigolo vivo:
     comanda sia il buco nel vetro (.hero-frame-glass) sia il profilo
     dei quattro tasselli d'angolo (.hero-frame-corner) — un solo
     numero, così non possono disallinearsi. */
  --corner-r: 1.25rem;
  /* Quanto la cornice sborda dal testo, per lato. */
  --frame-ix: 1.05rem;
  --frame-iy: 0.95rem;
  /* L'altezza a cornice schiacciata: i due angoli interi più un breve
     tratto di lato, così la forma si legge già completa — un
     cartiglio basso, non una riga. */
  --frame-rest: calc(var(--corner-r) * 2.6);
  position: absolute;
  /* L'ingombro comprende già la cornice: niente sporge oltre questo
     box, così su schermi stretti non spinge fuori pagina il resto
     della composizione. In verticale i due bordi partono dalla
     mezzeria, a --frame-rest di distanza, e raggiungono la misura
     piena (-(--frame-iy)) quando --unfurl arriva a 1. */
  left: calc(var(--frame-ix) * -1);
  right: calc(var(--frame-ix) * -1);
  top: calc((1 - var(--unfurl)) * (50% + var(--frame-iy) - var(--frame-rest) / 2) - var(--frame-iy));
  bottom: calc((1 - var(--unfurl)) * (50% + var(--frame-iy) - var(--frame-rest) / 2) - var(--frame-iy));
  z-index: -1;
  pointer-events: none;
}

/* L'ombra che il pezzo posa sulla scena. Sta su un elemento a parte
   e senza clip-path apposto: un box-shadow su una superficie
   ritagliata verrebbe tagliato via insieme a tutto il resto. */
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 10% -3% -8%;
  z-index: -1;
  background: radial-gradient(
    58% 62% at 50% 60%,
    hsl(330 55% 6% / 0.34),
    transparent 72%
  );
}

/* Il vetro: solo tinta porpora, nessuna sfocatura — il paesaggio
   dietro il testo resta sempre leggibile e a fuoco. Riempie sempre
   l'intera cornice, qualunque sia la sua altezza. */
.hero-frame-glass {
  position: absolute;
  inset: 0;
  /* Lo scasso: una maschera a quattro raggi, uno per angolo, ciascuno
     confinato al proprio quadrante (51% × 51%, così non invade quello
     accanto) e cieco fino a --corner-r — da lì il vetro torna intero.
     È la stessa costruzione, in scala, dei tasselli qui sotto: qui
     serve solo il buco, non il filetto che lo insegue. */
  -webkit-mask-image:
    radial-gradient(circle at top left, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r)),
    radial-gradient(circle at top right, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r)),
    radial-gradient(circle at bottom right, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r)),
    radial-gradient(circle at bottom left, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r));
  mask-image:
    radial-gradient(circle at top left, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r)),
    radial-gradient(circle at top right, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r)),
    radial-gradient(circle at bottom right, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r)),
    radial-gradient(circle at bottom left, transparent calc(var(--corner-r) - 1px), #000 var(--corner-r));
  -webkit-mask-position: top left, top right, bottom right, bottom left;
  mask-position: top left, top right, bottom right, bottom left;
  -webkit-mask-size: 51% 51%;
  mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background:
    /* Il centro prende più luce: è lì che sta il titolo. */
    radial-gradient(76% 96% at 50% 42%, hsl(320 55% 82% / 0.16), transparent 66%),
    /* La tinta di base: lo stesso porpora della sezione CTA
       (--primary), diluito perché le nuvole in parallasse devono
       continuare a leggersi dietro il testo. */
    color-mix(in srgb, var(--primary) 42%, transparent);
}

/* I due lati verticali. Ogni lato è un doppio filetto — un gradiente
   perpendicolare al proprio asse, due linee da 1px con un vuoto
   trasparente fra le due — la stessa costruzione dei bordi
   orizzontali, ruotata di 90°, così gli angoli si incontrano di
   taglio pulito quando il rettangolo si chiude. */
.hero-frame-side {
  position: absolute;
  /* Si fermano a --corner-r da ciascuna estremità invece che a filo:
     quello spazio è dei tasselli d'angolo, che ci disegnano dentro lo
     scasso circolare — la barra dritta non deve più arrivarci sopra. */
  top: var(--corner-r);
  bottom: var(--corner-r);
  width: var(--frame-band);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--primary) 90%, transparent) 0 1px,
    transparent 1px calc(100% - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) calc(100% - 1px) 100%);
}

.hero-frame-side-left {
  left: 0;
}

.hero-frame-side-right {
  right: 0;
}

/* I due bordi orizzontali: stessa costruzione a doppio filetto dei
   lati, orizzontale invece che verticale. Seguono top e bottom della
   cornice, quindi viaggiano con lei mentre si distende. */
.hero-frame-edge {
  position: absolute;
  /* Stesso ragionamento dei lati: si fermano a --corner-r dagli
     spigoli, cedendo l'angolo ai tasselli. */
  left: var(--corner-r);
  right: var(--corner-r);
  height: var(--frame-band);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--primary) 90%, transparent) 0 1px,
    transparent 1px calc(100% - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) calc(100% - 1px) 100%);
}

.hero-frame-edge-top {
  top: 0;
}

.hero-frame-edge-bottom {
  bottom: 0;
}

/* I quattro tasselli d'angolo: chiudono lo spigolo con uno scasso
   circolare invece che vivo. Un solo radial-gradient per tassello
   disegna, dal centro (l'ex spigolo) verso --corner-r: un vuoto (il
   taglio, coerente col buco nel vetro) e un unico filetto proprio al
   bordo del pezzo — tangente al filetto esterno di lati e bordi, la
   stessa linea che continua intorno all'angolo invece di spezzarsi
   ad angolo retto. Niente filetto interno: dentro il taglio, più
   vicino alla punta, sarebbe rimasto isolato, fuori dal profilo
   visibile del vetro. */
.hero-frame-corner {
  position: absolute;
  width: var(--corner-r);
  height: var(--corner-r);
}

.hero-frame-corner-tl {
  top: 0;
  left: 0;
  background: radial-gradient(circle at 0 0,
    transparent 0,
    transparent calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) var(--corner-r),
    /* Senza questo stop finale il gradiente porta avanti l'ultimo
       colore all'infinito: oltre il filetto il quadrato 20×20 del
       tassello ha ancora angoli suoi (fino a lato·√2) che
       verrebbero riempiti di porpora piena invece di restare vuoti. */
    transparent var(--corner-r));
}

.hero-frame-corner-tr {
  top: 0;
  right: 0;
  background: radial-gradient(circle at 100% 0,
    transparent 0,
    transparent calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) var(--corner-r),
    transparent var(--corner-r));
}

.hero-frame-corner-br {
  bottom: 0;
  right: 0;
  background: radial-gradient(circle at 100% 100%,
    transparent 0,
    transparent calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) var(--corner-r),
    transparent var(--corner-r));
}

.hero-frame-corner-bl {
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 0 100%,
    transparent 0,
    transparent calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) calc(var(--corner-r) - 1px),
    color-mix(in srgb, var(--primary) 90%, transparent) var(--corner-r),
    transparent var(--corner-r));
}

/* Stato di partenza dell'apertura, armato da uno script sincrono in
   <head> — mai a movimento ridotto. Deve stare lì e non qui: se il
   default del CSS fosse "chiusa", una cornice senza JS resterebbe
   chiusa e muta per sempre. Così invece il default è APERTA, e la
   chiusura esiste solo quando c'è qualcuno pronto ad aprirla. */
.bacco-frame-armed .hero-frame {
  --unfurl: 0;
}

.bacco-frame-armed .hero-kicker,
.bacco-frame-armed .hero-headline,
.bacco-frame-armed .hero-scroll-cue {
  opacity: 0;
}

.hero-kicker {
  margin: 0 0 1.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  /* Cardo ha una spaziatura naturale più aperta del font sans precedente:
     lo stesso letter-spacing di prima (0.36em) risultava eccessivo. */
  letter-spacing: 0.2em;
  /* Compensa lo spazio finale della spaziatura: il testo resta otticamente centrato. */
  text-indent: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 246, 232, 0.96);
  /* Sulla lastra basta un'ombra stretta: tiene i contorni delle lettere
     alla spaziatura ampia, senza l'alone che serviva sul cielo aperto. */
  text-shadow: 0 1px 2px rgba(44, 14, 22, 0.45);
}

.hero-headline {
  /* Il titolo ora nomina tre territori e va a capo dove è scritto:
     la misura si allarga quel tanto che basta perché ogni riga scritta
     stia su una riga sola, senza sciogliere il blocco in prosa. */
  max-width: 30ch;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 560;
  font-size: clamp(2.125rem, 6.2vw, 2.875rem);
  line-height: 1.12;
  color: #fffaf2;
  text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(44, 14, 22, 0.4);
}

@media (max-width: 768px) {
  .hero-plate {
    padding: 2rem 1.6rem 2.25rem;
  }

  /* Qui la cornice deve sporgere meno e il filetto assottigliarsi: su
     uno schermo stretto ogni millimetro tolto ai bordi è larghezza
     restituita al titolo. La corsa di apertura si adatta da sola,
     perché è espressa in percentuale dell'ingombro. */
  .hero-frame {
    --frame-band: 0.35rem;
    --corner-r: 0.85rem;
    --frame-ix: 0.8rem;
    --frame-iy: 0.7rem;
  }

  .hero-scroll-cue {
    margin-top: 3.4rem;
  }

  .hero-kicker {
    margin-bottom: 1.5rem;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }

  /* L'interruzione scritta a mano serve solo al desktop: qui il titolo
     è molto più grande e deve poter andare a capo da solo. */
  .hero-headline br {
    display: none;
  }

  .hero-headline {
    line-height: 1.16;
  }
}

.hero-scroll-cue {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: auto;
  /* Più dei 2.75rem di prima: la pergamena scende 1.35rem sotto la
     lastra e ci posa sotto la sua ombra, quindi il margine dal blocco
     di testo non è più il vuoto che si vede. */
  margin: 4.25rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: white;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.hero-scroll-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-indent: 0.32em; /* compensa lo spazio finale del letter-spacing */
  opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* La riga verticale: piena in alto, dissolta verso il basso. */
.hero-scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0));
}

/* Un segmento luminoso che scende lungo la riga, come un cursore di scroll. */
.hero-scroll-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.95));
  animation: heroScrollTrail 2.2s ease-in-out infinite;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
  opacity: 0.75;
}

.hero-scroll-cue:focus-visible {
  outline: 2px solid white;
  outline-offset: 6px;
  border-radius: 4px;
}

@keyframes heroScrollTrail {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line::after {
    animation: none;
    opacity: 0.6;
  }
}

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