/* === LAYOUT (header, footer, griglie, containers) — auto-partition draft === */

/* =========================
   Reset minimi / base
   ========================= */
*{ box-sizing: border-box; }

/* === FOOTER: centrato davvero, 3 link === */
.site-footer{
  background:#0a0a0a;
  border-top:1px solid rgba(255,255,255,.12);
  color:#fff;
  text-align:center;
}

/* forza wrapper centrato e layout a griglia */
.site-footer .footer-container{
  width: min(1100px, 92vw) !important;
  margin: 0 auto !important;
  padding: 28px 0 36px !important;
  display: grid !important;
  grid-auto-rows: min-content;
  gap: 18px;
  justify-items: center;   /* centra i figli */
}

/* qualunque figlio del container si posiziona al centro */
.site-footer .footer-container > *{
  justify-self: center !important;
}

/* social: sempre centrati, nessuno “space-between” */
.footer-social{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
}
.footer-social a{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:#111; border:1px solid rgba(255,255,255,.08);
}
.footer-social img{ width:22px; height:22px; object-fit:contain; filter:grayscale(1) invert(1); }

/* solo Privacy / GTC / Contatti, centrati */
.footer-links{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  padding-left: 0 !important;
}
.footer-links a{
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:2px;
}

/* legal */
.footer-legal{ opacity:.85; font-size:12px }


/* =========================
   Layout generale
   ========================= */
.container{ width: min(1080px, 92%); margin-inline:auto; }

.section{ padding-block: var(--space-4); }

/* =========================
   SFONDO PRINCIPALE (foto fissa)
   - Altezza stabile con 100dvh; fallback 100vh
   - NESSUN blocco duplicato più sotto
   ========================= */

@supports not (height: 100dvh){
  .bg-hero{ height: 100vh; }
}

.rotator-dots{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:8px; z-index:5; }

.rotator-dots button{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.85); background:transparent; padding:0; cursor:pointer; }

.rotator-dots button[aria-current="true"]{ background: rgba(255,255,255,.95); }

/* =========================
   Form contatti (home)
   ========================= */
.form-grid{ display:grid; gap:var(--space-2); max-width:760px; margin:0 auto; grid-template-columns:1fr; }

@media (min-width:720px){ .form-grid{ grid-template-columns:1fr 1fr; } .field--full{ grid-column:1/-1; } }

.field{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }

label{ font-size:.9rem; margin-bottom:6px; color:var(--accent-a); letter-spacing:.04em; }

input, textarea{ width:100%; padding:12px 14px; border:none; border-radius:10px; background:#111; color:#fff; }

textarea{ resize:vertical; min-height:140px; }

.form-fallback{ margin-top:8px; color:var(--muted); font-size:.95rem; }

.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* =========================
   Sponsor (home)
   ========================= */
.sponsor-strip{ position:relative; z-index:2; background:#1e1e1e; padding-block: var(--space-4); }

.sponsor-grid{ list-style:none; padding:0; margin:0; display:grid; gap:var(--space-3); place-items:center; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }

.sponsor-grid li{ height: var(--sponsor-h); width:100%; display:flex; align-items:center; justify-content:center; padding:8px 16px; }

.sponsor-grid img{ max-height:100%; max-width:100%; object-fit:contain; opacity:.9; filter: grayscale(100%) contrast(110%); transition: .2s; }

.sponsor-grid img:hover{ opacity:1; transform: scale(1.03); filter:none; }

.panel{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: left;
}

.panel-header h2{ margin:0 0 6px; text-align:left; }

.panel-header .muted{ margin:0 0 var(--space-2); color: var(--muted); }

/* Griglia media senza vincoli d'altezza */
.media-grid{ display:grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); align-items:start; grid-auto-rows:auto; }

@media (min-width:680px){ .media-grid{ grid-template-columns: repeat(3, 1fr); } }

.mitem{ position:relative; overflow:hidden; border-radius:12px; background:#0b0b0b; border:1px solid rgba(255,255,255,.1); height:auto; }

.mitem--wide{ grid-column: span 2; }

.mitem img, .mitem video{ width:100%; height:auto; object-fit:contain; display:block; background:#000; border-radius:12px; }

/* =========================
   Lightbox (vanilla)
   ========================= */
.lb{ position:fixed; inset:0; z-index:9999; display:none; place-items:center; background: rgba(0,0,0,.85); backdrop-filter: blur(2px); }

.lb.is-open{ display:grid; }

.lb__stage{ position:relative; }

.lb__canvas{ position:relative; z-index:1; display:grid; place-items:center; max-width:92vw; max-height:92vh; }

.lb__nav, .lb__close{ z-index:2; }

.lb__stage:focus{ outline:none; }

.lb__media{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain !important; border-radius:12px; background:#000; box-shadow:0 10px 40px rgba(0,0,0,.6); }

.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); display:grid; place-items:center; cursor:pointer; user-select:none; }

.lb__nav:hover{ background:rgba(255,255,255,.22); }

.lb__nav--prev{ left:10px; }

.lb__nav--next{ right:10px; }

.lb__close{ position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); display:grid; place-items:center; cursor:pointer; }

.lb__close:hover{ background:rgba(255,255,255,.22); }

.lb__icon{ font: 900 18px/1 system-ui, sans-serif; color:#fff; }

.lb__hint{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:12px; }

.badge{ display:grid; grid-template-rows:auto auto; justify-items:center; gap:6px; padding:14px 16px; border-radius:12px; background:linear-gradient(180deg, rgba(15,15,25,.9), rgba(10,10,18,.9)); border:1px solid rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(158,163,255,.12) inset; min-width:220px; }

.badge__label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#aab; }

.badge__value{ font-size:clamp(18px,3.5vw,26px); letter-spacing:.04em; font-weight:800; }

.inset-video{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position:center; background:#000; z-index:0; }

.inset-video--desktop{ display:none; }

.inset-video--mobile { display:block; }

@media (min-width:768px){ .inset-video--desktop{ display:block; } .inset-video--mobile{ display:none; } }

/* menu ha z-index 4000 */
.bg-hero    { z-index: 0; pointer-events: none; }

/* MOBILE: rendi l'inset un po' più basso */
/* =========================
   EUTOPIIIA — TOPBAR + HAMBURGER
   ========================= */

/* Topbar container */
.euto-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.euto-topbar__row {
  max-width: min(1200px,94vw);
  margin-inline: auto;
  padding-inline: clamp(14px,2.4vw,28px);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Logo centrale */
.euto-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.euto-logo img {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Hgroup = hamburger + navs */
.euto-hgroup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;   /* forza a stare più a sinistra */
}

.euto-menu[hidden] { display: none !important; }

.euto-menu a {
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .04em;
}

.euto-menu a:hover {
  background: rgba(255,255,255,.08);
}

/* Stato attivo */
.euto-menu--desktop a[aria-current="page"],
.euto-menu a[aria-current="page"] {
  background: rgba(255,255,255,.12);
}

/* Sicurezza layering */
.bg-hero { z-index: 0; pointer-events: none; }

/* =========================================================
   PAGINA CONTATTI (scoped): stile contenuti + fix dropdown
   - NESSUN effetto extra; card “glass” pulita
   - Menu a tendina centrato sotto l’hamburger SOLO qui
   ========================================================= */
.page-contacts .euto-menu{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 4000;
  min-width: 200px;
  transform: none; /* mobile: niente shift */
}

/* Variabili locali solo per la pagina contatti */
.page-contacts{
  --c-surface: rgba(16,18,26,.70);
  --c-border:  rgba(255,255,255,.12);
  --c-ring:    rgba(122,227,255,.14);
  --c-text:    #f6f7fb;
  --c-muted:   #b9bfd1;

  --pad-outer: clamp(22px, 3.2vw, 34px);
  --gap:       clamp(14px, 2vw, 20px);

  --radius-xl: 22px;
  --radius-md: 14px;

  /* gradiente bordo “neon soft” */
  --accent-a: #7ae3ff;
  --accent-b: #c89bff;
  --accent-c: #55ffd0;
}

/* =========================================================
   CONTACTS — look bianco/nero minimal ed elegante
   ========================================================= */
.page-contacts{
  --c-surface: rgba(0,0,0,.75);
  --c-border:  rgba(255,255,255,.15);
  --c-text:    #fff;
  --c-muted:   #aaa;

  --pad-outer: clamp(22px, 3vw, 34px);
  --gap:       clamp(14px, 2vw, 20px);

  --radius-xl: 22px;
  --radius-md: 14px;
}

/* Card principale */
.page-contacts .contact-frame{
  width: min(920px, 94vw);
  margin: clamp(42px, 7vw, 88px) auto;
  padding: var(--pad-outer);
  border-radius: var(--radius-xl);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  display:grid; gap: var(--gap);
  position: relative; overflow: hidden;
}

/* Header */
.page-contacts .c-head{ text-align:center; margin-bottom: 20px; }

.page-contacts .c-head h1{
  margin:0 0 6px;
  font-family: var(--font-display, Bebas Neue, sans-serif);
  font-size: clamp(28px, 5vw, 44px);
  color: var(--c-text);
  letter-spacing: .06em;
}

.page-contacts .c-head .muted{
  margin:0; color: var(--c-muted);
}

/* Layout 2 colonne */
.page-contacts .form-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  position: relative;
}

.page-contacts .col-left{ display:grid; gap: var(--gap); padding-right:12px; }

.page-contacts .col-right{ padding-left:12px; }

@media (max-width: 900px){
  .page-contacts .form-grid-2{ grid-template-columns: 1fr; }
  .page-contacts .col-left, .page-contacts .col-right{ padding:0; }
}

/* Campi */
.page-contacts .ff{ position:relative; }

.page-contacts .ff input,
.page-contacts .ff textarea{
  width:100%; color:var(--c-text);
  background: rgba(0,0,0,.6);
  border:1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px 14px 14px;
  font: 600 15px/1.35 var(--font-body, Inter, system-ui, sans-serif);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.page-contacts .ff textarea{ min-height: 220px; resize: vertical; }

/* Label flottante */
.page-contacts .ff label{
  position:absolute; left: 12px; top: 11px; padding:0 6px;
  color: var(--c-muted);
  font: 600 13px/1 var(--font-body, Inter, system-ui, sans-serif);
  background: transparent;
  transition: all .16s ease;
  pointer-events:none;
}

.page-contacts .ff input:focus,
.page-contacts .ff textarea:focus{
  border-color: #fff;
  background: rgba(0,0,0,.8);
  box-shadow: 0 0 0 4px rgba(255,255,255,.1);
}

.page-contacts .ff input:focus + label,
.page-contacts .ff input:not(:placeholder-shown) + label,
.page-contacts .ff textarea:focus + label,
.page-contacts .ff textarea:not(:placeholder-shown) + label{
  top: -8px;
  transform: translateY(-2px) scale(.92);
  background: rgba(0,0,0,.9);
  color: #fff;
  border-radius: 4px;
}

/* Checkbox consenso */
.page-contacts .consent-row{ margin-top: 4px; text-align:left; }

.page-contacts .consent-ck{
  display:grid; grid-template-columns:22px 1fr; gap:10px; color: var(--c-muted);
}

.page-contacts .consent-ck input{ position:absolute; opacity:0; pointer-events:none; }

.page-contacts .consent-ck .ck{
  width:22px; height:22px; border-radius:6px;
  border:1px solid var(--c-border);
  background: rgba(0,0,0,.6);
  display:grid; place-items:center;
}

.page-contacts .consent-ck input:checked + .ck{
  border-color:#fff;
  background:#fff;
}

.page-contacts .consent-ck input:checked + .ck::after{
  content:""; width:11px; height:11px; border-radius:2px; background:#000;
}

/* Pulsante submit */
.page-contacts .submit-row{ display:grid; place-items:center; margin-top: 10px; }

/* Messaggio di errore inline per la checkbox */
.page-contacts .consent-error{
  display:block;
  margin-top: 4px;
  font-size: 13px;
  color: #ff7070;
  font-weight: 600;
  visibility: hidden;
}

.page-contacts .consent-error.is-visible{
  visibility: visible;
}

.page-contacts .field-error{
  display:none;
  margin-top:4px;
  font-size:13px;
  color:#ff7070;
  font-weight:600;
}

.page-contacts .field-error.is-visible{ display:block; }

.page-privacy .policy-card{
  position: relative;
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 28px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.page-privacy .policy-card .policy-block + .policy-block{
  margin-top: clamp(16px, 2.4vw, 22px);
  padding-top: clamp(12px, 1.6vw, 16px);
  border-top: 1px solid rgba(255,255,255,.08);
}

.page-privacy .policy-card h2{
  margin: 0 0 8px;
  font-size: clamp(18px, 3.2vw, 24px);
  letter-spacing: .04em;
}

.page-privacy .policy-card p{
  margin: 0 0 10px;
  color: #eaeaea;
}

.page-privacy .policy-card ul{
  margin: 6px 0 12px 1.2rem;
  padding: 0;
}

.page-privacy .policy-card li{
  margin: 4px 0;
}

.page-privacy .policy-card a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-gtc .policy-card{
  position: relative;
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 20px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 28px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.page-gtc .policy-card .policy-block + .policy-block{
  margin-top: clamp(16px, 2.4vw, 22px);
  padding-top: clamp(12px, 1.6vw, 16px);
  border-top: 1px solid rgba(255,255,255,.08);
}

.page-gtc .policy-card h2{
  margin: 0 0 8px;
  font-size: clamp(18px, 3.2vw, 24px);
  letter-spacing: .04em;
}

.page-gtc .policy-card p{
  margin: 0 0 10px;
  color: #eaeaea;
}

.page-gtc .policy-card ul{
  margin: 6px 0 12px 1.2rem;
  padding: 0;
}

.page-gtc .policy-card li{
  margin: 4px 0;
}

.page-gtc .policy-card a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===============================
   ABOUT — look elegante + micro-animazioni
   Tutto scoped sotto .page-about
   =============================== */

.page-about {
  --about-surface: rgba(0,0,0,.72);
  --about-border:  rgba(255,255,255,.14);
  --about-text:    #fff;
  --about-muted:   #bdbdbd;
  --about-radius:  20px;
  --about-gap:     clamp(14px, 2.4vw, 22px);
}

/* Hero */
.page-about .about-section { width: min(980px, 92vw); margin: 0 auto; }

.page-about .about-head { text-align:center; margin-bottom: 12px; }

.page-about .about-head h1{
  margin: 0 0 6px;
  letter-spacing: .08em;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

/* Sottolineatura animata del titolo */
.page-about .about-head h1::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.5));
  transform: translateX(-50%);
  transition: width .7s ease;
}

.page-about .about-head.in-view h1::after{ width: 66%; }

/* Card contenuto (glass) */
.page-about .about-content.card{
  position: relative;
  background: var(--about-surface);
  border: 1px solid var(--about-border);
  border-radius: var(--about-radius);
  padding: var(--about-gap);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  overflow: hidden;
}

/* Cornice luminosa super soft */
.page-about .about-content.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: conic-gradient(from 0deg, #fff, rgba(255,255,255,.35), #fff);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  opacity:.18; pointer-events:none;
}

/* Accenti angolari (quasi impercettibili) */
.page-about .about-content.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(140px 90px at 24px 24px, rgba(255,255,255,.12), transparent 70%),
    radial-gradient(140px 90px at calc(100% - 24px) calc(100% - 24px), rgba(255,255,255,.10), transparent 70%);
  mix-blend-mode: screen; opacity:.25;
}

/* Tipografia blocchi */
.page-about .about-content h2{
  margin: 0 0 8px;
  letter-spacing: .04em;
  font-size: clamp(18px, 3.2vw, 24px);
}

.page-about .about-content p{
  margin: 0 0 12px;
  color: var(--about-text);
  opacity: .92;
}

/* Reveal animati (stagger) */
.page-about .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}

.page-about .reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

.page-about .reveal[data-delay="1"]{ transition-delay: .06s; }

.page-about .reveal[data-delay="2"]{ transition-delay: .12s; }

.page-about .reveal[data-delay="3"]{ transition-delay: .18s; }

/* Micro-parallax al passaggio del mouse sulla card (subtle) */
.page-about .about-content.card:hover{
  transform: translateY(-1px);
  transition: transform .25s ease;
}

/* Link nel testo */
.page-about .about-content a{
  color:#fff; text-decoration: underline; text-underline-offset: 2px;
}

/* Riduzione animazioni per accessibilità */
@media (prefers-reduced-motion: reduce){
  .page-about .about-head h1::after{ transition: none; }
  .page-about .reveal{ transition: none; opacity: 1; transform: none; }
  .page-about .about-content.card:hover{ transform: none; }
}

/* ===== Collaborazioni – carousel tondo ===== */
.page-collab .collab-hero{
  position: relative;
  padding: clamp(32px, 8vw, 64px) 0;
  display:grid; place-items:center;
}

.page-collab .collab-hero .container{ width:min(900px, 92vw); }

.page-collab .collab-hero h1{
  text-align:center; letter-spacing:.08em; margin:0 0 14px;
}

/* wrapper carousel */
.logo-carousel{
  position:relative;
  display:grid; place-items:center;
  gap:12px;
}

/* crossfade stack */
.lc-track{
  position:relative;
  width: clamp(160px, 36vw, 240px);
  height: clamp(160px, 36vw, 240px);
  margin: 8px auto;
  list-style:none; padding:0;
  outline: none;
}

.lc-slide{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0; transform: scale(.92);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events:none;
}

.lc-slide.is-active{
  opacity:1; transform: scale(1);
  pointer-events:auto;
}

/* ===== Rotatore a 3 cerchi ===== */
.logo-rotator{
  position:relative;
  display:grid; place-items:center;
  gap:12px;
}

.lr-stage{
  display:grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: clamp(14px, 4vw, 24px);
  align-items:center;
}

.logo-dot{
  --size: clamp(140px, 24vw, 220px);
  width: var(--size); height: var(--size);
  margin:0; border-radius: 999px; overflow:hidden;
  display:grid; place-items:center;
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02) 50%, transparent 60%),
              rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  position:relative;
  isolation:isolate;
}

.logo-dot img{
  width: 70%; height: 70%; object-fit: contain; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition: transform .25s ease;
}

.logo-dot:hover img{ transform: scale(1.05) rotate(-1deg); }

/* anello “rotante” dei 3 cerchi (subtle) */
.logo-dot::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(255,255,255,.55), rgba(255,255,255,.15), rgba(255,255,255,.55));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  padding:2px; opacity:.18;
}

/* rotazione continua dei 3 anelli, tempi e direzioni diverse */
@keyframes spin { to { transform: rotate(360deg); } }

.logo-dot.ring.a::after{ animation: spin 18s linear infinite; }

.logo-dot.ring.b::after{ animation: spin 22s linear infinite reverse; }

.logo-dot.ring.c::after{ animation: spin 20s linear infinite; }

@media (prefers-reduced-motion: reduce){
  .logo-dot::after{ animation: none !important; }
}

/* frecce e toggle */
.lr-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.55);
  color:#fff; display:grid; place-items:center; cursor:pointer; z-index:2;
  transition: background .2s ease, transform .2s ease;
}

.lr-arrow:hover{ background: rgba(255,255,255,.08); transform: translateY(-50%) scale(1.03); }

.lr-arrow.prev{ left:-56px; }

.lr-arrow.next{ right:-56px; }

.lr-controls{ display:flex; justify-content:center; }

.lr-toggle{
  margin-top: 6px;
  width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.55); color:#fff; cursor:pointer;
}

/* responsive */
@media (max-width: 820px){
  .lr-arrow.prev{ left:-40px; }
  .lr-arrow.next{ right:-40px; }
}

@media (max-width: 560px){
  .lr-arrow{ display:none; }
  .lr-stage{ grid-template-columns: 1fr; gap: 16px; }
  .logo-dot{ --size: clamp(150px, 58vw, 220px); }
}

/* =========================================================
   PATCH UI — EUTOPIIIA (append-only, nessuna regola rimossa)
   ========================================================= */

/* 1) SPAZIO SOPRA "TICKETS" (desktop): l'hero resta da solo all'apertura */
.ticket-cta{
  margin-top: 20px !important; /* o quello che preferisci */
}

@media (min-width: 992px){
  .ticket-cta{
    margin-top: 40px !important; /* uguale, no più vh */
  }
}

/* 2) DIVIDER: su mobile nascondi TUTTO (qualsiasi classe/pseudo) */
@media (max-width: 820px){
  .euto-divider,
  .euto-divider::before,
  .euto-divider::after,
  .cosmic-divider,
  .cosmic-divider::before,
  .cosmic-divider::after,
  .section-sep,
  .section-sep::before,
  .section-sep::after,
  .separator,
  .separator::before,
  .separator::after,
  [class*="divider"],
  [class*="separator"]{
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* 3) DIVIDER (desktop): linea sottile, neutra, senza glow */
.euto-divider{
  width: min(1100px, 92vw) !important;
  height: 1px !important;
  margin: clamp(28px, 6vw, 56px) auto 0 !important;
  background: rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.euto-divider::before,
.euto-divider::after{ display:none !important; }

/* 1) Sfondo globale un po' più chiaro */
.bg-hero::after{
  /* riduco l'opacità dei filtri */
  background:
    radial-gradient(60% 60% at 50% 10%, rgba(0,0,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.40)) !important;
}

/* ------- sezione interna ------- */
.past-section{
  position: relative;
  z-index: 2;                  /* sopra la cerniera */
  width: min(1280px, 96vw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 0;
  background: transparent;     /* nessuno sfondo/gradiente */
  border: 0;
  box-shadow: none;
  /* stato iniziale (desktop): fade + slide */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

/* stato attivo dopo lo scroll (desktop) */
body.scrolled .past-section{
  opacity: 1;
  transform: translateY(0);
}

/* ------- MOBILE: zero trasformazioni = zero alias ------- */
@media (max-width: 820px){
  .past-section{
    /* niente translate su iOS per evitare sub-pixel */
    transform: none !important;
    /* solo fade: non genera linee */
    opacity: 0;
    transition: opacity .5s ease;
  }
  body.scrolled .past-section{
    opacity: 1;
  }

  /* ulteriore chiusura del bordo: copri 2px sopra la sezione */
  .past-section::before{
    content:"";
    position:absolute;
    left:0; right:0; top:-2px;
    height:2px;
    background:#000;
    pointer-events:none;
    z-index: 3;
  }
}

/* ==== HEADER: hamburger e menu ancora più a sinistra ==== */
.euto-topbar__row{
  justify-content: center;      /* lasciamo il logo centrato */
  padding-left: 0;
}

.euto-hgroup{
  position: absolute;
  left: 8px;                    /* riduci a 0px se lo vuoi attaccato al bordo */
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  gap: 10px;
}

/* dropdown mobile allineato al bottone, niente shift */
.euto-menu{
  left: 0;
  right: auto;
  margin-left: 0;
}

/* toolbar desktop: inline accanto all'hamburger su click */
@media (min-width: 980px){
  .euto-topbar__row{ justify-content: flex-start; gap: 18px; }
  .euto-menu--desktop{ position: static; display: none; background: transparent; padding: 0; box-shadow: none; }
  .euto-menu--desktop.is-open{ display: flex; }
}

/* Titolo sezione sopra al carosello */
.section-head{
  width: min(1100px, 92vw);
  margin: clamp(10px, 3.2vw, 20px) auto 8px;
  text-align: center;                 /* cambia in center se vuoi centrato */
}

.section-head h2{
  margin: 0;
  font-family: var(--font-display, Bebas Neue, sans-serif);
  font-size: clamp(28px, 4.6vw, 44px);
  letter-spacing: .06em;
}

/* opzionale: sottotitolo e divisore */
.section-head .sub{
  margin: 6px 0 0;
  color: var(--muted, #bdbdbd);
}

/* ===== Header: assicurati che il dropdown possa uscire fuori ===== */
.euto-topbar{ overflow: visible; z-index: 1000; }

.euto-hgroup{ z-index: 1100; }

/* ===== Desktop mantiene la toolbar su click accanto all'hamburger ===== */
@media (min-width: 980px){
  .euto-topbar__row{ justify-content: flex-start; gap: 18px; }
  .euto-menu--desktop{ position: static; display: none; background: transparent; padding: 0; box-shadow: none; }
  .euto-menu--desktop.is-open{ display: flex; }
}

/* === Keyframes === */
/* cerchio: zoom out + rotazione oraria */
@keyframes circle-open{
  from { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  to   { transform:translate(-50%,-50%) scale(1.4) rotate(360deg); }
}

/* cerchio: zoom in + rotazione antioraria */
@keyframes circle-close{
  from { transform:translate(-50%,-50%) scale(1.4) rotate(360deg); }
  to   { transform:translate(-50%,-50%) scale(1)   rotate(0deg); }
}

/* linee: zoom in + rotazione 90° oraria */
@keyframes lines-open{
  from { transform:translate(-50%,-50%)  rotate(0deg); }
  to   { transform:translate(-50%,-50%)  rotate(90deg); }
}

/* linee: zoom out + rotazione -90° (antioraria) */
@keyframes lines-close{
  from { transform:translate(-50%,-50%) scale(0.6) rotate(90deg); }
  to   { transform:translate(-50%,-50%) scale(1)   rotate(0deg); }
}

/* ======== HARD OVERRIDES sugli spazi “nascosti” ======== */
/* azzera eventuali margini generosi definiti altrove */
.ticket-cta,
.ticket-section,
.scroll-cue,
.ticket-cta--overlay,
.ticket-cta .container{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* se usi la scroll-cue sotto all’hero, annullala per testare lo zero-gap */
.scroll-cue{ display:none !important; }

/* HEADER / TOOLBAR */
.euto-topbar{ position: fixed; width:100%; }

/* riga interna: niente margine che crei il “taglio” nero */
.euto-topbar__row{
  margin-top: 0 !important;
  background: #000;     /* assicura continuità */
}

/* “Tappo” per device vecchi (fallback): colora SEMPRE la fascia sopra */
.euto-topbar::before{
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--safe-top);
  background: #000;
  z-index: -1;          /* sta dietro alla topbar ma copre il notch */
}

/* separatore bianco semplice */
.sep-line{
  display:block;
  width:min(600px, 90vw);
  height:2px;
  margin:28px auto;
  background:#fff;
  opacity:.9;
}

/* ============== EUTOPIA UNIFIED CAROUSEL (euc-) ============== */
.euc{
  /* fallback sicuri */
  --per-view: 1;
  --gap: 12px;

  --radius: 16px;
  --card-border: rgba(255,255,255,.12);
  --card-bg: #0b0b0b;
  --overlay-bg: rgba(0,0,0,.42);
  --overlay-bd: rgba(255,255,255,.14);

  width: min(1200px, 94vw);
  margin: clamp(16px, 4vw, 32px) auto 0;
  position: relative;
}

@media (min-width: 680px){  .euc{ --per-view: 2; } }

@media (min-width: 1024px){ .euc{ --per-view: 3; --gap: 14px; } }

/* scudi contro regole globali su <img> */
.euc img{ max-width: none !important; height: auto; }

/* FOLD */
.fold {
  min-height: auto; /* lascia crescere in base ai contenuti */
  height: auto;
  justify-content: flex-start; /* contenuti uno sotto l’altro */
}

/* TICKETS */
.ticket-cta{ width:100%; margin: 0 0 clamp(28px, 5vh, 52px); }

.ticket-cta .container{ width:min(var(--maxw),96vw); margin:0 auto; display:flex; justify-content:center; }

.poster{
  width:100%; height:100%; overflow:hidden;
  background:#000; border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 22px rgba(0,0,0,.42);
  contain: layout paint size;
  transform:translateZ(0); -webkit-transform:translateZ(0);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  --webkit-mask-image:-webkit-radial-gradient(white, black);
}

.poster img{
  display:block; width:100%; height:100%;
  object-fit:cover; border:0 !important; box-shadow:none !important;
}

@media (max-width:820px){ .poster{ box-shadow:0 8px 16px rgba(0,0,0,.35); } }

.euc-viewport,
.ec-viewport,
.euc-track,
.ec-track,
.euc-slide,
.ec-card { touch-action: pan-y; }
/* === TOPBAR: dimensione logo e altezze UNIFICATE === */
:root{
  --topbar-h-mob: 58px;     /* altezza topbar mobile */
  --topbar-h-dsk: 64px;     /* altezza topbar desktop */
  --logo-h-mob:   40px;     /* altezza logo mobile */
  --logo-h-dsk:   60px;     /* altezza logo desktop */
}

/* riga topbar con min-height da variabili (vince su override precedenti) */
.euto-topbar__row{
  min-height: var(--topbar-h-dsk) !important;
}
@media (max-width: 767.98px){
  .euto-topbar__row{
    min-height: var(--topbar-h-mob) !important;
  }
}

/* LOGO: blocca qualsiasi scala / max-height / transform */
.euto-topbar .euto-logo img{
  height: var(--logo-h-dsk) !important;
  width: auto !important;
  max-height: none !important;
  transform: none !important;
  scale: 1 !important;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
@media (max-width: 767.98px){
  .euto-topbar .euto-logo img{
    height: var(--logo-h-mob) !important;
  }
}

/* sicurezza: non permettere che la topbar o la row vengano scalate */
.euto-topbar, .euto-topbar__row{ transform: none !important; }