/* Jost (titoli) e Barlow (testi), approvati dal cliente il 12/10/2026.
   Serviti dal sito, non da Google Fonts: niente dominio esterno da
   raggiungere e niente IP dei visitatori mandato a Google. Solo subset
   latin, che copre gia le accentate italiane. Jost e variabile (un file per
   tutti i pesi), Barlow no: un file per peso usato (400, 500, 700, 800). */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/jost.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/jost-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlow-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-italic.woff2") format("woff2"); }

/* La "&" di Gres & Glass: quella dei font del sito ha un disegno
   strano, qui si prende la & classica del font di sistema. Il blocco copre
   solo il carattere & (unicode-range), il resto del testo non cambia. */
@font-face {
  font-family: "Amp";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
  unicode-range: U+0026;
}

/* ================================================================
   GeG — Gres and Glass | Design System "Materia & Luce"
   ================================================================ */

:root {
  /* ============ VISUALE UNICA SU TUTTI I DESKTOP ============
     Il sito e disegnato su un viewport di 1536px (il monitor di riferimento).
     Sopra i 1100px il body viene scalato in blocco con zoom: le proporzioni
     fra titoli, spazi e fotografie sono quindi identiche su un 1366, un 1920
     o un 2K — cambia quanto e grande il tutto, non come e composto.
     Oltre --zoom-max il sito smette di crescere e si allarga soltanto l aria
     ai lati: su un ultrawide una riga di testo da 38px non si legge, si
     sorvola. Il tetto lo applica initScalaDesktop() in app.js.

     Perche servono --vw / --vh e non le unita native: 1vw e 1vh restano
     ancorati alla finestra vera, e il rendering li moltiplica poi per lo zoom
     — una misura in viewport scalerebbe quindi due volte. Divise per il
     fattore tornano a valere esattamente l 1% del lato dello schermo, che e
     quello che ci si aspetta scrivendo "50vw". USARE SEMPRE QUESTE, mai vw/vh
     nudi: con un 50vw nativo il margine negativo del full-bleed sbaglia di
     oltre 200px su un monitor da 1920.
     Sotto i 1100px lo zoom non c e, le due variabili tornano a essere le
     unita native e valgono i breakpoint mobile di sempre.

     Il fattore lo misura initScalaDesktop() in app.js da clientWidth: 100vw
     includerebbe la scrollbar e darebbe una quindicina di pixel di overflow. */
  --design-w: 1536;
  --zoom-max: 1.35;
  --zoom-app: 1;
  --vw: 1vw;
  --vh: 1vh;

  /* ============ COLORE ============
     Guideline G&G 2025: Pantone 655 C + Pantone 280 C. Nessun altro hue.
     I neutri NON sono colori nuovi: sono 655 C a opacita' decrescente su bianco,
     estendendo la scala 90/70/50% che la guideline stessa dichiara.

     REGOLA STRUTTURALE: 655 C e 280 C non si toccano mai. Fra loro il contrasto
     e' 1,41:1 — illeggibile. Ovunque si incontrino c'e' del bianco in mezzo:
     un bordo, uno spazio, un testo. Il bianco e' il connettivo del sistema. */

  --white:  #FFFFFF;   /* superfici in rilievo, separatore fra i due blu     */
  --paper:  #F5F6F7;   /* fondo pagina — "bianco elegante", 655 C al 4%      */
  --ink:    #111F2E;   /* Pantone 655 C — testo, sezioni scure, footer       */
  --blue:   #1D3277;   /* Pantone 280 C — accento, un momento per pagina     */

  /* ---- Fondi blu: il sito non e piu una sequenza di bianchi ----
     Richiesta cliente: usare i due Pantone anche come fondo, non solo come
     testo. Non sono hue nuovi — sono 655 C e 280 C alle opacita che la
     guideline stessa dichiara (90 / 70 / 50%), stese su bianco.

     --mist e --azure sono i fondi CHIARI: ci va testo --ink, come su paper.
     --ink e --deep sono i fondi SCURI: ci va testo --on-dark.
     La regola strutturale resta: 655 C e 280 C non si toccano mai a contatto,
     in mezzo c e sempre bianco o uno dei due fondi chiari. */
  --mist:   #EAEDF3;   /* 655 C al 8% su bianco  — fondo chiaro, freddo      */
  --azure:  #E3E8F4;   /* 280 C al 10% su bianco — fondo chiaro, piu blu     */
  --deep:   #0B1622;   /* 655 C scurito           — fondo pieno, notte       */

  --ink-70: #55606A;   /* testo secondario su chiaro   — 5,9:1  AA           */
  --ink-50: #838B93;   /* meta ed etichette            — 3,2:1  solo >=24px  */
  --ink-12: #E2E4E6;   /* linee, divisori, bordi campo                       */

  --on-dark:    rgba(255, 255, 255, 0.92);  /* testo su 655 C / 280 C        */
  --on-dark-70: rgba(255, 255, 255, 0.70);  /* secondario — 8,7:1 su 655 C   */
  --on-dark-50: rgba(255, 255, 255, 0.50);  /* meta       — 5,1:1 su 655 C   */
  --on-dark-12: rgba(255, 255, 255, 0.12);  /* linee su fondo scuro          */

  /* Alias di compatibilita': pages.css usa ancora i nomi vecchi.
     Si smontano in FASE 2 quando si riscrivono le sezioni. */
  --color-white: var(--white);
  --color-ivory: var(--paper);
  --color-mist:  var(--white);
  --color-navy:  var(--ink);
  --color-ink:   var(--ink);
  --color-earth: var(--ink-70);
  --color-sand:  var(--on-dark-70);

  /* ============ TIPOGRAFIA ============
     Due famiglie: Jost per i titoli, Barlow per i testi (scelta approvata
     dal cliente, 12/10/2026). "Amp" davanti a entrambe sostituisce solo la
     & (vedi @font-face in cima). --font resta il testo corrente: tutto cio
     che non chiede esplicitamente --font-display e in Barlow. */

  --font-display: "Amp", "Jost", system-ui, -apple-system, sans-serif;
  --font-body:    "Amp", "Barlow", system-ui, -apple-system, sans-serif;
  --font:         var(--font-body);

  --fs-xs:   0.75rem;    /* 12 — meta, etichette      */
  --fs-sm:   0.875rem;   /* 14 — nav, didascalie      */
  --fs-base: 1.0625rem;  /* 17 — testo corrente       */
  --fs-md:   1.25rem;    /* 20 — lead, h4             */
  --fs-lg:   clamp(1.5rem, calc(2 * var(--vw)), 1.75rem);       /* h3 */
  --fs-xl:   clamp(2rem, calc(3.5 * var(--vw)), 2.75rem);       /* h2 */
  --fs-2xl:  clamp(2.75rem, calc(6 * var(--vw)), 4.5rem);       /* h1 */

  --fw-reg:   400;
  --fw-med:   500;
  --fw-bold:  700;  /* titoli, CTA, intestazioni       */
  --fw-black: 800;  /* solo dati numerici: mm, formati */
  --fw-light: 400;  /* alias: i titoli non sono piu leggeri */

  /* ============ SPAZIO ============ */
  --s1:  4px;  --s2:  8px;  --s3: 12px;  --s4: 16px;  --s5:  24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  --max: 1440px;
  --pad-section: clamp(64px, calc(8 * var(--vw)), 128px);
  --pad-gutter:  clamp(20px, calc(4 * var(--vw)), 48px);

  /* ============ FORMA ============
     Il gres arriva in lastra e si taglia; i bordi si lavorano a 45°.
     Nessun angolo arrotondato, nessuna ombra: cio' che separa e' una linea
     da 1px o un cambio di fondo. */

  --radius: 0;
  --rule:   1px solid var(--ink-12);
  --shadow-modal: 0 24px 64px rgba(17, 31, 46, 0.24);  /* unica ombra: modal e lightbox */

  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-med: 400ms;
  --dur-lng: 600ms;

  --tracking-micro: 0.05em;
}

@media (min-width: 1100px) {
  :root {
    /* --layout-w la scrive initScalaDesktop: e la larghezza del foglio in
       pixel di layout, gia al netto della barra di scorrimento — che 1vw
       invece comprende, e sarebbero quindici pixel di sbordo per lato. */
    --vw: calc(var(--layout-w, var(--design-w)) * 1px / 100);
    --vh: calc(1vh / var(--zoom-app));
    /* Lo zoom va sulla radice, mai sul body: su body la barra fissa prende lui
       come contenitore e scorre via con la pagina, e lo scroller smette di
       essere il documento (gli eventi scroll non arrivano piu a window). */
    zoom: var(--zoom-app);
  }
}

/* ---- Telefono: la scala sale ----
   Sotto i 900px i clamp restavano incollati al minimo, calcolato per il
   desktop stretto: sullo schermo del telefono quel minimo si legge piccolo.
   Qui salgono i token, cosi cresce tutto il sito in un posto solo; il
   desktop non li vede. Sotto i 420px i titoli tornano piu contenuti, o una
   parola lunga sborda dalla colonna. */
@media (max-width: 900px) {
  :root {
    --fs-xs:   0.8125rem;  /* 13 */
    --fs-sm:   0.9375rem;  /* 15 */
    --fs-base: 1.1875rem;  /* 19 */
    --fs-md:   1.375rem;   /* 22 */
    --fs-lg:   1.75rem;    /* 28 */
    --fs-xl:   2.25rem;    /* 36 */
    --fs-2xl:  3rem;       /* 48 */
  }
}
@media (max-width: 420px) {
  :root {
    --fs-xl:  2rem;        /* 32 */
    --fs-2xl: 2.5rem;      /* 40 */
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  /* Nessuna barra orizzontale, mai: le entrate in pagina partono da una scala
     dell 1,2% e per un secondo il blocco sporge dalla finestra.
     Deve restare sul body e NON su html: il valore del body si propaga al
     viewport solo finche html e "visible". Scrivendolo su html, il body
     diventa lui stesso un contenitore di scorrimento e la pagina smette di
     rispondere a window.scroll — che e il motore di meta delle animazioni. */
  overflow-x: hidden;
}

/* ---------- Typography ----------
   Famiglia unica, come da guideline. La gerarchia si fa con peso e corpo,
   non con un secondo carattere. */
/* I titoli NON sono piu in maiuscolo.
   Il maiuscolo su ogni titolo, in grassetto e con il tracking aperto, e il
   modo in cui si compone un'insegna o un cartello: legge forte e allegro.
   Un titolo da showroom fa l'opposto — caso frase, peso normale, lettere
   chiuse: il corpo grande basta da solo a fare gerarchia, non serve gridare.
   Il maiuscolo resta dove serve davvero: occhielli, numeri, etichette (.micro).

   Tracking negativo su tutti i corpi grandi: e quello che chiude le lettere
   e dà il passo compatto delle riviste di arredamento. Piu grande il corpo,
   piu stretto il tracking. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-xl);  letter-spacing: -0.03em; }
h3 { font-size: var(--fs-lg); line-height: 1.2; font-weight: var(--fw-med); letter-spacing: -0.02em; }
h4 { font-size: var(--fs-md); line-height: 1.35; font-weight: var(--fw-med); letter-spacing: -0.01em; }
/* Titolo principale (H1) per Google che deve restare uguale a un h2. */
h1:where(.come-h2) { font-size: var(--fs-xl); line-height: 1.08; letter-spacing: -0.03em; }
/* Testo solo per motori di ricerca e lettori di schermo. */
.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; }

/* Dati numerici — spessori, formati, misure. L'unico uso del peso Black. */
.figure {
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

em, .italic { font-style: italic; }

/* Elenchi di contenuto: niente pallino, un trattino da lastra tagliata. */
.list-plain { list-style: none; margin: var(--s4) 0; max-width: 65ch; }
.list-plain li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s3);
}
.list-plain li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--ink-50);
}
.bg-ink .list-plain li::before,
.bg-blue .list-plain li::before,
.cta-final .list-plain li::before,
.footer .list-plain li::before { background: var(--on-dark-50); }

/* Citazione: la dichiarazione dell'azienda, riportata alla lettera. */
.quote {
  margin: var(--s6) 0;
  padding-left: var(--s5);
  border-left: 2px solid var(--ink-12);
}
.quote p { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-70); }
.bg-ink .quote, .bg-blue .quote { border-left-color: var(--on-dark-12); }
.bg-ink .quote p, .bg-blue .quote p { color: var(--on-dark-70); }

p { text-wrap: pretty; max-width: 65ch; }
p.lead { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-70); }

.micro {
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-70);
}

.micro.on-dark { color: var(--on-dark-70); }

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

.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-editorial);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---------- Layout ---------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-gutter);
}

.section {
  padding: var(--pad-section) 0;
}
/* il media query sul padding non serve piu': --pad-section usa clamp() */

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); gap: 24px; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 18px var(--s6);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.026em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 400ms var(--ease-editorial),
              color 400ms var(--ease-editorial),
              border-color 400ms var(--ease-editorial);
  background: transparent;
}
/* Su fondo chiaro: 655 C pieno; l'hover passa al 280 C — e' qui che
   l'accento fa il suo lavoro, su un elemento che il bianco circonda. */
.btn-primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--blue);
  border-color: var(--blue);
}
.btn-outline {
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--white);
}
/* Su fondo scuro (655 C o 280 C) il bottone e' bianco: unico colore
   che contrasta con entrambi. */
.btn-sand {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.btn-sand:hover {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

/* ---------- Focus visibile (accessibilita', FASE 8) ---------- */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.bg-navy :focus-visible,
.bg-ink :focus-visible,
.footer :focus-visible,
.cta-final :focus-visible {
  outline-color: var(--white);
}
.btn .arrow { transition: transform 400ms var(--ease-editorial); }
.btn:hover .arrow { transform: translateX(4px); }

.gooey-def { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Navigation ----------
   Barra "gooey": una pillola scorre da una voce all altra e al click partono
   delle particelle. L effetto e ripreso da Gooey Nav di React Bits, ma
   riscritto in CSS + JS: il sito e statico e non ha React, e trascinarlo
   dentro per una barra costerebbe ~140 KB.

   Il filtro SVG si applica al solo strato della pillola, mai al testo:
   sfocare e ricompattare le lettere le renderebbe illeggibili. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* gutter proprio, piu stretto di quello delle sezioni: il gruppo destro
     (lingua + CTA + social) sta piu a filo del bordo. Resta simmetrico, cosi
     il menu centrale non si sposta. */
  padding: 30px clamp(16px, calc(2.4 * var(--vw)), 28px);
  /* Il menu e centrato in assoluto sul viewport, il gruppo destro sta a filo
     del bordo: i due non si vincolano piu a vicenda. Con la griglia a tre
     colonne lo spacer di sinistra doveva essere largo quanto il gruppo di
     destra, e sotto i 1400px la barra andava in overflow. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  /* backdrop-filter fuori dalla transizione: animarlo costa un ri-blur a ogni
     frame, ed e una delle cause del lag in scroll */
  transition: background 400ms var(--ease-editorial),
              padding 300ms var(--ease-editorial),
              transform 340ms var(--ease-editorial);
}
/* Scorrendo verso il basso la barra esce dall alto, tornando su rientra.
   Il calcolo di quando sta in JS, qui c e solo lo scivolo. */
.nav.nascosta { transform: translateY(-100%); }
/* Il marchio: sempre in alto a sinistra, sempre link alla home. Sta in
   assoluto come il menu centrale, cosi i tre blocchi (marchio, menu, gruppo
   destro) non si vincolano a vicenda e la barra non va mai in overflow. */
.nav-marchio {
  position: absolute;
  left: clamp(16px, calc(2.4 * var(--vw)), 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  transition: opacity 300ms var(--ease-editorial), transform 300ms var(--ease-editorial);
}
.nav-marchio:hover { opacity: 0.7; }
.nav.scrolled {
  background: rgba(245, 246, 247, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px clamp(16px, calc(2.4 * var(--vw)), 28px);
  border-bottom: 1px solid var(--ink-12);
}

.nav-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  /* stretch + min-height alti quanto la pillola: senza questo i li erano piu
     bassi della pillola, e bastava alzare il cursore di due pixel dentro la
     barra per uscire dal <ul> — mouseleave, e la pillola tornava di scatto
     sulla voce corrente. Era quello lo sfarfallio. */
  align-items: stretch;
  min-height: 38px;
  gap: var(--s2);
  list-style: none;
  isolation: isolate;
}
.nav-menu li { display: flex; align-items: center; }
.nav-menu > li > a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px 18px;
  /* in maiuscolo il corpo 14 diventa largo: si scende a 12 e si apre il
     tracking, che e il modo in cui il maiuscolo si legge */
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  text-transform: uppercase;
  letter-spacing: 0.065em;
  color: var(--ink);
  white-space: nowrap;
  transition: color 320ms var(--ease-editorial);
}
/* Le scritte restano nere in ogni stato: la voce attiva si distingue per la
   pillola bianca sotto, non per il colore del testo. */
.nav-menu > li.on > a { color: var(--ink); }
.nav-menu > li:not(.on) > a:hover { color: var(--ink); }

/* ---- Il marchio: lockup ORIZZONTALE ----
   Il file di guideline e un lockup verticale: il simbolo GG sopra, la parola
   GRESANDGLASS sotto, alta il 6% dell immagine. In una barra alta 46px quella
   parola veniva 2,8px: illeggibile per geometria, non per CSS — nessun
   ingrandimento la salva senza far diventare il simbolo alto mezzo schermo.

   Quindi il lockup e stato girato: il marchio e la parola sono due ritagli del
   file originale (logo-geg-marchio.webp, logo-geg-wordmark.webp, tagliati con
   ffmpeg sui bounding box reali) affiancati in orizzontale. Nessuna lettera
   ridisegnata, nessun font sostitutivo: e la parola del marchio, che ora puo
   essere alta 15px perche non deve piu stare sotto al simbolo.
   Il file verticale resta e serve dove c e spazio in altezza (.cert-logo). */
.nav-marchio { gap: 14px; }
.nav-logo-img {
  display: block;
  height: 48px;
  width: auto;
  transition: height 300ms var(--ease-editorial), filter 320ms var(--ease-editorial);
}
.nav-logo-word {
  display: block;
  height: 13px;
  width: auto;
  transition: height 300ms var(--ease-editorial), filter 320ms var(--ease-editorial);
}
.nav.scrolled .nav-logo-img  { height: 42px; }
.nav.scrolled .nav-logo-word { height: 12px; }
@media (max-width: 600px) {
  .nav-logo-img  { height: 38px; }
  .nav-logo-word { height: 11px; }
  /* i 30px del desktop sul telefono rubano schermo: il marchio respira gia con meno */
  .nav:not(.scrolled) { padding-top: 20px; padding-bottom: 20px; }
}
/* Sotto i 420px la parola non ci sta accanto al menu: resta il solo simbolo. */
@media (max-width: 420px) { .nav-logo-word { display: none; } }
/* sulla voce attiva il fondo e scuro: il logo va in monocromia chiara */
/* il logo resta bicolore: la pillola sotto e chiara */

/* La pillola. Position e larghezza le calcola il JS sulla voce attiva. */
.gooey-pill {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  height: 38px;
  width: 0;
  transform: translate(0, -50%);
  background: var(--white);
  border-radius: var(--radius);
  filter: url(#gooey);
  /* curva senza rimbalzo: l overshoot a 620ms faceva sembrare ogni passaggio
     un contraccolpo */
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1),
              width 420ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.gooey-pill.muta { transition: none; }   /* primo posizionamento, senza volo */

/* Le particelle nascono dentro lo stesso strato filtrato, cosi si fondono
   con la pillola invece di sembrare puntini incollati sopra. */
.gooey-bolla {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  filter: url(#gooey);
  animation: bolla 700ms var(--ease-editorial) forwards;
}
@keyframes bolla {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Niente inversione sui fondi scuri: dopo la scelta del drift wall chiaro,
   sotto la barra c e sempre un fondo chiaro. */

@media (prefers-reduced-motion: reduce) {
  .gooey-pill { transition: none; }
  .gooey-bolla { display: none; }
}

.nav-right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s4);
}
.lang-toggle {
  display: flex;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--fw-med);
  letter-spacing: 0.033em;
}
.lang-toggle button {
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  color: inherit;
  opacity: 0.45;
  transition: opacity 300ms var(--ease-editorial);
  font: inherit;
}
.lang-toggle button.active { opacity: 1; }
.lang-toggle .sep { opacity: 0.3; }
/* nella barra il bottone e un etichetta, non un blocco: meno alto e meno
   largo, cosi il gruppo destro non invade il menu centrale */
.nav-cta {
  padding: 7px 13px;
  font-size: 10px;
  letter-spacing: 0.046em;
  white-space: nowrap;   /* mai su due righe: farebbe crescere la barra */
}

.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  width: 44px; height: 44px;
  margin-right: -6px;   /* l area cresce verso l interno: il filo a destra resta allineato */
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-mobile-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform 300ms var(--ease-editorial);
}

/* Il vecchio breakpoint a 1300px (icone social fuori dalla barra perche il
   menu centrato e il gruppo destro si toccavano) non serve piu: sopra i
   1100px la barra e sempre larga 1536px logici, lo spazio c e sempre. */
@media (max-width: 1100px) {
  .nav-menu, .nav-cta, .nav-cta-blocco { display: none; }
  .nav-mobile-toggle { display: flex; }
}
/* ----- Pannello mobile -----
   Sotto i 1100px il menu centrale sparisce: prima al suo posto non c era
   nulla e il sito era navigabile solo dal footer. Il pannello scende dalla
   barra, non copre lo schermo: le voci sono tre. */
.nav-drawer {
  position: absolute;
  top: 100%;
  right: var(--pad-gutter);
  width: min(200px, calc(100% - 2 * var(--pad-gutter)));
  display: flex;
  flex-direction: column;
  padding: var(--s3) 0 var(--s4);
  background: none;
  /* la barra si nasconde in scroll: il pannello va con lei, non resta appeso */
  transform-origin: top center;
  animation: drawer-giu 320ms var(--ease-editorial);
}
.nav-drawer[hidden] { display: none; }
/* Il velo che oscura la pagina.
   Sta sul body e non dentro il pannello: .nav.scrolled ha un backdrop-filter,
   e quello fa da ancora agli elementi fixed dei suoi discendenti — il velo si
   sarebbe rimpicciolito alla sola barra appena scorri. In z-index 90 passa
   sotto la barra (100), che resta leggibile col suo marchio e le tre linee. */
body:has(.nav-drawer:not([hidden]))::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(11, 20, 30, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: velo-entra 320ms var(--ease-editorial);
}
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
/* col pannello aperto la barra sta sopra il velo: in inchiostro sparirebbe */
.nav:has(.nav-drawer:not([hidden])) .nav-menu > li > a,
.nav:has(.nav-drawer:not([hidden])) .lang-toggle,
.nav:has(.nav-drawer:not([hidden])) .nav-mobile-toggle { color: var(--white); }
.nav:has(.nav-drawer:not([hidden])) .nav-logo-img,
.nav:has(.nav-drawer:not([hidden])) .nav-logo-word {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(17, 31, 46, 0.45));
}
@keyframes drawer-giu {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.nav-drawer > a {
  display: block;
  padding: 9px var(--s4);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.039em;
  text-align: right;
  color: var(--white);
}
.nav-drawer > a.nav-drawer-sotto { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
/* "Richiedi un preventivo" e' una voce come le altre: il riquadro del
   bottone qui dentro era l unico elemento con un contorno, e su un menu
   fatto di sole scritte sul vetro scuro stonava. Le proprieta' del .btn
   vanno spente a mano. */
/* "Richiedi un preventivo" porta alla stessa pagina della voce "Contatti"
   qui sopra: nel pannello era una riga in piu' che non porta da nessuna
   parte di nuovo. Resta la voce nella barra del desktop. */
.nav-drawer > a.btn { display: none; }
/* Le tre icone in riga sotto il preventivo, senza il riquadro che hanno
   nel footer: qui il tratto bianco basta da solo. */
/* .social-icone, che il JS aggiunge a questo stesso div, viene dopo nel
   file: senza il discendente vincerebbe lui sul gap */
.nav-drawer > .nav-drawer-social {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 4px calc(var(--s4) - 8px) 0;
}
.nav-drawer .social-icona {
  width: auto;
  height: auto;
  padding: 8px;
  border: none;
  border-radius: 0;
  color: var(--white);
}
.nav-drawer .social-icona svg { width: 18px; height: 18px; }
@media (min-width: 1101px) {
  .nav-drawer { display: none !important; }
}

/* ----- Barra sopra una fotografia scura -----
   In home la prima schermata e una fotografia a tutto campo: il marchio blu e
   le voci in inchiostro ci sparirebbero sopra. Finche non si scorre, tutto
   passa in bianco; appena la barra prende il suo fondo chiaro (.scrolled)
   torna ai colori normali. */
.nav.chiara:not(.scrolled) .nav-menu > li > a,
.nav.chiara:not(.scrolled) .lang-toggle,
.nav.chiara:not(.scrolled) .nav-mobile-toggle { color: var(--white); }
.nav.chiara:not(.scrolled) .nav-logo-img,
.nav.chiara:not(.scrolled) .nav-logo-word {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(17, 31, 46, 0.45));
}
.nav.chiara:not(.scrolled) .gooey-pill { background: rgba(255, 255, 255, 0.22); }
.nav.chiara:not(.scrolled) .gooey-bolla { background: rgba(255, 255, 255, 0.22); }
.nav.chiara:not(.scrolled) .nav-cta {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}
.nav.chiara:not(.scrolled) .nav-cta:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}


.footer-logo-img {
  display: block;
  height: 56px;
  width: auto;
  margin-bottom: 20px;
  /* Ripiego: il logo bicolore viene appiattito in bianco pieno.
     La guideline prevede una versione monocromatica ufficiale, ma in
     "Logo GeG/" ci sono solo file .indd — nessun vettoriale utilizzabile.
     Si sostituisce con l asset vero appena arriva (LOG.md, domanda 1). */
  filter: brightness(0) invert(1);
}

/* La nav non inverte piu i colori: le scritte sono nere sempre, in ogni
   pagina e a ogni scroll. Dove sotto la barra ci sarebbe una fotografia scura
   (le pagine con .coll-hero) una fascia chiara in cima garantisce il
   contrasto, invece di cambiare il colore del testo. */
.coll-hero::after,
.page-hero::after,
.glass-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 132px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, var(--paper) 0%, rgba(245,246,247,0.92) 45%, rgba(245,246,247,0) 100%);
}
.coll-hero { position: relative; }
.coll-hero-content { position: relative; z-index: 2; }

.footer-logo-img {
  display: block;
  height: 56px;
  width: auto;
  margin-bottom: 20px;
  /* Ripiego: il logo bicolore viene appiattito in bianco pieno.
     La guideline prevede una versione monocromatica ufficiale, ma in
     "Logo GeG/" ci sono solo file .indd — nessun vettoriale utilizzabile.
     Si sostituisce con l asset vero appena arriva (LOG.md, domanda 1). */
  filter: brightness(0) invert(1);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-ink);
  color: var(--color-ivory);
  padding: 100px var(--pad-gutter) 40px;
}
.footer .container {
  padding: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.footer h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: 24px;
}
.footer a {
  display: block;
  padding: 6px 0;
  color: var(--on-dark-70);
  font-size: 14px;
  transition: color 300ms var(--ease-editorial);
}
.footer a:hover { color: var(--color-ivory); }
.footer-tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--on-dark);
  margin: var(--s5) 0;
  max-width: 360px;
}
.footer-logo-word {
  font-size: 12px;
  letter-spacing: 0.195em;
  color: var(--color-sand);
  margin-top: 14px;
}
.footer-bottom {
  border-top: 1px solid var(--on-dark-12);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--on-dark-50);
  letter-spacing: 0.026em;
}
.footer-social {
  display: flex;
  gap: 20px;
}
.footer-social a {
  padding: 0;
  font-size: 12px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ---------- Reveal / motion primitives ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--ease-editorial), transform 700ms var(--ease-editorial);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 120ms; }
.reveal-delay-2 { transition-delay: 240ms; }
.reveal-delay-3 { transition-delay: 360ms; }

.word-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-editorial), transform 600ms var(--ease-editorial);
}
.word-reveal.in span { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .word-reveal span { opacity: 1; transform: none; }
}

/* ---------- Image utilities ---------- */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-frame {
  overflow: hidden;
  position: relative;
  background: var(--color-mist);
}
.img-frame img {
  transition: transform 700ms var(--ease-editorial);
}
.img-frame.hover-zoom:hover img {
  transform: scale(1.03);
}

/* ---------- Custom cursor (desktop only) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--color-ivory);
  transition: opacity 200ms;
}
.cursor-ring {
  width: 8px; height: 8px;
  border: 1px solid var(--color-ivory);
  transition: width 300ms var(--ease-editorial), height 300ms var(--ease-editorial), opacity 200ms;
}
.cursor-ring.expand {
  width: 40px; height: 40px;
}
@media (hover: none), (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}
body { cursor: default; }
@media (hover: hover) and (min-width: 901px) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ---------- Form ---------- */
.form-field {
  position: relative;
  margin-bottom: 24px;
}
.form-field label {
  display: block;
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-earth);
  margin-bottom: 8px;
  font-weight: 500;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-12);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-navy);
  transition: border-color 300ms var(--ease-editorial);
  border-radius: 0;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-bottom-color: var(--color-navy);
}
.form-dark .form-field label { color: var(--color-sand); }
.form-dark .form-field input,
.form-dark .form-field textarea,
.form-dark .form-field select {
  color: var(--color-ivory);
  border-bottom-color: var(--on-dark-12);
}
.form-dark .form-field input:focus,
.form-dark .form-field textarea:focus,
.form-dark .form-field select:focus {
  border-bottom-color: var(--color-sand);
}
.form-dark .form-field select option { color: var(--color-navy); }

/* Nel modulo della home il campo e un riquadro con il bordo chiaro: la sola
   riga sotto non faceva capire dove si scrive. */
#progetto .form-field input,
#progetto .form-field textarea,
#progetto .form-field select {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.04);
}
#progetto .form-field input:focus,
#progetto .form-field textarea:focus,
#progetto .form-field select:focus {
  border-color: var(--color-ivory);
  background: rgba(255,255,255,0.08);
}
#progetto .form-field input::placeholder,
#progetto .form-field textarea::placeholder { color: rgba(255,255,255,0.45); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-earth);
  margin: 16px 0 24px;
}
.form-dark .form-consent { color: var(--color-sand); }

/* ---------- Page hero (non-home) ---------- */
.page-hero {
  padding: 200px var(--pad-gutter) 100px;
  background: var(--color-ivory);
}
.page-hero .micro { margin-bottom: 20px; display: inline-block; }
.page-hero h1 { max-width: 12ch; }
.page-hero p.lead { margin-top: 28px; max-width: 56ch; color: var(--color-earth); }

/* ---------- Utility ---------- */
.stretch { width: 100%; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-1 { aspect-ratio: 1; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
/* ---------- Fondi di sezione ----------
   Il misto dei tre: ~55% chiaro, ~30% 655 C, ~15% 280 C.
   Il 280 C e' il piu' saturo: un momento per pagina, non una campitura diffusa.
   Due fondi scuri non vanno mai adiacenti senza una fascia chiara in mezzo. */
.bg-white { background: var(--white); }
.bg-paper { background: var(--paper); }
.bg-ink   { background: var(--ink);  color: var(--on-dark); }
.bg-blue  { background: var(--blue); color: var(--on-dark); }
/* I due fondi blu chiari e il blu notte: servono a rompere la sequenza di
   bianchi senza uscire dai due Pantone. Chiari = testo scuro, come paper. */
.bg-mist-blu { background: var(--mist); }
.bg-azure    { background: var(--azure); }
.bg-deep     { background: var(--deep); color: var(--on-dark); }
/* Sfumature fra i due Pantone: si usano dove la sezione e alta e un fondo
   pieno peserebbe. La direzione e sempre verticale, mai diagonale. */
.bg-sfum-chiara { background: linear-gradient(180deg, var(--white) 0%, var(--azure) 100%); }
.bg-sfum-scura  { background: linear-gradient(180deg, var(--ink) 0%, var(--blue) 100%); color: var(--on-dark); }

/* alias legacy — pages.css usa ancora .bg-mist / .bg-ivory / .bg-navy */
.bg-mist  { background: var(--white); }
.bg-ivory { background: var(--paper); }
.bg-navy  { background: var(--ink); color: var(--on-dark); }

.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4,
.bg-blue h1, .bg-blue h2, .bg-blue h3, .bg-blue h4,
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4,
.bg-sfum-scura h1, .bg-sfum-scura h2, .bg-sfum-scura h3, .bg-sfum-scura h4 { color: var(--white); }
.bg-ink p, .bg-blue p, .bg-navy p,
.bg-deep p, .bg-sfum-scura p { color: var(--on-dark-70); }
/* Sui due fondi chiari nuovi i divisori e le etichette devono restare
   visibili: su --mist e --azure il grigio --ink-12 sparisce. */
.bg-mist-blu .divider, .bg-azure .divider,
.bg-sfum-chiara .divider { background: var(--blue); }

/* Sui fondi scuri si invertono anche le parti minute: etichette, divisori,
   trattini degli elenchi e citazioni erano tarati sul chiaro e sparivano.
   --deep mancava del tutto in queste regole. */
.bg-ink .micro, .bg-blue .micro, .bg-navy .micro,
.bg-deep .micro, .bg-sfum-scura .micro { color: var(--on-dark-70); }
.bg-ink .divider, .bg-blue .divider, .bg-navy .divider,
.bg-deep .divider, .bg-sfum-scura .divider { background: var(--on-dark-70); }
.bg-deep .list-plain li::before,
.bg-navy .list-plain li::before { background: var(--on-dark-50); }
.bg-deep .quote, .bg-navy .quote { border-left-color: var(--on-dark-12); }
.bg-deep .quote p, .bg-navy .quote p { color: var(--on-dark-70); }

/* Due fondi scuri adiacenti si fondono: fra 655 C e 280 C il contrasto e' 1,41:1
   e il confine sparisce. Dove non c'e' spazio per una fascia chiara, a separarli
   basta una linea — come dice il principio: una linea da 1px o un cambio fondo. */
/* Due sezioni dello stesso fondo di fila devono leggersi come una sola: il
   colore e' identico, quindi fra loro basta lo spazio di una — il doppio
   margine di rispetto le farebbe sembrare due. */
.bg-deep + .bg-deep,
.bg-ink + .bg-ink {
  padding-top: 0;
  /* flow-root e' necessario, non decorativo: senza padding in cima il
     margine del primo elemento interno sfugge fuori dalla sezione (margin
     collapsing) e fra le due compare una striscia del fondo pagina, che e'
     chiaro. flow-root apre un contesto che tiene i margini dentro. */
  display: flow-root;
}

.bg-ink + .bg-blue,  .bg-blue + .bg-ink,
.bg-ink + .bg-deep,  .bg-deep + .bg-ink,
.bg-deep + .bg-blue, .bg-blue + .bg-deep,
.bg-ink + .cta-final, .bg-blue + .cta-final, .bg-deep + .cta-final,
.bg-ink + .footer,    .bg-blue + .footer,    .bg-deep + .footer,
.cta-final + .footer {
  border-top: 1px solid var(--on-dark-12);
}

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

/* ---------- Segnaposto di lavorazione ----------
   Marca visibilmente il testo che aspetta contenuto dal cliente, cosi' non
   puo' finire online per distrazione. Si elimina insieme agli ultimi .todo. */
.todo {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed currentColor;
  font-size: var(--fs-sm);
  font-style: italic;
  opacity: 0.75;
}
/* Due tipi diversi: quello che manca a noi, e quello che manca al cliente.
   Il secondo si distingue perche' e' l'unico che non possiamo sbloccare da soli. */
.todo[data-todo="chiedere"] {
  border-style: solid;
  border-color: var(--blue);
  color: var(--blue);
  opacity: 1;
}
.todo[data-todo="chiedere"]::before { content: "Da chiedere a G&G — "; font-style: normal; font-weight: var(--fw-bold); }
.bg-ink .todo[data-todo="chiedere"],
.bg-blue .todo[data-todo="chiedere"],
.cta-final .todo[data-todo="chiedere"],
.hero .todo[data-todo="chiedere"],
.coll-hero .todo[data-todo="chiedere"],
.footer .todo[data-todo="chiedere"] {
  border-color: var(--white);
  color: var(--white);
  background: rgba(17, 31, 46, 0.55);
}

/* Immagini non ancora innestate: riquadro neutro invece di icona rotta. */
img[data-todo] { background: var(--ink-12); }
img[data-todo][src=""] { visibility: hidden; }
[data-todo="fase5-lookbook"]:empty,
[data-todo="fase6"]:empty { min-height: 240px; background: var(--ink-12); }

.footer-address {
  color: var(--on-dark-70);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-top: var(--s3);
  white-space: pre-line;
  max-width: none;
}
.divider { width: 48px; height: 1px; background: var(--ink-70); margin: var(--s5) 0; }
.divider-sand { background: var(--on-dark-70); }

/* ----- Icone social -----
   Riquadro con bordo, come i bottoni outline; all hover ingrandisce.
   Il colore lo eredita il tracciato SVG, cosi lo stesso markup sta bene
   sul chiaro e sui due fondi scuri (hero e footer). */
.social-icone {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.social-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ink-12);
  border-radius: 10px;
  color: var(--ink);
  transition: transform 300ms var(--ease-editorial),
              border-color 300ms var(--ease-editorial),
              color 300ms var(--ease-editorial);
}
.social-icona svg { width: 17px; height: 17px; display: block; }
.social-icona:hover { transform: scale(1.2); border-color: currentColor; }
/* ogni marchio con il suo colore. Due classi sullo stesso elemento perche
   la regola ".footer a" e piu specifica di una classe sola. */
.social-icona.social-facebook  { color: #1877F2; }
.social-icona.social-instagram { color: #E4405F; }
.social-icona.social-linkedin  { color: #0A66C2; }
.hero-social { margin-top: var(--s4); }
/* nella barra le icone stanno a destra del bottone, sulla stessa riga:
   l altezza della barra resta quella di prima */
.nav-cta-blocco {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-social { gap: 6px; flex-wrap: nowrap; }
.nav-social .social-icona { width: 26px; height: 26px; border-radius: 7px; }
.nav-social .social-icona svg { width: 13px; height: 13px; }
/* nel footer, che e su 655 C, bordo e segno passano al chiaro.
   display e padding vanno ridichiarati: la regola generale ".footer a"
   e piu specifica di ".social-icona" e altrimenti vince lei. */
.footer .social-icona {
  display: inline-flex;
  padding: 0;
  border-color: var(--on-dark-12);
}
.footer-social-icone { margin-top: var(--s4); }
@media (prefers-reduced-motion: reduce) {
  .social-icona:hover { transform: none; }
}

/* ---------- Transizioni fra pagine ----------
   API nativa del browser (View Transitions cross-document): il sito resta
   statico, niente router, niente JS. Dove non e supportata la navigazione e
   quella normale di sempre.
   Richiede pagine servite via http(s): da file:// non si attiva. */
@view-transition { navigation: auto; }

/* Dissolvenza incrociata vera: la pagina vecchia e la nuova usano le
   animazioni del browser (sfumano in somma, mai sotto il 100% di
   copertura), con la stessa durata e la stessa curva. Durate o ritardi
   diversi aprono un buco a meta passaggio da cui si vede il fondo chiaro
   vuoto: era quello lo "scatto" fra pagine scure. */
::view-transition-group(*) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* la barra non sfuma con il resto: resta ferma mentre il contenuto cambia,
   ed e questo che toglie l effetto "a scatti" */
.nav { view-transition-name: nav; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}