/* Hallmark · macrostructure: Photographic (08) · tone: mediterraneo, luminoso, sobrio · anchor hue: notte di mare + lampone
 * theme: custom (brief di design § 7, palette «Mandorlo vivo») · display: Cormorant Garamond 500 · body: Manrope 400/700
 * genre: editorial · nav: N5 floating pill · footer: Ft5 statement su notte · enrichment: video e render veri, nessuna illustrazione
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * ==========================================================================
 * Lincoln 35 · AV Hospitality — sistema di design v2 (24/09/2026)
 * Scritto da zero per la v2. Il manuale dei componenti è COMPONENTI.md, nella
 * radice del sito: markup, classi, attributi data-*, movimento ridotto.
 *
 * Regole di questo foglio
 * · Colori, raggi, spazi, tipi e tempi solo da token (:root qui sotto).
 * · Si animano solo transform, opacity, filter, clip-path.
 * · Ogni movimento vive sotto html.movimento-attivo: senza JavaScript, con
 *   prefers-reduced-motion o con «Riduci movimento» la pagina è ferma e
 *   completa. html.debug-mostra (?debug=1) porta tutto allo stato finale.
 * · Altezze piene in svh tramite --schermo, mai 100vh né dvh.
 * · Niente backdrop-filter sui dispositivi touch: il vetro diventa un fondo
 *   pieno semitrasparente (regola di Andrea, costa fotogrammi su Safari).
 * ========================================================================== */

/* Il progresso di un gesto legato allo scroll. Safari 24/09/2026: lo scrive
   sempre sito.js (e pagina-progetto.js per i panorami), in tutti i browser.
   Le timeline CSS (animation-timeline) sono state tolte: una proprietà
   personalizzata non si anima sul compositore, quindi non davano niente in
   fluidità, e in Safari 26.0–26.4 sbagliavano il progresso vicino a 0/100 %
   e non ripartivano dopo la cache avanti/indietro (frase spenta, cornice
   chiusa col pannello invisibile). */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ==========================================================================
   1 · TOKEN
   ========================================================================== */
:root {
  /* Palette «Mandorlo vivo» (brief § 7) */
  --carta: #fcf8ef;
  --sabbia: #eee3d0;
  --testo: #302a24;
  --testo-tenue: #5e554c;
  --notte: #0b2e3f;
  --levante: #173a4c;
  --lampone: #b52d58;
  --lampone-vivo: #c8325f;
  --acqua: #8fd3d1;
  --calcarenite: #c9bca0;
  --bruno-scuro: #241d20;
  --bianco: #ffffff;
  --avorio: var(--carta);

  /* Tinte derivate, sempre dai colori qui sopra */
  --avorio-85: rgba(252, 248, 239, .85);
  --avorio-70: rgba(252, 248, 239, .7);
  --avorio-18: rgba(252, 248, 239, .18);
  --avorio-10: rgba(252, 248, 239, .1);
  --notte-90: rgba(11, 46, 63, .9);
  --avorio-06: rgba(252, 248, 239, .06);
  --acqua-18: rgba(143, 211, 209, .18);
  --acqua-40: rgba(143, 211, 209, .4);
  --notte-72: rgba(11, 46, 63, .72);
  --notte-45: rgba(11, 46, 63, .45);
  --testo-14: rgba(48, 42, 36, .14);
  --testo-08: rgba(48, 42, 36, .08);
  --sabbia-60: rgba(238, 227, 208, .6);

  /* Vetro (brief § 7) */
  --vetro-chiaro: rgba(255, 255, 255, .58);
  --vetro-chiaro-bordo: rgba(255, 255, 255, .7);
  --vetro-chiaro-ripiego: rgba(252, 248, 239, .94);
  --vetro-scuro: linear-gradient(160deg, rgba(252, 248, 239, .16), rgba(252, 248, 239, .05));
  --vetro-scuro-bordo: rgba(252, 248, 239, .26);
  --vetro-scuro-tinta: rgba(11, 46, 63, .38);
  --vetro-scuro-ripiego: rgba(11, 46, 63, .82);
  --vetro-scuro-touch: rgba(11, 46, 63, .66);
  --vetro-sfocatura: blur(16px) saturate(1.35);
  --vetro-sfocatura-segno: blur(10px);
  --ombra-vetro: 0 30px 80px -30px rgba(11, 46, 63, .45);
  --ombra-morbida: 0 18px 48px -26px rgba(11, 46, 63, .4);
  --ombra-azione: 0 14px 34px -12px rgba(200, 50, 95, .55);
  --ombra-azione-su: 0 20px 44px -12px rgba(200, 50, 95, .62);

  /* Veli sopra i media: solo levante dal basso, per leggere l'avorio */
  --velo-basso: linear-gradient(to top, rgba(23, 58, 76, .8) 0%, rgba(23, 58, 76, .52) 34%, rgba(23, 58, 76, .14) 62%, rgba(23, 58, 76, 0) 78%);
  --velo-alto: linear-gradient(to bottom, rgba(11, 46, 63, .56) 0%, rgba(11, 46, 63, .2) 14%, rgba(11, 46, 63, 0) 28%);
  --velo-lato: linear-gradient(90deg, rgba(23, 58, 76, .42) 0%, rgba(23, 58, 76, 0) 58%);
  --velo-carta-luogo: linear-gradient(to bottom, rgba(11, 46, 63, .7) 0%, rgba(11, 46, 63, .32) 55%, rgba(11, 46, 63, 0) 100%); /* più pieno: «Scala dei Turchi» sulle nuvole bianche non si leggeva (agente 5) */

  /* Raggi (brief § 7) */
  --r-1: 12px;
  --r-2: 20px;
  --r-3: 28px;
  --r-4: 40px;
  --r-pillola: 999px;

  /* Spazi: scala da 4 px */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --margine: clamp(1rem, 4vw, 3rem);
  --larghezza: 80rem;
  --larghezza-testo: 44rem;
  --sezione: clamp(2.5rem, 5vw, 4.25rem); /* v3.1/v3.2 24/09: Andrea «gli spazi», «tutto overscale» */
  --schermo: min(100svh, 54rem); /* v3.2: le aperture non riempiono più schermi altissimi */
  --testata-alta: 60px;
  --testata-bordo: 12px;
  --segno-bordo: 16px;

  /* Tipografia (brief § 7) */
  --font-titoli: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-testo: "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-apertura: clamp(2.5rem, 4.8vw, 4.75rem); /* v3.2: «tutto overscale» */
  --t-sezione: clamp(2rem, 3.8vw, 3.375rem);
  --t-frase: clamp(1.625rem, 3vw, 2.625rem);
  --t-card: clamp(1.375rem, 2vw, 1.75rem);
  --t-passo: clamp(1.5rem, 2.5vw, 2.125rem);
  --t-numero: clamp(2.5rem, 4.8vw, 4rem);
  --t-numero-piccolo: clamp(1.75rem, 3vw, 2.5rem);
  --t-prezzo: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --t-testo: clamp(1rem, .97rem + .18vw, 1.125rem);
  --t-riga: clamp(1rem, .95rem + .25vw, 1.1875rem);
  --t-piccolo: .875rem;
  --t-occhiello: .75rem;
  --t-bottone: .8125rem;
  --t-segno: 11px;
  --t-nota: 13px;

  /* Movimento — token di transitions-dev (_root.css), tali e quali */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --distance-micro: 4px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;

  /* Ricette transitions-dev usate qui */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-delay: 80ms;
  --resize-dur: 300ms;
  --reel-dur: 1400ms;
  --reel-stagger: 90ms;
  --reel-spin-blur: 3px;
  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --tabs-dur: 250ms;
  --learn-shift: 4px;
  --learn-in: 350ms;

  /* Il gesto di sezione (brief § 8): una curva, reveal a 0,9 s */
  --curva: var(--ease-smooth-out);
  --durata-reveal: 900ms;
  --durata-media: 1200ms;
  --durata-dissolvenza: 700ms;   /* poster → video, cambio di media nella sezione rivela */
  --scaglione: var(--duration-micro);  /* pochi elementi grandi (transitions-polish) */
  --scaglione-riga: 120ms;       /* righe del titolo d'apertura e cascata che lo segue */
  --cascata-inizio: 560ms;
  --distanza-reveal: 32px;
  --distanza-titolo: 24px;

  /* Livelli */
  --z-media: 1;
  --z-contenuto: 2;
  --z-segno: 3;
  --z-barra: 40;
  --z-menu: 60;
  --z-testata: 70;
  --z-consenso: 80;
  --z-salta: 90;
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  color-scheme: light;
  background: var(--carta);
  scroll-padding-top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-4));
}

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100svh;
  background: var(--carta);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-testo);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--lampone-vivo);
  outline-offset: 3px;
}
.su-media :focus-visible,
.sezione--notte :focus-visible,
.pie :focus-visible,
.menu :focus-visible,
.lightbox :focus-visible,
.barra-mobile :focus-visible { outline-color: var(--acqua); }

::selection { background: var(--acqua); color: var(--notte); }

.solo-lettori {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: fixed;
  top: var(--testata-bordo);
  left: var(--testata-bordo);
  z-index: var(--z-salta);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pillola);
  background: var(--notte);
  color: var(--avorio);
  font-weight: 700;
  font-size: var(--t-piccolo);
  text-decoration: none;
  transform: translateY(-200%);
}
.salta:focus-visible { transform: none; }

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

/* ==========================================================================
   3 · IMPAGINAZIONE E TIPOGRAFIA
   ========================================================================== */
.contenitore {
  width: min(100% - 2 * var(--margine), var(--larghezza));
  margin-inline: auto;
}

.sezione { padding-block: var(--sezione); position: relative; }
.sezione--notte { background: var(--notte); color: var(--avorio); }
.sezione--stretta { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sezione--attaccata { padding-top: 0; }

/* Scaglioni senza stili in linea: data-i e data-cascata danno --i */
[data-i="1"], [data-cascata="1"] { --i: 1; }
[data-i="2"], [data-cascata="2"] { --i: 2; }
[data-i="3"], [data-cascata="3"] { --i: 3; }
[data-i="4"], [data-cascata="4"] { --i: 4; }
[data-i="5"], [data-cascata="5"] { --i: 5; }
[data-i="6"] { --i: 6; }
[data-i="7"] { --i: 7; }
[data-i="8"] { --i: 8; }
/* Gruppi di molti elementi piccoli (gli otto chip della consegna): scaglione
   da 40 ms invece di 80 (transitions-polish: 8 × 90 ms era troppo) */
[data-scaglione="breve"] { --scaglione: var(--duration-stagger); }

.testa-sezione {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(2.25rem, 5vw, 4rem);
  min-width: 0;
}
.testa-sezione--centro { justify-items: center; text-align: center; }
.testa-sezione--centro .riga { margin-inline: auto; }

.titolo-apertura {
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: var(--t-apertura);
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.titolo-sezione {
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: var(--t-sezione);
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.titolo-card {
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: var(--t-card);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.titolo-apertura em,
.titolo-sezione em,
.frase em {
  font-style: italic;
  font-weight: 500;
  color: var(--lampone);
}
.su-media em,
.sezione--notte .titolo-sezione em { color: var(--acqua); }

.occhiello {
  display: block;
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: var(--t-occhiello);
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Rientro sospeso: se va a capo (telefono), la seconda riga si allinea al
     testo e non alla lineetta (agente 5, 24/09/2026) */
  padding-left: calc(28px + var(--s-3));
  text-indent: calc(-28px - var(--s-3));
}
.occhiello::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: var(--s-3);
  vertical-align: .3em;
  background: currentColor;
  opacity: .7;
}

.riga {
  font-size: var(--t-riga);
  line-height: 1.5;
  color: var(--testo-tenue);
  max-width: 46ch;
  text-wrap: pretty;
}
.su-media .riga,
.sezione--notte .riga { color: var(--avorio-85); }

.testo { max-width: 52ch; }

/* Il segno su media: testo avorio e il velo lo tiene leggibile */
.su-media { color: var(--avorio); }

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* ==========================================================================
   4 · BOTTONI — pillole (Kiran: riflesso, −3 px, pressione .97)
   Tempi transitions-dev: hover --duration-fast, colori --duration-quick.
   ========================================================================== */
.bottone {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--r-pillola);
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: var(--t-bottone);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-smooth-out),
    box-shadow var(--duration-fast) var(--ease-smooth-out),
    background-color var(--duration-quick) var(--ease-out),
    border-color var(--duration-quick) var(--ease-out),
    color var(--duration-quick) var(--ease-out);
}
.bottone::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -80%;
  width: 50%;
  z-index: -1;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-20deg) translateX(0);
  transition: transform var(--duration-very-slow) var(--ease-smooth-out);
  pointer-events: none;
}
.bottone svg { width: 18px; height: 18px; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .bottone:hover { transform: translateY(-3px); }
  .bottone:hover::before { transform: skewX(-20deg) translateX(420%); }
}
.bottone:active { transform: scale(.97); }

.bottone--azione {
  background: var(--lampone-vivo);
  color: var(--bianco);
  box-shadow: var(--ombra-azione);
}
.bottone--azione:hover { background: var(--lampone); box-shadow: var(--ombra-azione-su); }

.bottone--vetro {
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  border-color: var(--vetro-scuro-bordo);
  color: var(--avorio);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
}
.bottone--vetro:hover { background-color: var(--avorio-18); border-color: var(--avorio-70); }

.bottone--chiaro {
  background: transparent;
  border-color: var(--testo-14);
  color: var(--testo);
}
.bottone--chiaro:hover { background: var(--sabbia); border-color: var(--sabbia); }

.bottone--piccolo { min-height: 40px; padding: 0 1.125rem; font-size: .75rem; }

/* Freccia che scivola al passaggio (transitions-dev 24, learn more) */
.freccia {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--learn-in) var(--ease-smooth-out);
}
a:hover > .freccia,
a:hover .freccia,
button:hover > .freccia { transform: translateX(var(--learn-shift)); }

/* ==========================================================================
   5 · TESTATA — pillola in vetro sospesa (N5), trasparente sul media,
   vetro chiaro dopo 80 px (classe .is-vetro da sito.js)
   ========================================================================== */
.testata {
  position: fixed;
  top: var(--testata-bordo);
  left: var(--testata-bordo);
  right: var(--testata-bordo);
  z-index: var(--z-testata);
  max-width: calc(var(--larghezza) + 2rem);
  height: var(--testata-alta);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-2) 0 var(--s-5);
  border-radius: var(--r-pillola);
  border: 1px solid transparent;
  color: var(--avorio);
  --testata-sottolineo: var(--acqua);
  transition:
    background-color var(--duration-medium) var(--ease-smooth-out),
    border-color var(--duration-medium) var(--ease-smooth-out),
    box-shadow var(--duration-medium) var(--ease-smooth-out),
    color var(--duration-quick) var(--ease-out);
}
.testata.is-vetro {
  background: var(--vetro-chiaro);
  border-color: var(--vetro-chiaro-bordo);
  color: var(--testo);
  box-shadow: var(--ombra-morbida);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  --testata-sottolineo: var(--lampone-vivo);
}
/* Pagine senza media in apertura (Privacy, 404): testata subito solida */
.testata--solida { color: var(--testo); background: var(--vetro-chiaro-ripiego); border-color: var(--testo-08); --testata-sottolineo: var(--lampone-vivo); }

.marchio {
  position: relative;
  display: block;
  flex: none;
  width: 148px;
  height: 37px;
  margin-right: auto;
  border-radius: var(--r-1);
}
.marchio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--duration-medium) var(--ease-smooth-out);
}
.marchio__colore { opacity: 0; }
.testata.is-vetro .marchio__bianco,
.testata--solida .marchio__bianco { opacity: 0; }
.testata.is-vetro .marchio__colore,
.testata--solida .marchio__colore { opacity: 1; }

.nav { display: none; }
.nav__voci { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem); }
.nav__voce,
.lingue__voce {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--t-piccolo);
  text-decoration: none;
  white-space: nowrap;
}
.nav__voce::after,
.lingue__voce::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1.5px;
  background: var(--testata-sottolineo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.nav__voce:hover::after,
.nav__voce[aria-current]::after,
.lingue__voce:hover::after,
.lingue__voce[aria-current]::after { transform: scaleX(1); }

/* Selettore lingua generato da tools/i18n (codici, niente bandiere) */
.lingue { display: none; }
.lingue__voci { display: flex; align-items: center; gap: var(--s-3); }
.testata .lingue { padding-left: var(--s-4); border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 22%, transparent); }
.testata .lingue__voce { font-size: .75rem; letter-spacing: .06em; opacity: .78; }
.testata .lingue__voce[aria-current],
.testata .lingue__voce:hover { opacity: 1; }

.testata__azione { display: none; }

.apri-menu {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--vetro-scuro-bordo);
  border-radius: var(--r-pillola);
  background: var(--notte-45);
  cursor: pointer;
}
.testata.is-vetro .apri-menu { border-color: var(--testo-14); background: transparent; }
.apri-menu__barre,
.apri-menu__barre::before {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.apri-menu__barre { position: relative; transform: translateY(-3px); }
.apri-menu__barre::before { position: absolute; left: 0; top: 6px; }
.apri-menu[aria-expanded="true"] .apri-menu__barre { transform: translateY(0) rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { transform: translateY(-6px) rotate(-90deg); }

@media (min-width: 68.75rem) {
  .nav, .lingue, .testata__azione { display: flex; }
  .testata { gap: clamp(1rem, 2vw, 1.75rem); }
  .apri-menu { display: none; }
}

/* Col menu aperto la testata diventa trasparente sopra il pannello scuro */
html.menu-aperto .testata {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--avorio);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.menu-aperto .marchio__bianco { opacity: 1; }
html.menu-aperto .marchio__colore { opacity: 0; }
html.menu-aperto .apri-menu { border-color: var(--vetro-scuro-bordo); }

/* ==========================================================================
   6 · MENU MOBILE — vetro scuro a tutto schermo, si apre a cerchio dal
   bottone (Kiran). Tempi transitions-dev: apertura --duration-slow (panel
   open), chiusura --duration-medium (panel close); voci a scaglioni di 40 ms
   con la ricetta 18 texts reveal.
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-7);
  padding: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-7)) var(--margine) calc(var(--s-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--notte-90);
  color: var(--avorio);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  clip-path: circle(0 at var(--menu-x, calc(100% - 40px)) var(--menu-y, 42px));
  visibility: hidden;
  transition:
    clip-path var(--duration-medium) var(--ease-smooth-out),
    visibility 0s linear var(--duration-medium);
}
.menu.is-aperto {
  clip-path: circle(150% at var(--menu-x, calc(100% - 40px)) var(--menu-y, 42px));
  visibility: visible;
  transition:
    clip-path var(--duration-slow) var(--ease-smooth-out),
    visibility 0s linear 0s;
}
.menu__voci { display: grid; gap: var(--s-1); }
.menu__voce {
  display: block;
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(var(--distance-medium));
  filter: blur(var(--blur-medium));
  transition:
    opacity var(--duration-very-slow) var(--ease-smooth-out),
    transform var(--duration-very-slow) var(--ease-smooth-out),
    filter var(--duration-very-slow) var(--ease-smooth-out);
}
.menu.is-aperto .menu__voce {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: calc(120ms + var(--i, 0) * var(--duration-stagger));
}
.menu__voce[aria-current] { color: var(--acqua); }
.menu__voce:nth-child(2) { --i: 1; }
.menu__voce:nth-child(3) { --i: 2; }
.menu__voce:nth-child(4) { --i: 3; }
.menu__pie { display: grid; gap: var(--s-6); }
.menu .lingue { display: grid; gap: var(--s-2); }
.lingue__titolo { font-weight: 700; font-size: var(--t-occhiello); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.menu .lingue__voce { min-width: 44px; justify-content: center; font-size: .9375rem; }
.menu .lingue__voce::after { bottom: 8px; background: var(--acqua); }
.menu .bottone { justify-self: start; }

/* ==========================================================================
   7 · BARRA FISSA MOBILE — sotto i 701 px, compare dopo l'hero
   (ricetta transitions-dev 22 toast: 350 ms in, 250 ms out)
   ========================================================================== */
.barra-mobile {
  /* 27/09 19:25, Andrea su iPhone: «il tasto chiama in basso è buggato» — la griglia a due colonne era della v2
     (WhatsApp + Chiama); con un bottone solo lasciava mezza fascia vuota. Ora: pillola compatta, centrata. */
  position: fixed;
  left: 0;
  right: 0;
  width: min(calc(100% - 2 * var(--testata-bordo)), 22rem);
  margin-inline: auto;
  bottom: calc(var(--testata-bordo) + env(safe-area-inset-bottom));
  z-index: var(--z-barra);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-pillola);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--notte-90);
  box-shadow: var(--ombra-vetro);
  opacity: 0;
  transform: translateY(calc(100% + var(--toast-distance))) scale(var(--toast-scale));
  pointer-events: none;
  transition:
    opacity var(--toast-close) var(--ease-smooth-out),
    transform var(--toast-close) var(--ease-smooth-out);
}
.barra-mobile .bottone { min-height: 48px; padding: 0 var(--s-4); justify-content: center; }
.barra-mobile.is-visibile {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity var(--toast-open) var(--ease-smooth-out),
    transform var(--toast-open) var(--ease-smooth-out);
}
html.menu-aperto .barra-mobile,
html.consenso-aperto .barra-mobile { opacity: 0; pointer-events: none; transform: translateY(calc(100% + var(--toast-distance))); }
@media (min-width: 701px) {
  .barra-mobile { display: none; }
}

/* ==========================================================================
   8 · CONSENSO — toast in vetro in basso a sinistra, due bottoni uguali
   (transitions-dev 22 toast). Non carica niente: la scelta resta nel browser.
   ========================================================================== */
.consenso {
  position: fixed;
  left: var(--testata-bordo);
  right: var(--testata-bordo);
  bottom: calc(var(--testata-bordo) + env(safe-area-inset-bottom));
  z-index: var(--z-consenso);
  max-width: 25rem;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-2);
  border: 1px solid var(--vetro-chiaro-bordo);
  background: var(--vetro-chiaro);
  color: var(--testo);
  box-shadow: var(--ombra-vetro);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  font-size: var(--t-piccolo);
  line-height: 1.5;
}
.consenso[hidden] { display: none; }
.consenso__pulsanti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.consenso__pulsanti .bottone { min-height: 44px; }
.movimento-attivo .consenso {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  transition:
    opacity var(--toast-close) var(--ease-smooth-out),
    transform var(--toast-close) var(--ease-smooth-out),
    filter var(--toast-close) var(--ease-smooth-out);
}
.movimento-attivo .consenso.is-open {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity var(--toast-open) var(--ease-smooth-out),
    transform var(--toast-open) var(--ease-smooth-out),
    filter var(--toast-open) var(--ease-smooth-out);
}

/* ==========================================================================
   9 · MEDIA E SEGNO
   .media è la figura (immagine o video) a riempimento; il segno è la sua
   figcaption, pillola in vetro scuro in basso a sinistra (brief § 9).
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--levante);
}
.media > picture,
.media__immagine,
.media__poster,
.media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media picture img,
.media__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fuoco, 50% 50%);
}
.media__poster { z-index: 1; transition: opacity var(--durata-dissolvenza) var(--ease-smooth-out); }
.media.video-in-corso .media__poster { opacity: 0; }
.media__video { z-index: 0; }

.media--arrotondata { border-radius: var(--r-3); }

/* Il bottone che apre la lightbox copre tutta la figura */
.media__apri {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.media__apri:focus-visible { outline-offset: -4px; }
.media__apri > picture { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Punto di fuoco del ritaglio (object-position), per figura */
.media--fuoco-alto { --fuoco: 50% 18%; }
.media--fuoco-facciata { --fuoco: 50% 58%; }
.media--fuoco-porto { --fuoco: 50% 30%; }

/* ---- il segno ---- */
.segno {
  position: absolute;
  left: var(--segno-bordo);
  bottom: var(--segno-bordo);
  z-index: var(--z-segno);
  max-width: calc(100% - 2 * var(--segno-bordo));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-2);
  row-gap: 2px;
  min-height: 24px;
  padding: 5px 11px;
  border: 0;
  border-radius: var(--r-1);
  background: var(--notte-45);
  color: var(--avorio);
  -webkit-backdrop-filter: var(--vetro-sfocatura-segno);
  backdrop-filter: var(--vetro-sfocatura-segno);
  font-family: var(--font-testo);
  font-size: var(--t-segno);
  font-weight: 600;
  line-height: 14px;
  letter-spacing: .12em;
  pointer-events: auto;
}
.segno__breve {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
.segno__lungo,
.segno__nota { display: none; }

/* Con JavaScript il segno si apre: card resize (01) in clip-path, testo con
   i tempi del tooltip (17). --l-breve la misura sito.js. */
.js .segno { width: max-content; }
.js .segno__lungo,
.js .segno__nota { display: inline; }
.js .segno__lungo {
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 600;
}
.js .segno__nota {
  color: var(--acqua);
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.js .segno__nota::before { content: "→ "; text-decoration: none; }
.js .segno.is-misurato {
  clip-path: inset(calc(100% - 24px) calc(100% - var(--l-breve, 100%)) 0 0 round var(--r-1));
  transition: clip-path var(--duration-quick) var(--ease-smooth-out);
}
.js .segno.is-misurato .segno__breve {
  position: absolute;
  left: 11px;
  bottom: 5px;
  transition: opacity var(--tt-out-dur) var(--ease-out);
}
.js .segno.is-misurato .segno__lungo,
.js .segno.is-misurato .segno__nota {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tt-out-dur) var(--ease-out), visibility 0s linear var(--tt-out-dur);
}
/* Collaudo v4 · agente A · 27/09/2026 — il segno si apre col fuoco solo da tastiera
   (:focus-visible), non più con :focus-within. Col tocco in Chromium (Android) il bottone
   prendeva il fuoco, il segno si allargava prima del rilascio e il clic finiva sul
   contenitore: is-aperto e aria-expanded restavano spenti e il segno restava aperto finché
   non si toccava altrove; col mouse restava aperto dopo il clic. Regole separate: un
   browser senza :has() scarta solo la sua riga (ripiego con :focus-within più sotto). */
.js .segno.is-misurato.is-aperto { clip-path: inset(0 0 0 0 round var(--r-1)); transition-duration: var(--resize-dur); }
.js .segno.is-misurato:has(:focus-visible) { clip-path: inset(0 0 0 0 round var(--r-1)); transition-duration: var(--resize-dur); }
@media (hover: hover) and (pointer: fine) {
  .js .segno.is-misurato:hover { clip-path: inset(0 0 0 0 round var(--r-1)); transition-duration: var(--resize-dur); }
  .js .segno.is-misurato:hover .segno__breve { opacity: 0; }
  .js .segno.is-misurato:hover .segno__lungo,
  .js .segno.is-misurato:hover .segno__nota {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--tt-in-dur) var(--ease-out) var(--tt-delay), visibility 0s linear 0s;
  }
}
.js .segno.is-misurato.is-aperto .segno__breve { opacity: 0; }
.js .segno.is-misurato:has(:focus-visible) .segno__breve { opacity: 0; }
.js .segno.is-misurato.is-aperto .segno__lungo,
.js .segno.is-misurato.is-aperto .segno__nota {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--tt-in-dur) var(--ease-out) var(--tt-delay), visibility 0s linear 0s;
}
.js .segno.is-misurato:has(:focus-visible) .segno__lungo,
.js .segno.is-misurato:has(:focus-visible) .segno__nota {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--tt-in-dur) var(--ease-out) var(--tt-delay), visibility 0s linear 0s;
}
@supports not selector(:has(*)) {
  .js .segno.is-misurato:focus-within { clip-path: inset(0 0 0 0 round var(--r-1)); transition-duration: var(--resize-dur); }
  .js .segno.is-misurato:focus-within .segno__breve { opacity: 0; }
  .js .segno.is-misurato:focus-within .segno__lungo,
  .js .segno.is-misurato:focus-within .segno__nota { opacity: 1; visibility: visible; transition: opacity var(--tt-in-dur) var(--ease-out) var(--tt-delay), visibility 0s linear 0s; }
}
/* Collaudo v4 · agente A · 27/09/2026 — la parola breve era un bersaglio di 14 px: ora
   tutta la pillola visibile (24 px) apre il segno. Aperto, la parola breve non intercetta
   più i tocchi (li prende la nota; un tocco sul resto lo chiude, sito.js § 7). */
.js .segno.is-misurato .segno__breve::before { content: ""; position: absolute; inset: -5px -11px; }
.js .segno.is-misurato.is-aperto .segno__breve { pointer-events: none; }
.segno__breve:focus-visible { outline: none; }
.segno:has(.segno__breve:focus-visible),
.segno:has(.segno__nota:focus-visible) { box-shadow: inset 0 0 0 2px var(--acqua); }
.segno__nota:focus-visible { outline: none; }

/* Più segni in una figura (una clip che cambia): uno solo si vede */
.segno__stato[hidden] { display: none; }
.segno__stato { display: contents; }

/* Segno spostato in alto dove in basso c'è già un pannello */
.segno--alto { bottom: auto; top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-3)); }

/* Veli */
.velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--velo-alto), var(--velo-basso);
}
.apertura .velo,
.scena .velo { background: var(--velo-alto), var(--velo-lato), var(--velo-basso); }

/* ==========================================================================
   10 · APERTURA — media a tutto schermo col titolo sopra
   (aceternity Hero con video + originkit stagger-text-rise / mask-text-reveal)
   ========================================================================== */
.apertura {
  position: relative;
  min-height: var(--schermo);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--notte);
  color: var(--avorio);
}
.apertura > .media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.apertura__testo {
  position: relative;
  z-index: var(--z-contenuto);
  display: grid;
  gap: var(--s-5);
  padding-top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-7));
  padding-bottom: clamp(4rem, 9svh, 6rem);
  min-width: 0;
}
.apertura__testo .riga { max-width: 40ch; }
.apertura__testo .titolo-apertura { text-shadow: 0 2px 36px rgba(11, 46, 63, .28); }
.apertura--corta { min-height: calc(var(--schermo) * .8); }
.apertura--render .media picture img { transform: scale(1.08); }
.movimento-attivo .apertura--render .media picture img { animation: zoom-lento 10s var(--ease-smooth-out) forwards; }
@keyframes zoom-lento { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Due clip in dissolvenza (home): quella attiva sta sopra e si accende */
.media--sequenza .media__clip {
  opacity: 0;
  transition: opacity var(--durata-media) var(--ease-in-out);
}
.media--sequenza .media__clip.is-attiva { opacity: 1; z-index: 1; }
.media--sequenza .media__poster { z-index: 2; }

/* Titolo che sale riga per riga da una maschera: sito.js avvolge le parole
   in .parola > span e dà a ogni riga il suo indice (--riga). Stagger 30 ms
   fra parole (stagger-text-rise), 120 ms fra righe, maschera dal basso
   (mask-text-reveal, bottom-to-top). */
.parola {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.parola > span { display: inline-block; }
.movimento-attivo .titolo-sale .parola > span {
  transform: translateY(108%);
  animation: sale var(--durata-reveal) var(--ease-smooth-out) forwards;
  animation-delay: calc(200ms + var(--riga, 0) * var(--scaglione-riga) + var(--k, 0) * var(--duration-stagger));
}
@keyframes sale { to { transform: translateY(0); } }
.movimento-attivo .titolo-sale:not(.is-diviso) { opacity: 0; }

/* Cascata dell'apertura (Kiran: occhiello, riga e bottoni dopo il titolo) */
.movimento-attivo .apertura [data-cascata] {
  opacity: 0;
  transform: translateY(var(--distance-medium));
  filter: blur(var(--blur-medium));
  animation: cascata var(--durata-reveal) var(--ease-smooth-out) forwards;
  animation-delay: calc(var(--cascata-inizio) + var(--i, 0) * var(--scaglione-riga));
}
@keyframes cascata { to { opacity: 1; transform: none; filter: none; } }

/* ==========================================================================
   11 · NUMERI — barra in vetro (home) e fascia a cavallo con contatori
   (landing, transitions-dev 26 spinning counter). Niente prezzi qui.
   ========================================================================== */
.numeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.numeri__voce { display: flex; flex-direction: column-reverse; gap: var(--s-1); min-width: 0; }
.numeri__cifra {
  font-family: var(--font-titoli);
  font-weight: 500;
  line-height: .9;
  font-variant-numeric: lining-nums tabular-nums;
}
.numeri__etichetta {
  font-weight: 700;
  font-size: var(--t-occhiello);
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Barra dell'apertura in home */
.numeri--barra {
  --vetro-scuro-tinta: rgba(11, 46, 63, .3);
  position: absolute;
  z-index: var(--z-contenuto);
  right: var(--margine);
  bottom: var(--s-6);
  width: min(100% - 2 * var(--margine), 30rem);
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  color: var(--avorio);
  box-shadow: var(--ombra-vetro);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
}
.numeri--barra .numeri__cifra { font-size: var(--t-numero-piccolo); }
.numeri--barra .numeri__etichetta { color: var(--avorio-85); letter-spacing: .12em; font-size: .6875rem; }

/* Fascia a cavallo del bordo dell'hero (landing § 2) */
.fascia-numeri {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * clamp(3.5rem, 7vw, 5rem));
}
.numeri--fascia {
  gap: var(--s-5);
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3.5rem);
  border-radius: var(--r-3);
  border: 1px solid var(--vetro-chiaro-bordo);
  background: var(--vetro-chiaro);
  box-shadow: var(--ombra-vetro);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  color: var(--notte);
}
.numeri--fascia .numeri__cifra { font-size: var(--t-numero); color: var(--notte); }
.numeri--fascia .numeri__etichetta { color: var(--testo-tenue); }
.numeri--fascia .numeri__voce + .numeri__voce { border-left: 1px solid var(--testo-14); padding-left: var(--s-5); }

/* Rulli del contatore (26): li costruisce sito.js, aria-hidden */
.rullo { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.rullo__colonna {
  position: relative;
  height: 1em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.rullo__striscia { display: flex; flex-direction: column; will-change: transform, filter; }
.rullo__striscia > span { height: 1em; display: block; text-align: center; }
.rullo.is-girato .rullo__striscia {
  transform: translateY(calc(var(--arrivo) * -1em));
  transition: transform var(--reel-dur) var(--reel-ease) calc(var(--c, 0) * var(--reel-stagger));
  animation: rullo-sfoca var(--reel-dur) var(--reel-ease) calc(var(--c, 0) * var(--reel-stagger)) both;
}
@keyframes rullo-sfoca {
  0% { filter: blur(0); }
  12% { filter: blur(var(--reel-spin-blur)); }
  70%, 100% { filter: blur(0); }
}

/* ==========================================================================
   12 · MANIFESTO — frase che si accende allo scroll (originkit
   scroll-text-highlight, rifatto a mano: il componente è a pagamento)
   ========================================================================== */
.manifesto { padding-block: clamp(6rem, 16vw, 12rem); }
.frase {
  max-width: 28ch;
  margin-inline: auto;
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: var(--t-frase);
  line-height: 1.12;
  letter-spacing: -.012em;
  text-align: center;
  text-wrap: balance;
  color: var(--testo);
}
.frase .parola-luce { transition: opacity var(--duration-fast) var(--ease-linear); }
.movimento-attivo .frase.is-divisa .parola-luce {
  opacity: clamp(.16, calc(var(--p) * (var(--n, 12) + 3) - var(--k, 0)), 1);
}
/* Safari 24/09/2026: qui c'era la timeline CSS (view(), entry 70 % →
   cover 58 %); la stessa corsa la calcola ora sito.js (progressoFrase). */

/* ==========================================================================
   13 · CORNICE CHE SI APRE — riquadro a 40 px di raggio che diventa tutto
   schermo, pannello di vetro che sale (aceternity Container Scroll
   Animation, portata in clip-path: niente rotazione 3D sui render)
   ========================================================================== */
.cornice { position: relative; }
.cornice__palco {
  position: relative;
  height: var(--schermo);
  overflow: hidden;
}
.cornice__media { position: absolute; inset: 0; border-radius: 0; }
.cornice__pannello {
  position: absolute;
  z-index: var(--z-contenuto);
  left: var(--margine);
  bottom: calc(var(--segno-bordo) + 24px + var(--s-6));
  width: min(100% - 2 * var(--margine), 52rem);
}

.movimento-attivo .cornice { height: calc(var(--schermo) * 2.3); }
.movimento-attivo .cornice__palco { position: sticky; top: 0; }
.movimento-attivo .cornice__media {
  --q: clamp(0, calc(var(--p) / .62), 1);
  clip-path: inset(calc((1 - var(--q)) * 13svh) calc((1 - var(--q)) * 11vw) round calc((1 - var(--q)) * var(--r-4)));
}
.movimento-attivo .cornice__media picture img { transform: scale(calc(1.14 - var(--q) * .14)); }
.movimento-attivo .cornice__media .segno { opacity: var(--q); }
.movimento-attivo .cornice__pannello {
  --w: clamp(0, calc((var(--p) - .5) / .3), 1);
  opacity: var(--w);
  transform: translateY(calc((1 - var(--w)) * 56px));
}
/* Safari 24/09/2026: qui c'era la view-timeline --cornice (contain 0 → 100 %);
   --p lo scrive sito.js (§ 12) con la stessa corsa. */

/* ==========================================================================
   14 · PANNELLO DI VETRO su media (vendita, luogo, chiusura)
   ========================================================================== */
.pannello {
  display: grid;
  gap: var(--s-5);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
  border-radius: var(--r-3);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  color: var(--avorio);
  box-shadow: var(--ombra-vetro);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  min-width: 0;
}
.pannello .riga { color: var(--avorio-85); }
.pannello .titolo-sezione { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.pannello__piede {
  font-size: var(--t-piccolo);
  color: var(--avorio-70);
  letter-spacing: .02em;
}

/* Scena: media a tutto schermo con un pannello sopra */
.scena {
  position: relative;
  min-height: var(--schermo);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--notte);
  color: var(--avorio);
}
.scena > .media { position: absolute; inset: 0; z-index: 0; }
.scena__contenuto {
  position: relative;
  z-index: var(--z-contenuto);
  padding-block: calc(var(--testata-alta) + var(--s-8)) calc(var(--s-8) + 24px);
}
.scena__contenuto .pannello { max-width: 38rem; }
.scena--basso { align-items: end; }

/* I quattro canali di Danesi */
.canali {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.canali .bottone { width: 100%; padding-inline: var(--s-4); }
@media (min-width: 48rem) {
  .canali { grid-template-columns: repeat(4, max-content); }
  .canali .bottone { width: auto; padding-inline: 1.5rem; }
}

/* ==========================================================================
   15 · BENTO — render grandi in griglia (aceternity Bento Grid / Layout
   Grid; al passaggio le altre si abbassano come in Focus Cards)
   ========================================================================== */
.bento {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
}
.bento__voce {
  position: relative;
  min-height: 18rem;
  border-radius: var(--r-3);
  overflow: hidden;
}
.bento__voce > .media { position: absolute; inset: 0; border-radius: inherit; }
.bento__voce .media picture img {
  transition:
    transform var(--duration-very-slow) var(--ease-smooth-out),
    filter var(--duration-medium) var(--ease-smooth-out);
}
@media (hover: hover) and (pointer: fine) {
  .bento__voce:hover .media picture img { transform: scale(1.04); }
  .bento:has(.bento__voce:hover) .bento__voce:not(:hover) .media picture img { filter: brightness(.78) saturate(.9); }
}

/* Etichetta-collegamento in vetro in alto a sinistra (Home § 4) */
.bento__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; text-decoration: none; }
.bento__titolo {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4) 0 var(--s-5);
  border-radius: var(--r-pillola);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  color: var(--avorio);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.bento__link:hover .bento__titolo { transform: translateX(var(--s-2)); }
.bento__link:focus-visible { outline-offset: -4px; }

@media (min-width: 56.25rem) {
  .bento--3 {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: min(88svh, 58rem);
  }
  .bento--3 .bento__voce:first-child { grid-row: span 2; }
  .bento--5 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: min(84svh, 54rem);
  }
  .bento--5 .bento__voce:first-child { grid-row: span 2; }
  .bento__voce { min-height: 0; }
}
@media (min-width: 40rem) and (max-width: 56.24rem) {
  .bento--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--5 .bento__voce:first-child { grid-column: span 2; min-height: 24rem; }
}

/* ==========================================================================
   16 · NASTRO dei luoghi sopra un video (originkit curvedmarquee, in
   versione dritta e fatto a mano: il componente è a pagamento)
   ========================================================================== */
.nastro-scena { min-height: calc(var(--schermo) * .9); align-items: end; }
.nastro-scena .scena__contenuto { width: 100%; padding-bottom: calc(var(--s-9) + 24px); }
.nastro { overflow: hidden; }
.movimento-attivo .nastro {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.nastro__pista { display: flex; }
.movimento-attivo .nastro__pista { width: max-content; }
.nastro__voci { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-4); }
.nastro__voce {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--avorio);
}
.nastro__voce::after {
  content: "";
  width: .18em;
  height: .18em;
  border-radius: 50%;
  background: var(--acqua);
  opacity: .9;
  margin-inline: .35em;
}
.nastro__voci[aria-hidden="true"] { display: none; }
.nastro__riga { margin-top: var(--s-5); text-align: center; margin-inline: auto; }
.movimento-attivo .nastro__voci { flex-wrap: nowrap; justify-content: flex-start; gap: 0; }
.movimento-attivo .nastro__voci[aria-hidden="true"] { display: flex; }
.movimento-attivo .nastro__pista { animation: nastro 46s linear infinite; }
.movimento-attivo .nastro:hover .nastro__pista { animation-play-state: paused; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* ==========================================================================
   17 · CONFRONTO PRIMA / DOPO a tutto schermo (originkit compare-slider,
   aceternity Compare): maniglia in vetro, mouse, touch, tastiera
   ========================================================================== */
.confronto {
  position: relative;
  height: clamp(24rem, 66vw, var(--schermo));
  --pos: 50%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.confronto > .media { position: absolute; inset: 0; }
.confronto__dopo { z-index: 1; clip-path: inset(0 0 0 var(--pos)); }
.confronto__linea {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--avorio);
  box-shadow: 0 0 24px rgba(11, 46, 63, .35);
  pointer-events: none;
}
.confronto__maniglia {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: var(--pos);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  color: var(--avorio);
  box-shadow: var(--ombra-vetro);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  cursor: ew-resize;
  touch-action: none;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.confronto__maniglia svg { width: 28px; height: 28px; }
.confronto__maniglia:hover,
.confronto.is-trascinato .confronto__maniglia { transform: scale(1.06); }
.confronto__maniglia[hidden] { display: none; }
.confronto__lato {
  position: absolute;
  z-index: 3;
  top: var(--s-5);
  padding: 6px 14px;
  border-radius: var(--r-pillola);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--notte-45);
  color: var(--avorio);
  -webkit-backdrop-filter: var(--vetro-sfocatura-segno);
  backdrop-filter: var(--vetro-sfocatura-segno);
  font-weight: 700;
  font-size: var(--t-occhiello);
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.confronto__lato--prima { left: var(--s-5); }
.confronto__lato--dopo { right: var(--s-5); }
.confronto.vicino-sinistra .confronto__lato--prima,
.confronto.vicino-destra .confronto__lato--dopo { opacity: 0; }

/* ==========================================================================
   18 · GALLERIA ORIZZONTALE agganciata allo scroll (originkit
   smooth-scroll-slider + pin in CSS sticky, niente GSAP). Senza pin è uno
   scorrimento a dito con snap.
   ========================================================================== */
.galleria-o { position: relative; }
.galleria-o__cornice { padding-block: var(--sezione); }
.galleria-o__finestra {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margine);
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.galleria-o__finestra::-webkit-scrollbar { display: none; }
.galleria-o__pista {
  display: flex;
  gap: var(--s-3);
  width: max-content;
  padding-inline: var(--margine);
}
.galleria-o__voce {
  position: relative;
  flex: none;
  height: clamp(20rem, 62svh, 40rem);
  aspect-ratio: 1.49;
  border-radius: var(--r-3);
  overflow: hidden;
  scroll-snap-align: start;
}
.galleria-o__voce--43 { aspect-ratio: 4 / 3; }
.galleria-o__voce > .media { position: absolute; inset: 0; }
@media (max-width: 56.24rem) {
  .galleria-o__voce { height: auto; width: 84vw; }
}

/* Modalità agganciata: la mette sito.js (desktop, movimento attivo) */
.galleria-o.is-agganciata .galleria-o__cornice {
  position: sticky;
  top: 0;
  height: var(--schermo);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--s-6);
  padding-block: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-6)) var(--s-7);
  overflow: hidden;
}
.galleria-o.is-agganciata .testa-sezione { margin-bottom: 0; }
.galleria-o.is-agganciata .galleria-o__finestra { overflow: visible; scroll-snap-type: none; padding: 0; min-width: 0; }
.galleria-o.is-agganciata .galleria-o__pista { will-change: transform; align-items: center; height: 100%; }
.galleria-o.is-agganciata .galleria-o__voce { height: min(100%, 38rem); scroll-snap-align: none; }
.galleria-o.is-agganciata .galleria-o__voce .media picture img,
.galleria-o.is-agganciata .galleria-o__voce .media__poster img { filter: brightness(var(--luce, 1)); }

/* ==========================================================================
   19 · RIVELA — sezione notte, media fisso che cambia e righe che
   scorrono (aceternity Sticky Scroll Reveal)
   ========================================================================== */
.rivela {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
.rivela__media {
  position: sticky;
  top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-3));
  z-index: 2;
  height: min(46svh, 26rem);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--levante);
  box-shadow: var(--ombra-vetro);
}
.rivela__voce {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--durata-dissolvenza) var(--ease-smooth-out);
}
.rivela__voce.is-attiva { opacity: 1; z-index: 1; }
.rivela__passi { display: grid; }
.rivela__passo {
  min-height: 52svh;
  display: grid;
  align-content: center;
  gap: var(--s-3);
  padding-block: var(--s-6);
  opacity: .28;
  transition: opacity var(--duration-very-slow) var(--ease-smooth-out);
}
.rivela__passo.is-attivo { opacity: 1; }
.rivela__numero {
  font-weight: 700;
  font-size: var(--t-occhiello);
  letter-spacing: .18em;
  color: var(--acqua);
}
.rivela__titolo {
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: var(--t-passo);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 18ch;
}
.prezzo {
  font-family: var(--font-testo);
  font-weight: 600;
  font-size: var(--t-prezzo);
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.005em;
}
.prezzo--grande { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); color: var(--avorio); }
.richiamo {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: var(--s-1);
  border-radius: var(--r-pillola);
  border: 1px solid currentColor;
  font-size: .6875rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: .35em;
  opacity: .85;
}

@media (min-width: 56.25rem) {
  .rivela { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .rivela__media { height: min(76svh, 44rem); top: calc((var(--schermo) - min(76svh, 44rem)) / 2 + 20px); }
  .rivela__passo { min-height: 78svh; }
  .rivela__passo:first-child { min-height: 64svh; align-content: start; padding-top: 18svh; }
  .rivela__passo:last-child { min-height: 64svh; align-content: end; padding-bottom: 18svh; }
}

/* Senza movimento: niente sticky, i quattro media in griglia, righe piene */
html:not(.movimento-attivo) .rivela__media {
  position: relative;
  top: auto;
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
html:not(.movimento-attivo) .rivela__voce {
  position: relative;
  inset: auto;
  opacity: 1;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-2);
}
html:not(.movimento-attivo) .rivela__passo { min-height: 0; opacity: 1; padding-block: var(--s-4); }
@media (min-width: 56.25rem) {
  html:not(.movimento-attivo) .rivela { align-items: center; }
}

/* ==========================================================================
   20 · TIPI DI CASA — due card di vetro su carta, chip della consegna base
   ========================================================================== */
.tipi {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .tipi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
.carta-vetro {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  border-radius: var(--r-3);
  border: 1px solid var(--vetro-chiaro-bordo);
  background: var(--vetro-chiaro);
  box-shadow: var(--ombra-morbida);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
  min-width: 0;
}
.carta-vetro .occhiello { color: var(--testo-tenue); }
.carta-vetro .prezzo { padding-top: var(--s-4); border-top: 1px solid var(--testo-14); color: var(--notte); }
.sub {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pillola);
  background: var(--notte);
  color: var(--avorio);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.avvertenza {
  margin-top: var(--s-4);
  font-size: var(--t-nota);
  line-height: 1.55;
  color: var(--testo-tenue);
}
.sezione--notte .avvertenza { color: var(--avorio-70); }

.consegna { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: var(--s-5); }
.consegna__titolo { font-weight: 700; font-size: var(--t-occhiello); letter-spacing: .18em; text-transform: uppercase; color: var(--testo-tenue); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-1);
  background: var(--sabbia);
  color: var(--testo);
  font-weight: 600;
  font-size: var(--t-piccolo);
  line-height: 1.3;
}
.consegna__fuori { font-size: var(--t-piccolo); color: var(--testo-tenue); max-width: 60ch; }

/* ==========================================================================
   21 · CAROSELLO di card a tutta altezza (aceternity Apple Cards Carousel +
   Focus Cards): scorrimento orizzontale con snap, frecce ≥ 44 px
   ========================================================================== */
.carosello { position: relative; }
.carosello__finestra {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margine);
  scrollbar-width: none;
}
.carosello__finestra::-webkit-scrollbar { display: none; }
.carosello__finestra:focus-visible { outline-offset: -4px; }
.carosello__pista {
  display: flex;
  gap: var(--s-3);
  width: max-content;
  padding: var(--s-2) var(--margine) var(--s-4);
}
.carta-luogo {
  position: relative;
  flex: none;
  width: clamp(16.5rem, 76vw, 23rem);
  height: clamp(26rem, 70svh, 40rem);
  border-radius: var(--r-3);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--levante);
  transition: filter var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out);
}
.carta-luogo > .media { position: absolute; inset: 0; }
.carta-luogo__nome {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--s-5) var(--s-5) var(--s-8);
  background: var(--velo-carta-luogo);
  color: var(--avorio);
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  pointer-events: none;
  text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) {
  .carosello__pista:has(.carta-luogo:hover) .carta-luogo:not(:hover) { filter: brightness(.72) saturate(.85); transform: scale(var(--scale-small)); }
}
.carosello__comandi {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.carosello__freccia {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  color: var(--avorio);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-out);
}
.carosello__freccia svg { width: 20px; height: 20px; }
.carosello__freccia:hover { transform: translateY(-2px); }
.carosello__freccia:disabled { opacity: .35; cursor: default; transform: none; }

/* Entrata a scaglioni (Apple Cards: y 20 → 0, 0,5 s) */
.movimento-attivo .carosello:not(.is-visibile) .carta-luogo { opacity: 0; transform: translateY(20px); }
.movimento-attivo .carosello.is-visibile .carta-luogo {
  animation: carta-entra var(--duration-very-slow) var(--ease-smooth-out) both;
  animation-delay: calc(var(--i, 0) * var(--scaglione));
}
@keyframes carta-entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.carta-luogo:nth-child(2) { --i: 1; }
.carta-luogo:nth-child(3) { --i: 2; }
.carta-luogo:nth-child(4) { --i: 3; }
.carta-luogo:nth-child(5) { --i: 4; }
.carta-luogo:nth-child(6) { --i: 5; }

/* ==========================================================================
   22 · NOTA — un blocco solo prima del piè di pagina (brief § 9)
   ========================================================================== */
.nota {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem); /* v3.1 */
  border-top: 1px solid var(--testo-08);
  background: var(--carta);
  color: var(--testo-tenue);
  font-size: var(--t-nota);
  line-height: 1.55;
}
.nota__titolo {
  margin-bottom: var(--s-5);
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: var(--t-occhiello);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo);
}
.nota__righe { display: grid; gap: var(--s-3); }
@media (min-width: 56.25rem) {
  .nota__righe { display: block; columns: 2; column-gap: var(--s-8); }
  .nota__righe > li { break-inside: avoid; margin-bottom: var(--s-3); }
}
.nota__righe > li {
  position: relative;
  padding-left: 2rem;
  scroll-margin-top: calc(var(--testata-alta) + var(--testata-bordo) + var(--s-6));
}
.nota__righe > li::before {
  content: counter(list-item);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--testo-14);
  color: var(--testo);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.nota__righe > li:target { color: var(--testo); }
.nota__righe > li:target::before { background: var(--lampone-vivo); border-color: var(--lampone-vivo); color: var(--bianco); }
.nota__crediti { display: grid; gap: var(--s-1); margin-top: var(--s-2); }
.nota a { color: var(--testo); }

/* ==========================================================================
   23 · PIÈ DI PAGINA — fondo notte (Ft5)
   ========================================================================== */
.pie {
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--s-7);
  background: var(--notte);
  color: var(--avorio);
  font-size: var(--t-piccolo);
}
.pie__griglia {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .pie__griglia { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.pie__marchio { display: block; width: 180px; height: 45px; }
.pie__marchio img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.pie__indirizzo { margin-top: var(--s-4); color: var(--avorio-70); }
.pie__titolo { margin-bottom: var(--s-3); font-weight: 700; font-size: var(--t-occhiello); letter-spacing: .18em; text-transform: uppercase; color: var(--acqua); }
.pie__elenco { display: grid; gap: 2px; }
.pie__elenco a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--avorio);
  text-decoration: none;
  white-space: nowrap;
}
.pie__elenco a:hover { text-decoration: underline; }
.pie__legale {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--avorio-18);
  color: var(--avorio-70);
}
.pie__legale .pie__elenco { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.movimento-bottone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--avorio-18);
  border-radius: var(--r-pillola);
  background: transparent;
  color: var(--avorio);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out);
}
.movimento-bottone:hover { background: var(--avorio-10); border-color: var(--avorio-70); }
.movimento-bottone[aria-pressed="true"] { border-color: var(--acqua); color: var(--acqua); }
.movimento-bottone[hidden] { display: none; }
@media (max-width: 700px) {
  .pie { padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom)); }   /* 27/09: via la barra fissa, via lo spazio */
}

/* ==========================================================================
   24 · LIGHTBOX — <dialog> modale (transitions-dev 06 modal), frecce
   ≥ 44 px, swipe, contatore, Esc; il segno resta sull'immagine
   ========================================================================== */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--avorio);
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgba(11, 46, 63, .94);
  opacity: 0;
  transition: opacity var(--modal-open-dur) var(--ease-smooth-out);
}
.lightbox.is-open::backdrop { opacity: 1; }
.lightbox.is-closing::backdrop { opacity: 0; transition-duration: var(--modal-close-dur); }
.lightbox__telaio {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(4.5rem, 8vh, 6rem) clamp(1rem, 7vw, 6.5rem);
  transform: scale(var(--modal-scale));
  opacity: 0;
  transition:
    transform var(--modal-open-dur) var(--ease-smooth-out),
    opacity var(--modal-open-dur) var(--ease-smooth-out);
}
.lightbox.is-open .lightbox__telaio { transform: scale(1); opacity: 1; }
.lightbox.is-closing .lightbox__telaio {
  transform: scale(var(--modal-scale));
  opacity: 0;
  transition-duration: var(--modal-close-dur);
}
.lightbox__figura {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-2);
  overflow: hidden;
  touch-action: pan-y;
  transition: opacity var(--duration-quick) var(--ease-in-out);
}
.lightbox__figura.is-cambio { opacity: 0; }
.lightbox__figura picture img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 2 * clamp(1rem, 7vw, 6.5rem));
  max-height: calc(100svh - 2 * clamp(4.5rem, 8vh, 6rem));
  object-fit: contain;
}
.lightbox__contatore {
  position: absolute;
  top: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--r-pillola);
  background: var(--avorio-10);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.lightbox__bottone {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  color: var(--avorio);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-out);
}
.lightbox__bottone:hover { background-color: var(--avorio-18); }
.lightbox__bottone svg { width: 22px; height: 22px; }
.lightbox__chiudi { top: var(--s-4); right: var(--s-4); }
.lightbox__prec { left: var(--s-4); top: 50%; margin-top: -26px; }
.lightbox__succ { right: var(--s-4); top: 50%; margin-top: -26px; }
@media (max-width: 40rem) {
  .lightbox__prec, .lightbox__succ { top: auto; bottom: var(--s-4); margin-top: 0; }
  .lightbox__telaio { padding-inline: var(--s-3); }
  .lightbox__figura picture img { max-width: calc(100vw - 1.5rem); }
}

/* ==========================================================================
   25 · COMPONENTI PRONTI PER LE ALTRE PAGINE (agenti 3 e 4)
   Fisarmonica (transitions-dev 21), schede a pillola (16), tabella.
   ========================================================================== */
.fisarmonica { border-top: 1px solid var(--testo-14); }
.fisarmonica__voce { border-bottom: 1px solid var(--testo-14); }
.fisarmonica__testa {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
  padding: var(--s-4) 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  cursor: pointer;
}
.fisarmonica__freccia { display: inline-flex; flex: none; width: 20px; height: 20px; transform: scaleY(1); transition: transform var(--acc-expand) var(--ease-smooth-out); }
.fisarmonica__freccia path { vector-effect: non-scaling-stroke; }
.fisarmonica__voce[data-open="true"] .fisarmonica__freccia { transform: scaleY(-1); }
.fisarmonica__pannello { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--ease-smooth-out); }
.fisarmonica__voce[data-open="true"] .fisarmonica__pannello { grid-template-rows: 1fr; transition-duration: var(--acc-expand); }
.fisarmonica__interno {
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--blur-small));
  transition: opacity var(--acc-collapse) var(--ease-smooth-out), filter var(--acc-collapse) var(--ease-smooth-out);
}
.fisarmonica__voce[data-open="true"] .fisarmonica__interno { opacity: 1; filter: none; }
.fisarmonica__interno > * { padding-bottom: var(--s-5); max-width: 60ch; }

.schede {
  position: relative;
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border-radius: var(--r-pillola);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  -webkit-backdrop-filter: var(--vetro-sfocatura);
  backdrop-filter: var(--vetro-sfocatura);
}
.schede__voce {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pillola);
  background: transparent;
  color: var(--avorio-85);
  font-weight: 700;
  font-size: var(--t-bottone);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--tabs-dur) var(--ease-smooth-out);
}
.schede__voce[aria-selected="true"] { color: var(--notte); }
.schede__pillola {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: 44px;
  width: 0;
  border-radius: var(--r-pillola);
  background: var(--avorio);
  transform: translateX(0);
  transition: transform var(--tabs-dur) var(--ease-smooth-out), width var(--tabs-dur) var(--ease-smooth-out);
  pointer-events: none;
}

.tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { padding: var(--s-4) var(--s-3); text-align: left; border-bottom: 1px solid var(--testo-14); vertical-align: top; }
.tabella thead th { position: sticky; top: calc(var(--testata-alta) + var(--testata-bordo)); background: var(--carta); font-size: var(--t-occhiello); letter-spacing: .14em; text-transform: uppercase; color: var(--testo-tenue); }

/* ==========================================================================
   26 · REVEAL ALLO SCROLL (Kiran: su 48 px, titolo con blur 7 px, zoom,
   sipario). Lo stato iniziale esiste solo con .movimento-attivo.
   ========================================================================== */
.movimento-attivo [data-reveal] {
  transition:
    opacity var(--durata-reveal) var(--curva),
    transform var(--durata-reveal) var(--curva),
    filter var(--durata-reveal) var(--curva),
    clip-path var(--durata-media) var(--curva);
  transition-delay: calc(var(--i, 0) * var(--scaglione));
}
.movimento-attivo [data-reveal]:not(.is-visibile) { opacity: 0; }
.movimento-attivo [data-reveal="su"]:not(.is-visibile) { transform: translateY(var(--distanza-reveal)); }
.movimento-attivo [data-reveal="titolo"]:not(.is-visibile) { transform: translateY(var(--distanza-titolo)); filter: blur(var(--blur-medium)); }
.movimento-attivo [data-reveal="zoom"]:not(.is-visibile) { transform: scale(.94); }
/* Sipario: la maschera sta sul media dentro l'elemento osservato (un
   clip-path sull'elemento stesso lo renderebbe invisibile all'observer) */
.movimento-attivo [data-reveal="sipario"],
.movimento-attivo [data-reveal="sipario"]:not(.is-visibile) { opacity: 1; transform: none; filter: none; }
.movimento-attivo [data-reveal="sipario"] > .media {
  clip-path: inset(100% 0 0 0 round var(--r-3));
  transition: clip-path var(--durata-media) var(--curva);
  transition-delay: calc(var(--i, 0) * var(--scaglione));
}
.movimento-attivo [data-reveal="sipario"].is-visibile > .media { clip-path: inset(0 0 0 0 round var(--r-3)); }
.movimento-attivo [data-reveal="sipario"] > .media picture img {
  transform: scale(1.18);
  transition: transform var(--durata-media) var(--curva);
  transition-delay: calc(var(--i, 0) * var(--scaglione));
}
.movimento-attivo [data-reveal="sipario"].is-visibile > .media picture img { transform: none; }
.movimento-attivo [data-reveal="sipario"] > :not(.media) {
  opacity: 0;
  transition: opacity var(--durata-reveal) var(--curva);
  transition-delay: calc(400ms + var(--i, 0) * var(--scaglione));
}
.movimento-attivo [data-reveal="sipario"].is-visibile > :not(.media) { opacity: 1; }

/* ==========================================================================
   27 · DISPOSITIVI, SCHERMI STRETTI, MOVIMENTO RIDOTTO, CATTURE
   ========================================================================== */
@media (max-width: 700px) {
  :root { --segno-bordo: 12px; --testata-bordo: 10px; --testata-alta: 56px; }
  .numeri--barra { left: var(--margine); right: var(--margine); width: auto; bottom: calc(var(--segno-bordo) + 24px + var(--s-3)); padding: var(--s-3) var(--s-4); gap: var(--s-2); }
  .apertura__testo { padding-bottom: 11rem; }
  .apertura--numeri .apertura__testo { padding-bottom: 12.5rem; }
  .numeri--fascia { gap: var(--s-3); padding: var(--s-4); }
  .numeri--fascia .numeri__voce + .numeri__voce { padding-left: var(--s-3); }
  .numeri--fascia .numeri__etichetta { font-size: .625rem; letter-spacing: .08em; }
  .apertura--fascia .segno { bottom: calc(var(--segno-bordo) + 3.5rem); }
  .cornice__pannello { bottom: calc(var(--segno-bordo) + 24px + var(--s-4)); }
  .confronto__maniglia { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .confronto__lato { top: var(--s-3); }
  .confronto__lato--prima { left: var(--s-3); }
  .confronto__lato--dopo { right: var(--s-3); }
}
@media (min-width: 701px) {
  .apertura--fascia .segno { bottom: calc(var(--segno-bordo) + clamp(3.5rem, 7vw, 5rem)); }
}

/* Touch: niente backdrop-filter (regola di Andrea), fondi pieni */
@media (hover: none) and (pointer: coarse) {
  .testata.is-vetro,
  .consenso,
  .numeri--fascia,
  .carta-vetro { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .testata.is-vetro { background: var(--vetro-chiaro-ripiego); }
  .consenso { background: var(--vetro-chiaro-ripiego); }
  .numeri--fascia { background: var(--vetro-chiaro-ripiego); }
  .carta-vetro { background: var(--bianco); }
  .bottone--vetro,
  .pannello,
  .numeri--barra,
  .segno,
  .bento__titolo,
  .confronto__maniglia,
  .confronto__lato,
  .carosello__freccia,
  .schede,
  .lightbox__bottone { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vetro-scuro-touch); }
  .segno, .confronto__lato { background: var(--notte-72); }
  .menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--notte); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottone--vetro, .pannello, .numeri--barra, .bento__titolo, .confronto__maniglia, .carosello__freccia, .schede, .lightbox__bottone { background: var(--vetro-scuro-ripiego); }
  .segno { background: var(--notte); }
  .testata.is-vetro, .consenso, .numeri--fascia { background: var(--vetro-chiaro-ripiego); }
}

/* Movimento ridotto (sistema o interruttore): tutto fermo e completo.
   Senza .movimento-attivo nessuna regola qui sopra nasconde niente; queste
   righe spengono anche le transizioni d'interfaccia a 0. */
html:not(.movimento-attivo) *,
html:not(.movimento-attivo) *::before,
html:not(.movimento-attivo) *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  /* transition: none e non «1 ms»: con la durata forzata ogni elemento senza
     transizione propria (transition-property: all) animava anche visibility,
     che restava «hidden» nel primo istante e il fuoco non entrava nel menu. */
  transition: none !important;
  scroll-behavior: auto !important;
}
html:not(.movimento-attivo) .media__video { display: none; }
html:not(.movimento-attivo) .media__poster { opacity: 1 !important; }

/* Catture (?debug=1): stato finale di ogni gesto, altezza di schermo fissa */
html.debug-mostra { --schermo: min(100svh, 900px); }
html.debug-mostra .apertura,
html.debug-mostra .scena { min-height: var(--schermo); }

/* Stampa: via vetro, video e comandi */
@media print {
  .testata, .menu, .barra-mobile, .consenso, .lightbox, .carosello__comandi, .confronto__maniglia, .media__video { display: none !important; }
  .apertura, .scena { min-height: 0; }
  .segno { position: static; background: none; color: var(--testo); border: 0; }
}

/* Numeri della nota: counter(list-item) in Chrome ignora l'attributo value dell'li
   (mostrava 4-5-6 al posto di 4-8-9). Il numero si legge dall'attributo. (24/09/2026) */
.nota__righe > li[value]::before { content: attr(value); }

/* ==========================================================================
   CORREZIONI DEL 24/09/2026 (segnalate dall'agente 4, applicate dal coordinatore)
   ========================================================================== */
/* 1 · Il segno «Render» stava sotto il velo: .apertura > .media e .scena > .media
   fanno contesto di impilamento (z 0) e il .velo fratello (z 1) copriva anche la
   pillola. Il velo delle aperture e delle scene passa DENTRO il media (::after,
   z 2: sopra poster e clip), così il segno (z 3) resta sopra il velo e leggibile;
   il .velo fratello in quei due contenitori si spegne. */
.apertura > .velo,
.scena > .velo { display: none; }
.apertura > .media::after,
.scena > .media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--velo-alto), var(--velo-lato), var(--velo-basso);
}
.apertura > .media > .segno,
.scena > .media > .segno { z-index: 3; }

/* 2 · Bottone del menu sulla testata solida (Privacy): niente tondo notte sulla carta. */
.testata--solida .apri-menu { border-color: var(--testo-14); background: transparent; }

/* 3 · La cascata vale anche fuori da .apertura (apertura su carta della Privacy). */
.movimento-attivo [data-cascata] {
  opacity: 0;
  transform: translateY(var(--distance-medium));
  filter: blur(var(--blur-medium));
  animation: cascata var(--durata-reveal) var(--ease-smooth-out) forwards;
  animation-delay: calc(var(--cascata-inizio) + var(--i, 0) * var(--scaglione-riga));
}

/* ==========================================================================
   SCHEMA DELL'EDIFICIO — nato nelle pagine 3 (agente 3), portato qui il
   24/09/2026 (agente 5). Cinque fasce di vetro scuro e la copertura: è
   astratto, nessuna finestra, nessun lato. Lo usano il muro delle unità
   (Appartamenti, interattivo: a.cella) e i livelli (Progetto, sola lettura:
   .edificio--lettura). Le varianti di misura restano nelle pagine
   (--cella-alta, .cella--attico, corpo di .cella__sub).
   ========================================================================== */
.edificio {
  display: grid;
  gap: var(--s-2);
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border-radius: var(--r-4);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--vetro-scuro), var(--vetro-scuro-tinta);
  box-shadow: var(--ombra-vetro);
  min-width: 0;
}
.edificio__tetto {
  justify-self: center;
  width: 72%;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2) var(--r-2) var(--r-1) var(--r-1);
  border: 1px dashed var(--vetro-scuro-bordo);
  color: var(--avorio-70);
  font-weight: 700;
  font-size: var(--t-occhiello);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
.edificio__piano {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
}
.edificio__livello {
  font-weight: 700;
  font-size: var(--t-occhiello);
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--avorio-70);
}
.edificio__celle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.cella {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--cella-alta, 3.5rem);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--vetro-scuro-bordo);
  background: var(--avorio-06);
  color: var(--avorio);
}
.cella__sub {
  font-family: var(--font-titoli);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.cella__tipo { font-weight: 700; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acqua); }
@media (hover: none) and (pointer: coarse) {
  .edificio { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   MARCHIO DI DANESI IMMOBILIARE — chi vende, accanto ai suoi recapiti
   (richiesta di Andrea del 24/09/2026). Discreto: alto 32 px, mai nella
   testata né nella barra mobile. Bianco (barre, «Danesi» bianco,
   «IMMOBILIARE» rosso) su vetro scuro e notte: pannello «Parla con Danesi»,
   Contatti, piè di pagina. --colore per carta e sabbia: il PNG a colori ha
   margini trasparenti larghi (contenuto 126 × 40 su 230 × 60) che i margini
   negativi compensano, così il segno visibile resta alto 32 px.
   ========================================================================== */
.marchio-danesi { display: block; width: auto; height: 32px; max-width: 100%; }
.marchio-danesi--colore { height: 48px; margin: -8px -44px -8px -39px; }
/* Sulla riga in fondo al pannello e nelle card: marchio + ragione sociale */
.pannello__piede:has(.marchio-danesi),
.chi__piede:has(.marchio-danesi) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.pie__titolo + .marchio-danesi { margin-bottom: var(--s-3); }