/* ============ SHERBETH 2026 — brand tokens (Manuale d'uso del logo) ============ */
/* Ripiego metrico: durante il caricamento dei font, Arial occupa lo stesso
   spazio di Montserrat (e Georgia quello di Fraunces) — lo scambio non muove il layout. */
@font-face{
  font-family:"Montserrat Fallback";
  src:local("Arial");
  size-adjust:112.84%;
  ascent-override:85.79%;
  descent-override:22.25%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia");
  font-style:italic;
  size-adjust:104.5%;
  ascent-override:93.5%;
  descent-override:24.5%;
  line-gap-override:0%;
}
:root{
  --magenta:#C70075;        /* 10-100-0-10 · colore istituzionale */
  --raspberry:#C31755;      /* 23-100-48-10 */
  --pink:#E73B8A;           /* 1-87-4-0 */
  --plum:#A12158;           /* 43-100-47-0 */
  --ink:#231F20;            /* nero istituzionale */
  --paper:#FFFFFF;
  --blush:#FFF4FA;          /* fondo chiaro derivato dal magenta */
  --blush-2:#FBE4F1;
  --line:#F2CFE3;
  --muted:#6E5A66;          /* grigio con bias magenta */
  --grad-hero: radial-gradient(120% 90% at 18% 110%, #F0637F 0%, rgba(240,99,127,0) 55%),
               radial-gradient(140% 120% at 85% -10%, var(--plum) 0%, rgba(161,33,88,0) 60%),
               linear-gradient(135deg, #E4007C 0%, var(--magenta) 45%, #9E0F62 100%);
  --shadow-card: 0 10px 30px rgba(199,0,117,.10), 0 2px 8px rgba(35,31,32,.06);
  --shadow-card-hover: 0 18px 44px rgba(199,0,117,.20), 0 4px 12px rgba(35,31,32,.08);
  --radius: 22px;
  --link:var(--magenta);           /* colore a riposo dei link nel testo; in dark diventa rosa chiaro */
  --font-sans: "Montserrat", "Montserrat Fallback", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --header-h: 76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
h1,h2,h3,h4{text-wrap:balance;line-height:1.12}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{width:min(1180px, 92%);margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--night);color:#fff;padding:10px 18px;border-radius:0 0 12px 0;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,0);
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{background:var(--header-bg);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line), 0 8px 30px rgba(35,31,32,.06)}
.header-inner{display:flex;align-items:center;gap:26px;width:min(1320px,94%);margin-inline:auto;min-width:0}
/* ─────────────────────────────────────────────────────────────────────────────
 * L'INTESTAZIONE NON PUO' TAGLIARE I PROPRI COMANDI.
 *
 * Difetto misurato l'1/9/2026, PRIMA di qualunque restyling:
 *   - a 360 e 390 px il pulsante del menu stava a 374-415, cioe' FUORI SCHERMO:
 *     su un telefono stretto la navigazione non si poteva aprire;
 *   - a 1280 px — la larghezza piu' comune — «IT | EN» era tagliato a meta' e
 *     l'interruttore del tema e «Apri WebApp» erano fuori.
 *
 * E `scrollWidth` NON LO DICEVA: la pagina non scorreva di lato perche'
 * l'overflow tagliava. Tagliava via i comandi. Un controllo che guardi solo lo
 * scorrimento orizzontale qui direbbe che va tutto bene.
 *
 * LA CAUSA: in un contenitore flex i figli non si restringono sotto la larghezza
 * del loro contenuto se non glielo si dice. La navigazione, con `margin-left:auto`,
 * si prendeva lo spazio e spingeva fuori i comandi.
 *
 * LA CURA, in tre righe e nell'ordine in cui deve cedere lo spazio:
 *   1. i COMANDI non si restringono e non si spostano mai — sono l'unico modo di
 *      cambiare lingua, tema e di aprire il menu;
 *   2. la NAVIGAZIONE cede per prima, e cede nascondendo cio' che non entra;
 *   3. sotto i 480 px il richiamo «Apri WebApp» esce dalla fila e va nel menu,
 *      dove c'e' spazio per leggerlo.
 * ─────────────────────────────────────────────────────────────────────────── */
.header-actions{flex:0 0 auto}
.main-nav{min-width:0;overflow:hidden;flex:0 1 auto}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:34px;width:auto}
.brand .logo-dark{display:none}
.site-header.scrolled .logo-white{display:none}
.site-header.scrolled .logo-dark{display:block}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav a{
  font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;
  color:#fff;padding:9px 13px;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap;
}
.main-nav a:hover{background:rgba(255,255,255,.16)}
.site-header.scrolled .main-nav a{color:var(--text)}
.site-header.scrolled .main-nav a:hover{background:var(--blush-2);color:var(--magenta)}
.header-actions{display:flex;align-items:center;gap:12px}
.lang-switch{display:flex;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;overflow:hidden}
.site-header.scrolled .lang-switch{border-color:var(--line)}
.lang-switch button{
  font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.06em;
  background:transparent;color:#fff;border:0;padding:7px 12px;cursor:pointer;transition:.2s;
}
.site-header.scrolled .lang-switch button{color:var(--text)}
.lang-switch button[aria-pressed="true"]{background:#fff;color:var(--magenta)}
.site-header.scrolled .lang-switch button[aria-pressed="true"]{background:var(--magenta);color:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:.03em;
  padding:13px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;
  cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-webapp{background:#fff;color:var(--magenta);box-shadow:0 6px 20px rgba(35,31,32,.18);padding:10px 20px;font-size:13px}
.site-header.scrolled .btn-webapp{background:var(--magenta);color:#fff;box-shadow:0 6px 20px rgba(199,0,117,.35)}
.burger{display:none;background:transparent;border:0;cursor:pointer;padding:8px}
/* Le tre linee sono BIANCHE: la barra, finche' non si scorre, sta sopra l'hero
   magenta. Con var(--surface) in tema scuro diventavano prugna (#271A25) e
   sparivano. Quando la barra si fa chiara (scrolled) tornano scure, sotto. */
.burger span{display:block;width:24px;height:2.5px;background:#fff;margin:5px 0;border-radius:2px;transition:.3s}
.site-header.scrolled .burger span{background:var(--text)}
.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--grad-hero);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.mobile-nav.open{opacity:1;pointer-events:auto}
.mobile-nav a{color:#fff;text-decoration:none;font-size:22px;font-weight:800;padding:10px 22px;border-radius:14px}
.mobile-nav a:hover{background:rgba(255,255,255,.14)}
.mobile-nav .btn{margin-top:18px}
/* Il doppione di «Apri WebApp» esiste solo sotto i 480: sopra, il pulsante e'
   nell'intestazione e averlo due volte confonderebbe. */
.mobile-nav .btn-webapp-mobile{display:none;margin-top:10px}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:var(--grad-hero);color:#fff;overflow:hidden;
  padding:calc(var(--header-h) + 40px) 0 0;
}
.hero-swirl{
  position:absolute;right:-12%;top:-18%;width:min(62vw,860px);aspect-ratio:1;opacity:.14;
  animation:swirl-spin 90s linear infinite;pointer-events:none;user-select:none;
}
@keyframes swirl-spin{to{transform:rotate(360deg)}}
.hero-inner{position:relative;z-index:2;width:min(1180px,92%);margin-inline:auto;padding-bottom:130px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 20px;margin-bottom:30px;
}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--surface);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-logo{width:min(560px,86%);margin-bottom:26px}
.hero h1{
  font-size:clamp(26px, 4.2vw, 52px);font-weight:800;max-width:19ch;margin-bottom:18px;letter-spacing:-.01em;
}
.hero h1 em{font-family:var(--font-accent);font-style:italic;font-weight:600;letter-spacing:0}
.hero-sub{font-size:clamp(15px,1.6vw,19px);font-weight:500;max-width:62ch;opacity:.94;margin-bottom:14px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:52px}
.btn-primary{background:#fff;color:var(--magenta);box-shadow:0 10px 30px rgba(35,31,32,.22);font-size:15px;padding:16px 34px}
.btn-primary:hover{box-shadow:0 16px 40px rgba(35,31,32,.3)}
.btn-outline-w{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.btn-outline-w:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-ghost-w{color:#fff;background:transparent;text-decoration:underline;text-underline-offset:5px;padding:13px 8px;font-weight:600}
.countdown{display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap;margin-bottom:clamp(26px,4vw,40px)}
.count-cell{
  min-width:86px;text-align:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:18px;padding:14px 12px 10px;backdrop-filter:blur(6px);
}
.count-cell b{display:block;font-size:clamp(26px,3.4vw,40px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.count-cell span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.25);
  background:rgba(35,31,32,.18);backdrop-filter:blur(4px);overflow:hidden;padding:14px 0;
}
.marquee-track{display:flex;gap:44px;white-space:nowrap;animation:marquee 38s linear infinite;width:max-content}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--font-accent);font-style:italic;font-size:17px;color:#fff;opacity:.95;display:inline-flex;align-items:center;gap:44px}
.marquee i{font-style:normal;opacity:.6}

/* ---------- sections base ---------- */
section{padding:clamp(70px,9vw,120px) 0}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--magenta);background:var(--blush-2);border-radius:999px;padding:8px 18px;margin-bottom:20px;
}
.sec-title{font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.015em;margin-bottom:18px;max-width:24ch}
.sec-title em{font-family:var(--font-accent);font-style:italic;font-weight:600;color:var(--magenta)}
.sec-lead{font-size:clamp(15px,1.5vw,18px);color:var(--muted);max-width:68ch;font-weight:500}
.sec-head{margin-bottom:clamp(34px,5vw,56px)}
/* ──────────────────────────────────────────────────────────────────────────────
   LA PAGINA E' COMPLETA DA FERMA. (committente, 6 ottobre 2026)

   Questa riga diceva `opacity:0`, e l'accendeva un osservatore in JavaScript. Finche'
   non si accendeva, la pagina ERA VUOTA per chi la guardava: planimetria, punti, legenda
   e perfino le voci del menu, tutto invisibile. Il committente ha creduto tre volte in
   mezz'ora che /mappa/ fosse rotta, e ci ha fatto cercare un guasto che non c'era.

   E non e' solo una questione di attesa: se l'osservatore non scatta — browser lento,
   JavaScript che non arriva, un errore in un altro copione — quel contenuto NON COMPARE
   MAI, e nessuno capisce perche'. Un'animazione che nasconde il contenuto scommette la
   leggibilita' della pagina su un copione che potrebbe non girare.

   Adesso NESSUN ELEMENTO PARTE INVISIBILE. Resta solo uno spostamento di quattordici
   pixel, che si vede appena e che, se il JavaScript non gira, lascia la pagina
   perfettamente leggibile — spostata di un filo e completa.

   Era lo stesso difetto del titolo finito a destra: il controllo diceva «c'e' tutto», e
   a schermo non si vedeva niente.
   ────────────────────────────────────────────────────────────────────────────── */
.reveal{transform:translateY(14px);transition:transform .55s ease}
.reveal.visible{transform:none}
@media (prefers-reduced-motion:reduce){.reveal,.reveal.visible{transform:none;transition:none}}

/* stats */
.stats{background:var(--bg);padding:0;transform:translateY(-64px);margin-bottom:-64px;position:relative;z-index:4}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
}
.stat{background:var(--surface);padding:28px 20px;text-align:center}
.stat b{display:block;font-size:clamp(26px,3vw,38px);font-weight:900;color:var(--magenta);font-variant-numeric:tabular-nums}
.stat b i{font-family:var(--font-accent);font-style:italic;font-weight:600}
.stat > span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* festival cards */
.bg-blush{background:var(--bg-soft)}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards-grid.grid-4{grid-template-columns:repeat(4,1fr)}
/* box giuria cliccabili */
.jury-link{display:block;color:inherit;text-decoration:none;transition:transform .25s ease, box-shadow .25s ease}
.jury-link:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.10)}
.jury-link .media-frame{margin:-4px 0 18px}
.jury-link h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.jury-link .jury-arrow{opacity:.45;font-weight:700;transition:transform .25s ease, opacity .25s ease}
.jury-link:hover .jury-arrow{opacity:.9;transform:translateY(2px)}
.card{
  background:var(--surface);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-card);
  border:1px solid var(--card-border);transition:transform .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;gap:12px;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.card h3{font-size:19px;font-weight:800}
.card p{font-size:14.5px;color:var(--muted)}
.card .card-link{margin-top:auto;font-size:13.5px;font-weight:700;text-decoration:none;color:var(--magenta)}
.card .card-link:hover{text-decoration:underline;text-underline-offset:4px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{position:relative;background:var(--surface);border-radius:var(--radius);padding:56px 24px 26px;box-shadow:var(--shadow-card);border:1px solid var(--card-border)}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-18px;left:24px;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--magenta),var(--pink));color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:18px;box-shadow:0 8px 20px rgba(199,0,117,.35);
}
.step h3,.step h4{font-size:16px;font-weight:800;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--muted)}

/* magazine */
.mag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mag-card{
  border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card);
  border:1px solid var(--card-border);text-decoration:none;color:var(--text);
  transition:transform .25s ease, box-shadow .25s ease;display:flex;flex-direction:column;
}
.mag-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.mag-cover{height:172px;position:relative;display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.cov-art{position:absolute;right:14px;top:10px;height:84%;width:auto;opacity:.92;pointer-events:none}
.mag-cover .tag{position:relative;z-index:2}
.g-art{position:absolute;inset:0;margin:auto;height:54%;width:auto;opacity:.94;pointer-events:none}
.g-tile span{position:relative;z-index:2}
.mag-cover .tag{
  background:rgba(255,255,255,.92);color:var(--magenta);font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:6px 14px;
}
.mag-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.mag-body h3{font-size:17px;font-weight:800;line-height:1.3}
.mag-body p{font-size:13.5px;color:var(--muted)}
.mag-body .read{margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;color:var(--magenta)}
.cov-1{background:linear-gradient(135deg,#E4007C,#A12158)}
.cov-2{background:linear-gradient(135deg,#C31755,#E73B8A)}
.cov-3{background:linear-gradient(135deg,#A12158,#C70075)}
.cov-4{background:linear-gradient(135deg,#E73B8A,#C31755)}
.cov-5{background:linear-gradient(135deg,#C70075,#E73B8A)}
.cov-6{background:linear-gradient(135deg,#9E0F62,#E4007C)}
.mag-cta{display:flex;justify-content:center;margin-top:38px}
.btn-magenta{background:var(--magenta);color:#fff;box-shadow:0 10px 28px rgba(199,0,117,.35)}
.btn-magenta:hover{background:var(--raspberry)}
.btn-outline-m{border-color:var(--magenta);color:var(--magenta);background:transparent}
.btn-outline-m:hover{background:var(--blush-2)}

/* atlante */
.atlas{position:relative;background:var(--bg-soft)}
.atlas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* cuto */
.cuto{background:var(--night);color:#fff;position:relative;overflow:hidden}
.cuto .eyebrow{background:rgba(231,59,138,.16);color:var(--pink)}
.cuto .sec-title{color:#fff}
.cuto .sec-title em{color:var(--pink)}
.cuto .sec-lead{color:rgba(255,255,255,.75)}
.cuto-swirl{position:absolute;left:-14%;bottom:-30%;width:min(50vw,640px);opacity:.07;pointer-events:none}
.cuto-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
.cuto-points{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.cuto-point{display:flex;gap:16px;align-items:flex-start}
.cuto-point .pip{
  width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--magenta));
  display:grid;place-items:center;flex-shrink:0;
}
/* L'icona dentro la pastiglia: alta 22 px e larghezza automatica, cosi' il cono
   resta nelle sue proporzioni (160x270) invece di schiacciarsi in un quadrato. */
.cuto-point .pip img{height:22px;width:auto;display:block}
.cuto-point h3,.cuto-point h4{font-size:16px;font-weight:800;margin-bottom:4px}
.cuto-point p{font-size:14px;color:rgba(255,255,255,.72)}
.cuto-card{
  background:linear-gradient(160deg,rgba(231,59,138,.16),rgba(199,0,117,.08));
  border:1px solid rgba(231,59,138,.35);border-radius:28px;padding:38px 34px;text-align:center;
}
/* Il marchio al posto della coppa: largo quanto basta a leggersi, centrato come
   stava l'emoji. `height:auto` e non una misura fissa — il file e' 720x145 e una
   altezza imposta lo deformerebbe. */
.cuto-card .cuto-logo{width:min(240px,70%);height:auto;margin:0 auto 18px;display:block}
.cuto-card h3{font-size:24px;font-weight:900;margin-bottom:6px}
.cuto-card .accent{font-family:var(--font-accent);font-style:italic;font-size:17px;color:var(--pink);margin-bottom:18px}
.cuto-card p{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:22px}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px}
.g-tile{border-radius:18px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px;transition:transform .25s ease}
.g-tile:hover{transform:scale(1.02)}
.g-tile span{color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}

/* press + services */
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.split.split-2{grid-template-columns:1fr 1fr}
.svc{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px}
.svc h3{font-size:18px;font-weight:800;display:flex;align-items:center;gap:12px}
.svc ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.svc li{font-size:14px;color:var(--muted);padding-left:22px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--magenta),var(--pink))}
.svc .card-link{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--magenta);text-decoration:none}
.svc .card-link:hover{text-decoration:underline;text-underline-offset:4px}

/* faq */
.faq-wrap{max-width:820px;margin-inline:auto}
.faq{border:1px solid var(--line);border-radius:18px;background:var(--surface);margin-bottom:14px;overflow:hidden;box-shadow:0 4px 14px rgba(199,0,117,.05)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 24px;font-weight:700;font-size:15.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:600;color:var(--magenta);transition:transform .25s;line-height:1}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 24px 22px;font-size:14.5px;color:var(--muted)}

/* partner */
.partner-band{background:var(--bg-soft)}
.p-group{margin-bottom:34px}
.p-label{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.p-row{display:flex;flex-wrap:wrap;gap:12px}
.p-chip{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 24px;
  font-weight:700;font-size:14.5px;color:var(--text);box-shadow:0 4px 14px rgba(199,0,117,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.p-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.p-chip small{display:block;font-weight:600;font-size:11px;color:var(--muted);letter-spacing:.05em}
.p-chip.main{border:2px solid var(--magenta);color:var(--magenta);font-size:17px}
.sponsor-cta{
  margin-top:44px;background:var(--grad-hero);border-radius:28px;color:#fff;
  padding:clamp(34px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:space-between;
  position:relative;overflow:hidden;
}
.sponsor-cta h3{font-size:clamp(22px,2.6vw,32px);font-weight:900;max-width:22ch}
.sponsor-cta p{font-size:15px;opacity:.92;max-width:52ch;margin-top:8px}

/* newsletter */
.newsletter{background:var(--bg)}
.news-box{
  border:2px solid var(--blush-2);border-radius:28px;padding:clamp(34px,5vw,54px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:var(--bg-soft);
}
.news-box h3{font-size:clamp(22px,2.6vw,30px);font-weight:900;margin-bottom:8px}
.news-box h3 em{font-family:var(--font-accent);font-style:italic;font-weight:600;color:var(--magenta)}
.news-box p{font-size:14.5px;color:var(--muted)}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{
  flex:1;min-width:220px;font-family:var(--font-sans);font-size:14.5px;padding:15px 20px;
  border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);
}
.news-form input:focus{outline:3px solid var(--pink);outline-offset:1px;border-color:var(--magenta)}
.news-note{font-size:12px;color:var(--muted);margin-top:10px}

/* footer */
.footer{background:var(--night);color:#fff;padding:clamp(56px,7vw,84px) 0 34px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px}
.footer img.f-logo{width:220px;margin-bottom:16px}
.footer p{font-size:13.5px;color:rgba(255,255,255,.65)}
.footer h2,.footer h4{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#EF6BA8;margin-bottom:16px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer ul a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14px}
.footer ul a:hover{color:var(--pink)}
.footer-cta{margin-top:20px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(255,255,255,.55);
}
.footer-bottom .socials{display:flex;gap:14px}
.footer-bottom .socials a{color:rgba(255,255,255,.75);text-decoration:none;font-weight:700}
.footer-bottom .socials a:hover{color:var(--pink)}

/* ---------- animazioni ---------- */
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-kicker{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .1s both}
.hero-logo{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .25s both}
.hero h1{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .4s both}
.hero-sub{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .55s both}
.hero-ctas{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .7s both}
.countdown{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .85s both}
.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1}
.blob-1{width:420px;height:420px;left:-8%;top:8%;background:rgba(231,59,138,.45);animation:float1 14s ease-in-out infinite alternate}
.blob-2{width:360px;height:360px;right:6%;bottom:2%;background:rgba(255,255,255,.14);animation:float2 18s ease-in-out infinite alternate}
@keyframes float1{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-50px) scale(1.15)}}
@keyframes float2{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(.92)}}
@keyframes cd-pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
.count-cell b.tick{animation:cd-pop .45s cubic-bezier(.2,.7,.2,1)}
.cov-art{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mag-card:hover .cov-art{transform:scale(1.08) rotate(2deg)}
.btn-primary,.btn-magenta{position:relative;overflow:hidden}
.btn-primary::after,.btn-magenta::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn-primary::after{background:linear-gradient(105deg,transparent,rgba(199,0,117,.18),transparent)}
.btn-primary:hover::after,.btn-magenta:hover::after{left:130%}
.draw-svg [data-len]{stroke-dashoffset:var(--len);stroke-dasharray:var(--len);transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.draw-svg.drawn [data-len]{stroke-dashoffset:0}

/* ---------- maestri gelatieri ---------- */
.maestri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.m-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
  border:1px solid var(--card-border);transition:transform .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.m-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.m-top{height:118px;position:relative;display:grid;place-items:center}
.m-ava{
  width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.18);border:3px solid #fff;
  display:grid;place-items:center;font-family:var(--font-accent);font-style:italic;font-size:27px;color:#fff;
  box-shadow:0 8px 20px rgba(35,31,32,.2);
}
.m-flag{position:absolute;top:12px;right:14px;font-size:24px;filter:drop-shadow(0 2px 4px rgba(35,31,32,.25))}
.m-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:4px;flex:1}
.m-body h3{font-size:17px;font-weight:800}
.m-country{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.m-gusto{font-family:var(--font-accent);font-style:italic;font-size:15.5px;color:var(--magenta);margin:8px 0 4px;line-height:1.35}
.m-bio{font-size:13px;color:var(--muted);margin-bottom:12px}
.m-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.m-chip{font-size:11px;font-weight:800;background:var(--blush-2);color:var(--magenta);padding:6px 12px;border-radius:999px;letter-spacing:.04em}
.m-chip.stand{background:var(--magenta);color:#fff}

/* ---------- eventi collaterali ---------- */
.events-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(330px,82vw);gap:18px;
  overflow-x:auto;padding:10px 6px 28px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--magenta) var(--blush-2);
}
.events-row::-webkit-scrollbar{height:8px}
.events-row::-webkit-scrollbar-track{background:var(--blush-2);border-radius:99px}
.events-row::-webkit-scrollbar-thumb{background:var(--magenta);border-radius:99px}
.ev-card{
  scroll-snap-align:start;background:var(--surface);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-card);border:1px solid var(--card-border);
  display:flex;flex-direction:column;gap:10px;transition:transform .25s ease, box-shadow .25s ease;
}
.ev-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.ev-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ev-date{
  display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--magenta),var(--pink));
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;border-radius:12px;padding:8px 14px;
}
.ev-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--magenta);background:var(--blush-2);border-radius:999px;padding:6px 12px}
.ev-card h3{font-size:18px;font-weight:800;line-height:1.3}
.ev-place{font-size:13px;color:var(--muted);font-weight:600}
.ev-desc{font-size:13.5px;color:var(--muted)}
.ev-hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:6px}

/* ---------- strip tipografiche ---------- */
.strip{overflow:hidden;padding:30px 0;background:var(--bg)}
.strip-track{
  display:flex;gap:0;white-space:nowrap;width:max-content;animation:marquee 32s linear infinite;
  font-weight:900;font-size:clamp(56px,8vw,112px);letter-spacing:.01em;line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--line);
}
.strip-track span{padding-right:.6em}
.strip-dark{background:var(--night);padding:0 0 30px}
.strip-dark .strip-track{-webkit-text-stroke:2px rgba(231,59,138,.38)}
@supports not (-webkit-text-stroke:2px red){ .strip-track{color:var(--blush-2)} .strip-dark .strip-track{color:rgba(231,59,138,.25)} }

/* ---------- barra progresso scroll ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:130;background:linear-gradient(90deg,var(--magenta),var(--pink));border-radius:0 99px 99px 0;transition:width .1s linear}

/* ---------- tilt 3D ---------- */
.card,.mag-card,.m-card,.svc,.ev-card{transform-style:preserve-3d}

@media (max-width:1080px){.maestri-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){
  /* Il richiamo alla WebApp resta SEMPRE visibile nella barra, anche sotto i
     480px (richiesta committente 18/09): compatto, accanto al pulsante del menu.
     Il pulsante del menu non sparisce MAI. Il duplicato dentro il menu resta per
     chi lo cerca li'. */
  .header-actions .btn-webapp{display:inline-flex}
  .mobile-nav .btn-webapp-mobile{display:inline-flex}
  .header-inner{gap:12px}
  .header-actions{gap:8px}
}
@media (max-width:640px){.maestri-grid{grid-template-columns:1fr}}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .main-nav{display:none}
  .burger{display:block}
  /* Menu principale nascosto: logo a sinistra, tutti i comandi (IT/EN, tema,
     WebApp, menu) allineati a destra. */
  .header-actions{margin-left:auto}
  .cards-grid,.mag-grid,.atlas-grid,.split{grid-template-columns:repeat(2,1fr)}
  .cards-grid.grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .cuto-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cards-grid,.mag-grid,.atlas-grid,.split,.steps{grid-template-columns:1fr}
  .cards-grid.grid-4{grid-template-columns:1fr}
  .split.split-2{grid-template-columns:1fr}
  .steps{row-gap:34px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .news-box{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%}
  .count-cell{min-width:70px;flex:1}
  .header-inner{gap:10px}
  .header-actions{gap:8px}
  .brand img{height:26px}
  .btn-webapp{padding:8px 12px;font-size:11.5px;white-space:nowrap}
  .lang-switch button{padding:6px 9px}
}

/* contenimento laterale su schermi stretti */
@media (max-width:700px){
  html,body{overflow-x:hidden}
}