/* ═══════════════════════════════════════════════════════════════
   GOLDEN SERVAL — theme.css  ·  LAYER DI RIFINITURA (v1)
   ---------------------------------------------------------------
   Questo file va caricato SEMPRE PER ULTIMO.
   Contiene solo MIGLIORIE additive su selettori già esistenti:
   palette più ricca, tipografia, menu mobile, apertura post,
   bottoni, card e sfondi. Non aggiunge nuove classi e non tocca
   nessun id/funzione usati dal JavaScript: si può rimuovere in
   qualsiasi momento per tornare allo stile precedente.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. PALETTE RAFFINATA + TOKEN DI COESIONE
   Stessi nomi di variabili → cascata su tutto il sito.
   (Definita qui così vale anche su forum.html, che non
    carica style.css.)
   ───────────────────────────────────────────── */
:root {
  /* Oro più "fuso" e luminoso */
  --gold:         #efb02a;
  --gold-light:   #ffd45e;
  --gold-dark:    #b87d12;

  /* Viola con più profondità e vibrazione */
  --purple:       #7a45c4;
  --purple-mid:   #9a5fe0;
  --purple-light: #c08cf2;
  --purple-dark:  #3a1761;
  --purple-bg:    #271247;

  /* Fondali più profondi, meno "fango" */
  --black:        #0c0617;
  --dark:         #190e2c;
  --dark2:        #22143d;
  --dark3:        #2e1c4a;

  /* Testi: dim un filo più chiaro per la leggibilità */
  --text:         #f2ecff;
  --text-dim:     #ab9bcb;

  /* Nuovi accenti coerenti col modal (magenta/ciano galassia) */
  --magenta:      #d24bb0;
  --cyan:         #4aa8e0;

  /* Gradienti riutilizzabili */
  --grad-gold:   linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 48%, var(--gold-light) 100%);
  --grad-purple: linear-gradient(135deg, var(--purple-dark), var(--purple-mid));
  --grad-line:   linear-gradient(90deg, transparent, var(--purple-light), var(--gold), var(--purple-light), transparent);

  /* Ombre e bagliori */
  --glow-gold:   0 0 28px rgba(239,176,42,0.38);
  --glow-purple: 0 0 32px rgba(122,69,196,0.40);
  --shadow-soft: 0 14px 40px rgba(0,0,0,0.45);
  --shadow-deep: 0 28px 80px rgba(0,0,0,0.62);

  /* Raggi standard */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
}

/* Selezione testo coerente col brand */
::selection { background: rgba(239,176,42,0.30); color: #fff; }

/* ─────────────────────────────────────────────
   2. TIPOGRAFIA
   Più respiro e una scala fluida sui titoli.
   ───────────────────────────────────────────── */
body {
  font-family: 'Raleway', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.1px;
}

.section-title {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  /* Oro con leggera profondità invece del colore piatto */
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold); /* fallback */
  text-shadow: none;
  filter: drop-shadow(0 2px 18px rgba(239,176,42,0.22));
}

.section-label {
  letter-spacing: 9px;
  color: var(--purple-light);
}

.section-line {
  height: 2px;
  width: 96px;
  border-radius: 999px;
  background: var(--grad-line);
  box-shadow: 0 0 14px rgba(239,176,42,0.25);
}

/* ─────────────────────────────────────────────
   3. SFONDO GALASSIA — più profondità
   ───────────────────────────────────────────── */
.hero-divider {
  width: 170px;
  height: 2px;
  border-radius: 999px;
  background: var(--grad-line);
  box-shadow: 0 0 18px rgba(239,176,42,0.30);
}

.hero-subtitle {
  background: linear-gradient(90deg, var(--purple-light), var(--gold-light), var(--purple-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-dim);
  letter-spacing: 11px;
}

/* ─────────────────────────────────────────────
   4. BOTTONI — oro fuso + bagliore, outline più vivo
   ───────────────────────────────────────────── */
.btn-gold {
  background: var(--grad-gold);
  background-size: 160% 160%;
  box-shadow: 0 6px 22px rgba(239,176,42,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
  font-weight: 400;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-position .5s;
}
.btn-gold:hover {
  background: var(--grad-gold);
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(239,176,42,0.5), var(--glow-gold);
}

.btn-outline {
  border: 1px solid rgba(192,140,242,0.55);
  color: var(--purple-light);
  background: rgba(122,69,196,0.06);
  backdrop-filter: blur(2px);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(122,69,196,0.20);
  box-shadow: var(--glow-purple);
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────────
   5. NAV DESKTOP — link con sottolineatura oro più morbida
   ───────────────────────────────────────────── */
.nav-links a::after {
  height: 2px;
  border-radius: 999px;
  background: var(--grad-gold);
  bottom: -6px;
}
.nav-logo {
  text-shadow: 0 0 22px rgba(239,176,42,0.45);
}

/* ─────────────────────────────────────────────
   6. MENU MOBILE — voci a "scheda", più moderne e tappabili
   (mantiene animazioni, safe-area e classi originali)
   ───────────────────────────────────────────── */
.nav-mobile {
  background:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(154,95,224,0.40), transparent 70%),
    linear-gradient(180deg,
      rgba(9,4,22,0.99) 0%,
      rgba(13,6,30,0.97) 28%,
      rgba(24,11,52,0.92) 62%,
      rgba(38,16,78,0.74) 100%);
  box-shadow: 0 28px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}

.nav-mobile-links {
  padding: 16px 14px 22px;
}

.nav-mobile-links li {
  border-bottom: none;            /* via le righe divisorie nette */
  margin: 6px 0;
}

.nav-mobile-links a {
  position: relative;
  padding: 17px 20px;
  border-radius: var(--r-md);
  font-size: 1.25rem;
  letter-spacing: 4px;
  background: linear-gradient(135deg, rgba(122,69,196,0.10), rgba(122,69,196,0.02));
  border: 1px solid rgba(192,140,242,0.12);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, border-color .22s, color .22s, padding-left .22s;
}

/* Barra oro a sinistra che cresce al tocco */
.nav-mobile-links a::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 999px;
  background: var(--grad-gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.nav-mobile-links a:hover,
.nav-mobile-links a:active {
  color: var(--gold-light);
  background: linear-gradient(135deg, rgba(239,176,42,0.14), rgba(122,69,196,0.10));
  border-color: rgba(239,176,42,0.40);
  padding-left: 26px;
  transform: translateX(2px);
}
.nav-mobile-links a:hover::before,
.nav-mobile-links a:active::before { transform: scaleY(1); }

.nm-icon {
  opacity: 1;
  font-size: 1.2rem;
  filter: drop-shadow(0 0 8px rgba(239,176,42,0.25));
}

/* Hamburger un filo più raffinato */
.nav-burger {
  border-radius: 15px;
  border-color: rgba(192,140,242,0.45);
}
.nav-burger:hover {
  box-shadow: 0 0 20px rgba(122,69,196,0.45);
}

/* ─────────────────────────────────────────────
   7. NEWS CARD — angoli arrotondati, riflesso vetroso, CTA a pillola
   ───────────────────────────────────────────── */
.news-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(192,140,242,0.16);
  box-shadow: var(--shadow-soft);
}
.news-card:hover {
  transform: translateY(-10px) scale(1.012);
  border-color: rgba(239,176,42,0.40);
  box-shadow:
    0 26px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(239,176,42,0.10),
    0 0 50px rgba(122,69,196,0.30);
}
/* Sottile riflesso che scorre sull'immagine all'hover */
.news-card-img { border-radius: 0; }
.news-card-media { position: relative; overflow: hidden; }
.news-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .8s ease;
  pointer-events: none;
}
.news-card:hover .news-card-media::after { transform: translateX(120%); }

.news-card-title {
  letter-spacing: .3px;
}

.read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2.5px;
  color: var(--gold);
  padding: 8px 16px;
  border: 1px solid rgba(239,176,42,0.30);
  border-radius: 999px;
  background: rgba(239,176,42,0.06);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.news-card:hover .read-more-link {
  background: var(--grad-gold);
  color: var(--black);
  border-color: transparent;
  box-shadow: var(--glow-gold);
  transform: translateX(4px);
}

/* ─────────────────────────────────────────────
   8. APERTURA POST — ingresso animato (scala + dissolvenza)
   Il modal prima compariva di colpo; ora "respira".
   ───────────────────────────────────────────── */
.post-modal-overlay {
  background: rgba(8,3,18,0.82);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.post-modal-overlay.active { animation: pm-overlay-in .28s ease both; }

.post-modal {
  border-radius: var(--r-lg);
  border: 1px solid rgba(192,140,242,0.26);
  box-shadow: var(--shadow-deep), 0 0 0 1px rgba(239,176,42,0.06);
}
.post-modal-overlay.active .post-modal {
  animation: pm-modal-in .42s cubic-bezier(.16,1,.3,1) both;
}

@keyframes pm-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pm-modal-in {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.post-modal-title {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}

/* Divisore decorativo già inserito dal JS (.pm-divider) */
.pm-divider {
  height: 2px;
  width: 64px;
  border-radius: 999px;
  background: var(--grad-gold);
  margin: 2px 0 22px;
  opacity: .9;
}

/* Tag / contatore media nel modal */
.pm-tag, .pm-media-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(192,140,242,0.10);
  border: 1px solid rgba(192,140,242,0.22);
  color: var(--purple-light);
}

/* Frecce media più "premium" */
.pm-nav:hover {
  background: rgba(239,176,42,0.18);
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}

/* ─────────────────────────────────────────────
   9. FORM — focus con anello luminoso
   ───────────────────────────────────────────── */
.newsletter-input:focus,
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(239,176,42,0.16), var(--glow-purple);
  outline: none;
}

.newsletter-btn,
.form-submit {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.newsletter-btn:hover,
.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-gold);
}

.newsletter-box {
  border-radius: var(--r-lg);
}

.perk-icon {
  filter: drop-shadow(0 0 10px rgba(239,176,42,0.30));
}

/* ─────────────────────────────────────────────
   10. FOOTER — social tondi più curati
   ───────────────────────────────────────────── */
.social-btn {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .25s;
}
.social-btn:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}

/* ─────────────────────────────────────────────
   11. RISPETTO PER CHI PREFERISCE MENO MOVIMENTO
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .post-modal-overlay.active,
  .post-modal-overlay.active .post-modal,
  .news-card,
  .btn-gold,
  .btn-outline {
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────
   12. NAVBAR AUTO-HIDE SU SCROLL (mobile)
   Stile della classe aggiunta dal JS in app.js.
   ───────────────────────────────────────────── */
#main-nav {
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
#main-nav.nav-hidden {
  transform: translateY(-100%);
}
/* Il piccolo "topper" nero della safe-area iPhone segue la navbar */
@media (max-width: 768px) {
  #main-nav.nav-hidden::before {
    transform: translateY(-100%);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  }
}

/* ─────────────────────────────────────────────
   13. CARD CONCERTO — hover coerente col resto
   ───────────────────────────────────────────── */
.event-card {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239,176,42,0.34);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45), 0 0 34px rgba(122,69,196,0.22);
}
.event-day {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
}
.event-time-value {
  color: var(--gold-light);
}

/* ─────────────────────────────────────────────
   12. BARRA CHE SI NASCONDE SCROLLANDO
   La JS aggiunge/toglie .nav-hidden in base alla direzione.
   ───────────────────────────────────────────── */
nav#main-nav {
  transition:
    transform .38s cubic-bezier(.4, 0, .2, 1),
    background .3s ease;
  will-change: transform;
}
nav#main-nav.nav-hidden {
  transform: translateY(-100%);
  box-shadow: none;
}
/* La sfumatura sotto la barra sparisce insieme alla barra */
nav#main-nav.nav-hidden::after { opacity: 0; transition: opacity .25s; }

/* ─────────────────────────────────────────────
   13. APERTURA POST — sfondo sfocato per foto non-16:9 + più profondità
   La JS aggiunge .pm-media-backdrop con la foto stessa; qui la sfochiamo
   per riempire le fasce vuote ed eliminare i bordi neri piatti.
   ───────────────────────────────────────────── */
#pm-img-wrap {
  background: #0a0612;
  box-shadow: inset 0 0 0 1px rgba(192,140,242,.10), 0 18px 50px rgba(0,0,0,.5);
}
/* La foto vera sta sopra ed è trasparente, così ai lati si vede il blur */
#pm-img-wrap img,
#pm-img-wrap video,
.post-modal-media-main {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
/* Strato sfocato = stessa foto, ingrandita e ammorbidita */
.pm-media-backdrop {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(40px) saturate(140%) brightness(.5);
  transform: scale(1.15);
  pointer-events: none;
}
.pm-media-backdrop-gradient {
  filter: none;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(122,69,196,.50), transparent 60%),
    radial-gradient(ellipse at 82% 82%, rgba(210,75,176,.34), transparent 60%),
    linear-gradient(160deg, #160a2e, #0c0617);
}
/* Vignetta + leggera fascia inferiore: tocco cinematografico */
#pm-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 70px rgba(0,0,0,.50);
  background: linear-gradient(to top, rgba(8,3,18,.42) 0%, transparent 22%);
}
/* Header del post: meno piatto, con velo viola e filo dorato sotto */
.post-modal-header {
  position: relative;
  background:
    radial-gradient(ellipse 70% 160% at 0% 0%, rgba(122,69,196,.22), transparent 70%),
    linear-gradient(180deg, rgba(20,10,38,.55), rgba(0,0,0,.10));
}
.post-modal-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--grad-line);
  opacity: .6;
}

/* ─────────────────────────────────────────────
   14. FIX INGAGGI — niente più taglio + colonne bilanciate
   ───────────────────────────────────────────── */
#ingaggi { overflow: visible; }           /* lo scroll orizzontale è già bloccato sul body */
@media (min-width: 769px) {
  .ingaggi-layout { grid-template-columns: 1fr 1.35fr; gap: 56px; align-items: stretch; }
}
.ingaggi-form {
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ─────────────────────────────────────────────
   15. EXTRA — barra di avanzamento, "torna su", luccichio titoli
   (gli elementi #gs-progress e #gs-top sono creati dal JS in app.js)
   ───────────────────────────────────────────── */

/* Barra di avanzamento scroll, in cima */
#gs-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 10040;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 12px rgba(239,176,42,.6);
  transition: width .12s linear;
  pointer-events: none;
}

/* Pulsante "torna su" */
#gs-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 50px; height: 50px;
  z-index: 10040;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(20,10,38,.92), rgba(10,5,22,.92));
  border: 1px solid rgba(239,176,42,.40);
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .3s, transform .3s, box-shadow .25s, background .25s;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#gs-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#gs-top:hover {
  background: var(--grad-gold);
  color: var(--black);
  border-color: transparent;
  box-shadow: var(--glow-gold);
}
#gs-top svg { width: 22px; height: 22px; }

/* Leggero luccichio che scorre sui titoli dorati */
.section-title {
  background-size: 100% 100%, 220% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .section-title {
    background-image:
      linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 130%),
      linear-gradient(110deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
    -webkit-background-clip: text;
    background-clip: text;
    animation: gs-title-sheen 6s ease-in-out infinite;
  }
}
@keyframes gs-title-sheen {
  0%, 70%, 100% { background-position: 0 0, 220% 0; }
  85%           { background-position: 0 0, -20% 0; }
}

/* ─────────────────────────────────────────────
   16. NASCONDE LA BARRA DI SCORRIMENTO DEL BROWSER
   L'indicatore di avanzamento è ora la barra dorata in alto (#gs-progress).
   Lo scroll resta pienamente funzionante: rotellina, trackpad, frecce,
   swipe. I riquadri interni con scorrimento proprio (es. apertura post)
   mantengono la loro barra, così sai sempre che c'è altro da leggere.
   ───────────────────────────────────────────── */
html {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* vecchio Edge/IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;               /* Chrome, Safari, Edge */
}

/* ─────────────────────────────────────────────
   17. RIVELAZIONE ALLO SCROLL
   La classe .gs-reveal è aggiunta SOLO dal JS: senza JS tutto
   resta visibile. .gs-in = elemento entrato nello schermo.
   ───────────────────────────────────────────── */
.gs-reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  filter: saturate(.7);
}
.gs-reveal.gs-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .7s ease;
}
/* leggera cascata: la 2ª e 3ª card di una riga arrivano un filo dopo */
.news-grid .gs-reveal.gs-in:nth-child(3n+2),
.forum-posts .gs-reveal.gs-in:nth-child(3n+2) { transition-delay: .08s; }
.news-grid .gs-reveal.gs-in:nth-child(3n),
.forum-posts .gs-reveal.gs-in:nth-child(3n)   { transition-delay: .16s; }

/* ─────────────────────────────────────────────
   18. POST APERTO — tipografia e dettagli da rivista
   ───────────────────────────────────────────── */
.post-modal-text {
  font-size: 1.02rem;
  line-height: 1.95;
  color: #e6ddf6;
  letter-spacing: .15px;
}
/* Data e tag su una riga elegante con filo ai lati */
.post-modal-date {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  color: var(--purple-light);
}
.post-modal-date::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(192,140,242,.35), transparent);
}
/* I puntini del carosello: oro acceso su quello attivo */
.pm-dots button {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.35);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.pm-dots button.active {
  width: 22px;
  background: var(--grad-gold);
  box-shadow: 0 0 10px rgba(239,176,42,.6);
}
/* Il divisore sotto al titolo "cresce" all'apertura */
.post-modal-overlay.active .pm-divider {
  animation: pm-divider-grow .6s .15s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pm-divider-grow {
  from { width: 0; opacity: 0; }
  to   { width: 64px; opacity: .9; }
}
/* Chiusura: ✕ che ruota leggermente al passaggio */
.post-modal-close { transition: transform .25s, background .25s, color .25s, border-color .25s; }
.post-modal-close:hover { transform: rotate(90deg) scale(1.06); }

/* ─────────────────────────────────────────────
   19. FORUM / ARCHIVIO — hero, filtri, ricerca
   ───────────────────────────────────────────── */
/* Logo dell'archivio: respiro luminoso lento */
.forum-logo {
  filter: drop-shadow(0 0 26px rgba(239,176,42,.35));
}
@media (prefers-reduced-motion: no-preference) {
  .forum-logo { animation: gs-logo-breathe 5.5s ease-in-out infinite; }
}
@keyframes gs-logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(239,176,42,.25)); transform: translateY(0); }
  50%      { filter: drop-shadow(0 0 34px rgba(239,176,42,.50)); transform: translateY(-4px); }
}
/* Chip dei filtri: pillole vetrose, oro quando attive */
.forum-chip {
  border-radius: 999px !important;
  border: 1px solid rgba(192,140,242,.25) !important;
  background: rgba(122,69,196,.08) !important;
  backdrop-filter: blur(3px);
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
}
.forum-chip:hover {
  border-color: rgba(239,176,42,.45) !important;
  transform: translateY(-2px);
}
.forum-chip.active {
  background: var(--grad-gold) !important;
  color: var(--black) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(239,176,42,.35) !important;
  font-weight: 600;
}
/* Ricerca: anello dorato al focus */
.forum-search {
  border-radius: 999px !important;
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
.forum-search:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(239,176,42,.15), 0 0 24px rgba(122,69,196,.25) !important;
}
/* Contatore risultati come piccola gemma */
.forum-counter {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  color: var(--gold);
}
/* CTA in fondo alla card archivio: scivola con freccia */
.forum-post-footer {
  transition: letter-spacing .25s, color .25s;
}
.forum-post:hover .forum-post-footer {
  color: var(--gold-light) !important;
  letter-spacing: 3px;
}

/* ─────────────────────────────────────────────
   20. DETTAGLI DI LUSSO DIFFUSI
   ───────────────────────────────────────────── */
/* Tag delle card (FOTO/LIVE/STORIA…): pillole con bordo luminoso */
.news-tag, .forum-post-tag {
  border-radius: 999px !important;
  border: 1px solid rgba(239,176,42,.30) !important;
  background: linear-gradient(135deg, rgba(239,176,42,.12), rgba(122,69,196,.10)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
/* Logo hero: respiro morbido come l'archivio */
@media (prefers-reduced-motion: no-preference) {
  .hero-serval-svg { animation: gs-logo-breathe 6.5s ease-in-out infinite; }
}
/* Link del footer: scivolano con puntino dorato */
.footer-col a { transition: color .22s, padding-left .22s; position: relative; }
.footer-col a:hover { color: var(--gold-light); padding-left: 12px; }
.footer-col a:hover::before {
  content: '•';
  position: absolute; left: 0;
  color: var(--gold);
}
/* Badge "PROSSIMO CONCERTO": pulsazione discreta */
@media (prefers-reduced-motion: no-preference) {
  .event-next-badge { animation: gs-badge-pulse 2.6s ease-in-out infinite; }
}
@keyframes gs-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,176,42,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(239,176,42,0); }
}

/* ─────────────────────────────────────────────
   21. BARRA FUSA CON L'HERO
   In cima alla pagina la navbar è trasparente e si fonde con la
   galassia; appena scorri torna "solida" con una dissolvenza morbida.
   (.nav-at-top dal JS — lo sfondo vive su .nav-bg, vedi nav.css:
   i gradienti non sono animabili, l'opacity sì.)
   ───────────────────────────────────────────── */
nav#main-nav.nav-at-top .nav-bg {
  opacity: 0;
}
nav#main-nav.nav-at-top {
  border-bottom-color: transparent;
  box-shadow: none;
}
nav#main-nav.nav-at-top::after { opacity: 0; }
nav#main-nav.nav-at-top .nav-logo {
  text-shadow: 0 0 30px rgba(239,176,42,.65), 0 2px 14px rgba(0,0,0,.6);
}
nav#main-nav.nav-at-top .nav-links a { text-shadow: 0 2px 10px rgba(0,0,0,.65); }
nav#main-nav { transition: transform .38s cubic-bezier(.4,0,.2,1), box-shadow .5s ease, border-color .5s ease; }

/* ─────────────────────────────────────────────
   22. GALASSIA VIVA — stelle cadenti e note musicali
   (elementi creati dal JS dentro #galaxy)
   ───────────────────────────────────────────── */

/* Livello note: copre TUTTA la pagina e scorre con essa */
#gs-notes-layer {
  position: absolute;
  left: 0;
  width: 100%;
  /* top e height sono impostati dal JS: dalla fine dell'header
     all'inizio del footer (fallback: tutta la pagina) */
  top: 0; height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.gs-note {
  position: absolute;
  font-size: 1.15rem;
  color: rgba(239,176,42,.55);
  text-shadow: 0 0 14px rgba(239,176,42,.6), 0 0 30px rgba(122,69,196,.55);
  animation: gs-note-float 12s ease-in-out infinite;
  will-change: transform, opacity;
}
.gs-note2 { font-size: 1.5rem;  color: rgba(192,140,242,.50); animation-duration: 15s; }
.gs-note3 { font-size: .95rem;  color: rgba(210,75,176,.46);  animation-duration: 18s; }
.gs-note4 { font-size: 1.3rem;  color: rgba(255,212,94,.48);  animation-duration: 14s; }
/* Fluttuazione sul posto: la nota resta nel suo punto della pagina
   e ondeggia dolcemente, come sospesa nello spazio */
@keyframes gs-note-float {
  0%, 100% { transform: translateY(0) rotate(-6deg);   opacity: .3; }
  25%      { transform: translateY(-26px) rotate(3deg); opacity: 1; }
  50%      { transform: translateY(-10px) rotate(-2deg); opacity: .65; }
  75%      { transform: translateY(-32px) rotate(6deg);  opacity: .95; }
}

/* ─────────────────────────────────────────────
   23. CONTO ALLA ROVESCIA AL PROSSIMO CONCERTO
   (box creato dal JS sotto i bottoni dell'hero; appare solo se
    esiste un evento futuro. Il bottone dorato si chiama "Lista
    Concerti", così le parole non si ripetono.)
   ───────────────────────────────────────────── */
#gs-countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 16px 26px;
  border-radius: 20px;
  text-decoration: none;
  background: linear-gradient(160deg, rgba(20,10,40,.55), rgba(10,5,22,.65));
  border: 1px solid rgba(239,176,42,.28);
  box-shadow: 0 14px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
#gs-countdown:hover {
  transform: translateY(-3px);
  border-color: rgba(239,176,42,.55);
  box-shadow: 0 20px 54px rgba(0,0,0,.5), var(--glow-gold);
}
.gs-cd-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .8rem;
  letter-spacing: 4px;
  color: var(--purple-light);
}
.gs-cd-cells { display: flex; gap: 12px; }
.gs-cd-cells b {
  display: flex; flex-direction: column; align-items: center;
  min-width: 56px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(122,69,196,.14);
  border: 1px solid rgba(192,140,242,.22);
}
.gs-cd-cells i {
  font-style: normal;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(239,176,42,.35));
}
.gs-cd-cells u {
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: .58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}
.gs-cd-venue {
  font-family: 'Outfit', sans-serif;
  font-size: .74rem;
  letter-spacing: 1px;
  color: var(--gold-light);
}
@media (max-width: 480px) {
  .gs-cd-cells b { min-width: 46px; padding: 7px 6px; }
  .gs-cd-cells i { font-size: 1.4rem; }
  #gs-countdown { padding: 14px 16px; }
}

/* ─────────────────────────────────────────────
   24. POST APERTO — Condividi e Zoom
   ───────────────────────────────────────────── */
#gs-share {
  width: 38px; height: 38px;
  margin-right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(192,140,242,.35);
  background: rgba(122,69,196,.12);
  color: var(--purple-light);
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
#gs-share svg { width: 17px; height: 17px; }
#gs-share:hover {
  background: var(--grad-gold);
  color: var(--black);
  border-color: transparent;
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}
#gs-share.copied {
  background: linear-gradient(135deg, #2f9e57, #45c971);
  color: #fff; border-color: transparent;
}
/* (zoom semplice sostituito dal motore pan-zoom — vedi sezione 29) */
#pm-img-wrap { overflow: hidden; }

/* ─────────────────────────────────────────────
   25. CONTRASTI MOZZAFIATO — un'aura diversa per sezione
   Lavaggi di colore che cambiano l'atmosfera mentre scorri:
   Bacheca = magenta/viola · Concerti = ciano elettrico ·
   Newsletter = oro caldo · Ingaggi = tramonto.
   (::after per non toccare i ::before già esistenti)
   ───────────────────────────────────────────── */
#news, #calendario, #newsletter, #ingaggi { position: relative; }
#news::after, #calendario::after, #newsletter::after, #ingaggi::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  /* dissolvenza ai bordi alto/basso: i colori sfumano nel buio
     invece di interrompersi di netto → niente linee tra sezioni */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
#news::after {
  background:
    radial-gradient(ellipse 55% 60% at 0% 22%,  rgba(210,75,176,.16), transparent 65%),
    radial-gradient(ellipse 45% 55% at 100% 80%, rgba(122,69,196,.20), transparent 62%);
}
#calendario::after {
  background:
    radial-gradient(ellipse 50% 65% at 100% 12%, rgba(74,168,224,.17), transparent 64%),
    radial-gradient(ellipse 48% 55% at 0% 92%,   rgba(122,69,196,.18), transparent 62%);
}
#newsletter::after {
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%,   rgba(239,176,42,.10), transparent 65%),
    radial-gradient(ellipse 45% 55% at 88% 100%, rgba(210,75,176,.12), transparent 60%);
}
#ingaggi::after {
  background:
    radial-gradient(ellipse 55% 65% at 0% 6%,    rgba(255,140,66,.10), transparent 62%),
    radial-gradient(ellipse 50% 60% at 100% 94%, rgba(210,75,176,.14), transparent 62%);
}
/* il contenuto resta sopra ai lavaggi */
#news .container, #calendario .container, #newsletter .container, #ingaggi .container { position: relative; z-index: 5; }

/* ─────────────────────────────────────────────
   26. FIX TITOLI CORSIVI TAGLIATI
   Con l'oro sfumato il testo prende colore solo dentro il riquadro
   dell'elemento: gli svolazzi di Dancing Script ne uscivano e
   sparivano. Diamo respiro al riquadro: ora il ricciolo è incluso.
   ───────────────────────────────────────────── */
.section-title,
.post-modal-title {
  line-height: 1.32;
  padding: 0.10em 0.30em 0.14em;
  overflow: visible;
}
/* il padding orizzontale è simmetrico: il centrato non si sposta */

/* ─────────────────────────────────────────────
   27. NOTE 2.0 — più numerose e che SCORRONO nel sito
   Ancorate alla pagina (non alla visuale): ogni nota parte dal suo
   punto del sito e sale lentamente di ~300px, poi rinasce lì.
   Il livello va dalla fine dell'header all'inizio del footer
   (dimensionato dal JS) e resta dietro al contenuto.
   ───────────────────────────────────────────── */
@keyframes gs-note-drift {
  0%   { transform: translateY(0) rotate(-7deg);      opacity: 0; }
  10%  { opacity: .9; }
  55%  { transform: translateY(-170px) rotate(4deg);  opacity: .6; }
  90%  { opacity: .15; }
  100% { transform: translateY(-300px) rotate(10deg); opacity: 0; }
}
#gs-notes-layer .gs-note  { animation-name: gs-note-drift; animation-timing-function: linear; }
#gs-notes-layer .gs-note  { animation-duration: 14s; }
#gs-notes-layer .gs-note2 { animation-duration: 18s; }
#gs-notes-layer .gs-note3 { animation-duration: 22s; }
#gs-notes-layer .gs-note4 { animation-duration: 16s; }

/* ─────────────────────────────────────────────
   28. SPAZI SU TELEFONO — niente sovrapposizioni
   ───────────────────────────────────────────── */

/* L'hero col countdown: su schermi bassi l'indicatore "scroll"
   si nasconde, così non si accavalla al box del conto alla rovescia */
#hero:has(#gs-countdown) .hero-scroll { display: none; }
@media (max-width: 768px) {
  #hero .hero-scroll { display: none; }       /* su telefono è ridondante */
  .hero-content { padding-top: 84px; padding-bottom: 36px; }
  #gs-countdown { margin-top: 24px; max-width: calc(100vw - 36px); }
  .gs-cd-cells { flex-wrap: wrap; justify-content: center; }
}
/* Telefoni piccoli o orizzontali: countdown extra-compatto */
@media (max-width: 380px), (max-height: 620px) {
  .gs-cd-cells { gap: 8px; }
  .gs-cd-cells b { min-width: 42px; padding: 6px 5px; }
  .gs-cd-cells i { font-size: 1.25rem; }
  .gs-cd-label { font-size: .68rem; letter-spacing: 3px; }
}

/* Intestazione del post: il titolo lungo va a capo senza
   schiacciare i pulsanti condividi/chiudi */
.post-modal-header { gap: 10px; }
.post-modal-title { min-width: 0; overflow-wrap: anywhere; }
#gs-share, .post-modal-close { flex-shrink: 0; }
@media (max-width: 600px) {
  #gs-share { width: 34px; height: 34px; margin-right: 6px; }
  #gs-share svg { width: 15px; height: 15px; }
  .post-modal-title { font-size: 1.35rem; line-height: 1.25; }
}

/* Note musicali: su schermi stretti meno affollamento
   (ne restano ~12 su 19, le altre riposano) */
@media (max-width: 600px) {
  #gs-notes-layer .gs-note:nth-child(3n) { display: none; }
  .gs-note { font-size: 1rem; }
  .gs-note2 { font-size: 1.25rem; }
}

/* Torna-su: più in basso e piccolo su telefono, mai sopra i contenuti */
@media (max-width: 600px) {
  #gs-top { width: 44px; height: 44px; right: 14px; bottom: 14px; }
  #gs-top svg { width: 19px; height: 19px; }
}

/* Titoli di sezione su mobile: il padding anti-taglio non deve
   creare scorrimento orizzontale */
@media (max-width: 480px) {
  .section-title { padding-left: .15em; padding-right: .15em; }
}

/* Form e bottoni del sito: tocchi comodi e niente zoom iOS */
@media (max-width: 768px) {
  .newsletter-input, .form-field input, .form-field select, .form-field textarea,
  .unsubscribe-input, .forum-search { font-size: 16px !important; min-height: 46px; }
  .newsletter-btn, .form-submit, .btn-gold, .btn-outline { min-height: 46px; }
}

/* ─────────────────────────────────────────────
   29. PAN-ZOOM FOTO — stati visivi del motore
   ───────────────────────────────────────────── */
#pm-img-wrap img.post-modal-media-main {
  cursor: zoom-in;
  touch-action: pan-y;            /* da non zoomato: scroll e swipe liberi */
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
#pm-img-wrap img.post-modal-media-main.gs-zoom-anim {
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
#pm-img-wrap img.post-modal-media-main.gs-zoomed2 {
  cursor: grab;
  touch-action: none;             /* da zoomato: il dito muove la foto */
}
#pm-img-wrap img.post-modal-media-main.gs-panning { cursor: grabbing; }
/* suggerimento discreto: lente nell'angolo finché non zoomi */
#pm-img-wrap::before {
  content: '🔍';
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 3;
  font-size: .95rem;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(10,5,22,.65);
  border: 1px solid rgba(192,140,242,.30);
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: .85;
  transition: opacity .3s;
}
#pm-img-wrap:has(.gs-zoomed2)::before { opacity: 0; }
#pm-img-wrap:has(video)::before,
#pm-img-wrap:has(audio)::before,
#pm-img-wrap.empty::before { content: none; }

/* ─────────────────────────────────────────────
   30. AVVISI NEWSLETTER & CO. — messaggi da palco
   (successo verde-oro, errore rosso caldo, ingresso animato)
   ───────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 16px;
  font-size: .92rem;
  line-height: 1.5;
  backdrop-filter: blur(6px);
  animation: gs-alert-in .45s cubic-bezier(.16,1,.3,1) both;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
@keyframes gs-alert-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.alert-success {
  background: linear-gradient(135deg, rgba(47,158,87,.16), rgba(239,176,42,.10)) !important;
  border: 1px solid rgba(69,201,113,.45) !important;
  color: #7fe3a4 !important;
  text-shadow: 0 0 14px rgba(69,201,113,.35);
}
.alert-error {
  background: linear-gradient(135deg, rgba(224,80,80,.16), rgba(210,75,176,.10)) !important;
  border: 1px solid rgba(224,80,80,.45) !important;
  color: #ff9d9d !important;
  text-shadow: 0 0 14px rgba(224,80,80,.30);
}

/* ─────────────────────────────────────────────
   31. TOAST — l'avviso che scivola (condivisione & co.)
   ───────────────────────────────────────────── */
#toast {
  right: 24px; bottom: 24px;
  border: 1px solid rgba(239,176,42,.45);
  border-left: 3px solid var(--gold);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(122,69,196,.30), rgba(20,10,38,.60)),
    linear-gradient(180deg, rgba(20,10,38,.95), rgba(10,5,22,.95));
  box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 28px rgba(239,176,42,.18);
  backdrop-filter: blur(8px);
}
#toast.show { transform: translateY(0) scale(1); }
@media (max-width: 600px) {
  #toast { left: 16px; right: 16px; bottom: 16px; text-align: center; }
}

/* ─────────────────────────────────────────────
   32. MENU A TENDINA MODERNO
   Via il blocco dorato squadrato: stesso vetro degli altri campi,
   freccina sottile dorata che si gira quando il menu è aperto.
   ───────────────────────────────────────────── */
#ingaggi .form-field select,
.ingaggi-form .form-field select,
.form-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 46px !important;
  border-radius: 14px !important;
  background-color: rgba(20,10,40,0.72) !important;
  /* solo una freccina elegante, niente colonne */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23efb02a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-position: right 18px center !important;
  background-size: 14px 9px !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(184,126,232,0.18) !important;
  transition: border-color .25s, box-shadow .25s, background-color .25s !important;
}
#ingaggi .form-field select:hover,
.ingaggi-form .form-field select:hover,
.form-field select:hover {
  background-color: rgba(30,16,56,0.85) !important;
  border-color: rgba(239,176,42,0.40) !important;
}
#ingaggi .form-field select:focus,
.ingaggi-form .form-field select:focus,
.form-field select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(239,176,42,0.16), var(--glow-purple) !important;
}
/* le voci del menu aperto restano leggibili sul viola scuro */
.form-field select option { background-color: #201140; color: var(--text); }

/* ─────────────────────────────────────────────
   33. TITOLI DEI POST: EMOJI VERE
   L'oro sfumato "maschera" anche le emoji rendendole sagome dorate.
   Sul titolo del post (testo libero, spesso con emoji) usiamo oro
   pieno + bagliore: le emoji tornano coi loro colori. I titoli di
   sezione (testo fisso senza emoji) restano sfumati.
   ───────────────────────────────────────────── */
.post-modal-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--gold) !important;
  color: var(--gold) !important;
  text-shadow: 0 0 24px rgba(239,176,42,.35), 0 2px 10px rgba(0,0,0,.45);
}

/* ─────────────────────────────────────────────
   34. CONDIVIDI CONCERTO — riga nel pannello che sale
   ───────────────────────────────────────────── */
.edr-share-row {
  margin-top: 10px;
  display: flex;
}
.edr-btn-share {
  width: 100%;
  flex: 1;
  border: 1px solid rgba(192,140,242,.40);
  background: linear-gradient(135deg, rgba(122,69,196,.20), rgba(122,69,196,.08));
  color: var(--purple-light);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.edr-btn-share svg {
  width: 17px; height: 17px;
  fill: none !important;          /* icona a tratto, non piena */
}
.edr-btn-share:hover {
  background: var(--grad-gold);
  color: var(--black);
  border-color: transparent;
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}
.edr-btn-share.copied {
  background: linear-gradient(135deg, #2f9e57, #45c971);
  color: #fff;
  border-color: transparent;
}
/* Telefono: tocco generoso e mai sotto la "barra" di sistema */
@media (max-width: 600px) {
  .edr-btn-share { height: 50px; font-size: .95rem; }
  .edr-share-row { margin-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ─────────────────────────────────────────────
   35. FOOTER: via la scritta gigante in filigrana
   ───────────────────────────────────────────── */
footer::after { content: none !important; }

/* ─────────────────────────────────────────────
   36. CONDIVIDI SULLA CARD CONCERTO (PC)
   Stesso linguaggio di "Apri Maps" e "Promemoria".
   ───────────────────────────────────────────── */
.event-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(192,140,242,.40);
  background: rgba(122,69,196,.10);
  color: var(--purple-light);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.event-share-btn svg { width: 15px; height: 15px; fill: none !important; }
.event-share-btn:hover {
  background: var(--grad-gold);
  color: var(--black);
  border-color: transparent;
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}