/* ==========================================================================
   Festival AI Lugano 2026 — landing.css
   Step 1: design tokens, reset moderno, utility base, layout wrapper.
   Metodologia classi: BEM (block__element--modifier).
   Nessun framework: vanilla CSS con custom properties.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens (custom properties)
   ========================================================================== */

:root {
  /* --- Colori base --- */
  --color-dark: #0D166D;
  --color-accent: #FF3C7E;
  --color-accent-dark: #D52F67;
  --color-white: #FFFFFF;
  --color-ated: #0920F5; /* blu brand ated — hero strip powered-by box */

  /* --- Colori gradient --- */
  --color-blue-bright: #2244FF;
  --color-cyan: #00C8FF;
  --color-yellow: #FFB800;

  /* --- Colori funzionali --- */
  --color-text-on-dark: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.65);
  --color-text-dark: #000000;
  --color-heading-accent: #D52F67;
  --color-bg-light: #FFFFFF;
  --color-bg-dark: #0D166D;
  --color-border: rgba(255, 255, 255, 0.15);

  /* --- Gradienti --- */
  --gradient-hero: linear-gradient(135deg, #0D166D 0%, #1A0A4A 100%);
  --gradient-accent: linear-gradient(135deg, #FF3C7E 0%, #2244FF 50%, #00C8FF 100%);
  --gradient-cta-panel: linear-gradient(135deg, #FF3C7E 0%, #FFB800 40%, #2244FF 100%);

  /* --- Tipografia --- */
  --font-primary: 'Space Grotesk', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Scala tipografica fluida (clamp: min, preferito vw, max) */
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.9375rem;   /* 15px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  --font-size-xl: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  --font-size-2xl: clamp(2.25rem, 1.2rem + 4vw, 4.5rem);

  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-base: 1.6;

  /* --- Spaziature --- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-xxl: 120px;

  /* --- Border radius --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --site-max-width: 1512px;
  --content-padding: var(--space-md);

  /* --- Elevazione / ombre --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);

  /* --- Transizioni --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}

/* ==========================================================================
   2. Reset moderno
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-on-dark);
  /* Barre laterali blu scuro oltre i 1512px */
  background-color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Media a livello di blocco e responsive di default */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Eredita il font sugli elementi di form */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Evita overflow del testo */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Titoli: bilanciamento riga dove supportato */
h1,
h2,
h3 {
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-xl);  font-weight: var(--font-weight-bold); }
h3 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-semibold); }

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Crea uno stacking context affidabile per overlay/modali */
#root,
#__next {
  isolation: isolate;
}

/* ==========================================================================
   3. Layout: wrapper con max-width e barre laterali
   ========================================================================== */

.site-wrapper {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
  /* Sfondo del contenuto; le barre laterali derivano dal body blu scuro */
  background-color: var(--color-dark);
  /* NB: niente overflow-x:hidden qui — romperebbe position:sticky della navbar.
     Il clipping orizzontale è applicato localmente (es. ticker marquee). */
}

/* Container interno per allineare il contenuto delle sezioni */
.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

/* Sezione full-bleed con padding verticale standard */
.section {
  padding-block: var(--space-xxl);
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-xl);
  }
}

/* ==========================================================================
   4. Utility base
   ========================================================================== */

/* --- Accessibilità --- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* Stato focus visibile e coerente */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Display --- */
.u-hidden { display: none !important; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-grid { display: grid; }

/* --- Flex helper --- */
.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.u-flex-col { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }

/* --- Allineamento testo --- */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

/* --- Colori testo --- */
.u-text-accent { color: var(--color-accent); }
.u-text-heading-accent { color: var(--color-heading-accent); }
.u-text-muted { color: var(--color-text-muted); }

/* --- Gradient text (titoli accent) --- */
.u-text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Spacing utilities (margini verticali) --- */
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mb-sm { margin-bottom: var(--space-sm); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-mb-lg { margin-bottom: var(--space-lg); }

/* --- Flusso verticale (gap fra figli) --- */
.u-flow > * + * {
  margin-top: var(--space-md);
}

/* --- Bottoni base --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base),
              filter var(--transition-base),
              background-color var(--transition-base);
  will-change: transform;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn--primary:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.btn--outline {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-white);
}

.btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* ==========================================================================
   5. Animazioni on-scroll (base per IntersectionObserver, Step 20)
   ========================================================================== */

.is-revealable {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.is-revealable.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   6. Preferenze utente
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .is-revealable {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   7. Sezione 1 — Navbar + Hero + Strip (Powered by + Ticker + Main Sponsors)
   Ricostruzione fedele al layout HERO2 (Figma node 354:2346 + 354:2388).
   ========================================================================== */

:root {
  --navbar-height: 80px;
}

/* Loghi resi monocromatici bianchi (su gradient o box scuro) */
.is-mono {
  filter: brightness(0) invert(1);
}

/* --- NAVBAR (sticky, sfondo blu scuro) ---------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-dark);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--navbar-height);
}

.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo img {
  width: auto;
  height: 60px;
  object-fit: contain;
}

/* Link centrali — nascosti finché non attivi (HERO2) */
.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.navbar__link {
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  transition: color var(--transition-base);
}

.navbar__link:hover {
  color: var(--color-accent);
}

.navbar__link--hidden {
  display: none;
}

/* CTA navbar: pill bianca, testo accent (HERO2) */
.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.6em 1.4em;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-accent-dark);
  background-color: var(--color-white);
  border: 2px solid transparent; /* riservato per l'hover, evita layout shift */
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* --- HERO (full-bleed, gradient protagonista, nessun overlay) ----------
   Il parent ospita un solo figlio in flusso (.hero__stage) e si occupa
   di centratura (h/v), altezza e padding. Il padding sta QUI, non sullo
   stage: così right:0 dei crediti coincide col bordo destro del titolo. */
.hero {
  position: relative;
  display: flex;
  align-items: stretch; /* lo stage riempie tutta l'altezza del frame body */
  justify-content: center;
  min-height: clamp(520px, 58.93vw, 891px); /* 891/1512 */
  /* Padding verticale = offset Figma del body (frame 1512×891, node 354:2346):
     titolo a 98px dal top, elemento più basso (loghi crediti) a 64px dal fondo.
     Sta QUI e non sullo stage così bottom:0 dei crediti cade esatto a 64px. */
  padding-top: clamp(44px, 6.48vw, 98px); /* 98/1512 = 6.48% */
  padding-bottom: clamp(28px, 4.23vw, 64px); /* 64/1512 = 4.23% */
  padding-inline: clamp(24px, 6.34vw, 96px); /* 96/1512 = 6.34% */
  color: var(--color-white);
  background-color: var(--color-dark);
  background-image: url("/assets/images/hero-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Blocco contenuto: titolo + sottotitolo + CTA in flusso (colonna).
   width: fit-content → larghezza = larghezza del titolo h1; funge da
   contesto di posizionamento (position: relative) per i crediti, che
   sono un overlay assoluto ancorato all'angolo inferiore destro.
   Nessun padding qui (vedi .hero sopra). */
.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 40px);
  width: fit-content;
  min-width: min(800px, 80%);
  /* align-items:stretch su .hero estende lo stage a tutta l'altezza del frame
     body: lo spazio libero verticale viene poi assorbito da margin-top:auto
     sul sottotitolo (gruppo inferiore ancorato in basso). */
}

.hero__title {
  flex: 0 0 auto; /* gruppo superiore: titolo + 19NOV ancorato in alto */
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: 0.83; /* 150/180 */
  text-transform: uppercase;
  letter-spacing: -0.03em;
  text-align: left;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
  font-size: clamp(3rem, 12vw, 12rem); /* 180px @1512 */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-white);
  letter-spacing: -0.03em;
}

.hero__title-line--city {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.25em;
}

.hero__title-word {
  font-size: clamp(3rem, 12vw, 12rem);
  font-weight: var(--font-weight-bold);
}

.hero__title-date {
  font-size: clamp(1.25rem, 4.23vw, 4rem); /* 64px @1512 */
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.06em;
  color: var(--color-white);
}

.hero__subtitle {
  /* Gruppo superiore: il sottotitolo resta attaccato sotto il titolo
     (vedi design/hero-reference.png), separato solo dal gap dello stage. */
  flex: 0 0 auto;
  max-width: 40ch;
  margin: 0;
  font-size: clamp(1.25rem, 2.12vw, 2rem); /* 32px @1512 */
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-white);
  text-align: left;
}

.hero__cta {
  /* Gruppo inferiore: margin-top:auto collassa lo spazio centrale e àncora
     CTA (+ crediti, overlay assoluto) al fondo del frame. */
  flex: 0 0 auto;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.7em 1.6em;
  font-size: var(--font-size-base); /* allineato a .navbar__cta */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-accent-dark);
  background-color: var(--color-white);
  border: 2px solid transparent; /* riservato per l'hover, evita layout shift */
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover unificato CTA: fill accent invariato, bordo + testo bianchi */
.navbar__cta:hover,
.hero__cta:hover {
  background: var(--color-accent);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Blocco crediti — overlay assoluto ancorato all'angolo inferiore destro
   di .hero__stage: bordo destro = bordo destro del titolo, bordo inferiore
   = fondo del contenuto (sottotitolo + CTA). Non occupa spazio nel flusso. */
.hero__credits {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-32 Figma */
  text-align: left;
}

/* Ogni gruppo: label sopra, loghi sotto (come da Figma 354:2371) */
.hero__credits-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* gap-8 Figma */
}

.hero__credits-label {
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  text-align: left;
}

.hero__credits-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 2vw, 40px);
}

/* Loghi patrocinatori: scalano proporzionalmente tra 1025 e 1512px */
.hero__credits-logo {
  width: auto;
  height: auto;
  max-height: clamp(45px, 5vw, 75px);
  max-width: clamp(110px, 12vw, 200px);
  object-fit: contain;
}

/* --- STRIP INFERIORE: Powered by + Ticker + Main Sponsors (fondo scuro) -- */
.hero-strip {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.hero-strip__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

/* Riga superiore: box Powered by + ticker */
.hero-strip__top {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
}

/* Zona sinistra — divisore verticale sulla destra.
   Bordo sinistro allineato al padding globale (96px) della .container */
.hero-strip__powered {
  display: flex;
  align-items: center;
  flex: 0 0 37%;
  margin-left: 0;
  padding-right: var(--space-lg);
  border-right: 1px solid var(--color-white);
}

/* Box "Powered by" — blu acceso arrotondato */
.hero-strip__powered-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xs) var(--space-lg); /* meno padding verticale (ref. design) */
  background-color: var(--color-ated);
  border-radius: var(--radius-lg);
}

.hero-strip__powered-label {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-white);
  white-space: nowrap; /* "Powered by" mai spezzato su due righe */
}

.hero-strip__powered-logo {
  width: auto;
  height: 60px;
  object-fit: contain;
}

/* Banda 769–1024px: la colonna "Powered by" (flex 0 0 37%) si restringe ma
   testo e logo restano a piena dimensione e sbordano dal box. Li riduco
   proporzionalmente (padding, gap, font, logo) finché non rientrano.
   Sopra i 1025px reggono a piena dimensione; sotto i 769px la strip va in
   colonna e il box torna a piena larghezza. */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-strip__powered-box {
    gap: clamp(6px, 1vw, 14px);
    padding-inline: clamp(8px, 1.8vw, 24px);
  }

  .hero-strip__powered-label {
    font-size: clamp(0.72rem, 1.3vw, 1rem);
  }

  .hero-strip__powered-logo {
    height: clamp(40px, 5vw, 56px);
  }
}

/* Ticker — marquee CSS infinito (doppia traccia) */
.hero-strip__ticker {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-right: 0;
  padding-right: 0;
}

.ticker__viewport {
  width: 100%;
  overflow: hidden; /* clipping locale, NON sul .site-wrapper (rompe sticky navbar) */
}

.ticker__track {
  display: flex;
  align-items: center;
  width: max-content; /* si estende quanto serve */
  animation: ticker-scroll 30s linear infinite;
}

.ticker__track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% = primo dei due gruppi identici */
}

.ticker__item {
  white-space: nowrap;
  padding-inline: var(--space-md);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--color-white);
  font-size: clamp(1.25rem, 2vw, 2rem);
  letter-spacing: -0.03em;
}

.ticker__separator {
  color: var(--color-accent);
  padding-inline: var(--space-xs);
  align-self: center;
}

/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* Main Sponsors — riga full-width centrata sotto la strip */
.hero-strip__sponsors {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.hero-strip__sponsors-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

.hero-strip__sponsors-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.hero-strip__sponsors-logo {
  width: auto;
  height: 56px;
  max-width: 160px;
  object-fit: contain;
}

/* --- Responsive: mobile (≤768px) --------------------------------------- */
/* Unico breakpoint che passa a colonna: l'overlay assoluto dei crediti
   viene rimosso e tutto torna in flusso impilato. */
@media (max-width: 768px) {
  .navbar__logo img {
    height: 34px;
  }

  .navbar__cta {
    padding: 0.5em 1.1em;
    font-size: var(--font-size-sm);
  }

  /* Hero mobile: padding Figma 375:1379 — 60px top, 32px bottom, 20px laterale */
  .hero {
    display: block;
    min-height: 0;
    padding-top: 60px;
    padding-bottom: 32px;
    padding-inline: 20px;
  }

  .hero__stage {
    width: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px; /* gap Figma tra gli elementi */
  }

  /* Titolo: 68px a 393px, cresce fino a ~104px a 768px — tracking -3px */
  .hero__title-line,
  .hero__title-word {
    font-size: clamp(3rem, 17vw, 6.5rem);
    letter-spacing: -3px;
    line-height: 1;
  }

  /* 19NOV: mantiene posizionamento assoluto */
  .hero__title-date {
    font-size: 24px;
    letter-spacing: 0;
  }

  /* Sottotitolo: 20px Medium tracking 1px come da Figma */
  .hero__subtitle {
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1px;
    line-height: 1.3;
  }

  /* CTA: full-width, max-width per evitare eccessiva larghezza vicino a 768px */
  .hero__cta {
    width: 100%;
    max-width: 400px;
    justify-content: center;
    margin-top: clamp(80px, 20vw, 140px); /* spazio generoso — compensa assenza immagine */
  }

  /* Crediti: in flusso, dopo la CTA con gap 40px come da Figma */
  .hero__credits {
    position: static;
    margin-top: 40px; /* gap Figma tra CTA e loghi */
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .hero__credits-label {
    font-size: 16px;
  }

  /* Loghi: dimensioni Figma mobile */
  .hero__credits-logo {
    max-height: 60px;
    max-width: 150px;
  }

  /* Strip in colonna: powered full-width, divisore orizzontale */
  .hero-strip__top {
    flex-direction: column;
  }

  .hero-strip__powered {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
    margin-left: 0;
    padding-right: 0;
    padding-bottom: var(--space-md);
    border-right: none;
    border-bottom: 1px solid var(--color-white);
  }

  .hero-strip__ticker {
    width: 100%;
  }

  /* Main Sponsors: a capo, loghi ridotti */
  .hero-strip__sponsors-logos {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .hero-strip__sponsors-logo {
    max-height: 40px;
    max-width: 100px;
  }
}

/* ==========================================================================
   8. Sezione 2 — Slider "famiglia robot"
   Misure pixel-perfect da Figma nodo 369:1049 (1512×784px).
   Tutto posizionato in absolute dentro la sezione: robot (sfora sopra di
   57px), box blu e dots — coordinate Figma convertite in % su base 1512×784.
   Il robot è UNA sola <img> (#sliderRobot): il JS ne aggiorna il src al
   cambio slide (data-robot-src). Mobile: tutto torna in flow (stack).
   Font body slide: DM Sans (import in tpl.Landing.html).
   ========================================================================== */

.slider-section {
  position: relative;
  width: 100%;
  /* Proporzioni Figma 784/1512; aspect-ratio mantiene il rapporto. */
  aspect-ratio: 1512 / 784;
  max-height: 784px;
  background-image: url('/assets/images/gradient-background.jpg');
  background-size: cover;
  background-position: center;
  overflow: visible; /* l'antenna del robot sfora sopra la sezione */
}

/* Robot: absolute rispetto alla sezione, coordinate Figma. */
.slider__robot {
  position: absolute;
  left: calc(43 / 1512 * 100%); /* 2.84% */
  top: calc(-57 / 784 * 100%); /* -7.27% — antenna sopra il bordo sezione */
  width: calc(566 / 1512 * 100%); /* 37.43% */
  height: auto;
  max-height: calc(849 / 784 * 100%); /* 108.29% — più alto della sezione */
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 2;
  transition: opacity var(--transition-slow);
}

/* Durante il cambio slide il JS sfuma il robot prima di cambiarne il src. */
.slider__robot.is-transitioning {
  opacity: 0;
}

/* Box blu: absolute rispetto alla sezione, coordinate Figma. */
.slider__viewport {
  position: absolute;
  left: calc(262 / 1512 * 100%); /* 17.33% */
  top: calc(162 / 784 * 100%); /* 20.66% */
  width: calc(1189 / 1512 * 100%); /* 78.64% */
  height: calc(507 / 784 * 100%); /* 64.67% */
  border-radius: 16px; /* Figma */
  background-color: #0D166D;
  display: grid; /* slide impilate per il crossfade */
  overflow: hidden;
  z-index: 1;
}

.slider__slide {
  grid-area: 1 / 1; /* stacking nella stessa cella */
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Fallback senza JS: mostra la prima slide finché il modulo non inizializza */
.slider__viewport:not(.is-init) .slider__slide:first-child {
  opacity: 1;
  pointer-events: auto;
}

/* Testo dentro il box. left rel. al box = (557-262)/1189 = 24.81%;
   padding-right rel. al box = 100/1189 = 8.41% */
.slider__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: calc(295 / 1189 * 100%); /* 24.81% dal bordo sx box */
  padding-right: calc(100 / 1189 * 100%); /* 8.41% */
  padding-block: var(--space-lg);
  width: 100%;
}

.slider__title {
  margin: 0;
  font-family: var(--font-primary); /* Space Grotesk */
  font-size: clamp(2rem, 1rem + 3.5vw, 5rem); /* scala da 80px */
  font-weight: 500;
  line-height: 1;
  color: var(--color-white);
}

.slider__desc {
  font-family: 'DM Sans', sans-serif; /* font diverso dal titolo */
  font-size: clamp(1rem, 0.5rem + 0.8vw, 1.25rem); /* scala da 20px */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--color-white);
  max-width: 794px;
}

.slider__desc strong {
  font-weight: 700;
}

/* Dots: absolute rispetto alla sezione, coordinate Figma. */
.slider__dots {
  position: absolute;
  left: calc(1303 / 1512 * 100%); /* 86.18% */
  top: calc(681 / 784 * 100%); /* 86.86% */
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}

.slider__dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color var(--transition-base),
              transform var(--transition-base);
}

.slider__dot:hover {
  background-color: rgba(255, 255, 255, 0.65);
}

.slider__dot.is-active {
  background-color: var(--color-white);
  transform: scale(1.15);
}

/* --- Tablet (≤1024px): le % scalano già; riduciamo solo i font del testo --- */
@media (max-width: 1024px) {
  .slider__title {
    font-size: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  }

  .slider__desc {
    font-size: clamp(0.875rem, 0.5rem + 0.6vw, 1.125rem);
  }
}

/* --- Mobile (≤768px): stack verticale, si abbandona l'absolute --- */
@media (max-width: 768px) {

  .slider-section {
    aspect-ratio: unset;
    max-height: none;
    min-height: unset;
    overflow: hidden;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .slider__robot {
    position: relative;
    z-index: 0; /* sotto il box */
    left: auto;
    top: auto;
    margin-top: -9px; /* sforo in alto come Figma: -2.82% di 335px */
    margin-bottom: -65px; /* il box risale di 65px e copre il robot dal gomito in giù */
    width: 80.98%;
    max-height: 335px;
    height: auto;
    object-fit: contain;
    object-position: bottom left;
    filter: none;
    background: none;
    padding-top: 0;
    align-self: flex-start;
  }

  .slider__viewport {
    position: relative;
    z-index: 1; /* sopra il robot nello stacking context */
    left: auto;
    top: auto;
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    min-height: 0;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0; /* il padding è sulla slide */
    flex: unset;
    overflow: hidden;
  }

  .slider__slide {
    min-height: 0;
    padding: 33px;
    align-items: flex-start;
  }

  .slider__text {
    padding-left: 0;
    padding-right: 0;
    gap: 32px;
  }

  .slider__title {
    font-size: 40px;
    font-weight: 500;
    line-height: 33.6px;
  }

  .slider__desc {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  .slider__dots {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    top: auto;
    justify-content: center;
    padding: 20px 0 0 0;
    gap: 8px;
    background: none;
  }

  .slider__dot {
    width: 18px;
    height: 18px;
    background-color: var(--color-white);
    border: none;
    transform: none;
  }

  .slider__dot:hover {
    background-color: var(--color-white);
  }

  .slider__dot.is-active {
    width: 20px;
    height: 20px;
    background-color: var(--color-white);
    border: 2.5px solid #D52F67;
    transform: none;
  }
}

/* ================================================================
   9. Sezione 3 — Speaker grid
   Misure Figma: desktop 354:2434 (1512px) / mobile 375:1467 (393px)
   Breakpoint: 5col >1024 / 3col 481-1024 / 2col ≤480
   ================================================================ */

.speakers {
  background-color: var(--color-dark); /* sfondo scuro — Figma */
  padding-block: 60px;
}

.speakers__title {
  margin-bottom: var(--space-lg);
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 4vw, 5rem); /* scala da 80px desktop */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

/* Grid 5 colonne desktop — gap Figma: 40px */
.speakers__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 24px;
  align-items: start;
}

/* --- Card --- */
.speaker-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.speaker-card__media {
  position: relative;
  border-radius: 18.75px; /* Figma: 18.75px */
  overflow: hidden;
  transition: transform var(--transition-base);
  /* aspect-ratio invece di height fissa: la foto scala
     proporzionalmente con la larghezza della card */
  aspect-ratio: 227 / 350;
}

.speaker-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* priorità al viso */
  display: block;
}

/* Overlay hover */
.speaker-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(13, 22, 109, 0.55);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.speaker-card__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

/* Hover speaker card disabilitato temporaneamente
.speaker-card:hover .speaker-card__media {
  transform: scale(1.02);
}

.speaker-card:hover .speaker-card__media::after,
.speaker-card:hover .speaker-card__overlay {
  opacity: 1;
}
*/

/* Info sotto la foto */
.speaker-card__info {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma: gap tag/nome/ruolo 16px */
  padding-top: 16px;
}

/* Tag categoria — pill bianca testo fucsia */
.speaker-card__tag {
  display: inline-flex;
  align-self: flex-start; /* non stretcha a piena larghezza */
  align-items: center;
  padding: 5px 10px;
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 13px; /* leggermente ridotto per evitare overflow */
  font-weight: var(--font-weight-bold);
  color: #D52F67;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.speaker-card__name {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.2vw, 1.5rem); /* scala col viewport */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.speaker-card__role {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 0.875rem);
  font-weight: 300; /* DM Sans Light — Figma */
  line-height: 1.32;
  letter-spacing: -0.28px;
  color: var(--color-white);
  opacity: 0.85;
}

/* --- Tablet (481px–1024px): 3 colonne --- */
@media (max-width: 1024px) {
  .speakers {
    padding-block: var(--space-xl);
  }

  .speakers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
  }

  .speaker-card__tag {
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .speakers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Mobile (≤480px): 2 colonne — misure Figma mobile --- */
@media (max-width: 640px) {
  .speakers {
    padding-block: 32px;
  }

  .speakers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) 16px;
  }

  .speaker-card__info {
    gap: 11.5px;
    padding-top: 12px;
  }

  .speaker-card__media {
    border-radius: 13.5px; /* Figma mobile */
  }

  .speaker-card__tag {
    font-size: 11.5px;
    padding: 3.5px 7px;
  }

  .speaker-card__name {
    font-size: 16px;
  }

  .speaker-card__role {
    font-size: 12px;
  }
}

/* ================================================================
   10. Sezione — Le attività del Festival AI
   Fonte: Figma desktop 354:2613 (1512×904) + mobile 375:1583 (393).
   4 zone di layout: Zona1 >1280 (Figma desktop) / Zona2 ≤1280
   (2col compresse) / Zona3 ≤1024 (2col tablet) / Zona4 ≤768 (Figma
   mobile, stack). white-space:pre-wrap SOLO ≤768px (titoli area su
   2 righe hardcoded); altrove white-space:normal — root-cause fix
   dell'overflow nei viewport intermedi.
   ================================================================ */

/* === Zona 1: > 1280px — Fedele al Figma desktop === */
.activities {
  background-color: var(--color-dark);
  border-top: 5px solid var(--color-accent-dark);
  padding: 68px 68px 68px 62px;
}

.activities__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.activities__header {
  padding-inline: 31px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activities__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(3rem, 5.3vw, 5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.activities__subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 400;
  font-variation-settings: "opsz" 14;
  line-height: 1.4;
  color: var(--color-white);
}

.activities__grid {
  display: flex;
  gap: 32px;
  padding-inline: 33px;
  align-items: stretch; /* stretch: colonne stessa altezza → margin-top:auto sui CTA funziona */
}

.activities__area {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 18px 60px;
  min-width: 0;
}

.activities__area:first-child {
  flex: 1 0 0;
}

.activities__area:last-child {
  width: 636px;
  flex-shrink: 0;
}

.activities__area-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(3rem, 5.3vw, 5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0.8px;
  color: var(--color-white);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.activities__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 36px;
  margin: 0;
  list-style: disc;
}

.activities__list li {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 400;
  font-variation-settings: "opsz" 14;
  line-height: 1.4;
  color: var(--color-white);
}

.activities__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 47px;
  padding: 10px 20px;
  border-radius: 25px;
  background-image: url('/assets/images/gradient-background.jpg');
  background-size: cover;
  background-position: center;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1px;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
  margin-top: auto;
}

.activities__cta:hover {
  opacity: 0.85;
}

/* === Zona 2: 1025px–1511px — 2 colonne compresse ===
   La Zona 1 (layout Figma puro) è geometricamente stabile
   SOLO a 1512px. Sotto quella soglia la colonna sinistra
   con padding 60px×2 + colonna destra fissa 636px non ha
   spazio sufficiente per il titolo area senza overflow.
   Breakpoint 1511px = un pixel sotto il canvas Figma. */
@media (max-width: 1511px) {
  .activities {
    padding: 56px 40px;
  }

  .activities__inner {
    gap: 48px;
  }

  .activities__area:last-child {
    width: auto;  /* abbandona la larghezza fissa 636px */
    flex: 1 0 0;
  }

  .activities__area {
    padding: 18px 32px;
    gap: 40px;
  }

  .activities__area-title {
    /* clamp calibrato sul viewport disponibile:
       a 1511px → 3.5vw = 52.9px, colonne ~580px → ok
       a 1025px → 3.5vw = 35.9px → ok */
    font-size: clamp(2rem, 3.5vw, 3.5rem);
  }

  .activities__list li {
    font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  }
}

/* === Zona 3: 769px–1024px — 2 colonne tablet === */
@media (max-width: 1024px) {
  .activities {
    padding: 48px 24px;
  }

  .activities__inner {
    gap: 32px;
  }

  .activities__grid {
    gap: 20px;
    padding-inline: 0;
  }

  .activities__area {
    padding: 16px 20px;
    gap: 28px;
  }

  .activities__area-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }

  .activities__list li {
    font-size: 18px;
  }

  .activities__cta {
    width: 100%;
    max-width: 300px;
  }
}

/* === Zona 4: ≤ 768px — Fedele al Figma mobile === */
@media (max-width: 768px) {
  .activities {
    border-top-width: 3px;  /* Figma mobile: 3px non 5px */
    padding: 67px 20px 64px;
  }

  .activities__inner {
    gap: 24px;
  }

  .activities__header {
    padding-inline: 0;
    gap: 12px;
  }

  .activities__title {
    font-size: 48px;
    line-height: 48px;
  }

  .activities__subtitle {
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1px;
  }

  .activities__grid {
    flex-direction: column;
    gap: 56px;
    padding-inline: 0;
  }

  .activities__area {
    padding: 0;
    gap: 24px;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .activities__area-title {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 1px;
    white-space: pre-wrap; /* Figma mobile: titolo su 2 righe */
  }

  .activities__list {
    padding-left: 30px;    /* Figma mobile: ms 30px */
    gap: 0;                /* Figma mobile: nessun gap esplicito */
  }

  .activities__list li {
    font-size: 20px;
  }

  .activities__cta {
    width: 100%;
    max-width: none;
  }

}

/* ================================================================
   11. Sezione — Un solo giorno / Keywords tematiche
   Fonte: Figma nodo 354:2639 (1512px).
   Layout: CSS Grid 4 colonne, pill uguale larghezza.
   Nessun overlay, nessuna CTA.
   ================================================================ */

.keywords {
  background-image:
    url('/assets/images/gradient-background.jpg');
  background-size: cover;
  background-position: center;
  padding-block: 83px;
  padding-inline: 62px;
  /* Nessun overlay: gradiente visibile al 100% */
}

.keywords__inner {
  max-width: 1388px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.keywords__heading {
  /* Titolo allineato a sinistra come da Figma */
}

.keywords__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5.3vw, 5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
  text-align: left; /* Figma: titolo a sinistra */
}

/* CSS Grid 4 colonne — pill uguale larghezza */
.keywords__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.keywords__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: var(--radius-pill);
  background-color: rgba(13, 22, 109, 0.6);
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Tablet (max-width: 1280px): 3 colonne --- */
@media (max-width: 1280px) {
  .keywords {
    padding-block: 60px;
    padding-inline: var(--space-lg);
  }

  .keywords__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .keywords__pill {
    font-size: 14px;
    height: 44px;
  }
}

/* --- Mobile (max-width: 768px): 2 colonne --- */
@media (max-width: 768px) {
  .keywords {
    padding-block: 48px;
    padding-inline: 20px;
  }

  .keywords__inner {
    gap: 32px;
  }

  .keywords__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .keywords__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .keywords__pill {
    font-size: 12px;
    height: 40px;
    white-space: normal;
    padding-inline: 8px;
    line-height: 1.2;
  }
}

/* --- Mobile small (max-width: 480px): 1 colonna --- */
@media (max-width: 480px) {
  .keywords__grid {
    grid-template-columns: 1fr;
  }

  .keywords__pill {
    font-size: 14px;
    height: 44px;
    white-space: nowrap;
  }
}

/* ================================================================
   12. Sezione — Countdown live
   Fonte: Figma nodo 354:2790.
   ================================================================ */

.countdown {
  background-color: var(--color-dark);
  padding-block: 80px;
}

.countdown__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 74px; /* Figma: gap 74px tra countdown e CTA */
}

.countdown__display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.countdown__label-top {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  text-align: center;
}

.countdown__timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* allineamento a destra */
  gap: 0;
}

.countdown__value {
  font-family: var(--font-primary);
  font-size: clamp(4rem, 11.9vw, 11.25rem); /* scala da 180px */
  font-weight: var(--font-weight-bold);
  line-height: 0.83; /* Figma: line-height 150px su 180px */
  letter-spacing: -5.4px; /* Figma: tracking -5.4px */
  color: var(--color-white);
  min-width: 2ch; /* evita spostamenti layout al cambio cifra */
  text-align: right;
}

.countdown__sep {
  font-family: var(--font-primary);
  font-size: clamp(4rem, 11.9vw, 11.25rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.83;
  letter-spacing: -5.4px;
  color: var(--color-white);
  padding-inline: clamp(4px, 0.8vw, 12px);
  /* I separatori : non hanno label sotto — allineamento top */
  align-self: flex-start;
}

.countdown__unit-label {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 2rem); /* scala da 32px */
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  text-align: right;     /* era center */
  letter-spacing: 0.5px;
  line-height: 1;        /* comprime lo spazio sotto il numero */
  margin-top: 0;      /* pull-up leggero per azzerare il leading del numero */
}

/* CTA wrapper — posizionamento dropdown */
.countdown__cal-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* CTA pill — identica alla pill bianca di altre sezioni */
.countdown__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 300px;
  height: 40px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-accent-dark);
  transition: opacity var(--transition-base);
}

.countdown__cta:hover {
  opacity: 0.85;
}

.countdown__cta[aria-expanded="true"] {
  opacity: 0.85;
}

/* Dropdown calendario */
.countdown__cal-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  z-index: var(--z-dropdown, 100);
  /* Animazione apertura */
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity var(--transition-base),
              transform var(--transition-base);
}

.countdown__cal-dropdown:not([hidden]) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* hidden attribute override per transizione */
.countdown__cal-dropdown[hidden] {
  display: block !important; /* mantiene visibilità per la transizione */
  pointer-events: none;
}

.countdown__cal-option {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-dark);
  text-decoration: none;
  transition: background-color var(--transition-base);
  white-space: nowrap;
}

.countdown__cal-option:hover {
  background-color: rgba(13, 22, 109, 0.06);
}

.countdown__cal-option:focus-visible {
  background-color: rgba(13, 22, 109, 0.06);
  outline: 2px solid var(--color-cyan);
  outline-offset: -2px;
}

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .countdown {
    padding-block: 60px;
  }

  .countdown__inner {
    gap: 48px;
  }

  .countdown__value,
  .countdown__sep {
    letter-spacing: -3px;
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  .countdown {
    padding-block: 48px;
  }

  .countdown__inner {
    gap: 40px;
    padding-inline: 20px;
  }

  .countdown__label-top {
    font-size: 20px;
  }

  .countdown__value,
  .countdown__sep {
    letter-spacing: -2px;
  }

  .countdown__unit-label {
    font-size: 14px;
  }

  .countdown__cta {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .countdown__timer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 24px;
    column-gap: 0;
    justify-items: center;
  }

  /* Riga 1: GIORNI : ORE */
  .countdown__unit:nth-child(1) { grid-column: 1; grid-row: 1; }
  .countdown__sep:nth-child(2)  { grid-column: 2; grid-row: 1; align-self: start; }
  .countdown__unit:nth-child(3) { grid-column: 3; grid-row: 1; }

  /* Riga 2: MINUTI : SECONDI */
  .countdown__sep:nth-child(4)  { display: none; } /* sep tra ore e minuti — nascosto */
  .countdown__unit:nth-child(5) { grid-column: 1; grid-row: 2; }
  .countdown__sep:nth-child(6)  { grid-column: 2; grid-row: 2; align-self: start; }
  .countdown__unit:nth-child(7) { grid-column: 3; grid-row: 2; }

  .countdown__value,
  .countdown__sep {
    font-size: clamp(3rem, 18vw, 4rem);
    letter-spacing: -2px;
  }
}

/* ================================================================
   13. Sezione — Call for AI Projects
   Fonte: Figma 354:2803 (1512px) + 375:1802 (393px).
   Statica: nessuno snippet, nessuna TV MIGX.
   ================================================================ */

.cfp {
  background-image: url('/assets/images/projects-background.jpg');
  background-size: cover;
  background-position: center;
  padding-block: 64px;
}

.cfp__inner {
  max-width: 1341px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
}

.cfp__content {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.cfp__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(3rem, 5.3vw, 4.5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.cfp__subtitle {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-white);
}

.cfp__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cfp__body p {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.1;
  color: var(--color-white);
}

/* Parole in evidenza — Bold + size maggiore su desktop */
.cfp__body strong {
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.1rem, 2vw, 2rem);
}

/* "Contattaci..." — Medium, non corsivo */
.cfp__body em {
  font-style: normal;
  font-weight: var(--font-weight-medium);
}

/* CTA — pill bianca identica ad altre sezioni */
.cfp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 40px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-accent-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}

.cfp__cta:hover {
  opacity: 0.85;
}

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .cfp {
    padding-block: 48px;
  }

  .cfp__inner {
    gap: 48px;
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  .cfp {
    padding-block: 64px;
    padding-inline: 0;
  }

  .cfp__inner {
    padding-inline: 16px;
    gap: 47px;
  }

  .cfp__title {
    font-size: 48px;
    letter-spacing: 0.48px;
  }

  .cfp__subtitle {
    font-size: 24px;
    letter-spacing: 0.24px;
    line-height: 1.1;
  }

  .cfp__body p {
    font-size: 16px;
    line-height: 1.3;
  }

  /* Su mobile strong torna alla stessa size del body */
  .cfp__body strong {
    font-size: 16px;
  }

  .cfp__body em {
    font-size: 16px;
    line-height: 1.3;
  }

  .cfp__cta {
    width: 100%;
    max-width: none;
  }
}

/* ================================================================
   14. Sezione — FAQ
   Fonte: Figma 354:2807 (desktop) + 375:1805 (mobile).
   Layout: 1/3 sidebar sx + 2/3 lista dx, proporzionale.
   ================================================================ */

.faq {
  background-color: var(--color-dark);
  padding: 89px var(--space-lg);
}

.faq__inner {
  max-width: 1340px;
  margin-inline: auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

/* --- Colonna sinistra: ~1/3 --- */
.faq__sidebar {
  flex: 0 0 33%;
  min-width: 220px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(3rem, 5.3vw, 5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.faq__subtitle {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.8vw, 2rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-white);
}

/* CTA Contattaci */
.faq__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  height: 47px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background-image: url('/assets/images/gradient-background.jpg');
  background-size: cover;
  background-position: center;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1px;
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.faq__cta:hover { opacity: 0.85; }

.faq__cta-icon { flex-shrink: 0; }

/* --- Colonna destra: ~2/3 --- */
.faq__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  min-width: 0;
}

/* FAQ item wrapper */
.faq__item {
  position: relative;
  background-color: var(--color-white);
  border-radius: 25px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Riga blu verticale — sempre presente, opacity 0 di default
   Transizione opacity per evitare sparizione brusca alla chiusura */
.faq__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  height: 100%;
  background-color: var(--color-ated);
  border-radius: 25px 0 0 25px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Visibile quando aperto */
.faq__item:has(.faq__question[aria-expanded="true"])::before {
  opacity: 1;
}

/* Bottone domanda */
.faq__question {
  width: 100%;
  min-height: 96px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Quando aperto: padding-left aumentato per compensare riga blu 17px */
.faq__item:has(.faq__question[aria-expanded="true"]) .faq__question {
  padding-left: 40px;
}

.faq__question span:first-child {
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.2vw, 1.25rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-text-dark, #111);
  flex: 1;
}

/* Icona + / × via CSS */
.faq__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  position: relative;
  color: var(--color-accent-dark);
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-base),
              opacity var(--transition-base);
}

.faq__icon::before {
  width: 20px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  width: 2px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq__question[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq__question[aria-expanded="true"] .faq__icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Risposta accordion */
.faq__answer {
  padding: 0 32px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow),
              padding var(--transition-slow);
}

.faq__answer:not([hidden]) {
  max-height: 500px;
  padding: 0 32px 24px;
}

/* Quando aperto: padding-left aumentato per compensare riga blu */
.faq__item:has(.faq__question[aria-expanded="true"]) .faq__answer:not([hidden]) {
  padding-left: 40px;
}

.faq__answer[hidden] {
  display: block !important;
  pointer-events: none;
}

.faq__answer p {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
}

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
  .faq {
    padding: 60px var(--space-lg);
  }

  .faq__inner {
    gap: 32px;
  }

  .faq__sidebar {
    flex: 0 0 30%;
    max-width: 320px;
  }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  .faq {
    padding: 32px 20px;
  }

  .faq__inner {
    flex-direction: column;
    gap: 32px;
  }

  .faq__sidebar {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .faq__title {
    font-size: 48px;
    line-height: 48px;
  }

  .faq__subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-variation-settings: "opsz" 14;
  }

  .faq__cta {
    width: 100%;
    max-width: none;
  }

  .faq__list { gap: 12px; }

  .faq__item { border-radius: 16px; }

  .faq__item::before {
    border-radius: 16px 0 0 16px; /* mobile: radius 16px */
  }

  .faq__question {
    min-height: auto;
    padding: 18px 16px;
  }

  .faq__item:has(.faq__question[aria-expanded="true"]) .faq__question {
    padding-left: 28px; /* compensazione ridotta su mobile */
  }

  .faq__item:has(.faq__question[aria-expanded="true"]) .faq__answer:not([hidden]) {
    padding-left: 28px;
  }

  .faq__question span:first-child {
    font-size: 16px;
  }
}

/* ================================================================
   15. Sezione — Newsletter + pre-footer
   Fonte: Figma 368:941 (desktop) + 375:1870 (mobile).
   Layout desktop: sidebar SX (order:1) + form DX (order:2).
   Layout mobile ≤1024px: logo → form → sidebar.
   ================================================================ */

.nl-section {
  background-color: var(--color-dark);
  padding: 40px var(--space-xl);
}

.nl__inner {
  max-width: 1380px;
  margin-inline: auto;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* === Logo wrapper — visibile SOLO su mobile ≤1024px === */
.nl__logo-wrap {
  display: none;
}

/* === Colonna sinistra — order:1 su desktop === */
.nl__sidebar {
  order: 1;
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nl__sidebar .nl__logo img,
.nl__logo-wrap img {
  width: 374px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Box "Powered by ated" */
.nl__powered {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: var(--color-ated);
  border-radius: 25px;
  padding: 6px 32px;
  max-width: 400px;
  overflow: hidden;
}

.nl__powered-label {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  white-space: nowrap;
  flex-shrink: 0;
}

.nl__powered img {
  width: 171px;
  max-width: 100%;
  height: auto;
  flex-shrink: 1;
  min-width: 0;
}

/* About ATED */
.nl__about {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nl__about-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2vw, 2.25rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.nl__about-body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(0.8rem, 1vw, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: var(--color-white);
}

.nl__about-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nl__about-links a {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 1.2vw, 1.25rem);
  font-weight: var(--font-weight-regular);
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nl__about-links a:hover {
  opacity: 0.8;
}

/* Social icons */
.nl__social {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nl__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: opacity var(--transition-base);
}

/* Facebook leggermente più grande degli altri */
.nl__social a.nl__social-fb {
  width: 52px;
  height: 52px;
}

.nl__social a:hover {
  opacity: 0.75;
}

/* Partner bar — full-width sotto le 2 colonne */
.nl__partners-bar {
  max-width: 1380px;
  margin-inline: auto;
  margin-top: 48px;
  padding-top: 32px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  flex-wrap: wrap;
  padding-inline: var(--space-xl);
}

.nl__partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.nl__partner-label {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--color-white);
  text-align: center;
}

.nl__partner-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  object-position: center;
}

/* === Colonna destra: form — order:2 su desktop === */
.nl__form-col {
  order: 2;
  flex: 1;
  min-width: 320px;
}

.nl__form-box {
  border: 1px solid var(--color-white);
  border-radius: 50px;
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nl__form-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2.2vw, 2.25rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  color: var(--color-white);
}

/* Form fields */
.nl__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nl__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nl__label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 1.25rem);
  font-weight: 500;
  color: var(--color-white);
  font-variation-settings: "opsz" 14;
}

.nl__input {
  height: 50px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-pill);
  padding: 0 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  color: var(--color-white);
  outline: none;
  transition: border-color var(--transition-base);
}

.nl__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.nl__input:focus {
  border-color: rgba(255, 255, 255, 0.8);
}

/* Privacy checkbox custom */
.nl__privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.nl__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.nl__checkbox-custom {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background-color var(--transition-base);
  margin-top: 2px;
}

.nl__checkbox:checked + .nl__checkbox-custom::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: 2px solid var(--color-dark);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.nl__privacy-text {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.5;
  font-variation-settings: "opsz" 14;
}

.nl__privacy-text a {
  color: var(--color-white);
  text-decoration: underline;
}

/* Submit button */
.nl__submit {
  width: 100%;
  max-width: 300px;
  height: 47px;
  border: none;
  border-radius: var(--radius-pill);
  background-image: url('/assets/images/gradient-background.jpg');
  background-size: cover;
  background-position: center;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1px;
  color: var(--color-white);
  cursor: pointer;
  align-self: center;
  transition: opacity var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nl__submit:hover {
  opacity: 0.85;
}

.nl__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Feedback message */
.nl__feedback {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 8px 0;
  border-radius: var(--radius-md);
}

.nl__feedback.is-success {
  color: #4ade80;
}

.nl__feedback.is-error {
  color: #f87171;
}

.nl__feedback:not([hidden]) {
  display: block;
}

/* --- Mobile (max-width: 1024px): stack verticale ---
   Ordine: logo → form → sidebar (powered + ATED + partner) */
@media (max-width: 1024px) {
  .nl-section {
    padding: 32px 20px;
  }

  .nl__inner {
    flex-direction: column;
    gap: 40px;
  }

  /* Logo wrapper: compare su mobile — order 1 */
  .nl__logo-wrap {
    display: block;
    order: 1;
    width: 100%;
  }

  /* Form: order 2 */
  .nl__form-col {
    order: 2;
    width: 100%;
    min-width: 0;
  }

  /* Sidebar: order 3 */
  .nl__sidebar {
    order: 3;
    flex: none;
    width: 100%;
    min-width: 0;
  }

  /* Logo dentro sidebar nascosto su mobile */
  .nl__sidebar .nl__logo {
    display: none;
  }

  .nl__powered {
    width: 100%;
    /* max-width: 400px ereditato dal blocco base */
    border-radius: 13px;
    justify-content: center;
    padding: 8px 20px;
    height: 77px;
  }

  .nl__form-box {
    border-width: 2px;
    border-radius: 24px;
    padding: 24px 28px;
    gap: 24px;
  }

  .nl__form-title {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: 0.5px;
  }

  .nl__label {
    font-size: 16px;
  }

  .nl__input {
    height: 44px;
    font-size: 16px;
  }

  .nl__checkbox-custom {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }

  .nl__privacy-text {
    font-size: 14px;
  }

  .nl__submit {
    width: 100%;
    max-width: none;
  }

  .nl__partners-bar {
    gap: 40px;
    padding-inline: 20px;
    margin-top: 32px;
    padding-top: 24px;
  }

  .nl__partner-label {
    font-size: 20px;
  }

  .nl__about-title {
    font-size: 32px;
  }

  .nl__about-body {
    font-size: 14px;
  }

  .nl__about-links a {
    font-size: 20px;
  }
}

/* ================================================================
   16. Sezione — Biglietti (alf.io)
   Fonte: Figma 354:2683 (desktop) + 375:1643 (mobile).
   Robot desktop: absolute sulla sezione, ancorato al border-bottom.
   Robot mobile: in flow, dopo le card (order:3).
   Breakpoint: ≤1280px stack verticale.
   ================================================================ */

.tickets {
  background-color: var(--color-dark);
  padding: 48px 48px 80px;
  border-bottom: 5px solid var(--color-accent-dark);
  position: relative;
}

.tickets__inner {
  max-width: 1380px;
  margin-inline: auto;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.tickets__header {
  flex: 1;
  min-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* titolo e location vicini */
}

.tickets__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5.3vw, 5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--color-white);
}

.tickets__location {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-white);
}

/* Robot desktop: absolute sulla sezione, ancorato al border-bottom */
.tickets__robot--desktop {
  position: absolute;
  bottom: 5px;
  left: 24px;
  width: clamp(420px, 37vw, 600px); /* scala con il viewport */
  display: block;
  pointer-events: none;
  z-index: 0;
}

.tickets__robot--desktop img {
  width: 100%;
  height: auto;
  display: block;
}

/* Robot mobile: in flow, nascosto su desktop */
.tickets__robot--mobile {
  display: none;
}

.tickets__robot--mobile img {
  width: 100%;
  height: auto;
  display: block;
}

/* Colonna destra: leggermente più stretta con max-width */
.tickets__cards {
  flex: 0 0 780px;
  max-width: 780px; /* stringe leggermente la colonna dx */
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.tickets__loading {
  color: var(--color-white);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  padding: 48px;
  text-align: center;
}

/* Card biglietto */
.ticket-card {
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  height: 350px;
}

.ticket-card--disabled {
  opacity: 0.6;
}

.ticket-card__info {
  flex: 1;
  padding: 20px 20px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-width: 0;
}

.ticket-card__name {
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2.5vw, 2.5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.45px;
  color: var(--color-white);
}

.ticket-card__desc {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 400;
  line-height: 1.42;
  color: var(--color-white);
}

.ticket-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  color: var(--color-white);
  line-height: 1.25;
}

.ticket-card__feature-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-accent-dark);
}

/* Colonna prezzo */
.ticket-card__price-col {
  width: 232px;
  flex-shrink: 0;
  border-left: 2px dashed var(--color-white);
  border-radius: 0 25px 25px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 16px 16px 17px;
}

.ticket-card__price-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/gradient-background.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ticket-card__price-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(13, 22, 109, 0.5);
  z-index: 1;
}

.ticket-card__price-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  justify-content: space-between;
}

.ticket-card__badge {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1;
}

.ticket-card__qty-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-card__qty-label,
.ticket-card__total-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-white);
  font-variation-settings: "opsz" 14;
  text-transform: uppercase;
}

.ticket-card__qty-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-card__qty-btn {
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: opacity var(--transition-base);
}

.ticket-card__qty-btn:hover { opacity: 0.7; }
.ticket-card__qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ticket-card__qty-value {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  min-width: 2ch;
  text-align: center;
}

.ticket-card__total-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticket-card__price {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1.2;
}

.ticket-card__price-vat {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 300;
  color: var(--color-white);
}

.ticket-card__price-original {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
}

.ticket-card__note {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--color-white);
  line-height: 1.33;
  font-variation-settings: "opsz" 14;
}

.ticket-card__available-from {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px 8px;
  display: inline-block;
}

/* CTA per card */
.ticket-card__cta-wrap {
  padding-top: 8px;
}

.ticket-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  color: var(--color-accent-dark);
  transition: opacity var(--transition-base);
  white-space: nowrap;
}

.ticket-card__cta:hover:not(:disabled) { opacity: 0.85; }
.ticket-card__cta:disabled { opacity: 0.4; cursor: not-allowed; }

/* Errore prenotazione */
.tickets__error {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #f87171;
  margin-top: 8px;
}

.tickets__error:not([hidden]) { display: block; }

/* --- Stack verticale (max-width: 1280px) --- */
@media (max-width: 1280px) {
  .tickets { padding: 40px 24px 0; }

  .tickets__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .tickets__header {
    width: 100%;
  }

  .tickets__robot--desktop { display: none; }

  .tickets__robot--mobile {
    display: block;
    order: 3;
    width: 100%;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .tickets__robot--mobile img {
    max-width: 380px;
    margin-inline: auto;
  }

  .tickets__cards {
    flex: none;
    width: 100%;
    max-width: 780px;      /* stessa larghezza del desktop */
    margin-inline: auto;   /* centra le card nella pagina */
  }

  .ticket-card__name { font-size: 28px; }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
  .tickets { padding: 33px 21px 0; }
  .tickets__title { font-size: 48px; line-height: 1; }
  .tickets__location { font-size: 24px; }

  .ticket-card {
    flex-direction: column;
    height: auto;
    border-radius: 20px;
  }

  .ticket-card__info { padding: 16px; }
  .ticket-card__name { font-size: 24px; }
  .ticket-card__desc,
  .ticket-card__feature { font-size: 14px; }

  .ticket-card__price-col {
    width: 100%;
    border-left: none;
    border-top: 2px dashed var(--color-white);
    border-radius: 0 0 20px 20px;
    min-height: 180px;
  }

  .ticket-card__badge { font-size: 20px; }
  .ticket-card__price { font-size: 24px; }
  .ticket-card__price-original { font-size: 18px; }
  .ticket-card__qty-value,
  .ticket-card__qty-btn { font-size: 22px; }

  .tickets__robot--mobile img { max-width: 280px; }
}