/* GP Italian Trade — landing page
   Colori e font dal brand book (fase3/colori.py, assets/brand/tokens.css).
   Dimensioni del testo sulla scala Tailwind, spaziature solo dai token qui sotto. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-vf.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; }

:root {
  /* palette */
  --nero: #12100E;      /* fondo principale */
  --blu: #16222F;       /* fondo secondario */
  --carta: #ECE6DC;     /* testo su scuro, fondo chiaro, mai bianco puro */
  --rame: #C9603D;      /* unico accento */
  --carta-60: #95908A;  /* testo secondario su nero */
  --tono-nero: #23211E; /* marchio tono su tono sul Nero */
  --tono-blu: #27323D;  /* marchio tono su tono sul Blu */

  /* spaziature */
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px;
  --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;

  /* movimento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-entrata: cubic-bezier(0.16, 1, 0.3, 1); /* ingressi: decelerazione più decisa */

  --font: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --larghezza: 1280px;
  --margine: var(--s-200);
}
@media (min-width: 768px) { :root { --margine: var(--s-600); } }

/* scala tipografica (Tailwind) */
.t-xs   { font-size: 0.75rem;  line-height: 1rem; }
.t-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.t-base { font-size: 1rem;     line-height: 1.5rem; }
.t-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.t-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.t-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.t-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.t-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.t-5xl  { font-size: 3rem;     line-height: 1; }
.t-6xl  { font-size: 3.75rem;  line-height: 1; }
.t-7xl  { font-size: 4.5rem;   line-height: 1; }
@media (min-width: 768px) {
  .md-t-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .md-t-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md-t-5xl { font-size: 3rem; line-height: 1; }
  .md-t-6xl { font-size: 3.75rem; line-height: 1; }
  .md-t-7xl { font-size: 4.5rem; line-height: 1; }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s-900); -webkit-text-size-adjust: 100%; }
body {
  background: var(--nero); color: var(--carta);
  font-family: var(--font); font-size: 1rem; line-height: 1.5rem;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--rame); color: var(--nero); }
:focus-visible { outline: 2px solid var(--rame); outline-offset: 4px; }

.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--margine); }

/* titoli: Archivo Expanded ExtraBold maiuscolo, come wordmark e caroselli */
.titolo { font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.005em; }
/* didascalie e codici: mono spaziato */
.didascalia { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; }

/* icone Material Symbols colorate con maschera */
.icona { display: inline-block; flex: none; width: var(--s-300); height: var(--s-300);
  background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

.i-globo   { --i: url(../img/logo/gp-marchio-mono.svg); }
.i-freccia { --i: url(../img/icone/arrow_forward.svg); }

/* salta al contenuto */
.salta { position: absolute; left: var(--s-200); top: var(--s-200); z-index: 100; padding: var(--s-75) var(--s-200);
  border-radius: 9999px; background: var(--rame); color: var(--nero); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.salta:focus { transform: none; }

/* punto rame che respira: firma ricorrente di etichette e numeri */
.punto { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 9999px; background: var(--rame); }
.hero__etichetta .punto { animation: respiro 2800ms var(--curva) infinite alternate; }
@keyframes respiro { from { opacity: 1; } to { opacity: 0.35; } }

/* ---------- pulsanti ---------- */
.pulsante {
  display: inline-flex; align-items: center; gap: var(--s-100);
  padding: var(--s-100) var(--s-300); border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--rame); color: var(--nero);
  font: 600 1rem/1.5rem var(--font); text-decoration: none;
  transition: background-color 300ms var(--curva), transform 500ms var(--curva);
}
.pulsante:hover { background: var(--carta); transform: translateY(-2px); }
.pulsante:active { transform: translateY(0) scale(0.98); }
.pulsante .icona { width: var(--s-200); height: var(--s-200); transition: transform 500ms var(--curva); }
.pulsante:hover .icona { transform: translateX(var(--s-50)); }
.pulsante--piccolo { padding: var(--s-75) var(--s-200); font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- navigazione ---------- */
.nav {
  position: fixed; z-index: 50; top: max(var(--s-200), env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-400);
  width: max-content; max-width: calc(100% - 2 * var(--s-200));
  padding: var(--s-75) var(--s-75) var(--s-75) var(--s-300); border-radius: 9999px;
  background: rgb(18 16 14 / 0.84); box-shadow: inset 0 0 0 1px rgb(236 230 220 / 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
}
.nav__logo { display: block; width: 160px; }
.nav__logo img { width: 100%; }
.nav__voci { display: flex; gap: var(--s-75); list-style: none; padding: 0; }
.nav__voci a {
  position: relative; display: block; padding: var(--s-75) var(--s-100); border-radius: 9999px;
  color: var(--carta-60); text-decoration: none; transition: color 300ms var(--curva), background-color 300ms var(--curva);
}
.nav__voci a:hover { color: var(--carta); background: rgb(236 230 220 / 0.06); }
.nav__voci a[aria-current="true"] { color: var(--carta); }
.nav__voci a::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 9999px;
  background: var(--rame); opacity: 0; transform: scale(0); transition: opacity 300ms var(--curva), transform 500ms var(--curva);
}
.nav__voci a[aria-current="true"]::after { opacity: 1; transform: scale(1); }
.nav__menu { display: none; }

@media (max-width: 899px) {
  .nav { left: var(--s-200); right: var(--s-200); transform: none; width: auto; max-width: none; justify-content: space-between; padding-left: var(--s-200); }
  .nav__voci, .nav > .pulsante { display: none; }
  .nav__menu {
    display: grid; place-items: center; width: var(--s-500); height: var(--s-500); border-radius: 9999px;
    background: rgb(236 230 220 / 0.06); border: 0; color: var(--carta); cursor: pointer;
    transition: background-color 300ms var(--curva), transform 500ms var(--curva);
  }
  .nav__menu:active { transform: scale(0.96); }
  .nav__menu span { grid-area: 1 / 1; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 500ms var(--curva), opacity 300ms var(--curva); }
  .nav__menu span:nth-child(1) { transform: translateY(-5px); }
  .nav__menu span:nth-child(3) { transform: translateY(5px); }
  .nav__menu[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .nav__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav__menu[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
}

/* pannello mobile a tutta altezza */
.pannello {
  /* copre anche la zona delle barre di Safari: altezza massima del viewport, non quella visibile */
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; min-height: 100%; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-900) var(--margine) calc(var(--s-600) + env(safe-area-inset-bottom) + 100lvh - 100svh);
  background: rgb(18 16 14 / 0.96); overscroll-behavior: contain; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  opacity: 0; visibility: hidden; transition: opacity 500ms var(--curva), visibility 0s linear 500ms;
}
.pannello[data-aperto] { opacity: 1; visibility: visible; transition: opacity 500ms var(--curva); }
.pannello ul { list-style: none; padding: 0; display: grid; gap: var(--s-200); margin-bottom: var(--s-600); }
.pannello li, .pannello .pulsante { opacity: 0; transform: translateY(var(--s-300)); transition: opacity 500ms var(--curva), transform 500ms var(--curva); }
.pannello[data-aperto] li, .pannello[data-aperto] .pulsante { opacity: 1; transform: none; transition-delay: calc(var(--n) * 60ms); }
.pannello a:not(.pulsante) { text-decoration: none; }
.pannello .pulsante { align-self: flex-start; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: calc(var(--s-900) + var(--s-500)) var(--s-800); }
.hero__globo {
  position: absolute; z-index: 0; width: 1040px; aspect-ratio: 1; right: -260px; top: 50%; margin-top: -520px;
  color: var(--tono-nero); pointer-events: none;
}
.hero__globo .icona { width: 100%; height: 100%; animation: deriva 16s var(--curva) infinite alternate; }
@keyframes deriva { from { transform: rotate(-3deg) translateY(-8px); } to { transform: rotate(3deg) translateY(8px); } }
.hero__griglia { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-600); align-items: center; }
.hero__testo { max-width: 680px; }
.hero h1 { margin-bottom: var(--s-400); }
.hero__sotto { max-width: 560px; color: var(--carta-60); margin-bottom: var(--s-500); }
.solo-largo { display: none; }
@media (min-width: 1280px) { .solo-largo { display: inline; } .hero__sotto { max-width: 680px; } }

.hero__prova { display: flex; flex-wrap: wrap; gap: var(--s-300) var(--s-600); margin-top: var(--s-700); }
.hero__prova div { display: flex; flex-direction: column-reverse; gap: var(--s-75); }
.hero__prova dt { display: flex; align-items: center; gap: var(--s-75); color: var(--carta-60); letter-spacing: 0.2em; }
.hero__prova dt::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--rame); }
.hero__prova dd { margin: 0; }

.hero__foto { position: relative; }
.hero__cornice { position: relative; overflow: hidden; border-radius: 24px; clip-path: inset(0 round 24px); }
.hero__cornice picture { display: block; will-change: transform; }
.hero__cornice img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* etichetta di vetro sulla foto: 16px dal bordo, raggio 24 − 16 = 8 */
.hero__etichetta {
  position: absolute; left: var(--s-200); bottom: var(--s-200); display: inline-flex; align-items: center; gap: var(--s-100);
  padding: var(--s-75) var(--s-200); border-radius: 8px; color: var(--carta); letter-spacing: 0.2em;
  background: rgb(18 16 14 / 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

@media (min-width: 1024px) {
  .hero { min-height: 100svh; display: flex; align-items: center; padding-bottom: var(--s-800); }
  .hero__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-800); }
  .hero__cornice img { max-height: calc(100svh - 200px); }
}
@media (max-width: 767px) {
  .hero__globo { width: 640px; right: -200px; top: auto; bottom: -120px; margin-top: 0; }
  .hero__prova { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-200); }
  .hero__prova dd { font-size: 1.5rem; line-height: 2rem; }
  .hero__prova dt { align-items: flex-start; letter-spacing: 0.15em; }
  .hero__prova dt::before { margin-top: 5px; }
  .hero__cornice { border-radius: 16px; clip-path: inset(0 round 16px); }
  .hero__etichetta { left: var(--s-100); bottom: var(--s-100); border-radius: 4px; } /* 16 − 12 = 4 */
}

/* ---------- sezioni ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sezione { padding-block: var(--s-900); }
@media (min-width: 1024px) { .sezione { padding-block: calc(var(--s-900) + var(--s-400)); } }
/* due sezioni di fila sullo stesso fondo condividono un solo spazio */
.sezione + .sezione { padding-top: 0; }
.sezione__testa { max-width: 760px; margin-bottom: var(--s-700); }
.etichetta-sezione { display: flex; align-items: center; gap: var(--s-100); color: var(--rame); margin-bottom: var(--s-300); }
.sezione__testa h2 { margin-bottom: var(--s-300); }
.sezione__sotto { max-width: 560px; color: var(--carta-60); }

/* ---------- il problema: quattro carte che passano da "da soli" a "con GP" ---------- */
.problema__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-400); margin-bottom: var(--s-600); }
.problema__testa .sezione__testa { margin-bottom: 0; }

/* interruttore a pillola: il cursore scorre sotto la voce attiva */
.interruttore {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: none;
  padding: var(--s-50); border-radius: 9999px; background: var(--tono-nero); box-shadow: inset 0 0 0 1px rgb(236 230 220 / 0.06);
}
.interruttore button {
  position: relative; z-index: 1; min-width: 112px; padding: var(--s-75) var(--s-300); border: 0; border-radius: 9999px;
  background: none; color: var(--carta-60); font: 600 0.875rem/1.25rem var(--font); cursor: pointer;
  transition: color 300ms var(--curva), transform 300ms var(--curva);
}
.interruttore button:hover { color: var(--carta); }
.interruttore button:active { transform: scale(0.97); }
.interruttore button[aria-pressed="true"] { color: var(--nero); }
.interruttore__cursore {
  position: absolute; top: var(--s-50); bottom: var(--s-50); left: var(--s-50); width: calc(50% - var(--s-50));
  border-radius: 9999px; background: var(--carta-60); transition: transform 600ms var(--curva), background-color 400ms var(--curva);
}
[data-gp] .interruttore__cursore { transform: translateX(100%); background: var(--rame); }

.carte { list-style: none; padding: 0; display: grid; gap: var(--s-200); }
@media (min-width: 768px) { .carte { grid-template-columns: 1fr 1fr; } }
.carta {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-500);
  min-height: 220px; padding: var(--s-300); border-radius: 24px; background: var(--tono-nero); overflow: hidden;
}
/* il fondo cambia con una dissolvenza: un secondo strato Blu porto sotto il contenuto */
.carta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blu); opacity: 0;
  transition: opacity 700ms var(--curva); transition-delay: calc(var(--n, 0) * 110ms); }
.carta > * { position: relative; }
.carta__testa { display: flex; align-items: center; justify-content: space-between; }
.carta__num { color: var(--carta-60); }
.carta__icona { width: var(--s-500); height: var(--s-500); color: var(--carta-60); opacity: 0.5;
  transition: color 500ms var(--curva), opacity 500ms var(--curva), transform 700ms var(--curva); transition-delay: calc(var(--n, 0) * 110ms); }
.carta__facce { display: grid; }
.faccia { grid-area: 1 / 1; max-width: 440px; text-wrap: pretty;
  transition: opacity 500ms var(--curva), transform 700ms var(--curva); transition-delay: calc(var(--n, 0) * 110ms); }
.faccia--soli { color: var(--carta-60); }
.faccia--gp { color: var(--carta); font-weight: 500; opacity: 0; transform: translateY(var(--s-200)); }

[data-gp] .carta::before { opacity: 1; }
[data-gp] .carta__icona { color: var(--rame); opacity: 1; transform: rotate(-8deg) scale(1.08); }
[data-gp] .faccia--soli { opacity: 0; transform: translateY(calc(-1 * var(--s-200))); }
[data-gp] .faccia--gp { opacity: 1; transform: none; transition-delay: calc(var(--n, 0) * 110ms + 120ms); }
[data-gp] .carta__num { color: var(--rame); }

@media (min-width: 1024px) { .carta { min-height: 240px; padding: var(--s-400); } }
@media (max-width: 767px) {
  .problema__testa { gap: var(--s-300); margin-bottom: var(--s-400); }
  /* sul telefono l'interruttore resta a portata di pollice mentre si scorrono le carte */
  .interruttore { width: 100%; position: sticky; top: calc(max(var(--s-200), env(safe-area-inset-top)) + 64px); z-index: 5;
    background: rgb(35 33 30 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .problema__testa { display: contents; }
  .problema__testa .sezione__testa { margin-bottom: var(--s-300); }
  .carte { margin-top: var(--s-300); }
  .carta { min-height: 0; gap: var(--s-300); }
}

/* ---------- comparsa allo scorrimento ---------- */
.rivela { opacity: 0; transform: translateY(var(--s-400)); transition: opacity 800ms var(--curva), transform 800ms var(--curva); transition-delay: calc(var(--n, 0) * 90ms); }
.rivela.visibile { opacity: 1; transform: none; }

/* ---------- ingresso della hero ---------- */
/* righe del titolo che salgono da sotto una maschera, una dopo l'altra */
.riga { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.riga > span { display: block; opacity: 0; transform: translateY(100%); transition: transform 1400ms var(--curva-entrata), opacity 1000ms var(--curva-entrata); transition-delay: calc(var(--n, 0) * 110ms + 200ms + var(--ritardo, 0ms)); }
.entra { opacity: 0; transform: translateY(var(--s-200)); transition: opacity 1200ms var(--curva), transform 1200ms var(--curva); transition-delay: calc(var(--n, 0) * 100ms + 250ms + var(--ritardo, 0ms)); }
.hero__cornice img { opacity: 0; transform: scale(1.18); transition: transform 2200ms var(--curva), opacity 1400ms var(--curva); transition-delay: 300ms; }
.nav { opacity: 0; translate: 0 calc(-1 * var(--s-200)); transition: opacity 1200ms var(--curva), translate 1200ms var(--curva); }
.hero__globo { opacity: 0; transition: opacity 2400ms var(--curva) 500ms; will-change: transform; }

.pronto .riga > span { opacity: 1; transform: none; }
.pronto .entra { opacity: 1; transform: none; }
.pronto .hero__cornice img { opacity: 1; transform: scale(1.08); } /* margine per la parallasse */
.pronto .nav { opacity: 1; translate: 0 0; }
.pronto .hero__globo { opacity: 1; }

/* senza JavaScript tutto resta visibile */
.no-js .riga > span, .no-js .entra, .no-js .hero__cornice img, .no-js .nav, .no-js .hero__globo, .no-js .rivela { opacity: 1; transform: none; translate: none; }

/* manifesto: una griglia a tutto schermo, la frase in una scheda e le foto attorno */
.manifesto__schermo { display: grid; gap: var(--s-75); padding: var(--s-75); height: 100svh; min-height: 600px; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "testo testo" "stretta stretta" "fabbrica caschetto"; }
.manifesto__testo { grid-area: testo; display: flex; flex-direction: column; justify-content: center; padding: var(--s-800) var(--s-300) var(--s-300); border-radius: 24px; background: var(--blu); }
.manifesto__frase { max-width: 720px; line-height: 1.1; text-wrap: balance; }
.manifesto__accento { color: var(--rame); }
.manifesto__volto { display: inline-block; width: 1.9em; height: 0.82em; vertical-align: -0.06em; border-radius: 9999px; overflow: hidden; background: var(--tono-blu); }
.manifesto__volto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) and (max-height: 740px) { .manifesto__frase { font-size: 1.5rem; line-height: 1.15; } }
.tessera { position: relative; overflow: hidden; border-radius: 24px; background: var(--tono-blu); }
.tessera img { width: 100%; height: 100%; object-fit: cover; }
.tessera--stretta { grid-area: stretta; }
.tessera--fabbrica { grid-area: fabbrica; }
.tessera--caschetto { grid-area: caschetto; }
.tessera--caschetto img { object-position: 50% 40%; }
.tessera--stretta img { object-position: 50% 15%; }
@media (min-width: 768px) {
  .manifesto__schermo { gap: var(--s-200); padding: var(--s-200); }
  .manifesto__testo { padding: var(--s-900) var(--s-600) var(--s-600); border-radius: 32px; }
  .tessera { border-radius: 32px; }
}
@media (min-width: 1024px) {
  .manifesto__schermo { grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "testo stretta stretta" "testo fabbrica caschetto"; }
}
@media (min-width: 1600px) { .manifesto__frase { font-size: 3.75rem; line-height: 1.1; max-width: 760px; } }
@media (min-width: 1024px) and (max-width: 1439px) { .manifesto__frase { font-size: 2.25rem; line-height: 1.1; } }

/* con JavaScript la sezione diventa un binario alto: la griglia resta ferma, le parole si accendono e le foto entrano */
.manifesto[data-attivo] .manifesto__binario { height: 260svh; }
.manifesto[data-attivo] .manifesto__schermo { position: sticky; top: 0; }
.manifesto[data-attivo] .parola { opacity: 0.28; transition: opacity 500ms var(--curva); }
.manifesto[data-attivo] .parola.accesa { opacity: 1; }
.manifesto[data-attivo] .manifesto__volto { opacity: 0; transform: scale(0.4); transition: opacity 500ms var(--curva), transform 700ms var(--curva); }
.manifesto[data-attivo] .manifesto__volto.accesa { opacity: 1; transform: none; }
.manifesto[data-attivo] .tessera picture { display: block; height: 100%; opacity: 0; transform: scale(1.16); transition: opacity 900ms var(--curva), transform 1400ms var(--curva-entrata); }
.manifesto[data-attivo] .tessera.accesa picture { opacity: 1; transform: none; }
@media (max-width: 767px) { .manifesto[data-attivo] .manifesto__binario { height: 220svh; } }

/* metodo: tre fasi lungo una linea rame; su desktop la foto resta ferma e cambia con la fase */
.metodo__corpo { display: grid; gap: var(--s-600); }
.metodo__vetrina { display: none; }
.metodo__binario { position: relative; padding-left: var(--s-400); }
.metodo__linea { position: absolute; top: 0; bottom: 0; left: 7px; width: 2px; border-radius: 9999px; background: var(--tono-nero); overflow: hidden; }
.metodo__linea span { display: block; height: 100%; background: var(--rame); transform: scaleY(var(--avanza, 0)); transform-origin: 50% 0; }
.fasi, .fase__passi { list-style: none; margin: 0; padding: 0; }
.fasi { display: grid; gap: var(--s-300); }
.fase { position: relative; border-radius: 24px; background: var(--tono-nero); transition: background-color 500ms var(--curva); }
.fase::before { content: ""; position: absolute; top: var(--s-400); left: calc(var(--s-400) * -1 + 1px); width: 14px; height: 14px; border-radius: 9999px; background: var(--nero); box-shadow: inset 0 0 0 2px var(--tono-blu); transition: background-color 500ms var(--curva), box-shadow 500ms var(--curva), transform 500ms var(--curva); }
.fase.raggiunta::before { background: var(--rame); box-shadow: inset 0 0 0 2px var(--rame); transform: scale(1.15); }
.fase.attiva { background: var(--blu); }
.fase__foto { aspect-ratio: 4 / 3; border-radius: 24px 24px 0 0; overflow: hidden; background: var(--tono-blu); }
.fase__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fase__corpo { padding: var(--s-300); }
.fase__num { color: var(--rame); }
.fase h3 { margin-top: var(--s-100); text-wrap: balance; }
.fase__testo { margin-top: var(--s-100); color: var(--carta-60); text-wrap: pretty; max-width: 520px; }
.fase__passi { display: grid; gap: var(--s-200); margin-top: var(--s-300); }
.fase__passi li { display: flex; align-items: center; gap: var(--s-200); text-wrap: pretty; }
.metodo__icona { display: grid; place-items: center; flex: none; width: var(--s-500); height: var(--s-500); border-radius: 9999px; background: var(--tono-blu); color: var(--carta-60); transition: background-color 500ms var(--curva), color 500ms var(--curva); }
.metodo__icona .icona { width: 20px; height: 20px; }
.fase.attiva .metodo__icona { background: var(--tono-blu); color: var(--rame); }
@media (min-width: 768px) {
  .metodo__binario { padding-left: var(--s-600); }
  .fase::before { left: calc(var(--s-600) * -1 + 1px); top: var(--s-600); }
  .fase { border-radius: 32px; }
  .fase__foto { border-radius: 32px 32px 0 0; aspect-ratio: 16 / 9; }
  .fase__corpo { padding: var(--s-600); }
}
@media (min-width: 1024px) {
  .metodo__corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .metodo__vetrina { display: block; position: sticky; top: var(--s-900); height: calc(100svh - var(--s-900) - var(--s-400)); max-height: 820px; border-radius: 32px; overflow: hidden; background: var(--tono-blu); }
  .metodo__foto { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity 900ms var(--curva), transform 1400ms var(--curva-entrata); }
  .metodo__foto.attiva { opacity: 1; transform: none; }
  .metodo__foto img { width: 100%; height: 100%; object-fit: cover; }
  .metodo__badge { position: absolute; left: var(--s-300); bottom: var(--s-300); display: flex; align-items: center; gap: var(--s-100); padding: var(--s-100) var(--s-200); border-radius: 9999px; background: rgb(18 16 14 / 0.84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--carta); }
  .metodo__badge-testo { transition: opacity 300ms var(--curva), transform 300ms var(--curva); }
  .metodo__badge-testo.cambia { opacity: 0; transform: translateY(6px); }
  .fase__foto { display: none; }
  .fasi { gap: var(--s-300); }
  .fase { min-height: 44svh; display: flex; align-items: center; }
}

/* nastro delle categorie (.categorie): due righe che scorrono piano in versi opposti */
.categorie { display: grid; gap: var(--s-100); margin-bottom: var(--s-600); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.categorie__binario { display: flex; width: max-content; animation: categorie 60s linear infinite; }
.categorie__binario--inverso { animation-direction: reverse; animation-duration: 70s; }
.categorie:hover .categorie__binario { animation-play-state: paused; }
.categorie__riga { display: flex; gap: var(--s-100); margin: 0; padding: 0 var(--s-100) 0 0; list-style: none; }
.categorie__riga li { display: flex; align-items: center; gap: var(--s-100); padding: var(--s-100) var(--s-300); border-radius: 9999px; background: var(--tono-nero); color: var(--carta); font-size: 0.875rem; line-height: 1.25rem; white-space: nowrap; }
.categorie__binario--inverso li { background: transparent; box-shadow: inset 0 0 0 1px var(--tono-blu); color: var(--carta-60); }
@keyframes categorie { to { transform: translateX(-50%); } }
@media (min-width: 768px) { .categorie__riga li { padding: var(--s-200) var(--s-400); font-size: 1rem; line-height: 1.5rem; } }
/* viaggio in Cina: foto larga, testo e rotta in tre tappe che si disegna entrando */
.viaggio__carta { border-radius: 24px; background: var(--blu); overflow: hidden; }
.viaggio__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--tono-blu); overflow: hidden; }
.viaggio__foto picture { display: block; height: 100%; }
.viaggio__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 36% 50%; transform: scale(1.1); transition: transform 1800ms var(--curva-entrata); }
.viaggio.mostra .viaggio__foto img { transform: none; }
.viaggio__conto { position: absolute; left: var(--s-200); bottom: var(--s-200); display: flex; align-items: center; gap: var(--s-100); padding: var(--s-100) var(--s-200); border-radius: 9999px; background: rgb(18 16 14 / 0.84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.viaggio__conto .punto { animation: respiro 1.6s var(--curva) infinite alternate; }
.viaggio__corpo { display: grid; gap: var(--s-600); padding: var(--s-400) var(--s-300); }
.viaggio__testo h2 { text-wrap: balance; }
.viaggio__sotto { margin: var(--s-300) 0 var(--s-400); max-width: 520px; color: var(--carta-60); text-wrap: pretty; }
.rotta { position: relative; display: grid; gap: var(--s-400); margin: 0; padding: 0 0 0 var(--s-400); list-style: none; align-content: center; }
.rotta::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; border-radius: 9999px; background: var(--rame); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1600ms var(--curva) 300ms; }
.rotta.visibile::before { transform: none; }
.tappa { position: relative; }
.tappa::before { content: ""; position: absolute; left: calc(var(--s-400) * -1); top: 8px; width: 14px; height: 14px; border-radius: 9999px; background: var(--blu); box-shadow: inset 0 0 0 2px var(--rame); }
.tappa:last-child::before { background: var(--rame); }
.tappa__testa { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-100) var(--s-200); }
.tappa__cn { color: var(--rame); letter-spacing: 0.2em; }
.tappa__testo { margin-top: var(--s-50); max-width: 440px; color: var(--carta-60); text-wrap: pretty; }
@media (min-width: 768px) {
  .viaggio__carta { border-radius: 32px; }
  .viaggio__foto { aspect-ratio: 16 / 9; }
  .viaggio__conto { left: var(--s-300); bottom: var(--s-300); }
  .viaggio__corpo { padding: var(--s-600); }
}
@media (min-width: 1024px) {
  .viaggio__foto { aspect-ratio: 21 / 9; }
  .viaggio__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-700); padding: var(--s-700); }
}

/* domande: lato fermo con contatto diretto, elenco a fisarmonica */
.domande__griglia { display: grid; gap: var(--s-600); }
.domande__lato .sezione__testa { margin-bottom: var(--s-400); }
.contatto { padding: var(--s-300); border-radius: 24px; background: var(--blu); }
.contatto__testa { display: flex; align-items: center; gap: var(--s-200); }
.contatto__testa > span:last-child { display: grid; gap: var(--s-50); }
.contatto__testa .didascalia { color: var(--rame); }
.contatto__volto { flex: none; width: var(--s-700); height: var(--s-700); border-radius: 9999px; overflow: hidden; background: var(--tono-blu); box-shadow: 0 0 0 2px var(--blu), 0 0 0 4px var(--rame); }
.contatto__volto img { width: 100%; height: 100%; object-fit: cover; }
.contatto__testo { margin-top: var(--s-200); color: var(--carta-60); }
.contatto__vie { display: grid; gap: var(--s-75); margin: var(--s-300) 0 0; padding: 0; list-style: none; }
.contatto__vie a { display: flex; align-items: center; gap: var(--s-100); min-height: 44px; padding: var(--s-100) var(--s-200); border-radius: 9999px; background: var(--tono-blu); color: var(--carta); font-size: 0.875rem; line-height: 1.25rem; text-decoration: none; overflow-wrap: anywhere; transition: background-color 300ms var(--curva), color 300ms var(--curva), transform 300ms var(--curva); }
.contatto__vie .icona { width: 18px; height: 18px; color: var(--rame); transition: color 300ms var(--curva); }
.contatto__vie a:hover { background: var(--rame); color: var(--nero); transform: translateY(-2px); }
.contatto__vie a:hover .icona { color: var(--nero); }
.contatto__vie a:active { transform: translateY(1px); }
.domande__lista { display: grid; gap: var(--s-100); margin: 0; padding: 0; list-style: none; }
.domanda { border-radius: 24px; background: var(--tono-nero); transition: background-color 500ms var(--curva); }
.domanda.aperta { background: var(--blu); }
.domanda__titolo { margin: 0; font: inherit; }
.domanda__bottone { display: flex; align-items: center; justify-content: space-between; gap: var(--s-300); width: 100%; padding: var(--s-300); border: 0; border-radius: 24px; background: none; color: var(--carta); font-family: var(--font); font-weight: 500; text-align: left; cursor: pointer; }
.domanda__bottone span:first-child { text-wrap: pretty; }
.domanda__segno { position: relative; flex: none; width: var(--s-500); height: var(--s-500); border-radius: 9999px; background: var(--tono-blu); transition: background-color 300ms var(--curva), transform 500ms var(--curva); }
.domanda__segno::before, .domanda__segno::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 9999px; background: var(--carta); transition: transform 500ms var(--curva), background-color 300ms var(--curva); }
.domanda__segno::after { transform: rotate(90deg); }
.domanda__bottone:hover .domanda__segno { background: var(--rame); }
.domanda__bottone:hover .domanda__segno::before, .domanda__bottone:hover .domanda__segno::after { background: var(--nero); }
.domanda.aperta .domanda__segno { transform: rotate(45deg); background: var(--rame); }
.domanda.aperta .domanda__segno::before, .domanda.aperta .domanda__segno::after { background: var(--nero); }
.domanda__risposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--curva); }
.domanda__risposta > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear 500ms; }
.domanda.aperta .domanda__risposta > div { visibility: visible; transition-delay: 0s; }
.no-js .domanda__risposta { grid-template-rows: 1fr; }
.no-js .domanda__risposta > div { visibility: visible; }
.no-js .domanda__risposta p { opacity: 1; transform: none; }
.domanda__risposta p { padding: 0 var(--s-300) var(--s-300); max-width: 640px; color: var(--carta-60); text-wrap: pretty; opacity: 0; transform: translateY(-8px); transition: opacity 300ms var(--curva), transform 500ms var(--curva); }
.domanda.aperta .domanda__risposta { grid-template-rows: 1fr; }
.domanda.aperta .domanda__risposta p { opacity: 1; transform: none; transition-delay: 120ms; }
@media (min-width: 768px) {
  .contatto { padding: var(--s-400); border-radius: 32px; }
  .domanda__bottone { padding: var(--s-300) var(--s-400); }
  .domanda__risposta p { padding: 0 var(--s-400) var(--s-400); }
}
@media (min-width: 1024px) {
  .domande__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-800); align-items: start; }
  .domande__lato { position: sticky; top: var(--s-900); }
}

/* preventivo: scheda finale con modulo */
.preventivo__carta { display: grid; gap: var(--s-600); padding: var(--s-400) var(--s-300); border-radius: 24px; background: var(--blu); }
.preventivo__lato h2 { text-wrap: balance; }
.preventivo__sotto { margin-top: var(--s-300); max-width: 480px; color: var(--carta-60); text-wrap: pretty; }
.preventivo__garanzie { display: grid; gap: var(--s-200); margin: var(--s-400) 0 0; padding: 0; list-style: none; }
.preventivo__garanzie li { display: flex; align-items: center; gap: var(--s-200); }
.preventivo__garanzie .icona { width: 20px; height: 20px; color: var(--rame); }
.modulo { display: grid; gap: var(--s-300); align-content: start; }
.modulo__riga { display: grid; gap: var(--s-300); align-items: start; }
.campo { display: grid; gap: var(--s-75); min-width: 0; margin: 0; padding: 0; border: 0; }
.campo label, .campo legend { color: var(--carta); font-weight: 500; }
.campo__facoltativo { margin-left: var(--s-50); color: var(--carta-60); font-weight: 400; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea { width: 100%; padding: var(--s-200); border: 0; border-radius: 16px; background: var(--nero); color: var(--carta); font: inherit; font-size: 1rem; line-height: 1.5rem; box-shadow: inset 0 0 0 1px var(--tono-nero); transition: box-shadow 300ms var(--curva), background-color 300ms var(--curva); }
.campo textarea { resize: vertical; min-height: 128px; }
.campo ::placeholder { color: var(--carta-60); opacity: 0.7; }
.campo input:hover, .campo textarea:hover { box-shadow: inset 0 0 0 1px var(--carta-60); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rame); }
.campo[data-errore] input, .campo[data-errore] textarea { box-shadow: inset 0 0 0 2px var(--rame); }
.campo__errore { min-height: 0; color: var(--rame); }
.campo__errore:empty { display: none; }
.campo[data-errore] { animation: scossa 400ms var(--curva); }
@keyframes scossa { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.campo--scelte legend { margin-bottom: var(--s-75); }
.scelte { display: flex; flex-wrap: wrap; gap: var(--s-100); }
.scelte label { position: relative; }
.scelte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelte span { display: block; padding: var(--s-100) var(--s-200); border-radius: 9999px; background: var(--nero); color: var(--carta-60); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: background-color 300ms var(--curva), color 300ms var(--curva), transform 300ms var(--curva); }
.scelte label:hover span { color: var(--carta); }
.scelte input:checked + span { background: var(--carta); color: var(--nero); }
.scelte input:focus-visible + span { outline: 2px solid var(--rame); outline-offset: 2px; }
.scelte input:active + span { transform: scale(0.98); }
.consenso { position: relative; display: flex; align-items: flex-start; gap: var(--s-200); color: var(--carta-60); font-weight: 400; cursor: pointer; }
.consenso input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.consenso__casella { position: relative; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--nero); box-shadow: inset 0 0 0 1px var(--carta-60); transition: background-color 300ms var(--curva), box-shadow 300ms var(--curva); }
.consenso__casella::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--nero); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 300ms var(--curva); }
.consenso input:checked + .consenso__casella { background: var(--rame); box-shadow: inset 0 0 0 1px var(--rame); }
.consenso input:checked + .consenso__casella::after { transform: rotate(45deg) scale(1); }
.consenso input:focus-visible + .consenso__casella { outline: 2px solid var(--rame); outline-offset: 2px; }
.campo[data-errore] .consenso__casella { box-shadow: inset 0 0 0 2px var(--rame); }
.consenso a { color: var(--carta); text-underline-offset: 3px; }
.modulo__invia { justify-self: start; }
.modulo__invia[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.modulo__esito:empty { display: none; }
.modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__esito[data-ok] { background: var(--rame); color: var(--nero); }
.modulo__esito { padding: var(--s-200); border-radius: 16px; background: var(--tono-blu); color: var(--carta); }
@media (min-width: 640px) { .modulo__riga { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .preventivo__carta { padding: var(--s-600); border-radius: 32px; } }
@media (min-width: 1024px) { .preventivo__carta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-800); padding: var(--s-700); } }

/* piede */
.piede { padding: var(--s-700) 0 var(--s-400); background: var(--nero); }
.piede a { color: inherit; text-decoration: none; transition: color 300ms var(--curva); }
.piede a:hover { color: var(--rame); }
.piede__alto { display: grid; gap: var(--s-500); padding-bottom: var(--s-600); }
.piede__marca { display: grid; gap: var(--s-200); justify-items: start; }
.piede__marca .didascalia { color: var(--carta-60); }
.piede__social { display: flex; gap: var(--s-100); margin: var(--s-100) 0 0; padding: 0; list-style: none; }
.piede__social a { display: grid; place-items: center; width: var(--s-500); height: var(--s-500); border-radius: 9999px; background: var(--tono-nero); color: var(--carta); transition: background-color 300ms var(--curva), color 300ms var(--curva), transform 300ms var(--curva); }
.piede__social a:hover { background: var(--rame); color: var(--nero); transform: translateY(-2px); }
.piede__social .icona { width: 18px; height: 18px; }
.piede__nav ul, .piede__contatti, .piede__basso ul { display: grid; gap: var(--s-100); margin: 0; padding: 0; list-style: none; }
.piede__contatti { color: var(--carta-60); }
.piede__nota { margin-left: var(--s-50); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--rame); }
.piede__basso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-200); padding-top: var(--s-300); color: var(--carta-60); }
.piede__basso ul { display: flex; gap: var(--s-300); }
@media (min-width: 768px) { .piede__alto { grid-template-columns: 2fr 1fr 1.4fr; } }

@media (prefers-reduced-motion: reduce) { .categorie__binario { animation: none; flex-wrap: wrap; width: auto; } .categorie__riga[aria-hidden] { display: none; } .categorie__riga { flex-wrap: wrap; } }

/* chi siamo: foto della sede, i numeri dell'azienda e la squadra */
.struttura__griglia { display: grid; gap: var(--s-200); }
.struttura__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--tono-blu); }
.struttura__foto picture { display: block; height: 100%; }
.struttura__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; }
.struttura__didascalia { position: absolute; left: var(--s-200); bottom: var(--s-200); display: flex; align-items: center; gap: var(--s-100); padding: var(--s-100) var(--s-200); border-radius: 9999px; background: rgb(18 16 14 / 0.84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.struttura__numeri { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-600); padding: var(--s-400) var(--s-300); border-radius: 24px; background: var(--blu); }
.struttura__cifra { display: grid; gap: var(--s-200); }
.struttura__cifra .titolo { color: var(--rame); white-space: nowrap; }
@media (min-width: 1280px) { .struttura__cifra .titolo { font-size: 4.5rem; line-height: 1; } }
.struttura__cifra .t-lg { max-width: 320px; }
.struttura__fatti { display: grid; gap: var(--s-200); margin: 0; padding: 0; list-style: none; }
.struttura__fatti li { display: flex; align-items: baseline; gap: var(--s-200); color: var(--carta-60); }
.struttura__fatti .punto { transform: translateY(-3px); }
.ruoli { display: grid; gap: var(--s-200); margin: 0; padding: 0; list-style: none; }
.ruolo { display: flex; align-items: flex-start; gap: var(--s-200); padding: var(--s-300); border-radius: 24px; background: var(--tono-nero); transition: background-color 300ms var(--curva), transform 500ms var(--curva); }
.ruolo__icona { display: grid; place-items: center; flex: none; width: var(--s-600); height: var(--s-600); border-radius: 9999px; background: var(--tono-blu); color: var(--rame); transition: transform 500ms var(--curva); }
.ruolo__testa { display: flex; align-items: baseline; gap: var(--s-100); }
.ruolo__testa .titolo { color: var(--rame); }
.ruolo__testo { margin-top: var(--s-50); color: var(--carta-60); text-wrap: pretty; }
@media (hover: hover) {
  .ruolo:hover { background: var(--blu); transform: translateY(-4px); }
  .ruolo:hover .ruolo__icona { transform: rotate(-8deg) scale(1.08); }
}
@media (min-width: 768px) {
  .struttura__foto, .struttura__numeri { border-radius: 32px; }
  .struttura__numeri { padding: var(--s-600); }
  .ruoli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .struttura__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .struttura__foto { aspect-ratio: auto; min-height: 520px; }
  .ruoli { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ruolo { flex-direction: column; gap: var(--s-300); padding: var(--s-400); border-radius: 32px; }
}
.struttura__foto.rivela img { transform: scale(1.12); transition: transform 1600ms var(--curva-entrata); }
.struttura__foto.rivela.visibile img { transform: none; }

/* pagine semplici: 404, privacy, termini */
.pulsante--fantasma { background: transparent; color: var(--carta); box-shadow: inset 0 0 0 1px var(--carta-60); }
.pulsante--fantasma:hover { background: var(--carta); color: var(--nero); box-shadow: none; }
.semplice__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); padding-top: var(--s-300); padding-bottom: var(--s-300); }
.semplice__piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-100); padding-top: var(--s-600); padding-bottom: var(--s-400); color: var(--carta-60); }
.semplice__piede a { color: inherit; }
.errore { display: grid; justify-items: start; align-content: center; min-height: calc(100svh - 220px); padding-block: var(--s-800); }
.errore__marchio { display: block; width: var(--s-900); height: var(--s-900); margin-bottom: var(--s-400); background: var(--rame); -webkit-mask: url(../img/logo/gp-marchio-mono.svg) center / contain no-repeat; mask: url(../img/logo/gp-marchio-mono.svg) center / contain no-repeat; animation: galleggia 6s var(--curva) infinite alternate; }
@keyframes galleggia { to { transform: translateY(-8px) rotate(-4deg); } }
.errore h1 { max-width: 760px; text-wrap: balance; }
.errore__testo { margin-top: var(--s-300); max-width: 520px; color: var(--carta-60); text-wrap: pretty; }
.errore__azioni { display: flex; flex-wrap: wrap; gap: var(--s-200); margin-top: var(--s-500); }
.legale { max-width: 760px; padding-block: var(--s-700); }
.legale h1 { margin-bottom: var(--s-300); }
.legale h2 { margin: var(--s-600) 0 var(--s-200); }
.legale p { color: var(--carta-60); text-wrap: pretty; }
.legale p + p { margin-top: var(--s-200); }
.legale a { color: var(--carta); text-underline-offset: 3px; }
.legale__avviso { padding: var(--s-200); border-radius: 16px; background: var(--tono-nero); color: var(--carta) !important; }
@media (prefers-reduced-motion: reduce) { .errore__marchio { animation: none; } }

/* selettore di lingua */
.lingue { position: relative; }
.lingue__bottone { display: flex; align-items: center; gap: var(--s-75); height: var(--s-500); padding: 0 var(--s-200) 0 var(--s-100); border: 0; border-radius: 9999px; background: rgb(236 230 220 / 0.06); color: var(--carta); font: 600 0.875rem/1.25rem var(--font); cursor: pointer; transition: background-color 300ms var(--curva), transform 300ms var(--curva); }
.lingue__bottone .icona { width: 18px; height: 18px; color: var(--rame); }
.lingue__bottone:hover { background: rgb(236 230 220 / 0.12); }
.lingue__bottone:active { transform: scale(0.96); }
.lingue__elenco { position: absolute; top: calc(100% + var(--s-200)); right: 0; display: grid; gap: var(--s-25); min-width: 168px; margin: 0; padding: var(--s-75); list-style: none; border-radius: 24px; background: rgb(18 16 14 / 0.96); box-shadow: inset 0 0 0 1px rgb(236 230 220 / 0.08); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: 100% 0; transition: opacity 300ms var(--curva), transform 500ms var(--curva), visibility 0s linear 300ms; }
.lingue[data-aperto] .lingue__elenco { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lingue__elenco a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); padding: var(--s-100) var(--s-200); border-radius: 16px; color: var(--carta-60); font-size: 0.875rem; line-height: 1.25rem; text-decoration: none; transition: background-color 300ms var(--curva), color 300ms var(--curva); }
.lingue__elenco a:hover { background: rgb(236 230 220 / 0.06); color: var(--carta); }
.lingue__elenco a[aria-current="true"] { color: var(--carta); }
.lingue__elenco a[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--rame); }
@media (max-width: 899px) {
  .nav { gap: var(--s-100); }
  .nav__logo { margin-right: auto; }
}
:lang(zh) { --font: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
:lang(zh) .didascalia { letter-spacing: 0.12em; }
:lang(zh) .titolo { letter-spacing: 0.02em; }
:lang(zh) .hero__prova dt { letter-spacing: 0.04em; white-space: nowrap; }

/* viaggio: il selfie vero di Andrea, appoggiato sulla foto come una stampa */
.viaggio__carta { position: relative; }
.viaggio__foto { overflow: visible; }
.viaggio__foto picture:first-child { overflow: hidden; }
.viaggio__polaroid { position: absolute; z-index: 2; right: var(--s-200); bottom: calc(var(--s-400) * -1); width: 38%; max-width: 240px; padding: var(--s-75) var(--s-75) 0; border-radius: 20px; background: var(--carta); color: var(--nero); transform: rotate(4deg) translateY(24px); opacity: 0; transition: transform 1200ms var(--curva-entrata) 400ms, opacity 800ms var(--curva) 400ms; }
.viaggio.mostra .viaggio__polaroid { transform: rotate(4deg); opacity: 1; }
.viaggio__polaroid picture { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.viaggio__polaroid img { width: 100%; height: 100%; object-fit: cover; }
.viaggio__polaroid .didascalia { padding: var(--s-100) var(--s-50); text-align: center; }
@media (max-width: 767px) { .viaggio__polaroid { top: var(--s-200); bottom: auto; right: var(--s-200); width: 30%; padding: var(--s-50) var(--s-50) 0; border-radius: 16px; } .viaggio__polaroid picture { border-radius: 12px; } .viaggio__polaroid .didascalia { padding: var(--s-75) 0; font-size: 0.625rem; letter-spacing: 0.15em; } }
@media (min-width: 1024px) { .viaggio__polaroid { right: var(--s-700); bottom: calc(var(--s-900) * -1); } }
@media (hover: hover) { .viaggio__polaroid:hover { transform: rotate(0deg) scale(1.03); transition-delay: 0s; } }

/* preventivo: la persona che risponde */
.preventivo__foto { margin: var(--s-400) 0 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--tono-blu); }
.preventivo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (min-width: 1024px) { .preventivo__foto { aspect-ratio: 5 / 4; } }

/* pagina dei collegamenti (/link/): tutti i contatti in un posto, raggiunta dal QR */
.link { display: flex; flex-direction: column; gap: var(--s-400); max-width: 520px; min-height: 100svh; padding-top: max(var(--s-300), env(safe-area-inset-top)); padding-bottom: max(var(--s-400), env(safe-area-inset-bottom)); }
.link__lingue { align-self: flex-end; display: flex; gap: var(--s-25); padding: var(--s-25); border-radius: 9999px; background: var(--tono-nero); }
.link__lingue button { min-width: 44px; height: 32px; padding: 0 var(--s-100); border: 0; border-radius: 9999px; background: transparent; color: var(--carta-60); font: 600 0.75rem/1rem var(--font); cursor: pointer; transition: background-color 300ms var(--curva), color 300ms var(--curva); }
.link__lingue button[aria-pressed="true"] { background: var(--carta); color: var(--nero); }
.link__testa { display: grid; justify-items: center; gap: var(--s-300); text-align: center; }
.link__volto { display: block; width: 112px; height: 112px; border-radius: 9999px; overflow: hidden; box-shadow: 0 0 0 4px var(--nero), 0 0 0 6px var(--rame); }
.link__volto img { width: 100%; height: 100%; object-fit: cover; }
.link__ruolo { display: flex; justify-content: center; align-items: center; gap: var(--s-100); margin-top: var(--s-100); color: var(--rame); }
.link__frase { margin: var(--s-200) auto 0; max-width: 360px; color: var(--carta-60); text-wrap: balance; }
.link__elenco { display: grid; gap: var(--s-100); margin: 0; padding: 0; list-style: none; }
.collegamento { display: flex; align-items: center; gap: var(--s-200); min-height: 72px; padding: var(--s-100) var(--s-200) var(--s-100) var(--s-100); border-radius: 24px; background: var(--tono-nero); color: var(--carta); text-decoration: none; transition: background-color 300ms var(--curva), transform 300ms var(--curva); }
.collegamento__icona { display: grid; place-items: center; flex: none; width: var(--s-700); height: var(--s-700); border-radius: 16px; background: var(--tono-blu); color: var(--carta); transition: background-color 300ms var(--curva), color 300ms var(--curva); }
.collegamento__icona .icona { width: 24px; height: 24px; }
.collegamento__testo { display: grid; gap: var(--s-25); flex: 1; min-width: 0; }
.collegamento__titolo { font-weight: 600; }
.collegamento__sotto { color: var(--carta-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collegamento__freccia { width: 20px; height: 20px; color: var(--carta-60); transition: transform 300ms var(--curva), color 300ms var(--curva); }
.collegamento:hover { background: var(--blu); transform: translateY(-2px); }
.collegamento:hover .collegamento__icona { background: var(--rame); color: var(--nero); }
.collegamento:hover .collegamento__freccia { color: var(--rame); transform: translateX(4px); }
.collegamento:active { transform: scale(0.98); }
.collegamento:focus-visible { outline: 2px solid var(--rame); outline-offset: 3px; }
.collegamento--primaria { background: var(--rame); color: var(--nero); }
.collegamento--primaria .collegamento__icona { background: rgb(18 16 14 / 0.12); color: var(--nero); }
.collegamento--primaria .collegamento__sotto, .collegamento--primaria .collegamento__freccia { color: rgb(18 16 14 / 0.72); }
.collegamento--primaria:hover { background: var(--carta); }
.collegamento--primaria:hover .collegamento__icona { background: var(--rame); }
.collegamento--primaria:hover .collegamento__freccia { color: var(--nero); }
.link__piede { display: grid; justify-items: center; gap: var(--s-200); margin-top: auto; padding-top: var(--s-400); color: var(--carta-60); text-align: center; }
.pagina-link .entra { opacity: 0; transform: translateY(var(--s-300)); transition: opacity 700ms var(--curva), transform 700ms var(--curva); transition-delay: calc(var(--n, 0) * 60ms); }
.pronto .pagina-link .entra, .pagina-link.pronto .entra, html.pronto .pagina-link .entra { opacity: 1; transform: none; }
.no-js .pagina-link .entra { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pagina-link .entra, .collegamento, .collegamento__freccia { transform: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .riga > span, .entra, .rivela, .hero__cornice img, .nav, .pannello li, .pannello .pulsante, .faccia, .carta__icona, .interruttore__cursore, .metodo__foto, .metodo__badge-testo, .struttura__foto img, .ruolo, .ruolo__icona, .viaggio__foto img, .rotta::before, .domanda__segno, .domanda__risposta p, .contatto__vie a, .campo, .scelte span, .lingue__elenco, .viaggio__polaroid { transform: none !important; animation: none !important; translate: none !important; }
  .hero__globo .icona, .hero__etichetta .punto { animation: none; }
  .pulsante, .pulsante .icona, .nav__menu, .nav__menu span, .nav__voci a::after { transition-property: opacity, background-color, color; }
}