@import url("assets/fonts.css");

/* Italia Business Club. Stile ispirato al template Vetra (Shreyas-29/vetra, licenza MIT), reso italiano:
   fondo blu marine del club, l'azzurro delle maglie dell'Italia al posto del blu di serie, la foto di una serata
   a tutto schermo nella prima schermata, il corsivo serif solo su poche parole chiave (club, soci, circuito, Málaga).
   Il riquadro di chiusura usa il gradiente «Nova» (21st.dev), scelto da Dani.
   Il fondo è il blu del sito attuale italiabusiness.club, hsl(203 98% 10%): Stefano, 26/10/2026, trovava il quasi nero troppo scuro. */
:root {
  --bg: #011F33;
  --bg-rgb: 1 31 51;
  --surface: #012C47;
  --campo: #001828;       /* fondo dei campi dei moduli, un po' più scuro della pagina */
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .16);
  --text: #FAFAFA;
  --muted: #B3C2CC;       /* grigi tinti di blu, come il testo secondario del sito attuale */
  --muted-2: #93A8B8;
  /* L'azzurro (valori calcolati in OKLCH, tonalità 238-250°). */
  --az: #006FC2;          /* pulsanti: il bianco sopra ha contrasto 5,2:1 */
  --az-scuro: #0059A4;    /* pulsanti al passaggio del mouse */
  --az-medio: #1B93E0;    /* bordi, linee, anelli */
  --az-chiaro: #6FC1F6;   /* testi azzurri sul fondo scuro: 10:1 */
  --cielo: #3FB3DF;
  --az-tinta: #C1DCF0;    /* testo secondario sulle superfici azzurrate, al posto del grigio */
  --az-rgb: 0 111 194;
  --az-medio-rgb: 27 147 224;
  --errore: #F87171;
  --font: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --wrap: 1200px;
  --gut: clamp(20px, 4vw, 40px);
  --hdr: 100px; /* Dani, 04/11/2026: barra del menu più alta, il logo respira */
  --r: 10px;
  --r-card: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-out-soft: cubic-bezier(.33, 1, .68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); color-scheme: dark; scrollbar-color: #2A5573 var(--bg); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--az-medio-rgb) / .45); color: #fff; }
input, textarea { caret-color: var(--az-chiaro); }
/* Un elemento nascosto resta nascosto anche se una regola gli dà un display (es. il pulsante .link del circuito). */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; font-weight: 500; color: var(--text); text-wrap: balance; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
time, .evnext__day, .ag__date b, .prices strong, .steps__n { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--az-chiaro); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: #fff; color: var(--bg); padding: 10px 16px; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.more { margin: 40px 0 0; }
.ico { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- tipografia ---------- */
.display { font-size: clamp(2.6rem, 5.8vw, 4.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; max-width: 17ch; margin: 0; }
.h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -.015em; margin: 0; }
.h3 { font-size: 1.3rem; }
/* Il corsivo serif (Instrument Serif) di Vetra: solo su una parola chiave, mai su un titolo intero. */
.acc { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: 0; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.65; color: var(--muted); max-width: 60ch; }
.note { font-size: 1rem; color: var(--muted); max-width: 65ch; }
.head { max-width: 46rem; margin: 0 0 clamp(36px, 4.5vw, 56px); }
.head .h2 { margin: 0; }
.head .lead { margin: 18px 0 0; }

/* ---------- bottoni e link ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--r); border: 1px solid transparent;
  font: 500 .95rem/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn--white { background: #FAFAFA; color: var(--bg); }
.btn--white:hover { background: #E4E4E7; }
.btn--blue { background: var(--az); color: #fff; }
.btn--blue:hover { background: var(--az-scuro); }
.btn--blue:disabled:hover { background: var(--az); }
.btn--ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .28); }
.btn--lg { min-height: 48px; padding: 12px 24px; font-size: 1rem; }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: .92rem; }
.btn--block { width: 100%; }
.btn .ico--arrow { transition: transform .3s var(--ease-out); }
.btn:hover .ico--arrow { transform: translateX(3px); }
.link {
  display: inline-block; padding: .6em 0; color: var(--text); font: inherit; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .32em;
  transition: color .2s, text-decoration-color .2s;
}
button.link { background: none; border: 0; cursor: pointer; }
.link:hover { color: var(--az-chiaro); text-decoration-color: currentColor; }

/* ---------- testata ---------- */
.topbar { color: var(--muted); font-size: .9rem; border-bottom: 1px solid var(--line); }
.topbar__in { display: flex; justify-content: center; align-items: center; gap: 0 16px; min-height: 44px; flex-wrap: wrap; text-align: center; }
.topbar p { margin: 0; }
.topbar strong { color: var(--text); font-weight: 500; }
.topbar a { display: inline-block; padding: 11px 0; color: var(--text); font-weight: 500; text-underline-offset: .25em; }
.topbar__in { flex-wrap: nowrap; }
.topbar p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hdr { position: sticky; top: 0; z-index: 40; background: rgb(var(--bg-rgb) / .85); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); }
.hdr__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--hdr); }
.hdr__logo { display: block; padding: 6px 0; }
.hdr__logo img { width: 128px; height: auto; }
.hdr__cta { display: none; }
.hdr__nav { display: flex; align-items: center; }
.hdr__nav ul { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
/* Voci larghe almeno 44 px da toccare: 6 px di margine interno per lato, recuperati con il margine negativo. */
.hdr__nav ul a { position: relative; display: block; min-width: 44px; margin: 0 -6px; padding: 12px 6px; text-align: center; color: #D4D4D8; font-size: 1rem; font-weight: 500; text-decoration: none; transition: color .2s; }
.hdr__nav ul a::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease-out); }
.hdr__nav ul a:hover, .hdr__nav ul a[aria-current="page"] { color: #fff; }
.hdr__nav ul a:hover::after, .hdr__nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.hdr__toggle { display: none; width: 48px; height: 48px; background: none; border: 0; color: #fff; cursor: pointer; }
.burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; margin: auto; background: currentColor; position: relative; transition: transform .25s; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; } .burger::after { top: 7px; }
.hdr__toggle[aria-expanded="true"] .burger { background: transparent; }
.hdr__toggle[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); }
.hdr__toggle[aria-expanded="true"] .burger::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- prima schermata ---------- */
/* La foto di una serata vera a tutto schermo, sotto un velo blu marine che scurisce dal basso, dove sta il testo.
   L'unico movimento: la foto si assesta piano all'apertura (da già visibile, mai da vuoto). */
.hero, .pagehead, .sec, .brands { overflow-x: clip; }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(calc(100svh - var(--hdr)), 960px); padding: 160px 0 0; overflow: hidden; }
.hero__img { --z: 1; position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(var(--z)); transform-origin: 50% 70%; }
.hero__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 0%, rgb(var(--bg-rgb) / .94) 24%, rgb(var(--bg-rgb) / .62) 52%, rgb(var(--bg-rgb) / .42) 100%),
    linear-gradient(90deg, rgb(var(--bg-rgb) / .8), rgb(var(--bg-rgb) / .62) 38%, rgb(var(--bg-rgb) / 0) 78%);
}
.js .hero__img img { transform: scale(calc(var(--z) * 1.06)); transition: transform 2.4s var(--ease-out); }
.js .hero.is-in .hero__img img { transform: scale(var(--z)); }
.hero__in { position: relative; }
.hero__h { max-width: 13ch; margin: 0; font-size: clamp(3rem, 7.4vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff; }
.hero__h .acc { font-size: 1.04em; }
.hero__lead { max-width: 52ch; margin: 28px 0 0; font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: #DCE6EE; }
.hero__cta, .pagehead__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 36px; }
.hero__cta { justify-content: flex-start; }
/* La prossima serata, appoggiata al bordo basso della foto. */
.hero__next {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 24px;
  margin-top: clamp(48px, 7vh, 88px); padding: 24px 0 28px; border-top: 1px solid rgba(255, 255, 255, .22);
  color: #fff; text-decoration: none;
}
.hero__date { display: flex; flex-direction: column; align-items: center; min-width: 64px; color: var(--az-chiaro); font-weight: 500; line-height: 1.1; text-transform: lowercase; }
.hero__date b { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.hero__ev { display: flex; flex-direction: column; gap: 4px; }
.hero__evname { font-size: 1.1rem; font-weight: 500; }
.hero__guest { color: #DCE6EE; }
.hero__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: .32em; }
.hero__next:hover .hero__go { color: var(--az-chiaro); text-decoration-color: currentColor; }
.hero__next:hover .ico--arrow { transform: translateX(3px); }
.hero__next .ico--arrow { transition: transform .3s var(--ease-out); }
.hero__cap { margin: 0 0 0 auto; max-width: 24ch; font-size: .875rem; line-height: 1.45; color: #C9D6E0; text-align: right; }

/* La foto nella cornice (lo "screenshot" di Vetra), senza vetro né bagliore animato. */
.shot { position: relative; isolation: isolate; max-width: 1152px; margin: 0 auto; }
.shot__frame { position: relative; padding: 8px; border-radius: var(--r-card); border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.shot__in { border-radius: 10px; border: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.shot__in img { width: 100%; aspect-ratio: 2.1 / 1; object-fit: cover; object-position: 50% 58%; }
.shot figcaption { margin-top: 16px; text-align: center; font-size: .95rem; color: var(--muted); }

/* ---------- patrocinio e partner ---------- */
.brands { position: relative; padding: clamp(48px, 6vw, 80px) 0; }
.brands::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: radial-gradient(50% 56400% at 50% 100%, rgb(34, 41, 57) 0%, rgba(169, 163, 194, 0) 100%); }
.brands__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px 64px; align-items: center; }
.brands__g--patron { padding-right: 64px; border-right: 1px solid var(--line); }
.brands__h { margin: 0 0 16px; font-size: 1rem; font-weight: 500; color: var(--muted); }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 48px; list-style: none; margin: 0; padding: 0; }
.logos a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
.logos img { height: var(--h, 40px); width: auto; opacity: .72; transition: opacity .2s; }
.brands__g--patron .logos img { height: calc(var(--h, 40px) * 1.4); opacity: 1; }
.logos a:hover img { opacity: 1; }

/* ---------- sezioni ---------- */
.sec { position: relative; isolation: isolate; padding: clamp(48px, 6vw, 80px) 0; }
.sec--tight { padding-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--photo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split .h2 { margin-bottom: 18px; }
.split .lead { margin-bottom: 28px; }

.card { position: relative; border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)); }
/* La luce che segue il puntatore (MagicCard di Vetra), solo sulle schede che si cliccano. */
.card--link::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--az-medio-rgb) / .14), transparent 45%); }
.card--link:hover::before { opacity: 1; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); color: #E4E4E7; font-size: .875rem; }

/* ---------- più di una serata: testo e foto a sinistra, l'elenco a destra ---------- */
.split--offer { align-items: start; }
.offer__intro { position: sticky; top: calc(var(--hdr) + 40px); }
.offer__intro .lead { margin: 18px 0 0; }
.offer { list-style: none; margin: 0; padding: 0; }
.offer li { padding: 28px 0; border-top: 1px solid var(--line); }
.offer li:last-child { border-bottom: 1px solid var(--line); }
.offer h3 { margin: 0 0 8px; font-size: 1.35rem; }
.offer p { margin: 0; color: var(--muted); max-width: 52ch; }
.offer .link { margin-top: 6px; }

/* ---------- le serate ---------- */
.evnext { padding: 32px; background: linear-gradient(180deg, rgb(var(--az-rgb) / .16), rgba(255, 255, 255, .012) 60%); }
.evnext__date { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.evnext__day { font-size: 4.5rem; font-weight: 700; line-height: .8; letter-spacing: -.03em; }
.evnext__when { display: flex; flex-direction: column; line-height: 1.4; color: var(--az-tinta); }
.evnext__when b { color: #fff; font-weight: 500; font-size: 1.15rem; }
.evnext__title { margin: 0 0 6px; font-size: 1.5rem; }
.evnext__status { margin: 0 0 10px; color: var(--az-chiaro); font-weight: 500; }
.evnext__where { margin: 0 0 20px; color: var(--az-tinta); }
.evnext__guest { margin: -8px 0 20px; color: var(--az-tinta); }
.evnext__guest b { color: #fff; font-weight: 500; }
.evnext__price { margin: -8px 0 20px; font-weight: 500; }
.evnext__prog { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.evnext__prog li { display: grid; grid-template-columns: 64px 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); color: #E4E4E7; }
.evnext__prog time { color: var(--az-chiaro); font-weight: 500; }
.evnext__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.evnext__member { margin: 16px 0 0; color: var(--az-tinta); }

.agenda { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.ag { display: grid; grid-template-columns: 180px minmax(0, 1fr) 280px; align-items: center; gap: 20px 32px; padding: 24px; }
.ag__date { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--muted); }
.ag__date b { font-size: 3rem; font-weight: 700; line-height: .82; letter-spacing: -.03em; color: #fff; }
.ag__date span { font-size: .95rem; line-height: 1.35; white-space: nowrap; }
.ag__title { margin: 0 0 6px; font-size: clamp(1.3rem, 2vw, 1.55rem); }
.ag__title a { color: inherit; text-decoration: none; }
.ag__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ag__title a:focus-visible { outline: none; }
.ag__title a:focus-visible::after { outline: 2px solid var(--az-chiaro); outline-offset: 3px; }
.ag:hover .ag__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ag__meta { margin: 0 0 8px; font-weight: 500; }
.ag__text { margin: 0 0 12px; color: var(--muted); max-width: 56ch; }
.ag__go { color: var(--az-chiaro); font-weight: 500; }
.ag__img { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ag__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ag__flag { display: inline-flex; align-items: center; gap: 10px; color: var(--az-chiaro); font-weight: 500; }
.ag__flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--az-chiaro); }
.narrow-c { max-width: 760px; }

/* ---------- le serate passate, in grande ---------- */
.pastgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }
.pastcard a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.pastcard__img { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.pastcard__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease-out); }
.pastcard a:hover .pastcard__img img { transform: scale(1.03); }
.pastcard__when { color: var(--az-chiaro); font-weight: 500; }
.pastcard__title { font-size: 1.4rem; font-weight: 500; line-height: 1.25; }
.pastcard a:hover .pastcard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* ---------- ospite o socio: il confronto riga per riga ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { padding: 20px 24px 20px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { padding-top: 24px; border-top: 0; font-size: 1.25rem; font-weight: 500; }
.compare thead small { display: block; margin-top: 6px; font-size: .95rem; font-weight: 400; color: var(--muted); }
.compare tbody th { width: 28%; font-weight: 500; }
.compare tbody td { width: 36%; color: var(--muted); }
.compare tbody .compare__socio { color: #fff; }
.compare thead .compare__socio small { color: var(--az-tinta); }
.compare tfoot td { padding-top: 28px; }
.compare__socio { padding-left: 24px !important; background: rgb(var(--az-rgb) / .1); border-left: 1px solid var(--az-medio); }
.compare thead .compare__socio { padding-top: 24px; border-radius: var(--r-card) var(--r-card) 0 0; }
.compare tfoot .compare__socio { padding-bottom: 24px; border-radius: 0 0 var(--r-card) var(--r-card); }

/* ---------- il circuito: le città con le aziende socie ---------- */
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; list-style: none; margin: 0; padding: 0; }
.places__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.places__town { display: flex; flex-direction: column; font-size: 1.4rem; font-weight: 500; line-height: 1.2; }
.places__town small { margin-top: 4px; font-size: .9rem; color: var(--az-chiaro); }
.places__n { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.places__row--hub .places__town { font-weight: 700; }

/* ---------- come si entra: una sequenza su una linea, senza schede ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding-top: 36px; border-top: 1px solid var(--line-2); }
.steps__n { position: absolute; left: 0; top: -17px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--az-medio); border-radius: 50%; background: var(--bg); color: var(--az-chiaro); font-weight: 700; }
.steps h3 { margin: 0 0 8px; font-size: 1.15rem; }
.steps p { margin: 0; color: var(--muted); }

/* ---------- persone ---------- */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }
.person__img { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.person__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 22%); transform: scale(var(--zoom, 1)); transform-origin: 50% 100%; }
.person h3 { font-size: 1.25rem; margin-bottom: 8px; }
.person p { color: var(--muted); margin-bottom: 4px; }

/* ---------- testate delle pagine interne ---------- */
.pagehead { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.pagehead__in { display: flex; flex-direction: column; align-items: flex-start; }
.pagehead .display { font-size: clamp(2.5rem, 4.8vw, 3.6rem); max-width: 20ch; }
.pagehead .lead { margin: 20px 0 0; }
.pagehead__cta { justify-content: flex-start; }
.pagehead--event .shot { margin-top: 48px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 16px; color: var(--muted); font-weight: 500; text-decoration: none; transition: color .2s; }
.back:hover { color: #fff; }
.back .ico { transition: transform .3s var(--ease-out); }
.back:hover .ico { transform: translateX(-3px); }
.evhead__guest { margin: 12px 0 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--az-tinta); }
.evhead__guest b { color: #fff; font-weight: 500; }
.evhead__when { margin: 14px 0 0; color: var(--az-chiaro); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

/* ---------- pagina di una serata ---------- */
.evd { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.stub { position: sticky; top: calc(var(--hdr) + 24px); padding: 28px; }
.stub__date { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.stub__date b { font-size: 3.6rem; font-weight: 700; line-height: .8; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stub__date span { line-height: 1.35; color: var(--az-tinta); }
.stub__facts { display: grid; gap: 14px; margin: 0 0 24px; }
.stub__facts dt { font-size: .9rem; color: var(--muted); }
.stub__facts dd { margin: 2px 0 0; color: #fff; }
.stub__facts .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.stub__status { margin: 0; font-weight: 500; color: var(--az-chiaro); }
.stub__member { margin: 14px 0 0; font-size: .95rem; color: var(--muted); }
/* Barra del biglietto, solo sul telefono (main.js la mostra quando i pulsanti della pagina sono fuori dallo schermo). */
.tbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line-2); }
.tbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--wrap); margin: 0 auto; }
.tbar__txt { display: flex; flex-direction: column; margin: 0; font-size: .95rem; line-height: 1.35; color: var(--az-tinta); }
.tbar__txt b { color: #fff; font-weight: 500; }
.tbar .btn { flex: none; }
@media (min-width: 761px) { .tbar { display: none !important; } }
.evposter { margin: 0 0 32px; max-width: 520px; }
.evposter img { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); }
.evsec { padding: 32px 0; border-top: 1px solid var(--line); }
.evsec:first-child { padding-top: 0; border-top: 0; }
.evsec__h { margin: 0 0 20px; font-size: 1.5rem; }
.evsec p { max-width: 65ch; color: #D4D4D8; }
.evsec > :last-child { margin-bottom: 0; }
.guest { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 24px; align-items: center; }
.guest p:last-child { margin-bottom: 0; }
.guest__img { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.guest__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 760px) { .guest { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } }
.evsec__guest { margin: 0 0 6px; font-size: 1.6rem; font-weight: 500; color: #fff !important; }
.program { list-style: none; margin: 0 0 16px; padding: 0; }
.program li { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.program li:first-child { padding-top: 0; }
.program time { color: var(--az-chiaro); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.program h3 { margin: 0 0 4px; font-size: 1.05rem; }
.program p { margin: 0; color: var(--muted) !important; }
.prices { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.prices li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.prices small { display: block; color: var(--muted); font-size: .95rem; }
.prices strong { font-size: 1.6rem; font-weight: 700; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Con un numero dispari di foto la prima prende tutta la riga, così non resta un buco in fondo. */
.gallery figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.gallery figure:first-child:nth-last-child(odd) img { aspect-ratio: 16 / 9; }
.note-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; padding: 32px; }
.note-card .h3 { margin: 0; }
.note-card p { grid-column: 1; margin: 0; color: var(--muted); }
.note-card .btn { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- il club ed essere socio ---------- */
.rules { display: grid; margin: 0; }
.rules > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 48px; padding: 32px 0; border-top: 1px solid var(--line); }
.rules > div:last-child { border-bottom: 1px solid var(--line); }
.rules dt { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.2; }
.rules dd { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.frame { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255, 255, 255, .02); }
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.frame figcaption { padding: 12px 8px 4px; color: var(--muted); font-size: .95rem; }
.criteria { list-style: none; margin: 0; padding: 0; }
.criteria li { display: flex; align-items: flex-start; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 1.1rem; }
.criteria li:last-child { border-bottom: 1px solid var(--line); }
.criteria .ico { margin-top: 4px; color: var(--az-chiaro); }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.qa__item { padding: 24px 0; border-top: 1px solid var(--line); }
.qa dt { margin: 0 0 8px; font-size: 1.1rem; font-weight: 500; line-height: 1.3; }
.qa dd { margin: 0; color: var(--muted); }

/* ---------- il club in numeri, in una frase, e i settori del circuito ---------- */
.numbers { max-width: 30em; margin: 0 0 56px; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.35; color: var(--muted); text-wrap: balance; }
.numbers b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.sectors { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 48px 0 0; padding: 0; }
.sectors b { margin-left: 10px; color: var(--az-chiaro); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- moduli ---------- */
.apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.apply__aside { position: sticky; top: calc(var(--hdr) + 24px); padding: 28px; }
.apply__aside .h3 { margin-bottom: 14px; }
.apply__time { margin: 0 0 16px; color: var(--az-chiaro); font-weight: 500; }
.mini-steps { margin: 0 0 8px; padding-left: 1.3em; }
.mini-steps li { padding: 6px 0; color: #D4D4D8; }
.mini-steps li::marker { color: var(--az-chiaro); font-weight: 700; }
.readers__h { margin: 20px 0 10px; font-size: 1rem; font-weight: 500; }
.readers { display: grid; gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; }
.readers li { display: flex; align-items: center; gap: 12px; color: #E4E4E7; }
.readers__img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 1px solid var(--line-2); }
.apply__aside .note a { color: var(--text); }
/* Testo accanto al modulo (Eventi, Vantaggi): senza riquadro, e sul telefono resta sopra il modulo. */
.apply__aside--plain { padding: 0 24px 0 0; }
.apply__aside--plain .h2 { margin-bottom: 18px; }
.apply__aside--plain .lead { margin-bottom: 20px; }
.form { padding: clamp(24px, 4vw, 40px); }
.form--inline { padding: 28px; }
.form--plain { padding: 0; margin-top: 8px; }
.form__req { margin: 0 0 24px; color: var(--muted); }
.form__who { display: none; align-items: center; gap: 14px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.form__who p { margin: 0; color: var(--az-tinta); }
.form__faces { display: flex; flex: none; }
.form__faces img { width: 40px; height: 40px; }
.form__faces img + img { margin-left: -10px; }
.form__draft { margin: 16px 0 0; font-size: .9rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.field label, .field legend { display: block; margin-bottom: 8px; padding: 0; font-weight: 500; font-size: 1rem; color: var(--text); }
.opt { margin-left: 6px; font-weight: 400; font-size: .875rem; color: var(--muted); }
/* Bordi dei campi più marcati di Vetra: servono almeno 3:1 sul fondo per vedere dove scrivere. */
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #6A8396; border-radius: var(--r);
  background: var(--campo); color: var(--text); font: 400 1rem/1.4 var(--font);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #8FA4B4; }
.field select option { background: var(--campo); color: var(--text); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--az-medio); box-shadow: 0 0 0 3px rgb(var(--az-medio-rgb) / .4); }
/* Il rosso deve vincere sulla regola dei bordi qui sopra, quindi stessa forma più l'attributo di errore. */
.field input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--errore); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, .3); }
.field__err { margin: 6px 0 0; color: var(--errore); font-size: .95rem; font-weight: 500; }
.check + .field__err { margin: -16px 0 20px; }
.field label.radio { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 28px 0 0; font-weight: 400; }
.radio input, .check input {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; flex: none;
  width: 22px; height: 22px; margin: 0; border: 1.5px solid #6A8396; background: var(--campo); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.radio input { border-radius: 50%; }
.check input { border-radius: 6px; }
.radio input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s var(--ease-out); }
.check input::before { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); transition: transform .15s var(--ease-out); }
.radio input:checked, .check input:checked { border-color: var(--az-medio); background: var(--az); }
.radio input:checked::before { transform: scale(1); }
.check input:checked::before { transform: rotate(-45deg) scale(1); }
.radio input:hover, .check input:hover { border-color: var(--az-chiaro); }
.radio input:focus-visible, .check input:focus-visible { outline: 2px solid var(--az-chiaro); outline-offset: 2px; }
.radio input[aria-invalid="true"], .check input[aria-invalid="true"] { border-color: var(--errore); }
.check { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 24px; color: var(--muted); }
.check input { flex: none; margin-top: 3px; }
.check a { color: var(--text); }
.form__msg { margin: 16px 0 0; color: var(--az-chiaro); font-weight: 500; }
.form__msg a { color: var(--text); }
.form__msg.is-error { color: var(--errore); }
.form__msg:empty { display: none; }

.legal { max-width: 820px; margin: 0 auto; padding: clamp(24px, 4vw, 48px); }
.legal h2 { margin-top: 1.6em; font-size: 1.3rem; }
.legal p { color: #D4D4D8; }
.legal a { color: var(--text); }
.draft { padding: 12px 16px; border: 1px solid rgba(250, 204, 21, .35); border-radius: 12px; background: rgba(250, 204, 21, .08); color: #FDE68A !important; }

/* ---------- lo sfondo di seta del riquadro finale ----------
   Gradiente «Nova» (21st.dev, stile Silk Blend): sfumatura lineare a 187° e vignettatura, senza grana.
   main.js fa ondeggiare l'angolo (--ang) per 5 secondi quando il riquadro entra nello schermo; senza JavaScript resta fermo a 187°. */
.silk {
  --ang: 187deg;
  /* Il velo scurisce appena il gradiente: senza, il testo chiaro sul cobalto più luminoso
     scende sotto il contrasto minimo di lettura (misurato: 3,0 contro 4,5). */
  --velo: rgba(2, 12, 28, .3);
  position: relative; isolation: isolate; color: #fff;
  background-color: #0B1E3B;
  background-image:
    linear-gradient(var(--velo), var(--velo)),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .68) 100%),
    linear-gradient(var(--ang), #1E5A8A 10%, #086B92 27%, #077FD4 44%, #000D7F 62%, #0B1E3B 96%);
}
.cta-sec { padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 9vw, 120px); }
.cta { overflow: hidden; padding: clamp(64px, 8vw, 104px) clamp(24px, 5vw, 64px); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-card); text-align: center; }
.cta__h { max-width: 18ch; margin: 0 auto; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.15; color: #fff; }
.cta p { max-width: 40rem; margin: 20px auto 0; color: #E6EEF4; font-size: 1.1rem; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 36px; }
.cta .link { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }

/* ---------- piede ---------- */
.ftr { position: relative; padding: 64px 0 32px; }
.ftr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: radial-gradient(50% 56400% at 50% 100%, rgb(34, 44, 57) 0%, rgba(169, 163, 194, 0) 100%); }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
.ftr__brand img { width: 132px; margin-bottom: 16px; }
.ftr__brand p { max-width: 34ch; color: var(--muted); }
.ftr__h { margin: 0 0 8px; font-size: 1rem; }
.ftr__lbl { display: block; margin-top: 6px; font-size: .875rem; color: var(--muted-2); }
.ftr__grid li > .ftr__lbl + a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--text); }
.ftr__grid ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.ftr__grid ul a { display: inline-block; padding: 10px 0; }
.ftr a { color: var(--muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: color .2s, text-decoration-color .2s; }
.ftr a:hover { color: #fff; text-decoration-color: currentColor; }
/* La riga parte e finisce con il testo, non con il bordo del contenitore. */
.ftr__legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 48px; padding-top: 12px; color: var(--muted); font-size: .9rem; background: linear-gradient(var(--line), var(--line)) no-repeat center top / calc(100% - 2 * var(--gut)) 1px; }
.ftr__legal p { margin: 0; }
.ftr__legal a { display: inline-block; padding: 12px 0; }
.ftr__legal a + a { margin-left: 20px; }

/* ---------- schermi medi ---------- */
@media (max-width: 1020px) {
  .hdr__cta { display: inline-flex; margin-left: auto; }
  .hdr__toggle { display: block; }
  .hdr__nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px var(--gut) 28px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .hdr__nav.is-open { display: flex; }
  .hdr__nav ul { position: static; transform: none; flex-direction: column; gap: 0; }
  .hdr__nav ul { align-items: stretch; }
  .hdr__nav ul a { margin: 0; padding: 14px 0; text-align: left; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .hdr__nav ul a::after { display: none; }
  .hdr__nav .btn { margin-top: 16px; min-height: 48px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .ag { grid-template-columns: 150px minmax(0, 1fr) 220px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .brands__in { grid-template-columns: 1fr; }
  .brands__g--patron { padding: 0 0 28px; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- telefono ---------- */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  :root { --hdr: 84px; }
  .hdr__logo img { width: 108px; }
  .steps, .qa, .form__row, .apply, .ftr__grid, .pastgrid, .evd { grid-template-columns: 1fr; }
  .topbar__more { display: none; }
  .stub { position: static; }
  .apply__aside { order: 2; }
  .form__who { display: flex; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tfoot, .compare tr, .compare th, .compare td { display: block; width: auto !important; }
  .compare tr { padding: 18px 0; border-top: 1px solid var(--line); }
  .compare th, .compare td { padding: 0; border: 0; background: none; }
  .compare tbody th { margin-bottom: 8px; font-size: 1.1rem; }
  .compare tbody td { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 4px 0; }
  .compare tbody td::before { content: attr(data-label); color: var(--muted-2); font-size: .9rem; }
  .compare__socio { padding-left: 0 !important; border-left: 0 !important; }
  .compare tfoot tr { display: flex; flex-direction: column-reverse; gap: 12px; }
  .compare tfoot td:empty { display: none; }
  .compare tfoot .btn { width: 100%; }
  /* Il comitato in righe: ritratto piccolo accanto al nome. */
  .people { grid-template-columns: 1fr; gap: 0; }
  .person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 18px; align-items: start; padding: 20px 0; border-top: 1px solid var(--line); }
  .person__img { grid-row: 1 / span 3; margin: 0; border-radius: 12px; }
  /* Nel ritratto piccolo conta il viso: si avvicina verso l'alto. */
  .person__img img { transform: scale(calc(var(--zoom, 1) * 1.45)); transform-origin: 50% 22%; }
  .person h3 { margin-bottom: 6px; }
  .hdr__in:has(.hdr__nav.is-open) .hdr__cta { display: none; }
  .sectors { justify-content: flex-start; }
  .split, .split--photo, .rules > div { grid-template-columns: 1fr; }
  .offer__intro { position: static; }
  .steps { gap: 40px; }
  .shot__frame { padding: 6px; border-radius: 14px; }
  .shot__in { border-radius: 8px; }
  .shot__in img { aspect-ratio: 4 / 3; }
  .person__img img { aspect-ratio: 1; }
  .ag { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .ag__img, .ag__flag { order: -1; }
  .ag__date b { font-size: 2.5rem; }
  .evnext { padding: 24px; }
  .evnext__day { font-size: 3.6rem; }
  .apply__aside { position: static; }
  .apply__aside--plain { order: 0; padding: 0; }
  .note-card { grid-template-columns: 1fr; }
  .note-card .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .logos { gap: 8px 32px; }
  .logos img { height: calc(var(--h, 40px) * .85); }
  .topbar__in { font-size: .875rem; gap: 0 12px; }
  /* Sul telefono la foto sta in alto, avvicinata alle facce, e il testo scende sotto, sul blu. */
  .hero { display: block; min-height: 0; padding: 0; }
  .hero__img { --z: 1.32; position: relative; inset: auto; z-index: 0; height: min(48svh, 420px); }
  .hero__img::after { background: linear-gradient(to top, var(--bg) 0%, rgb(var(--bg-rgb) / .55) 30%, rgb(var(--bg-rgb) / .15) 62%, rgb(var(--bg-rgb) / .3) 100%); }
  .hero__img img { object-position: 50% 50%; }
  .hero__in { z-index: 1; margin-top: -72px; }
  .hero__h { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero__lead { margin-top: 20px; }
  .hero__next { grid-template-columns: auto minmax(0, 1fr); padding-bottom: 24px; }
  .hero__go { grid-column: 2; }
  .hero__cap { display: none; }
  .places { grid-template-columns: 1fr; }
  .numbers { text-align: left; margin-left: 0; }
}

/* ---------- movimento ---------- */
/* Movimento ridotto di Windows: le animazioni leggere rallentano invece di fermarsi (la foto della prima schermata, la seta). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__img img { transition-duration: 4.8s; }
}