/* ==========================================================================
   GainHouse — stile unico, v4 (07/10/2026). Token in DESIGN.md.
   Direzione: brand di moda con l'anima da club. Nero e carta crema, grana da
   pellicola, titoli larghissimi (Archivo espanso), un corsivo da rivista
   (Instrument Serif), neon rosso solo dove si tocca.
   Il ritmo: --beat (0..1) lo scrive main.js leggendo la musica; senza musica vale 0.
   ========================================================================== */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --nero: #0b0a09;
  --superficie: #12100e;
  --superficie-2: #1a1714;
  --crema: #f2ebdf;            /* carta, non bianco */
  --crema-70: rgba(242, 235, 223, .7);
  --crema-80: rgba(242, 235, 223, .84);
  --linea: rgba(242, 235, 223, .14);
  --inchiostro: #0b0a09;
  --rosso: #ff1a1a;            /* il rosso neon del logo */
  --rosso-scuro: #c90a0a;
  --vinaccia: #1a0505;
  --vinaccia-bordo: #4a1c1c;
  --verde: #21d05d;            /* solo WhatsApp e Spotify */

  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-testo: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --r-grande: 28px;
  --r-medio: 16px;
  --r-pillola: 999px;

  --larghezza: 1320px;
  --margine: clamp(16px, 4.5vw, 72px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-molla: cubic-bezier(0.34, 1.56, 0.64, 1);

  --beat: 0;
  --neon: 0 0 calc(6px + 14px * var(--beat)) rgba(255, 26, 26, .75), 0 0 calc(22px + 30px * var(--beat)) rgba(255, 26, 26, .35);
}
/* main.js scrive --beat solo sui blocchi in vista ([data-beat]): --neon si ricalcola li' */
[data-beat] { --neon: 0 0 calc(6px + 14px * var(--beat)) rgba(255, 26, 26, .75), 0 0 calc(22px + 30px * var(--beat)) rgba(255, 26, 26, .35); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--nero); color: var(--crema);
  font-family: var(--f-testo); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body.intro-aperta { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.05; font-weight: 400; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--rosso); outline-offset: 3px; }
::selection { background: var(--rosso); color: var(--crema); }

/* Grana da pellicola su tutto il sito: e' quello che toglie il "nuovo di fabbrica" */
body::after {
  content: ""; position: fixed; inset: -60%; z-index: 95; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .085; mix-blend-mode: overlay;
  animation: grana 1s steps(6) infinite;
}
@keyframes grana {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contenitore { width: 100%; max-width: calc(var(--larghezza) + 2 * var(--margine)); margin-inline: auto; padding-inline: var(--margine); }
.sezione { position: relative; padding-block: clamp(72px, 10vw, 150px); scroll-margin-top: 24px; }

/* Tipografia --------------------------------------------------------------- */
.display {
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%;
  text-transform: uppercase; letter-spacing: -.02em; line-height: .9; text-wrap: balance;
}
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; }
.etichetta {
  display: flex; align-items: center; gap: 12px;
  font: 400 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-70);
}
.etichetta::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.etichetta b { color: var(--rosso); font-weight: 700; }
.titolo-sezione { font-size: clamp(42px, 8.4vw, 132px); margin: 18px 0 clamp(20px, 2.4vw, 30px); }
.titolo-sezione .serif { color: var(--rosso); text-shadow: var(--neon); font-size: 1.04em; }
.titolo-sezione--sx { text-align: left; }
.sezione__intro { max-width: 52ch; color: var(--crema-80); margin-bottom: clamp(36px, 4.4vw, 60px); }
.sezione__intro--sx { margin-inline: 0; }
.testa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; align-items: end; margin-bottom: clamp(36px, 4.4vw, 64px); }
.testa .sezione__intro { margin: 0; }
/* .testa--larga resta una colonna: il paragrafo va sempre sotto il suo titolo (CLAUDE.md) */

/* Bottoni: tubo al neon. Il riempimento arriva da sinistra, il testo fa "roll", la
   freccia scappa avanti. Con la musica il bagliore va a tempo. ---------------------- */
.btn {
  --c: var(--rosso);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-pillola);
  border: 1.5px solid var(--c); background: transparent; color: var(--crema);
  font: 700 13px/1 var(--f-display); font-stretch: 125%; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 calc(8px + 16px * var(--beat)) color-mix(in srgb, var(--c) 65%, transparent), inset 0 0 10px color-mix(in srgb, var(--c) 35%, transparent);
  transition: color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .25s var(--ease-out), border-color .35s;
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease-out);
}
.btn__testo { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; padding-block: 1px; }
.btn__testo > span { position: relative; display: block; transition: transform .45s var(--ease-out); }
.btn__testo > span::after { content: attr(data-label); position: absolute; left: 0; top: 100%; }
.btn__freccia { flex: none; transition: transform .45s var(--ease-out); }
.btn--grande { min-height: 56px; padding: 0 30px; font-size: 14px; }
.btn--piccolo { min-height: 44px; padding: 0 18px; font-size: 12px; }
.btn--rosso, .btn--neon { text-shadow: 0 0 10px rgba(255, 26, 26, .9); }
.btn--ghost { --c: var(--crema); box-shadow: none; border-color: color-mix(in srgb, var(--crema) 45%, transparent); }
.btn--verde { --c: var(--verde); text-shadow: 0 0 10px rgba(33, 208, 93, .7); }
/* pieni: si leggono anche sopra una foto. Rosso con testo crema, crema con testo nero */
.btn--pieno { background: var(--c); }
.btn--neon.btn--pieno { color: var(--crema); text-shadow: none; box-shadow: 0 0 calc(14px + 20px * var(--beat)) rgba(255, 26, 26, .55); }
.btn--neon.btn--pieno::before { background: var(--crema); }
/* WhatsApp pieno: verde (richiesta GainHouse 22/10/2026), al passaggio si riempie di crema */
.btn--verde.btn--pieno { color: var(--inchiostro); text-shadow: none; box-shadow: 0 0 calc(14px + 20px * var(--beat)) rgba(33, 208, 93, .5); }
.btn--verde.btn--pieno::before { background: var(--crema); }
.btn--chiaro { --c: var(--crema); color: var(--inchiostro); text-shadow: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
/* Il bottone chiaro resta chiaro anche al passaggio: mai rosso come quello accanto (Seba, 07/10/2026) */
.btn--chiaro::before { background: #fff; }
/* "Diventa sponsor" in header e menu (v5): bianco pieno, al passaggio si riempie di rosso */
.btn--bianco { --c: #fff; background: #fff; color: var(--inchiostro); text-shadow: none; box-shadow: 0 0 calc(6px + 12px * var(--beat)) rgba(255, 255, 255, .35); }
.btn--bianco::before { background: var(--rosso); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--c) 80%, transparent), 0 0 60px color-mix(in srgb, var(--c) 35%, transparent); }
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover::after { left: 130%; }
  .btn:hover .btn__testo > span { transform: translateY(-100%); }
  .btn:hover .btn__freccia { transform: translateX(4px) rotate(-45deg); }
  .btn--ghost:hover, .btn--verde:hover { color: var(--inchiostro); text-shadow: none; }
  .btn--ghost:hover { border-color: var(--crema); }
  .btn--neon.btn--pieno:hover { color: var(--inchiostro); border-color: var(--crema); }
  .btn--chiaro:hover { color: var(--inchiostro); border-color: #fff; box-shadow: 0 0 26px rgba(255, 255, 255, .45); }
  .btn--bianco:hover { color: #fff; border-color: var(--rosso); box-shadow: 0 0 26px rgba(255, 26, 26, .7), 0 0 60px rgba(255, 26, 26, .3); }
}
.btn--bianco:focus-visible { background: var(--rosso); color: #fff; border-color: var(--rosso); }
.btn:active { transform: scale(.96); }
/* il tubo si accende con lo sfarfallio quando entra in scena */
.is-visto .btn, .btn.is-visto, .hero .btn { animation: accensione 1.1s steps(1) both; }
@keyframes accensione {
  0% { opacity: .15; } 8% { opacity: 1; } 14% { opacity: .3; } 22% { opacity: 1; } 30% { opacity: .5; } 36%, 100% { opacity: 1; }
}

/* Intro v6 (11/10/2026): il gabbiano del logo originale (ritaglio PNG con alpha vera,
   scripts/logo_intro.py), non ridisegnato. Si accende sfarfallando (0.3-1.4s), poi l'invito:
   "Scorri su" (touch) o "Clicca" (mouse). Al gesto main.js lo spezza in frammenti su un canvas
   a tutto schermo, con scintille rosse, e il fondo si apre sulla home.
   Fermo (riduci movimento, nessuna animazione) = logo acceso. Solo opacity/transform. */
.intro { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; overflow: clip; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.intro[hidden] { display: none; }
.intro__fondo { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #1b0303 0%, var(--nero) 62%); }
.intro__scena { position: relative; z-index: 1; width: min(640px, 88vw); margin-bottom: 6vh; transform: translateY(var(--tira, 0px)); transition: transform .6s var(--ease-molla); }
.intro.is-tirata .intro__scena { transition: none; }
.intro__logo { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.intro__schegge { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; display: none; }
.intro.is-esplosa .intro__schegge { display: block; }
html.intro-anima .intro__camera { opacity: 0; animation: accendi-neon 1.1s steps(1) .3s forwards; }
@keyframes accendi-neon { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: .15; } 30% { opacity: 1; } 38% { opacity: .4; } 48%, 100% { opacity: 1; } }
/* acceso: il neon respira piano finche' non si entra */
.intro.is-pronta .intro__logo { animation: respiro-neon 2.6s ease-in-out infinite; }
@keyframes respiro-neon { 50% { opacity: .82; } }

/* L'invito: in basso, come la barra per tornare alla home di un telefono */
.intro__entra {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); margin-inline: auto;
  display: grid; justify-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); min-height: 56px; padding: 10px 26px;
  border: 0; background: none; color: var(--crema); cursor: pointer;
  font: 400 12px/1.2 var(--f-mono); letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.intro.is-pronta .intro__entra { opacity: 1; transform: none; pointer-events: auto; }
.intro__su { color: var(--rosso); filter: drop-shadow(0 0 6px rgba(255, 26, 26, .9)); }
.intro.is-pronta .intro__su { animation: su 1.6s var(--ease-in-out) infinite; }
@keyframes su { 0%, 100% { transform: translateY(6px); opacity: .45; } 50% { transform: translateY(-6px); opacity: 1; } }
.intro__invito--mouse { display: none; }
.intro.is-suggerisci .intro__entra { animation: suggerisci .7s var(--ease-molla); }
@keyframes suggerisci { 35% { transform: translateY(-16px); } }
/* col mouse: "Clicca per entrare" in una pillola al neon, sotto il logo */
@media (hover: hover) and (pointer: fine) {
  .intro__su, .intro__invito--tocco { display: none; }
  .intro__invito--mouse { display: block; }
  .intro__entra { bottom: auto; top: calc(50% + min(150px, 18vw)); min-width: 220px; padding: 0 34px; place-items: center; border: 1.5px solid var(--rosso); border-radius: var(--r-pillola); text-shadow: 0 0 10px rgba(255, 26, 26, .9); box-shadow: var(--neon), inset 0 0 12px rgba(255, 26, 26, .35); }
  .intro.is-pronta .intro__entra { animation: respiro 2.4s ease-in-out .6s infinite; }
  .intro__entra:hover { background: var(--rosso); text-shadow: none; }
}
@keyframes respiro { 50% { box-shadow: 0 0 34px rgba(255, 26, 26, .9), 0 0 70px rgba(255, 26, 26, .45), inset 0 0 16px rgba(255, 26, 26, .5); } }

/* Entrata: il canvas prende il posto del logo (main.js > esplodi), il fondo si apre sul sito */
.intro.is-entrata { cursor: default; pointer-events: none; }
.intro.is-entrata .intro__entra { animation: none; opacity: 0; transition: opacity .2s ease-out; }
.intro.is-esplosa .intro__scena { visibility: hidden; }
.intro__fondo { transition: opacity .7s var(--ease-out); }
.intro.is-entrata .intro__fondo { opacity: 0; transition-delay: .18s; }
/* il sito sotto arriva verso la camera: parte un filo piu' grande e si assesta */
#contenuto { transition: transform 1.6s var(--ease-out); }
html.intro-attesa #contenuto { transform: scale(1.06); }
/* con "riduci movimento": niente zoom, solo dissolvenza (vince sul reset globale) */
.intro.is-dissolvenza { opacity: 0; transition: opacity .4s ease !important; }
/* la hero entra mentre la camera passa, non dietro l'intro */
html.intro-attesa .hero [data-entrata] { animation-play-state: paused !important; }

/* Barra traccia in alto ---------------------------------------------------- */
.traccia { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.traccia__barra { display: block; height: 100%; background: var(--rosso); transform-origin: left; transform: scaleX(0); box-shadow: var(--neon); }

/* Header: logo · musica · voci · "Diventa sponsor" sempre in alto · menu (sotto 1100px) */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .3s;
}
.header.is-pieno { background: rgba(11, 10, 9, .86); }
.header__inner {
  max-width: calc(var(--larghezza) + 2 * var(--margine)); margin-inline: auto; padding: 14px var(--margine);
  display: flex; align-items: center; gap: 20px;
}
.header__logo { display: block; flex: none; }
.header__logo img { width: 78px; filter: drop-shadow(0 0 calc(4px + 10px * var(--beat)) rgba(255, 26, 26, .7)); }
/* Musica: tasto bianco, solo l'icona. Altoparlante = suona, barrato = muto. Lampeggia piano. */
.audio {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 0; background: var(--crema); color: var(--inchiostro); cursor: pointer;
  box-shadow: 0 0 0 0 rgba(242, 235, 223, .5);
  animation: richiamo 2.4s ease-in-out infinite;
  transition: transform .16s var(--ease-out), box-shadow .3s ease;
}
.audio:active { transform: scale(.94); }
.audio__icona { grid-area: 1 / 1; }
.audio__icona--on, .audio.is-acceso .audio__icona--off { display: none; }
.audio.is-acceso .audio__icona--on { display: block; }
/* muto: respira piano per farsi notare; acceso: alone che batte con la cassa */
@keyframes richiamo { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.audio.is-acceso { animation: none; box-shadow: 0 0 calc(6px + 18px * var(--beat)) rgba(242, 235, 223, .55); }
@media (hover: hover) and (pointer: fine) { .audio:hover { box-shadow: 0 0 0 4px rgba(242, 235, 223, .22); } }
.header__nav { display: none; gap: 28px; margin-left: auto; }
.header__nav a { position: relative; font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--crema-80); padding: 16px 0; }
.header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--rosso); box-shadow: var(--neon); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.header__nav a:hover { color: var(--crema); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__azioni { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header__cta { min-height: 44px; transition: opacity .35s var(--ease-out), visibility .35s, color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .25s var(--ease-out), border-color .35s; }
.header.cta-nascosta .header__cta { opacity: 0; visibility: hidden; pointer-events: none; }
.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--linea); background: rgba(11, 10, 9, .4); cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.menu-btn:hover { border-color: var(--rosso); box-shadow: var(--neon); }
.header--pagina { position: sticky; background: var(--nero); }
.header--pagina .header__inner { justify-content: space-between; }
@media (min-width: 1100px) {
  .header__nav { display: flex; }
  .header__nav + .header__azioni { margin-left: 8px; }
  .header .menu-btn { display: none; }
}
@media (max-width: 600px) {
  .header__inner { gap: 10px; padding-block: 10px; }
  .header__logo img { width: 60px; }
  .header__azioni { gap: 8px; }
  .header__cta { padding: 0 14px; font-size: 11px; letter-spacing: .03em; }
}
@media (max-width: 380px) {
  .header__logo img { width: 52px; }
  .header__cta { padding: 0 12px; font-stretch: 100%; }
}

/* Menu a tutto schermo (fuori dall'header nel DOM: errore 15) */
.menu {
  position: fixed; inset: 0; z-index: 80; background: var(--nero);
  display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 80px var(--margine) 40px;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.menu[hidden] { display: none; }
.menu.is-aperto { opacity: 1; }
.menu__chiudi { position: absolute; top: 16px; right: var(--margine); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea); background: none; cursor: pointer; }
.menu__voci { display: grid; gap: 4px; }
.menu__voci a { display: block; padding: 8px 0; text-decoration: none; font: 800 clamp(30px, 8.5vw, 60px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; }
.menu__voci a:hover { color: var(--rosso); text-shadow: var(--neon); }
.menu__sponsor { align-self: flex-start; }

/* Equalizer ---------------------------------------------------------------- */
.equalizer { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.equalizer span { flex: 1; height: 100%; background: linear-gradient(to top, var(--rosso), rgba(255, 26, 26, .15)); transform-origin: bottom; transform: scaleY(.06); transition: transform .08s linear; }

/* ==========================================================================
   1. HERO: titolo su due righe, due bottoni pieni, in fondo solo l'equalizer
   ========================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; isolation: isolate; }
.hero__foto, .hero__video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; }
.hero__foto img, .hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity 1s; filter: saturate(1.15) contrast(1.08); }
.hero__video.is-pronto { opacity: 1; }
/* velo: scuro in basso e dietro al testo, cosi' titolo e bottoni si staccano dalla foto */
.hero__velo {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%, rgba(11, 10, 9, .7), rgba(11, 10, 9, 0) 75%),
    linear-gradient(0deg, var(--nero) 0%, rgba(11, 10, 9, .7) 18%, rgba(11, 10, 9, .35) 50%, rgba(11, 10, 9, .55) 100%);
}
.hero__righe { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
/* Titolo e bottoni al centro della sezione, equalizer in fondo (Seba, 07/10/2026) */
.hero__contenuto { width: 100%; max-width: calc(var(--larghezza) + 2 * var(--margine)); margin: auto; padding: 110px var(--margine) 0; text-align: center; }
.hero__titolo { font-size: clamp(46px, 13vw, 76px); line-height: .88; letter-spacing: -.03em; text-shadow: 0 2px 30px rgba(11, 10, 9, .5); }
.hero__titolo > span { display: block; }
.hero__titolo .serif { font-size: 1.06em; color: var(--rosso); text-shadow: var(--neon); letter-spacing: -.01em; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.hero__cta .btn { flex: 1 1 220px; }
@media (min-width: 760px) {
  .hero__titolo { font-size: clamp(76px, 8.6vw, 132px); }
  .hero__cta .btn { flex: none; }
}
.hero__eq { width: 100%; max-width: calc(var(--larghezza) + 2 * var(--margine)); margin: clamp(28px, 4vw, 48px) auto 0; padding: 0 var(--margine) 14px; }
.hero__eq .equalizer { height: 36px; gap: 3px; }
.hero__eq .equalizer span { background: linear-gradient(to top, var(--rosso), rgba(255, 26, 26, .2)); }

/* ==========================================================================
   2. PROSSIMO EVENTO: una scheda sola, rossa e vinaccia, diversa da tutto il resto.
   Stesso markup in worker/src/render.js (prossimoHome): classi e struttura fisse.
   ========================================================================== */
.prossimo { padding-block: clamp(40px, 6vw, 88px); }

/* Cos'e' GainHouse: parole che si accendono scorrendo (testo della v3, rimesso su richiesta di Seba) */
.manifesto__testo {
  font: 600 clamp(26px, 4.2vw, 62px)/1.12 var(--f-display); font-stretch: 112%; letter-spacing: -.02em;
  max-width: 22ch; max-width: none;
}
.manifesto__testo .parola { opacity: .16; transition: opacity .35s linear, color .35s, text-shadow .35s; }
.manifesto__testo .parola.is-accesa { opacity: 1; }
.manifesto__testo em { font: italic 400 1.08em/1 var(--f-serif); color: var(--rosso); }
.manifesto__testo em .parola.is-accesa { text-shadow: var(--neon); }
html:not(.js) .manifesto__testo .parola, html.no-reveal .manifesto__testo .parola { opacity: 1; }

.evento-card {
  position: relative; border-radius: var(--r-grande); overflow: clip; isolation: isolate;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255, 26, 26, .34), rgba(255, 26, 26, 0) 70%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255, 26, 26, .16), rgba(255, 26, 26, 0) 70%),
    linear-gradient(160deg, #3b0909 0%, #200505 55%, #140303 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 26, 26, .75), 0 0 calc(40px + 30px * var(--beat)) rgba(255, 26, 26, .3), 0 40px 80px rgba(0, 0, 0, .5);
}
.evento-card__fascia {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding: 16px clamp(18px, 3vw, 36px); background: var(--rosso); color: #fff;
}
.evento-card__etichetta { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; }
.evento-card__etichetta::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: lampeggio 1.2s steps(1) infinite; }
@keyframes lampeggio { 50% { opacity: .2; } }
.evento-card .conto { display: grid; grid-template-columns: repeat(4, minmax(56px, 1fr)); gap: 6px; }
.evento-card .conto div { border-radius: 10px; padding: 8px 8px 7px; text-align: center; background: rgba(0, 0, 0, .22); color: #fff; }
.evento-card .conto b { display: block; font: 800 clamp(22px, 2.4vw, 32px)/1 var(--f-display); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.evento-card .conto span { display: block; margin-top: 4px; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
@media (max-width: 600px) { .evento-card .conto { width: 100%; } }
.evento-card__corpo { display: grid; gap: clamp(24px, 4vw, 56px); padding: clamp(22px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .evento-card__corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.evento-card__locandina { width: min(100%, 420px); justify-self: center; }
@media (max-width: 899px) { .evento-card__locandina { width: min(78%, 320px); } }
.evento-card__locandina img { width: 100%; border-radius: 16px; transform: rotate(-2deg); box-shadow: 0 0 0 1px rgba(255, 26, 26, .5), 0 30px 60px rgba(0, 0, 0, .55); }
.evento-card__info { display: grid; gap: 18px; justify-items: start; min-width: 0; }
/* Stato vendita: riga sotto il bottone del biglietto (Seba, 07/10/2026) */
.evento-card__acquisto { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 420px; }
.evento-card__stato {
  --s-bg: var(--verde);
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  color: #fff; font: 700 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
}
.evento-card__stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-bg); box-shadow: 0 0 10px var(--s-bg); }
.evento-card__stato[data-stato="coming-soon"] { --s-bg: var(--crema); }
.evento-card__stato[data-stato="primi-100"] { --s-bg: #ffd23f; }
.evento-card__stato[data-stato="secondi-100"] { --s-bg: #ff8a1f; }
.evento-card__stato[data-stato="aperta"] { --s-bg: var(--verde); }
.evento-card__stato[data-stato="sold-out"] { --s-bg: var(--rosso); }
.evento-card__stato[data-stato="aperta"]::before, .evento-card__stato[data-stato="primi-100"]::before, .evento-card__stato[data-stato="secondi-100"]::before { animation: lampeggio 1.2s steps(1) infinite; }
.evento-card__titolo { font-size: clamp(40px, 6.2vw, 92px); }
.evento-card__titolo .serif { display: block; color: var(--crema); }
.evento-card__frase { max-width: 46ch; color: var(--crema-80); }
.evento-card__dati { display: grid; width: 100%; margin: 0; border-top: 1px solid rgba(242, 235, 223, .18); }
.evento-card__dati > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(242, 235, 223, .18); }
.evento-card__dati dt { font: 400 12px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-70); }
.evento-card__dati dd { margin: 0; font-weight: 600; }
.btn.evento-card__cta { --c: var(--crema); width: 100%; justify-content: center; min-height: 64px; font-size: 17px; background: var(--crema); color: var(--inchiostro); text-shadow: none; box-shadow: 0 0 0 3px rgba(255, 26, 26, .55), 0 0 calc(24px + 30px * var(--beat)) rgba(255, 26, 26, .55); }
.btn.evento-card__cta::before { background: var(--rosso); }
@media (hover: hover) and (pointer: fine) { .btn.evento-card__cta:hover { color: var(--crema); box-shadow: 0 0 30px rgba(255, 26, 26, .6); } }
.evento-card__sponsor { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; width: 100%; padding-top: 18px; border-top: 1px solid rgba(242, 235, 223, .18); }
.evento-card__sponsor img { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
@media (max-width: 480px) { .evento-card__sponsor { gap: 12px 18px; } .evento-card__sponsor img { height: 20px; max-width: 88px; } }
/* Casi generati dal Worker (render.js): sold out, nessun evento online, sponsor senza logo */
.btn.evento-card__cta--sold-out { cursor: default; opacity: .55; box-shadow: none; pointer-events: none; }
.evento-card__gruppo { font: 700 13px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--crema); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.evento-card--attesa .evento-card__corpo { grid-template-columns: minmax(0, 1fr); }
.evento-card--attesa .evento-card__info { max-width: 720px; }
.evento-card__sponsor-nome { font: 700 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-80); }
/* Portale v3: link alla pagina dell'evento, main sponsor un po' piu' grandi, loghi lasciati a colori */
.evento-card__pagina { font: 400 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--crema-80); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.evento-card__pagina:hover { color: var(--crema); }
.evento-card__locandina a { display: block; }
.evento-card__sponsor .evento-card__sponsor--main img { height: 36px; max-width: 150px; }
@media (max-width: 480px) { .evento-card__sponsor .evento-card__sponsor--main img { height: 26px; max-width: 110px; } }

/* Senza evento in corso il Worker mette l'invito al gruppo (attesaHome) */
.prossimo__attesa { display: grid; gap: 20px; justify-items: start; }
.prossimo__grande { font: 800 clamp(34px, 5vw, 72px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.prossimo__grande .serif { color: var(--rosso); text-shadow: var(--neon); }
.prossimo__testo { max-width: 48ch; color: var(--crema-80); }
.prossimo__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.prossimo--attesa { padding-bottom: 0; }

/* ==========================================================================
   3. I NOSTRI PROGETTI (v5, ex format): uno aperto alla volta, altezza fissa (il testo non spinge niente)
   ========================================================================== */
.formati__lista { display: flex; flex-direction: column; gap: 10px; height: 580px; }
/* Desktop: slider fermo al centro, i format si aprono scorrendo (classe messa da main.js) */
.formati-sezione--scorri .contenitore { position: relative; }
.formati-sezione--scorri .contenitore::after { content: ""; display: block; height: 180vh; } /* lo sticky resta nel contenuto, non nel padding */
.formati-sezione--scorri .formati { position: sticky; top: max(96px, calc(50vh - 270px)); }
.formati-sezione--scorri [data-formato-pausa], .formati-sezione--scorri .formato__tempo { display: none; }
.formato {
  --c: var(--rosso);
  position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: 64px; min-width: 0; overflow: clip;
  border-radius: 20px; background: var(--superficie); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  transition: flex-grow .6s var(--ease-in-out), border-color .4s ease, box-shadow .4s ease;
}
.formato::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.formato.is-attivo {
  flex-grow: 8; border-color: var(--c);
  background: radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%), color-mix(in srgb, var(--c) 9%, var(--superficie));
  box-shadow: 0 0 34px color-mix(in srgb, var(--c) 22%, transparent);
}
.formato__nome { margin: 0; flex: none; }
.formato__testa {
  display: flex; align-items: center; width: 100%; min-height: 62px; padding: 0 22px; border: 0; background: none; text-align: left; cursor: pointer;
  font: 800 clamp(20px, 2.4vw, 34px)/1 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; color: var(--crema);
  transition: color .3s ease;
}
.formato:not(.is-attivo) .formato__testa::after { content: ""; position: absolute; inset: 0; }
.formato.is-attivo .formato__testa { color: var(--c); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); cursor: default; }
@media (hover: hover) and (pointer: fine) { .formato:not(.is-attivo):hover { border-color: var(--c); } .formato:not(.is-attivo):hover .formato__testa { color: var(--c); } }
.formato__corpo {
  flex: 1 1 auto; min-height: 0; display: grid; align-content: end; gap: 14px; padding: 0 22px 24px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.formato:not(.is-attivo) .formato__corpo { position: absolute; left: 0; right: 0; bottom: 0; }
.formato.is-attivo .formato__corpo { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out) .28s, visibility 0s; }
.formato__disegno { width: min(230px, 72%); height: auto; color: var(--c); overflow: visible; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 80%, transparent)); }
.formato__testo { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.formato__testo p { max-width: 46ch; color: var(--crema-80); }
.formato .formato__cta { min-height: 48px; }
.formato .formato__cta.btn--neon { --c: inherit; text-shadow: none; }
.formato__cta[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; box-shadow: none; }
.formato__tempo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; }
.formato.is-attivo .formato__tempo { animation: tempo-format 5.2s linear forwards; }
.formati.is-ferma .formato__tempo { animation: none !important; transform: scaleX(0); }
@keyframes tempo-format { to { transform: scaleX(1); } }
.formati__controlli { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
[data-formato-pausa] .ico-play, [data-formato-pausa][aria-pressed="true"] .ico-pausa { display: none; }
[data-formato-pausa][aria-pressed="true"] .ico-play { display: block; }
@media (min-width: 900px) {
  .formati__lista { flex-direction: row; height: 460px; gap: 12px; }
  .formato { min-height: 0; min-width: 88px; }
  .formato.is-attivo { flex-grow: 6; }
  .formato:not(.is-attivo) .formato__nome { flex: 1 1 auto; display: flex; }
  .formato:not(.is-attivo) .formato__testa { writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-start; padding: 26px 0; min-height: 0; font-size: clamp(20px, 1.9vw, 28px); }
  .formato.is-attivo .formato__testa { padding: 30px 34px 0; }
  .formato__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 28px; padding: 0 34px 36px; }
  .formato__testo { grid-column: 1; grid-row: 1; }
  .formato__disegno { grid-column: 2; grid-row: 1; justify-self: end; width: min(380px, 100%); }
}
/* piccole animazioni dentro il disegno, solo sul format aperto; fermo = disegno completo */
.formato.is-attivo .disegno__brilla { animation: brilla 2.4s ease-in-out infinite; }
.formato.is-attivo .disegno__mirino { transform-box: fill-box; transform-origin: center; animation: mirino 3.2s var(--ease-in-out) infinite; }
.formato.is-attivo .disegno__raggi { transform-box: view-box; transform-origin: 120px 70px; animation: raggi 2.4s ease-in-out infinite; }
.formato.is-attivo .disegno__onde { animation: onde 2.8s ease-in-out infinite; }
@keyframes brilla { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes mirino { 0%, 100% { transform: none; } 40% { transform: translate(-10px, 5px); } 70% { transform: translate(4px, -3px); } }
@keyframes raggi { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@keyframes onde { 0%, 100% { transform: none; } 50% { transform: translateX(-8px); } }

/* ==========================================================================
   4. I NOSTRI EVENTI (pannello con la vigna + mascotte che balla)
   ========================================================================== */
.serate__pannello { position: relative; isolation: isolate; border-radius: var(--r-grande); overflow: clip; padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 52px); min-height: 640px; display: grid; align-content: end; }
.serate__sfondo { position: absolute; inset: 0; z-index: -2; }
.serate__sfondo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.serate__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 9, .9) 0%, rgba(11, 10, 9, .55) 40%, rgba(11, 10, 9, .25) 100%), linear-gradient(0deg, rgba(11, 10, 9, .9), transparent 55%); }
.serate__corpo { display: grid; gap: 28px; align-items: end; }
.serate__testo { position: relative; padding-inline: clamp(24px, 4vw, 56px); }
.serate__mascotte { width: clamp(120px, 13vw, 178px); margin-bottom: -6px; transform-origin: bottom center; animation: balla calc(484ms * 2) var(--ease-in-out) infinite alternate; animation-play-state: paused; }
html.musica .serate__mascotte { animation-play-state: running; }
@keyframes balla { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-4px); } }
.serate__titolo { font-size: clamp(40px, 4.6vw, 72px); white-space: nowrap; }
.serate__titolo .serif { display: block; color: var(--rosso); text-shadow: var(--neon); }
.serate__intro { margin-top: 16px; max-width: 34ch; color: var(--crema-80); }
.serate__carosello { min-width: 0; }
@media (min-width: 900px) { .serate__corpo { grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); } }

.serate__lista { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 26px clamp(24px, 4vw, 56px) 26px; scroll-padding-inline: clamp(24px, 4vw, 56px); cursor: grab; }
.serate__lista::-webkit-scrollbar { display: none; }
.serate__lista.is-trascinato { cursor: grabbing; scroll-snap-type: none; }
.locandina { position: relative; flex: 0 0 clamp(210px, 22vw, 260px); scroll-snap-align: start; border-radius: 18px; overflow: hidden; background: var(--superficie); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); transition: transform .5s var(--ease-out), box-shadow .5s; }
.locandina img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; transition: transform .8s var(--ease-out); }
.locandina__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 14px; background: linear-gradient(transparent, rgba(11, 10, 9, .95) 70%); }
.locandina__evento { font: italic 400 15px/1.2 var(--f-serif); color: var(--crema-80); }
.locandina__nome { font: 800 20px/1.05 var(--f-display); font-stretch: 125%; text-transform: uppercase; margin-top: 2px; }
.locandina__data { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--crema-70); margin-top: 8px; }
.locandina__badge { position: absolute; z-index: 2; top: 12px; left: 12px; font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; background: var(--rosso); color: var(--crema); padding: 8px 10px; border-radius: 6px; box-shadow: var(--neon); }
.locandina--prossima { box-shadow: 0 0 0 1.5px var(--rosso), 0 0 30px rgba(255, 26, 26, .45); }
.serate__lista { align-items: flex-start; }
.locandina__link { display: block; color: inherit; text-decoration: none; }
/* Evento in vendita (v5): bottone biglietti sotto la locandina; la didascalia resta sulla foto */
.locandina__cta { display: flex; width: calc(100% - 20px); margin: 10px; min-height: 48px; padding: 0 12px; font-size: 12px; white-space: normal; text-align: center; }
.locandina--prossima .locandina__info, .locandina--futura .locandina__info { bottom: 68px; }
/* Eventi finiti (v6, Seba 11/10/2026: niente bianco e nero ne' data barrata, "sembra un funerale").
   Locandina a colori, etichetta "Evento terminato" e sotto il bottone "Guarda le foto".
   Vale anche per le locandine che il Worker scrive per i ricordi (render.js > locandineCarosello). */
.locandina:not(.locandina--prossima, .locandina--futura) .locandina__info { bottom: 68px; }
/* la locandina statica del prossimo evento resta nel carosello quando finisce: via "Avvisami", etichetta da CSS */
.locandina:not(.locandina--prossima, .locandina--futura) .locandina__cta:not(.btn--chiaro) { display: none; }
.locandina:not(.locandina--prossima, .locandina--futura):not(:has(.btn--chiaro)) .locandina__info { bottom: 0; }
.locandina:not(.locandina--prossima, .locandina--futura):not(:has(.locandina__finito))::before { content: "Evento terminato"; }
.locandina__finito, .locandina:not(.locandina--prossima, .locandina--futura):not(:has(.locandina__finito))::before {
  position: absolute; z-index: 2; top: 12px; left: 12px; pointer-events: none;
  padding: 8px 10px; border-radius: 6px; background: rgba(11, 10, 9, .72); border: 1px solid rgba(242, 235, 223, .35);
  font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema);
}
@media (hover: hover) and (pointer: fine) {
  .locandina:hover { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 0 0 1.5px var(--rosso), 0 0 40px rgba(255, 26, 26, .45), 0 30px 60px rgba(0, 0, 0, .6); }
  .locandina:hover img { transform: scale(1.06); }
}
.serate__frecce { padding-inline: clamp(24px, 4vw, 56px); }

/* Frecce degli scroll orizzontali: sempre visibili (errore 12) */
.frecce { display: flex; gap: 10px; }
.frecce[hidden], .btn[hidden] { display: none; }
.freccia { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--crema-70); background: rgba(11, 10, 9, .5); cursor: pointer; transition: border-color .3s, box-shadow .3s, opacity .3s, transform .25s; }
.freccia:hover:not(:disabled) { border-color: var(--rosso); box-shadow: var(--neon); }
.freccia:active:not(:disabled) { transform: scale(.92); }
.freccia:disabled { opacity: .3; cursor: default; }

/* ==========================================================================
   5. GALLERY: un mucchio di foto che si apre quando arriva in vista (niente zoom)
   ========================================================================== */
.gallery { overflow: clip; }
.esplosione { position: relative; margin-top: 8px; }
/* senza JS (e per i controlli automatici) e' una griglia normale */
.esplosione__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.scatto { position: relative; margin: 0; background: var(--crema); padding: 8px 8px 0; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.scatto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: contrast(1.05) saturate(1.05); }
.scatto__dida { display: block; font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro); padding: 9px 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.esplosione.is-js .esplosione__lista { display: block; position: relative; height: var(--altezza, 900px); }
.esplosione.is-js .scatto {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  transform: translate(var(--dx), var(--dy)) rotate(var(--r0)) scale(.9);
  transition: transform .9s var(--ease-molla) calc(var(--i) * 28ms), box-shadow .4s, z-index 0s;
  z-index: var(--z);
}
.esplosione.is-js.is-aperta .scatto { transform: translate(0, 0) rotate(var(--r)) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .esplosione.is-js.is-aperta .scatto:hover { transform: translate(0, -8px) rotate(0deg) scale(1.08); z-index: 30; box-shadow: 0 0 0 2px var(--rosso), 0 0 40px rgba(255, 26, 26, .5), 0 30px 60px rgba(0, 0, 0, .6); transition-delay: 0s; }
}

/* Telefono (v5): mazzo di polaroid impilate. Swipe = quella in cima vola via e torna in fondo.
   Classi e variabili da main.js (--mz ordine, --mr rotazione, --mx/--my sfalsamento). */
.esplosione.is-mazzo .esplosione__lista { display: block; position: relative; height: var(--mazzo-h, 480px); touch-action: pan-y; }
.esplosione.is-mazzo .scatto {
  --mw: min(76vw, 300px);
  position: absolute; left: 50%; top: 14px; width: var(--mw); margin-left: calc(var(--mw) / -2);
  z-index: var(--mz, 1); cursor: grab;
  transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--mr, 0deg));
  transition: transform .5s var(--ease-out), box-shadow .3s;
}
.esplosione.is-mazzo .scatto.is-cima { box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.esplosione.is-mazzo .scatto.is-trascinata { transition: none; cursor: grabbing; }
.esplosione.is-mazzo .scatto.is-via { transition: transform .32s var(--ease-in-out); }
.mazzo__controlli { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 22px; }
.mazzo__controlli[hidden] { display: none; }
.mazzo__conto { min-width: 70px; text-align: center; font: 400 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--crema-70); }

/* Commenti: nastro che scorre, senza icone */
.commenti { margin-top: clamp(56px, 7vw, 96px); border-block: 1px solid var(--linea); overflow: hidden; }
.commenti__nastro { display: flex; width: max-content; animation: nastro 48s linear infinite; }
.commenti:hover .commenti__nastro { animation-play-state: paused; }
.commenti__lista { display: flex; }
.commento { display: flex; align-items: baseline; gap: 16px; padding: 26px 36px; border-right: 1px solid var(--linea); white-space: nowrap; }
.commento__testo { margin: 0; font: italic 400 clamp(24px, 2.8vw, 36px)/1.1 var(--f-serif); }
.commento__chi { font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--rosso); font-style: normal; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* ==========================================================================
   6. MERCH: lookbook
   ========================================================================== */
.merch { background: var(--crema); color: var(--inchiostro); --linea: rgba(11, 10, 9, .16); }
.merch .etichetta { color: rgba(11, 10, 9, .6); }
.merch .sezione__intro { color: rgba(11, 10, 9, .78); }
.merch .titolo-sezione .serif { color: var(--rosso); text-shadow: none; }
.drop { position: relative; display: grid; gap: 32px; align-items: center; border-top: 1px solid var(--linea); padding-top: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .drop { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.drop__scena { position: relative; display: grid; place-items: center; min-height: 420px; isolation: isolate; }
.drop__fondo { position: absolute; inset: 0; z-index: -1; display: grid; align-content: center; overflow: hidden; }
.drop__fondo span { font: 900 clamp(70px, 13vw, 200px)/.85 var(--f-display); font-stretch: 125%; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(11, 10, 9, .18); animation: scorri-testo 26s linear infinite; }
.drop__fondo span:nth-child(2) { animation-direction: reverse; -webkit-text-stroke-color: rgba(255, 26, 26, .4); }
@keyframes scorri-testo { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.drop__scena picture { width: 100%; }
/* Maglietta scontornata in alta qualita' (PNG trasparente -> WebP), niente cornice */
.drop__foto { width: min(500px, 90%); margin-inline: auto; transform: rotate(-3deg); filter: drop-shadow(0 30px 40px rgba(11, 10, 9, .35)); transition: transform .8s var(--ease-out); }
.drop:hover .drop__scena picture { width: 100%; }
.drop__foto { transform: rotate(0deg) scale(1.03); }
.drop__timbro {
  position: absolute; right: 6%; top: 8%; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--rosso); color: var(--crema); font: 800 12px/1.15 var(--f-display); font-stretch: 125%; text-transform: uppercase; padding: 14px;
  transform: rotate(14deg); box-shadow: 0 0 0 4px var(--crema), 0 0 0 5px var(--rosso);
  animation: timbro 12s linear infinite;
}
@keyframes timbro { to { transform: rotate(374deg); } }
.drop__testo { display: grid; gap: 18px; justify-items: start; }
.drop__etichetta { font: 700 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--rosso); }
.drop__titolo { font-size: clamp(42px, 5.4vw, 80px); }
.drop__titolo .serif { color: var(--rosso); }
.drop__desc { max-width: 40ch; color: rgba(11, 10, 9, .8); }
.merch .btn--ghost { --c: var(--inchiostro); color: var(--inchiostro); border-color: var(--inchiostro); }
.merch .btn--neon { color: var(--inchiostro); text-shadow: none; }
@media (hover: hover) and (pointer: fine) { .merch .btn--neon:hover { color: var(--crema); } .merch .btn--ghost:hover { color: var(--crema); } }

.nastro-rosso { margin: clamp(48px, 6vw, 80px) calc(-1 * var(--margine)) 0; background: var(--rosso); color: var(--inchiostro); transform: rotate(-1.6deg); overflow: hidden; border-block: 2px solid var(--inchiostro); }
.nastro-rosso__dentro { display: flex; width: max-content; animation: nastro 22s linear infinite; }
.nastro-rosso span { font: 900 clamp(20px, 2.6vw, 34px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; padding: 14px 0; white-space: nowrap; }

.capi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) { .capi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.capo { position: relative; display: grid; gap: 8px; align-content: start; }
/* Foto (v5): due "viste" (nera, bianca) una sopra l'altra; ognuna ha davanti e retro che si girano.
   Col mouse si gira passando sopra, su touch toccando la foto (bottone .capo__gira). */
.capo__foto { position: relative; border-radius: 14px; overflow: clip; background: #e9e0d1; aspect-ratio: 4 / 5; }
.capo__vista { position: absolute; inset: 0; perspective: 1200px; transition: opacity .35s ease, visibility 0s; }
.capo[data-colore="nero"] .capo__vista[data-vista="bianco"], .capo[data-colore="bianco"] .capo__vista[data-vista="nero"] { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.capo__lato { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--ease-in-out); }
.capo__lato--retro { transform: rotateY(180deg); }
.capo.is-retro .capo__lato--fronte { transform: rotateY(-180deg); }
.capo.is-retro .capo__lato--retro { transform: rotateY(0deg); }
.capo__lato picture { display: grid; place-items: center; width: 100%; height: 100%; }
.capo__lato img { width: 92%; height: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(11, 10, 9, .28)); }
.capo__segnaposto {
  display: grid; place-content: center; gap: 8px; width: 82%; height: 70%; padding: 10px;
  border: 2px dashed rgba(11, 10, 9, .28); border-radius: 12px; text-align: center;
  font: 400 11px/1.45 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(11, 10, 9, .62);
}
.capo__segnaposto b { font-weight: 700; color: var(--rosso); }
.capo__vista[data-vista="bianco"] .capo__segnaposto { background: rgba(255, 255, 255, .55); }
.capo__num { position: absolute; z-index: 2; top: 10px; left: 12px; font: 400 11px/1 var(--f-mono); letter-spacing: .12em; color: rgba(11, 10, 9, .6); pointer-events: none; }
.capo__gira { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.capo__gira span { position: absolute; right: 10px; top: 8px; padding: 7px 9px; border-radius: 5px; background: rgba(11, 10, 9, .08); font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro); }
.capo__gira:focus-visible { outline-offset: -4px; }
.capo__nome { font: 800 clamp(15px, 1.5vw, 19px)/1.1 var(--f-display); font-stretch: 125%; text-transform: uppercase; margin-top: 6px; }
.capo__desc { font-size: 14px; line-height: 1.5; color: rgba(11, 10, 9, .72); }
.capo__badge { position: absolute; z-index: 2; right: 10px; bottom: 10px; pointer-events: none; font: 700 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--inchiostro); color: var(--crema); padding: 7px 9px; border-radius: 5px; transform: rotate(-4deg); transition: transform .4s var(--ease-molla), background-color .3s; }
/* Colore: due pallini da 44px di area tocco, il nome del colore accanto */
.capo__colori { display: flex; align-items: center; margin: -2px 0 0 -10px; }
.capo__colore { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.capo__colore::before { content: ""; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(11, 10, 9, .4); transition: box-shadow .25s ease, transform .25s var(--ease-molla); }
.capo__colore--bianco::before { background: #fff; }
.capo__colore--nero::before { background: var(--inchiostro); }
.capo__colore[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--crema), 0 0 0 4px var(--rosso); }
.capo__colore:active::before { transform: scale(.88); }
.capo__colore-nome { margin-left: 4px; font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(11, 10, 9, .62); }
@media (hover: hover) and (pointer: fine) {
  .capo:hover .capo__lato--fronte { transform: rotateY(-180deg); }
  .capo:hover .capo__lato--retro { transform: rotateY(0deg); }
  .capo:hover .capo__badge { transform: rotate(3deg) scale(1.08); background: var(--rosso); }
  .capo__gira span { display: none; }
  .capo__colore:hover::before { transform: scale(1.12); }
}
@media (max-width: 600px) { .capo__desc { display: none; } }

/* ==========================================================================
   7. MINIFILM
   ========================================================================== */
.film { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .film { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.film__voce a { position: relative; display: block; border-radius: 16px; overflow: hidden; text-decoration: none; background: var(--superficie); isolation: isolate; box-shadow: 0 0 0 1px var(--linea); transition: transform .5s var(--ease-out), box-shadow .5s; }
.film__voce img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; filter: grayscale(.35) contrast(1.1); transition: transform .9s var(--ease-out), filter .5s; }
.film__voce a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 10, 9, .6), transparent 30%, transparent 50%, rgba(11, 10, 9, .95)); }
.film__voce a::after { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); opacity: .5; pointer-events: none; }
.film__ep { position: absolute; z-index: 2; top: 14px; left: 14px; font: 700 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--crema); }
.film__rec { position: absolute; z-index: 2; top: 14px; right: 14px; display: flex; align-items: center; gap: 6px; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--crema-70); }
.film__rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rosso); animation: lampeggio 1.2s steps(1) infinite; }
.film__testo { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 16px; display: grid; gap: 10px; }
.film__titolo { font: 800 clamp(17px, 2.1vw, 30px)/.95 var(--f-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; }
.film__guarda { display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-80); }
.film__play { position: absolute; z-index: 2; left: 50%; top: 46%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rosso); background: rgba(11, 10, 9, .35); box-shadow: var(--neon); opacity: 0; transform: scale(.7); transition: opacity .4s, transform .5s var(--ease-molla); }
@media (hover: hover) and (pointer: fine) {
  .film__voce a:hover { transform: translateY(-8px); box-shadow: 0 0 0 1.5px var(--rosso), 0 0 40px rgba(255, 26, 26, .4); }
  .film__voce a:hover img { transform: scale(1.06); filter: none; }
  .film__voce a:hover .film__play { opacity: 1; transform: none; }
}
@media (hover: none) { .film__play { opacity: 1; transform: none; width: 52px; height: 52px; margin: -26px 0 0 -26px; } }
.minifilm__cta { margin-top: clamp(32px, 4vw, 48px); }

/* ==========================================================================
   9. RIMANI AGGIORNATO
   ========================================================================== */
.gruppo__card { position: relative; isolation: isolate; overflow: clip; border-radius: var(--r-grande); padding: clamp(48px, 7vw, 110px) clamp(24px, 5vw, 72px); min-height: 460px; display: grid; align-content: center; }
.gruppo__sfondo { position: absolute; inset: 0; z-index: -2; }
.gruppo__sfondo img { width: 100%; height: 100%; object-fit: cover; }
.gruppo__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 9, .92), rgba(11, 10, 9, .45)); }
.gruppo__contenuto { display: grid; gap: 22px; justify-items: start; max-width: 620px; }
.gruppo__titolo { font-size: clamp(44px, 7vw, 104px); }
.gruppo__titolo .serif { display: block; color: var(--rosso); text-shadow: var(--neon); }
.gruppo__contenuto p { color: var(--crema-80); max-width: 44ch; }
.btn__icona { flex: none; width: 20px; height: 20px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid var(--linea); padding: clamp(48px, 6vw, 80px) 0 96px; overflow: clip; }
.footer__inner { max-width: calc(var(--larghezza) + 2 * var(--margine)); margin-inline: auto; padding-inline: var(--margine); display: grid; gap: 32px; }
.footer__link { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.footer__link a, .footer__social a { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--crema-80); padding: 12px 0; display: inline-block; }
.footer__link a:hover, .footer__social a:hover { color: var(--rosso); }
.footer__riga { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; align-items: center; border-top: 1px solid var(--linea); padding-top: 18px; }
.footer__copy { font: 400 12px/1 var(--f-mono); color: var(--crema-70); }
.footer__social { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer__inner > * { min-width: 0; }
.footer__marchio { font-size: clamp(38px, 9.4vw, 152px); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--crema-70); white-space: nowrap; text-align: center; transition: color .6s, -webkit-text-stroke-color .6s, text-shadow .6s; }
.footer__marchio:hover { color: var(--rosso); -webkit-text-stroke-color: var(--rosso); text-shadow: var(--neon); }
/* Home (v5): la scritta e' quella del logo originale (tracciati di logo-vettoriale.svg, scripts/logo_intro.py).
   Spenta = contorno sottile; al passaggio (touch: quando entra in vista) si accende come un neon:
   tubo rosso, anima crema, alone. */
div.footer__marchio { display: grid; place-items: center; padding-block: 8px; font-size: 0; line-height: 0; -webkit-text-stroke: 0; transition: none; }
.scritta-neon { display: block; width: min(100%, 860px); height: auto; aspect-ratio: 512 / 125; overflow: visible; }
.scritta-neon__alone { fill: var(--rosso); stroke: var(--rosso); stroke-width: 14; stroke-linejoin: round; opacity: 0; transition: opacity .5s ease; }
.scritta-neon__tubo { fill: none; stroke: var(--crema-70); stroke-width: 1.1; stroke-linejoin: round; transition: stroke .35s ease, stroke-width .35s var(--ease-out), fill .35s ease; }
.scritta-neon__anima { fill: transparent; transition: fill .35s ease; }
div.footer__marchio:hover .scritta-neon, div.footer__marchio.is-acceso .scritta-neon { animation: accendi-neon .9s steps(1) both; }
div.footer__marchio:hover .scritta-neon__tubo, div.footer__marchio.is-acceso .scritta-neon__tubo { fill: var(--rosso); stroke: var(--rosso); stroke-width: 9; }
div.footer__marchio:hover .scritta-neon__anima, div.footer__marchio.is-acceso .scritta-neon__anima { fill: #fff4f1; }
div.footer__marchio:hover .scritta-neon__alone, div.footer__marchio.is-acceso .scritta-neon__alone { opacity: calc(.6 + .35 * var(--beat)); }
.footer__legale { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font: 400 12px/1.6 var(--f-mono); color: var(--crema-70); }
.footer__legale a { color: var(--crema-70); }
.footer__crediti a { color: var(--crema-80); }

/* Pagine di testo (privacy, cookie, 404) ----------------------------------- */
.pagina-testo { padding-top: 40px; }
.testo-legale { max-width: 760px; }
.testo-legale h1 { font: 800 clamp(34px, 5vw, 60px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; margin-bottom: 24px; }
.testo-legale h2 { font: 800 20px/1.2 var(--f-display); font-stretch: 112%; text-transform: uppercase; margin: 36px 0 12px; }
.testo-legale p, .testo-legale li { color: var(--crema-80); margin-bottom: 12px; }
.testo-legale ul { list-style: disc; padding-left: 20px; }
.testo-tenue { color: var(--crema-70); font-size: 14px; }
.errore { text-align: center; }
.errore .btn { margin-top: 24px; }

/* Banner avviso (bot modifiche-clienti) ------------------------------------ */
.banner-avviso { background: var(--avviso, #b45309); color: #fff; font-size: 14px; }
.banner-avviso[data-visibile="false"] { display: none; }
.banner-avviso__inner { padding-block: 10px; }

/* Info che arrivano una alla volta ----------------------------------------- */
html.js:not(.no-reveal) [data-pezzo] { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out); }
html.js:not(.no-reveal) [data-pezzo].is-visto { opacity: 1; transform: none; filter: none; }
html.js:not(.no-reveal) .hero [data-entrata] { animation: entrata 1s var(--ease-out) both; }
html.rientro .hero [data-entrata] { animation: none !important; }
html.js:not(.no-reveal) .hero [data-entrata]:nth-child(2) { animation-delay: .12s; }
html.js:not(.no-reveal) .hero [data-entrata]:nth-child(3) { animation-delay: .24s; }
@keyframes entrata { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Riduci movimento: tutto fermo e visibile --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::after { animation: none; }
  .commenti__nastro, .nastro-rosso__dentro, .drop__fondo span { animation: none !important; }
  .commenti { overflow-x: auto; }
  html.js [data-pezzo] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ==========================================================================
   PAGINA SPONSOR (B2B) — testo di Enea, stile v3
   ========================================================================== */
.b2b-hero { position: relative; isolation: isolate; min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; padding: 130px 0 clamp(48px, 7vw, 96px); overflow: clip; }
.b2b-hero__foto { position: absolute; inset: 0; z-index: -2; }
.b2b-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(1.05) contrast(1.08); }
.b2b-hero__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 9, .92) 0%, rgba(11, 10, 9, .6) 55%, rgba(11, 10, 9, .35) 100%), linear-gradient(0deg, var(--nero), transparent 45%); }
.b2b-hero__titolo { font-size: clamp(46px, 9vw, 140px); margin: 18px 0 22px; max-width: 12ch; }
.b2b-hero__titolo .serif { display: block; color: var(--rosso); text-shadow: var(--neon); }
.b2b-hero__sotto { max-width: 52ch; color: var(--crema-80); margin-bottom: 30px; }

.edizioni { display: grid; gap: 18px; }
@media (min-width: 900px) { .edizioni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.edizione { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px; border: 1px solid var(--linea); border-radius: 20px; background: var(--superficie); transition: border-color .4s, box-shadow .4s; }
.edizione img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 12px; }
.edizione__testo { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.edizione__data { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--rosso); }
.edizione__nome { font: 800 clamp(22px, 2.4vw, 32px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.edizione__luogo { font: italic 400 16px/1.2 var(--f-serif); color: var(--crema-80); }
.edizione__badge { font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; background: var(--rosso); color: var(--crema); padding: 7px 9px; border-radius: 5px; }
.edizione__sponsor { font-size: 14px; line-height: 1.5; color: var(--crema-70); }
.edizione__sponsor span { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--crema); margin-right: 6px; }
@media (hover: hover) and (pointer: fine) { .edizione:hover { border-color: var(--rosso); box-shadow: 0 0 30px rgba(255, 26, 26, .25); } }

.b2b-colonne { display: grid; gap: 20px; max-width: 1000px; }
.b2b-colonne p { color: var(--crema-80); max-width: 52ch; }
@media (min-width: 900px) { .b2b-colonne { grid-template-columns: 1fr 1fr; gap: 48px; } }

.marchi { border-block: 1px solid var(--linea); overflow: hidden; }
.marchi__nastro { display: flex; width: max-content; animation: nastro 40s linear infinite; }
.marchi:hover .marchi__nastro { animation-play-state: paused; }
.marchi__lista { display: flex; }
.marchio { padding: 30px 34px; border-right: 1px solid var(--linea); white-space: nowrap; }
.marchio span { display: block; font: 800 clamp(22px, 2.8vw, 40px)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.2px var(--crema-70); transition: color .3s, -webkit-text-stroke-color .3s, text-shadow .3s; }
.marchio:hover span { color: var(--rosso); -webkit-text-stroke-color: var(--rosso); text-shadow: var(--neon); }

.motivi { display: grid; gap: 0; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .motivi { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 22px; } }
.motivo { display: grid; gap: 12px; align-content: start; padding: 26px 0; border-bottom: 1px solid var(--linea); }
@media (min-width: 900px) { .motivo { padding: 28px; border: 1px solid var(--linea); border-radius: 20px; } }
.motivo__num { font: 800 44px/1 var(--f-display); font-stretch: 125%; color: var(--rosso); text-shadow: var(--neon); }
.motivo__tag { font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema-70); }
.motivo__titolo { font: 800 clamp(20px, 1.9vw, 26px)/1.1 var(--f-display); font-stretch: 112%; text-transform: uppercase; }
.motivo p { color: var(--crema-80); }

.idee { display: grid; gap: 14px; }
@media (min-width: 700px) { .idee { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .idee { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.idea { position: relative; display: grid; gap: 10px; align-content: start; justify-items: start; padding: 26px; border-radius: 20px; background: var(--crema); color: var(--inchiostro); transition: transform .5s var(--ease-out), box-shadow .5s; }
.idea__tag { font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rosso); }
.idea__nome { font: 800 clamp(22px, 2.2vw, 30px)/1.05 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.idea p { color: rgba(11, 10, 9, .78); }
.idea--tu { background: transparent; color: var(--crema); border: 1.5px dashed var(--rosso); }
.idea--tu p { color: var(--crema-80); }
@media (hover: hover) and (pointer: fine) { .idea:hover { transform: rotate(-1.2deg) translateY(-6px); box-shadow: 0 0 0 1.5px var(--rosso), 0 20px 40px rgba(0, 0, 0, .4); } }

.contatto { display: grid; gap: clamp(32px, 5vw, 72px); padding: clamp(28px, 5vw, 64px); border-radius: var(--r-grande); border: 1px solid rgba(255, 26, 26, .45); background: radial-gradient(ellipse at 0% 0%, rgba(255, 26, 26, .16), transparent 60%), var(--superficie); box-shadow: 0 0 60px rgba(255, 26, 26, .12); }
@media (min-width: 900px) { .contatto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contatto__testo { display: grid; gap: 18px; align-content: start; }
.contatto__titolo { font-size: clamp(30px, 3.1vw, 48px); overflow-wrap: anywhere; }
.contatto__titolo .serif { color: var(--rosso); text-shadow: var(--neon); }
.contatto__testo p { color: var(--crema-80); max-width: 44ch; }
.contatto__mail a { color: var(--crema); }
.modulo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.modulo__campo { display: grid; gap: 7px; min-width: 0; }
.modulo__campo--largo { grid-column: 1 / -1; }
@media (max-width: 600px) { .modulo__campo { grid-column: 1 / -1; } }
.modulo label { font: 400 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--crema-70); }
.modulo label span { text-transform: none; letter-spacing: 0; }
.modulo input, .modulo select, .modulo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea); background: rgba(242, 235, 223, .04);
  color: var(--crema); font: 400 16px/1.4 var(--f-testo); transition: border-color .3s, box-shadow .3s;
}
.modulo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--crema) 50%), linear-gradient(135deg, var(--crema) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
.modulo select option { color: #000; }
.modulo textarea { resize: vertical; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 3px rgba(255, 26, 26, .25); }
.modulo [aria-invalid="true"] { border-color: var(--rosso); }
.modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__consenso { display: flex !important; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--f-testo) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--crema-80) !important; cursor: pointer; }
.modulo__consenso input { width: 20px; min-height: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--rosso); }
.modulo__consenso a { color: var(--crema); }
.modulo__invia { grid-column: 1 / -1; justify-self: start; }
.modulo__esito { grid-column: 1 / -1; min-height: 1.5em; font-size: 15px; }
.modulo__esito.is-ok { color: var(--verde); }
.modulo__esito.is-errore { color: var(--rosso); }
.modulo.is-inviato .modulo__campo, .modulo.is-inviato .modulo__consenso, .modulo.is-inviato .modulo__invia { display: none; }

/* Bottoni con testo lungo su telefono: vanno a capo invece di uscire dal bordo */
.btn { max-width: 100%; }
@media (max-width: 600px) {
  .btn--grande { white-space: normal; text-align: center; min-height: 56px; height: auto; padding-block: 14px; line-height: 1.25; }
  .btn--grande .btn__testo > span::after { display: none; }
  .modulo__invia { justify-self: stretch; }
}

/* Loghi: stesse classi su tutto il sito (home, sponsor, pagine evento) ---- */
.logo { display: block; width: auto; height: auto; max-width: 100%; }
.logo--colore { filter: none; }
.logo--bianco { filter: brightness(0) invert(1); }
.logo--nero { filter: brightness(0); }

/* ==========================================================================
   CURSORE GABBIANO (main.js): solo mouse vero; il cursore di sistema sparisce
   solo quando il gabbiano e' in scena (html.cursore-attivo), mai su touch.
   ========================================================================== */
.cursore, .cursore-punto { position: fixed; left: 0; top: 0; pointer-events: none; }
html:not(.cursore-attivo) .cursore, html:not(.cursore-attivo) .cursore-punto { display: none; }
@media (hover: none), (pointer: coarse) { .cursore, .cursore-punto { display: none !important; } }
.cursore { z-index: 200; width: 0; height: 0; will-change: transform; }
.cursore__corpo { position: absolute; left: -18px; top: -9px; width: 36px; height: 14px; transition: transform .18s var(--ease-out), opacity .2s ease; }
.cursore__gabbiano { display: block; width: 36px; height: 14px; overflow: visible; transform-origin: 50% 90%; filter: drop-shadow(0 0 2px rgba(255, 26, 26, 1)) drop-shadow(0 0 7px rgba(255, 26, 26, .7)); }
.cursore__ala path { fill: var(--rosso); transition: fill .18s ease; }
/* sopra un bottone rosso il gabbiano rosso sparirebbe: diventa crema */
.cursore.is-sopra .cursore__ala path { fill: var(--crema); }
.cursore__ala { transform-box: view-box; transform-origin: 256px 280px; transition: transform .18s var(--ease-out); }
/* sopra link e bottoni: ali alzate e strette, gabbiano piu' grande */
.cursore.is-sopra .cursore__corpo { transform: scale(1.3); }
.cursore.is-sopra .cursore__ala--sx { transform: rotate(18deg); }
.cursore.is-sopra .cursore__ala--dx { transform: rotate(-18deg); }
.cursore.is-testo .cursore__corpo, .cursore.is-fuori .cursore__corpo { opacity: 0; }
.cursore-punto { z-index: 201; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 1px rgba(255, 26, 26, .9), 0 0 8px rgba(255, 26, 26, .9); transition: opacity .2s ease; }
.cursore-punto.is-testo, .cursore-punto.is-fuori { opacity: 0; }
html.cursore-attivo, html.cursore-attivo * { cursor: none !important; }
html.cursore-attivo :is(input, textarea) { cursor: text !important; }
html.cursore-attivo :is(input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]) { cursor: none !important; }