/* ==========================================================================
   AgriUmbria — landing 2027
   Geometrie misurate sul pixel da references/AU_Landingpage.jpg (scala 2:1):
     topbar h43 · hero fino a y794, radius 56 · Biglietti 160x48 radius 12
     categorie 1341x593 radius 58 · wordmark 676x378
     sponsor h94 (dentro gutter) · gallery h299 · partner h88 (full bleed)
     frecce gallery 60x60 radius 16, inset 20 · footer radius 22
   Palette: SOLO i cinque colori di references/palette.txt.
   ========================================================================== */

:root {
  --au-green-light: #45AB34;
  --au-green-dark:  #024C31;
  --au-black:       #000000;
  --au-grey:        #EDEEEF;
  --au-white:       #FFFFFF;
  --au-gutter:    50px;
  --au-container: 1440px;
  --au-radius-hero:   56px;
  --au-radius-cats: 56px;
  --au-radius-footer: 56px;
  --au-radius-btn:    12px;
  --au-radius-arrow:  11px;
  /* Angoli inferiori dell'header, uguali su landing e catalogo. Token a se'
     stante: --au-radius-hero lo usano anche la hero e .cta-band::before, che
     devono restare a 56px. */
  --au-radius-header: 35px;
  /* Altezza dell'header: padding 17+19 + logo. Costante per scelta (non
     cambia in scroll). Serve alla hero per non mandare il contenuto sotto
     l'header, che essendo fixed non occupa spazio nel flusso. */
  --au-header-h: 55px;
  /* Altezza della topbar: l'header fixed parte da qui per non coprirla. */
  --au-topbar-h: 43px;

  /* Hover delle CTA: una sola durata e una sola curva per TUTTI i bottoni,
     testo, fondo, bordo e freccia insieme. La curva parte decisa (primo
     valore alto) cosi' il colore compare subito invece di trapelare. */
  --au-hover: .15s cubic-bezier(.3, 0, .2, 1);

  /* Font brand: Ratio, lo stesso di UmbriaFiere (assets/font/). */
  --au-font: "Ratio", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Font brand: Ratio (da UmbriaFiere) --------------------------- */

@font-face {
  font-family: 'Ratio';
  src: url('assets/font/RatioHair.woff2') format('woff2'),
       url('assets/font/RatioHair.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ratio';
  src: url('assets/font/RatioThin.woff2') format('woff2'),
       url('assets/font/RatioThin.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ratio';
  src: url('assets/font/RatioLight.woff2') format('woff2'),
       url('assets/font/RatioLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ratio';
  src: url('assets/font/RatioRegular.woff2') format('woff2'),
       url('assets/font/RatioRegular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Ratio';
  src: url('assets/font/RatioMedium.woff2') format('woff2'),
       url('assets/font/RatioMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Ratio';
  src: url('assets/font/RatioBold.woff2') format('woff2'),
       url('assets/font/RatioBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Ratio';
  src: url('assets/font/RatioBlack.woff2') format('woff2'),
       url('assets/font/RatioBlack.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* stessa catena di UmbriaFiere (--font-display), senza il font proprietario Ratio */
  font-family: var(--au-font);
  color: var(--au-black);
  background: var(--au-white);
  /* clip e non hidden: hidden rende il body un contenitore di scroll e
     position: sticky smette di agganciarsi al viewport (l'header uscirebbe
     dallo schermo). clip taglia l'overflow senza creare quel contesto. */
  overflow-x: clip;                 /* nessun overflow orizzontale, mai */
}

img { max-width: 100%; }

a { color: var(--au-green-dark); text-decoration: none; }
a:hover { color: var(--au-green-light); }

.au-container {padding-inline: var(--au-gutter);}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Page-load blur (come UmbriaFiere) ---------------------------- */
/* Velo leggero finche' i font Ratio non sono in memoria: evita il lampo di
   testo con il font di sistema (font-display: block). Lo toglie main.js. */

.au-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: color-mix(in srgb, var(--au-green-dark) 22%, transparent);
  opacity: 0;                       /* a riposo invisibile: se il JS non parte,
                                       la pagina non resta mai velata */
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.2, .7, .2, 1),
              backdrop-filter .35s cubic-bezier(.2, .7, .2, 1);
}
body.is-loading { overflow: hidden; }
body.is-loading .au-page-overlay {
  opacity: 1;                       /* il velo e' il background stesso: il suo
                                       alpha e' nel colore, non nell'opacity,
                                       cosi' il blur non viene sbiadito via */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
  .au-page-overlay { transition: none; }
}


/* ---------- BOTTONI (sistema condiviso) --------------------------------- */
/* Tre varianti dal reference:
   --solid        bianco su verde (header, banda, espositori)
   --ghost        trasparente, bordo+testo verde scuro; in hover diventa pieno
                  (nella proposta il 1° comunicato e' mostrato IN HOVER)
   --ghost-light  trasparente su fondo verde, bordo+testo bianchi (header) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: var(--au-radius-btn);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--au-hover),
              color var(--au-hover),
              border-color var(--au-hover);
}
.btn--solid {background: var(--au-white);color: var(--au-green-dark);border: 0;}
.btn--solid:hover, .btn--solid:focus-visible {
  background: var(--au-green-dark); color: var(--au-white); border-color: var(--au-white);
}
.btn--ghost-light { background: transparent; color: var(--au-white); border-color: var(--au-white); }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible {
  background: var(--au-white); color: var(--au-green-dark);
}
.btn--ghost { background: transparent; color: var(--au-green-dark); border-color: var(--au-green-dark); }
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--au-green-dark); color: var(--au-white);
}

/* Freccia: la foglia del brand. Colorata con una MASK, non con un filter:
   il filtro puo' solo approssimare un colore, la mask lo prende esatto dalla
   palette (la foglia sorgente e' verde CHIARO, qui serve verde SCURO). */
/* Bottoni con icona: testo a sinistra, freccia all'estrema destra.
   Misurato nel reference: banda 320x60, freccia a ~25px dal bordo. */
.btn--arrow {
  justify-content: space-between;
  gap: 28px;
  min-width: 260px;
  min-height: 50px;
}

/* La freccia e' la foglia del brand ritagliata con una MASK: il colore lo da'
   il background, preso dai token di palette (mai valori calcolati).
   La mask serve perche' l'SVG sorgente e' verde CHIARO e qui serve SCURO. */
.btn__arrow {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--au-green-dark);
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20222.92%20222.92%22%3E%3Cpath%20d=%22M222.92,111.46h0c0,24.56-16.72,45.98-40.55,51.94-10.07,2.51-19.75,6.4-28.76,11.56l-72.25,41.29c-7.66,4.37-16.32,6.67-25.14,6.67h-5.54C22.7,222.92.02,200.24.02,172.26c0-11.96,5.62-23.22,15.19-30.4,20.27-15.19,20.27-45.6,0-60.79C5.62,73.88,0,62.62,0,50.66,0,22.68,22.68,0,50.66,0h4.38c9.58,0,19,2.5,27.31,7.25l71.25,40.71c9.02,5.16,18.7,9.05,28.76,11.56,23.84,5.96,40.55,27.37,40.55,51.94%22/%3E%3C/svg%3E') center / contain no-repeat;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20222.92%20222.92%22%3E%3Cpath%20d=%22M222.92,111.46h0c0,24.56-16.72,45.98-40.55,51.94-10.07,2.51-19.75,6.4-28.76,11.56l-72.25,41.29c-7.66,4.37-16.32,6.67-25.14,6.67h-5.54C22.7,222.92.02,200.24.02,172.26c0-11.96,5.62-23.22,15.19-30.4,20.27-15.19,20.27-45.6,0-60.79C5.62,73.88,0,62.62,0,50.66,0,22.68,22.68,0,50.66,0h4.38c9.58,0,19,2.5,27.31,7.25l71.25,40.71c9.02,5.16,18.7,9.05,28.76,11.56,23.84,5.96,40.55,27.37,40.55,51.94%22/%3E%3C/svg%3E') center / contain no-repeat;
  /* Stessa durata e curva del bottone: la freccia e' un elemento a parte,
     senza questa riga saltava al bianco mentre il testo sfumava (sfasatura). */
  transition: background-color var(--au-hover);
}
/* hover: bianca su tutte le CTA con icona */
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { background-color: var(--au-white); }

/* --- hover specifici per singola CTA ------------------------------------- */

/* header, "Entra in FarFiera": in hover prende il BORDO verde scuro
   (le altre .btn--solid prendono il bordo bianco) */
.header__farfiera:hover,
.header__farfiera:focus-visible {
  border-color: var(--au-green-dark);
}
/* Header in scroll: il fondo e' verde scuro, quindi l'hover verde scuro
   sparirebbe. Qui passa a verde CHIARO. Solo dove c'e' un cursore vero:
   @media (hover: none) piu' sotto azzera comunque gli stati su touch. */
.header.is-stuck .header__farfiera:hover,
.header.is-stuck .header__farfiera:focus-visible,
.au-prescrolled .header .header__farfiera:hover,
.au-prescrolled .header .header__farfiera:focus-visible,
.header--solid .header__farfiera:hover,
.header--solid .header__farfiera:focus-visible {
  background: var(--au-green-light);
  border-color: var(--au-green-light);
  color: var(--au-white);
}

/* banda + card espositori, "Entra in FarFiera": in hover fondo e bordo
   verde CHIARO (le altre .btn--solid diventano verde scuro) */
.cta-band .btn--solid:hover,
.cta-band .btn--solid:focus-visible,
.exhibitors .btn--solid:hover,
.exhibitors .btn--solid:focus-visible {
  background: var(--au-green-light);
  border-color: var(--au-green-light);
  color: var(--au-white);
}

/* su fondo verde (header) la freccia e' gia' bianca a riposo */
.btn--ghost-light .btn__arrow { background-color: var(--au-white); }
.btn--ghost-light:hover .btn__arrow { background-color: var(--au-green-dark); }

/* ---------- HEADER: 3 azioni -------------------------------------------- */

.header__actions {display: flex;align-items: center;gap: 3rem;}
.header__link {
  color: var(--au-white);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-underline-offset: 2px;
}
.header__link:hover { color: var(--au-white); text-decoration: underline; }

/* ---------- BANDA "Vuoi partecipare" (full-bleed) ----------------------- */
/* Misurata: y795-943, verde scuro a tutta larghezza, subito sotto la hero */

.cta-band {
  position: relative;
  background: var(--au-green-dark);
}
/* Risale dietro la hero per riempire gli angoli lasciati scoperti dal
   border-radius: senza, si vedono due spicchi bianchi sotto la curva.
   Alto quanto il raggio della hero, e dietro (z-index negativo). */
.cta-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--au-radius-hero);
  background: var(--au-green-dark);
  z-index: -1;
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 34px;
}
.cta-band__title {
  margin: 0;
  color: var(--au-white);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.2;
}

/* ---------- INTRO: colonna testo + colonna statistiche ------------------ */

/* Grafici storici: e' l'immagine assets/jpg/brochure-espositori_img.jpg
   (il nome dice "brochure" ma sono i due grafici). Ratio 1782x918. */
.stats-img {
  display: block;
  width: 100%;
  height: 17rem;
  /* contain: l'immagine rientra nell'altezza senza essere tagliata ne'
     deformata. Sono grafici: un cover perderebbe numeri e assi, un height
     secco senza object-fit li schiaccerebbe.
     Vale solo qui, dove la colonna e' stretta: da responsive l'aside occupa
     tutta la larghezza e l'immagine torna alla sua altezza naturale. */
  object-fit: contain;
  object-position: left center;
  margin-top: 36px;
}

.intro__aside-title {
  margin: 0 0 7px;
  color: var(--au-black);
  font-size: 18px;
  font-weight: 700;
}
.au-list--dark li { color: var(--au-black); font-weight: 400; font-size: 17px; }
.au-list--dark { --au-bullet: var(--au-green-dark); }   /* foglia verde, non bianca */


/* ---------- COMUNICATI STAMPA ------------------------------------------- */

.press { padding-block: 88px; }
.press__heading {
  margin: 0px 0 25px;
  color: var(--au-green-dark);
  font-size: clamp(1.6rem, 3vw, 44px);
  font-weight: 500;
}
.press__list { display: flex; flex-direction: column; gap: 18px; }
.press__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rem;
  padding: 26px 30px;
  border: 2px solid var(--au-grey);
  border-radius: 16px;
}
.press__body { min-width: 0; }
.press__date {
  margin: 0 0 10px;
  color: var(--au-green-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.press__title {
  margin: 0;
  color: var(--au-green-dark);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}
.press__item .btn { flex: none; }

/* ---------- ESPOSITORI -------------------------------------------------- */
/* Misurato: blocco verde scuro dentro il gutter (x50..1388), y3408-3780 */

/* il gutter laterale lo da' .au-container (responsive): qui solo lo spazio
   verticale, altrimenti una shorthand `padding` lo bloccherebbe a un valore fisso */
/* nessun padding sotto: lo spazio bianco attorno ai loghi lo da' gia'
   .logo-strip--partner, e dev'essere uguale sopra e sotto */
.exhibitors { padding-block: 0; }
.exhibitors__card {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: center;
  background: var(--au-green-dark);
  border-radius: var(--au-radius-cats);
  padding: 56px 74px;
}
.exhibitors__text { color: var(--au-white); min-width: 0; }
.exhibitors__title {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 3.4vw, 44px);
  font-weight: 500;
}
.exhibitors__text p {margin: 0px 0 5px;font-size: 18px;line-height: 1.6;}
.exhibitors__text .au-list {margin-bottom: 45px;}
.exhibitors__text .au-list li {font-size: 18px;font-weight: 400;}
.exhibitors__ask {font-weight: 400;margin-bottom: 18px!important;}
/* nel reference il bottone occupa tutta la colonna di testo */
/* a desktop misura standard come gli altri bottoni (.btn--arrow 320x60);
   a tutta larghezza solo da mobile, dove la card e' in colonna singola */
.exhibitors__text .btn { display: inline-flex; }
.exhibitors__shot { display: block; }
.exhibitors__shot:hover { opacity: .92; }
.exhibitors__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;          /* l'immagine e' verticale 876x1266: senza tetto
                                 fa esplodere l'altezza della card */
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
}

/* ---------- FOOTER: contatti (sostituiscono la topbar da mobile) -------- */

.footer__contacts {
  display: none;                     /* solo da tablet verticale in giu' */
  gap: 32px;
  padding-bottom: 36px;
  color: var(--au-white);
  font-size: 14px;
  line-height: 1.6;
}
.footer__contacts p { margin: 0; }
.footer__contact-label { font-weight: 400; margin-bottom: 6px !important; }
.footer__contact-value { font-weight: 400; }
.footer__contact-value strong { font-weight: 700; }
.footer__contacts a { color: var(--au-white); }

/* CTA del catalogo nel footer mobile: fondo verde scuro, testo e freccia
   bianchi. Vive dentro .footer__contacts, quindi compare solo dove compaiono
   i contatti (tablet verticale in giu'). */
.footer__cta {
  /* .footer__contacts e' display:block da mobile: senza flex + width il
     bottone resterebbe stretto quanto il testo */
  display: flex;
  width: 100%;
  margin-top: 26px;
  background: var(--au-green-dark);
  border-color: var(--au-green-dark);
  color: var(--au-white);
  text-decoration: none;
}
.footer__cta .btn__arrow { background-color: var(--au-white); }
.footer__cta:hover,
.footer__cta:focus-visible {
  background: var(--au-green-light);
  border-color: var(--au-green-light);
  color: var(--au-white);
}
.footer__cta:hover .btn__arrow,
.footer__cta:focus-visible .btn__arrow { background-color: var(--au-white); }

/* ---------- 0. TOPBAR --------------------------------------------------- */

.topbar {
  background: var(--au-green-dark);
  color: var(--au-white);
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}
.topbar__info {display: flex;align-items: center;gap: 16px;flex-wrap: wrap;font-weight: 200;}
/* le due CTA della topbar compaiono solo da tablet verticale in giu':
   a desktop gli stessi comandi stanno nell'header */
.topbar__cta {display: none;color: var(--au-white);font-weight: 400;white-space: nowrap;}
.topbar__cta:hover { color: var(--au-white); text-decoration: underline; }
.topbar__sep { opacity: .5; }
.topbar a { color: var(--au-white); }
.topbar__reserved {text-decoration: underline;font-weight: 500;white-space: nowrap;}

/* ---------- 1+2. HEADER over HERO ---------------------------------------- */

/* Header e hero occupano la STESSA cella di griglia: si sovrappongono senza
   margini negativi e senza che il JS misuri nulla, quindi all'ingresso non
   c'e' nessuno scatto. L'header e' sopra (z-index) e resta sticky. */

.hero {
  position: relative;
  min-height: 93vh;
  display: flex;
  flex-direction: column;
  /* l'header e' fixed (fuori dal flusso): senza questo spazio il contenuto
     della hero finirebbe sotto di lui */
  padding-top: var(--au-header-h);
  background-color: var(--au-green-dark);
  background-image: url("assets/jpg/au_hero_background.jpg");
  background-size: cover;
  background-position: center bottom -4rem;
  border-bottom-left-radius: var(--au-radius-hero);
  border-bottom-right-radius: var(--au-radius-hero);
  overflow: hidden;
}

/* HEADER FISSO — stesso schema dell'header di UmbriaFiere (.site-header).
   position: fixed lo toglie dal flusso: galleggia sulla hero senza spingerla,
   quindi niente wrapper, niente margini negativi, niente altezza misurata dal
   JS (era quella a causare la riga bianca all'ingresso).
   Resta trasparente sopra la hero e prende il fondo verde scuro allo scroll,
   via .is-stuck. */
.header {
  position: fixed;
  /* Parte SOTTO la topbar (che sta nel flusso e scorre via) e sale a 0 appena
     la si supera: cosi' non la copre mai. La transizione del top rende il
     passaggio fluido invece che a scatto. */
  top: var(--au-topbar-h);
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  border-bottom-left-radius: var(--au-radius-header);
  border-bottom-right-radius: var(--au-radius-header);
  transition: background-color var(--au-hover), box-shadow var(--au-hover),
              top var(--au-hover);
}
/* Superata la topbar l'header si appoggia al bordo.
   .au-prescrolled arriva da uno script inline nel <head>: ricaricando a meta'
   pagina lo stato e' gia' quello giusto al primo paint, senza aspettare il JS
   (altrimenti si vedrebbe un fotogramma di header trasparente su bianco). */
.header.is-stuck,
.au-prescrolled .header { top: 0; }
/* Altezza costante: allo scroll cambiano solo fondo e ombra, mai le misure. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 17px;
  padding-bottom: 19px;
}
/* Allo scroll cambiano SOLO fondo e ombra: l'altezza resta quella, cosi' la
   transizione e' fluida e la hero non si disallinea mai. */
.header.is-stuck,
.au-prescrolled .header {
  background-color: var(--au-green-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
/* Pagine SENZA hero (cookie, privacy): sotto l'header non c'e' una foto ma il
   bianco, quindi l'header e' verde fin dall'inizio. Sticky e non fixed: resta
   nel flusso subito sotto la topbar (il contenuto non ci finisce sotto, senza
   dover conoscere la sua altezza) e si aggancia in alto allo scroll.
   Funziona perche' body ha overflow-x: clip, non hidden. L'ombra la aggiunge
   .is-stuck allo scroll, come sulla landing. */
.header--solid {
  position: sticky;
  top: 0;
  background-color: var(--au-green-dark);
}
.header__logo { display: block; flex: none; }
.header__logo img {display: block;width: 150px;height: auto;}

.btn-tickets {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 160px;
  height: 48px;
  background: var(--au-white);
  color: var(--au-green-dark);
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--au-radius-btn);
}
.btn-tickets {
  transition: background-color var(--au-hover),
              color var(--au-hover),
              border-color var(--au-hover);
}
.btn-tickets:hover,
.btn-tickets:focus-visible {
  background: var(--au-green-dark);
  color: var(--au-white);            /* lo <svg> usa currentColor: diventa bianco */
}
.btn-tickets svg { flex: none; }

.hero__body {
  flex: 1;
  /* 3 colonne: sinistra (data sopra, lista sotto) / wordmark / claim.
     Griglia e non flex: il layout mobile si riscrive cambiando solo le
     grid-template-areas, senza toccare l'ordine nel DOM. */
  display: grid;
  grid-template-columns: 20% 1fr 34%;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "date  mark claim"
    "list  mark claim";
  column-gap: 24px;
  align-items: stretch;
  padding-top: 4rem;
  padding-bottom: 5rem;
}

/* La data e' SORELLA di .hero__col-left, non figlia: nel layout mobile deve
   stare in cima, staccata dalla lista che resta in fondo (hero_mobile.png). */
.hero__col-left {
  grid-area: list;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--au-white);
}
/* separatore: invisibile quando la data e' su due righe, diventa lo spazio
   fra "Aprile" e "2027" quando a mobile il <br> viene neutralizzato */
.hero__date-sep { display: none; }

.hero__date {
  grid-area: date;
  color: var(--au-white);
  font-size: clamp(1.75rem, 3.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
}
.hero__kicker {font-size: 20px;font-weight: 300;margin-bottom: 12px;}

/* Liste con la foglia del brand come bullet.
   La foglia e' ritagliata con una MASK, non caricata come immagine di sfondo:
   cosi' il colore lo da' --au-bullet e si adatta al fondo su cui sta la lista,
   con un solo SVG invece di una copia per ogni colore. Stesso meccanismo di
   .btn__arrow. Il colore e' sempre un token di palette, mai calcolato. */
.au-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  --au-bullet: var(--au-green-light);   /* default: fondo chiaro */
}
.au-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 400;
}
.au-list li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--au-bullet);
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20222.92%20222.92%22%3E%3Cpath%20d=%22M222.92,111.46h0c0,24.56-16.72,45.98-40.55,51.94-10.07,2.51-19.75,6.4-28.76,11.56l-72.25,41.29c-7.66,4.37-16.32,6.67-25.14,6.67h-5.54C22.7,222.92.02,200.24.02,172.26c0-11.96,5.62-23.22,15.19-30.4,20.27-15.19,20.27-45.6,0-60.79C5.62,73.88,0,62.62,0,50.66,0,22.68,22.68,0,50.66,0h4.38c9.58,0,19,2.5,27.31,7.25l71.25,40.71c9.02,5.16,18.7,9.05,28.76,11.56,23.84,5.96,40.55,27.37,40.55,51.94%22/%3E%3C/svg%3E') center / contain no-repeat;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20222.92%20222.92%22%3E%3Cpath%20d=%22M222.92,111.46h0c0,24.56-16.72,45.98-40.55,51.94-10.07,2.51-19.75,6.4-28.76,11.56l-72.25,41.29c-7.66,4.37-16.32,6.67-25.14,6.67h-5.54C22.7,222.92.02,200.24.02,172.26c0-11.96,5.62-23.22,15.19-30.4,20.27-15.19,20.27-45.6,0-60.79C5.62,73.88,0,62.62,0,50.66,0,22.68,22.68,0,50.66,0h4.38c9.58,0,19,2.5,27.31,7.25l71.25,40.71c9.02,5.16,18.7,9.05,28.76,11.56,23.84,5.96,40.55,27.37,40.55,51.94%22/%3E%3C/svg%3E') center / contain no-repeat;
}

/* Le due liste su fondo verde hanno ciascuna il proprio colore di foglia.
   Hero: verde CHIARO su desktop; su mobile e tablet diventa verde SCURO
   (regola in ogni blocco device + nella base <=834 come rete di sicurezza). */
.hero .au-list { --au-bullet: var(--au-green-light); }
.exhibitors__text .au-list { --au-bullet: var(--au-green-light); }

/* la colonna centrale e' larga quanto le laterali sommate non e' centrata:
   per centrarla davvero le tre colonne devono essere 26% / 34% / 26% + gap,
   con il wordmark centrato dentro la sua. */
.hero__wordmark {
  grid-area: mark;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__wordmark img {display: block;width: min(360px, 100%);height: auto;}

.hero__payoff {
  grid-area: claim;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 56px;          /* leggermente piu' in alto, come nel reference */
}
.hero__payoff p {
  margin: 0;
  color: var(--au-white);
  font-size: clamp(2.5rem, 6.6vw, 5.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: right;
  white-space: nowrap;          /* "dalla filiera" / "al sistema": 2 righe, mai 3 */
}
/* nel reference la prima riga rientra di ~52px rispetto alla seconda */
.hero__payoff-line1 {
  display: inline-block;
  margin-right: clamp(20px, 3.6vw, 52px);
}

/* ---------- 3. INTRO ----------------------------------------------------- */

.intro { padding-top: 100px; }
.intro__title {
  margin: 0 0 55px;
  color: var(--au-green-dark);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}
.intro__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
}
.intro__text p {margin: 0 0 24px;font-size: 18px;line-height: 29px;}
.intro__text p:last-child { margin-bottom: 0; }

/* ---------- 4. CARD CATEGORIE -------------------------------------------- */

.categories { padding-block: 97px 88px; }   /* nel reference la gallery non tocca la card */
.categories__card {
  background-color: var(--au-green-dark);
  background-image: url("assets/jpg/au_background_sfumatura.jpg");
  background-size: cover;
  background-position: center;
  border-radius: var(--au-radius-cats);
  padding: 74px;
}
.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 86px;
}
.category { color: var(--au-white); }
.category__icon { display: block; width: 168px; height: 168px; object-fit: contain; }
.category h3 {
  margin: 26px 0 22px;
  font-size: clamp(24px, 2.4vw, 40px);
  font-weight: 500;
}
.category p {margin: 0;font-size: 18px;line-height: 26px;font-weight: 300;}

/* ---------- 5+7. MARQUEE LOGHI (sponsor / partner) ------------------------ */
/* Struttura e comportamento da references/script/uf-marquee-gallery.
   AU: loghi a COLORI (niente grayscale).

   ATTENZIONE — due vincoli che rompono il loop in silenzio:
   1) il track deve avere un numero PARI di figli (copie identiche), altrimenti
      initSeamlessMarquee esce senza errore;
   2) META' TRACK DEVE ESSERE PIU' LARGA DEL VIEWPORT. halfWidth e' la distanza
      fra il primo figlio e quello a meta': se e' minore della finestra, il track
      si riavvolge mentre c'e' ancora schermo vuoto -> BUCO visibile nel loop.
      Lo sponsor ha solo 6 loghi, per questo ne servono 4 COPIE (24 figli);
      il partner ne ha 11 e gli bastano 2 copie (22 figli).
      Se si riducono width/gap dei loghi, RIVERIFICARE questo vincolo.

   I PNG sono tutti 600x470 con ampi margini TRASPARENTI (contenuto alto 72-262px):
   parte dello spazio fra i loghi arriva da li', non dal gap. */

.logo-strip { padding: 50px 0; }
.logo-strip--partner {padding: 80px 0;}

.logo-strip__track-wrap {
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.logo-strip__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  /* Nessuna animazione CSS di default: il marquee lo muove GSAP.
     Il fallback @keyframes si accende solo con html.no-gsap (vedi <head>),
     cioe' quando GSAP non e' disponibile. Se girassero insieme, il passaggio
     di consegne farebbe un salto visibile all'avvio. */
}
/* i loghi sono link (come UF): il wrapper <a> porta la larghezza */
.logo-strip__track a {
  flex: none;
  width: 176px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Hover: leggero ingrandimento del singolo logo.
   Lo scale sta sull'<a>, mentre GSAP anima il transform del .track: elementi
   diversi, quindi non si sovrascrivono. */
.logo-strip__track a { transition: transform .3s ease; }
.logo-strip__track a:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track a:hover { transform: none; }
}

/* La PAUSA del marquee all'hover: la gestisce initSeamlessMarquee via
   mouseenter/mouseleave sul wrapper, piu' questo fallback CSS. */
.logo-strip:hover .logo-strip__track { animation-play-state: paused; }
html.no-gsap .logo-strip__track { animation: auScroll 28.5s linear infinite; }

.logo-strip__track img {
  flex: none;
  display: block;
  width: 100%;
  height: 96px;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;   /* il drag del marquee passa all'<a>/wrapper, non all'img */
}

@keyframes auScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 6. GALLERY --------------------------------------------------- */

.gallery { position: relative; height: 299px; }
.gallery__track {
  display: flex;
  gap: 16px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  cursor: grab;
  padding-inline: var(--au-gutter);   /* AU: la prima slide non tocca il bordo */
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; }

.gallery__cell {
  flex: 0 0 calc((100% - 2 * var(--au-gutter) - 32px) / 3);
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
}
.gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: var(--au-radius-arrow);
  background: var(--au-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: opacity .25s;
}
.gallery__arrow img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);     /* foglia bianca */
}
.gallery__arrow--prev { left: 20px; }
.gallery__arrow--prev img { transform: rotate(180deg); }
.gallery__arrow--next { right: 20px; }
.gallery__arrow:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- 8. FOOTER ---------------------------------------------------- */

.footer {
  background-color: var(--au-green-dark);
  background-image: url("assets/jpg/au_background_footer.jpg");
  background-size: cover;
  background-position: top left;
  border-top-left-radius: var(--au-radius-footer);
  border-top-right-radius: var(--au-radius-footer);
  color: var(--au-white);
}
.footer__main {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-top: 60px;
  padding-bottom: 56px;
}
.footer__logo { display: block; flex: none; width: 430px; }
.footer__logo img { display: block; width: 132px; height: auto; }
.footer__claim {font-size: 20px;line-height: 1.55;font-weight: 300;}
.footer__claim-text { font-weight: 500; }

.footer__legal {
  background: transparent;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 13px;
  font-weight: 300;
}
.footer__legal a { color: var(--au-white); text-decoration: underline; }
.footer__legal .topbar__sep { opacity: .45; }

/* pagina interna: header verde senza hero */
.page-header {
  background: var(--au-green-dark);
  padding-bottom: 26px;
  border-bottom-left-radius: var(--au-radius-footer);
  border-bottom-right-radius: var(--au-radius-footer);
}

/* ---------- Pagine legali (privacy / cookie) ----------------------------- */

.legal { padding-top: 72px; padding-bottom: 96px; }
.legal h1 {
  margin: 0 0 12px;
  color: var(--au-green-dark);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
}
.legal__updated { margin: 0 0 40px; font-size: 14px; opacity: .7; }
.legal h2 {
  margin: 44px 0 14px;
  color: var(--au-green-dark);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
}
.legal p, .legal li { font-size: 16px; line-height: 1.7; }
.legal ul { padding-left: 22px; }
/* elementi dell'informativa privacy (struttura del .docx di Umbriafiere) */
.legal h3 { margin: 28px 0 10px; color: var(--au-green-dark); font-size: clamp(17px, 1.6vw, 19px); font-weight: 700; }
.legal__subtitle { margin: 0 0 28px; }
.legal__sep { margin: 32px 0 0; text-align: center; letter-spacing: .4em; }
.legal__signature { margin-top: 48px; text-align: right; }
.legal__todo {
  background: var(--au-grey);
  border-left: 4px solid var(--au-green-light);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 15px;
  line-height: 1.65;
}
.legal__table-wrap { overflow-x: auto; margin: 20px 0; }
.legal table { border-collapse: collapse; width: 100%; font-size: 15px; }
/* il minimo di larghezza solo per le tabelle scritte da noi, dentro il loro
   contenitore scorrevole: applicato a tutte, la tabella generata da Cookiebot
   uscirebbe dallo schermo su telefono */
.legal__table-wrap table { min-width: 520px; }
.legal a { color: var(--au-green-dark); text-decoration: underline; }
.legal a:hover { color: var(--au-green-light); }

/* Dichiarazione Cookiebot (cd.js): il testo di riserva si vede solo finche'
   lo script non ha inserito la dichiarazione (dominio non registrato nel
   Domain Group, locale, script bloccato). overflow-x come rete di sicurezza. */
.legal__declaration { overflow-x: auto; }
.legal__declaration:has(.CookieDeclaration) .legal__declaration-fallback { display: none; }
.legal th, .legal td { border: 1px solid var(--au-grey); padding: 10px 12px; text-align: left; }
.legal th { background: var(--au-grey); font-weight: 700; }

/* ==========================================================================
   RESPONSIVE — due livelli
   --------------------------------------------------------------------------
   LIVELLO 1 (qui sotto): base a max-width — 1200 / 1024 / 834 / 480.
     E' la RETE DI SICUREZZA: copre OGNI larghezza, comprese quelle che i
     blocchi per device non intercettano (569-666, 667-767 verticale,
     821-1023 verticale). Senza, a 600px il sito tornerebbe al layout
     desktop con overflow orizzontale.

   LIVELLO 2 (in fondo al foglio): un blocco per DEVICE specifico.
     Vengono DOPO, quindi vincono a parita' di specificita'. Ognuno e' gia'
     appiattito: contiene tutte le regole che gli servono, non eredita dal
     livello 1. Li' si interviene per calibrare un device senza toccare
     gli altri.

   Regola pratica: una modifica che vale ovunque va nel livello 1; una
   correzione per un device solo va nel suo blocco del livello 2.
   ========================================================================== */

/* --- ≤1200: desktop stretto ---------------------------------------------- */
@media (max-width: 1200px) {
  :root { --au-gutter: 40px; }


  .hero__body { grid-template-columns: 22% 1fr 36%; }
  .hero__wordmark img { width: min(340px, 92%); }
  .intro { padding-top: 76px; }
  .intro__cols { gap: 52px; }
  .categories { padding-top: 72px; }
  .categories__card { padding: 52px 48px 56px; }
  .categories__grid { gap: 40px; }
  .category__icon { width: 140px; height: 140px; }
  .footer__logo { width: 300px; }
}

/* --- ≤1024: TABLET ORIZZONTALE ------------------------------------------- */
@media (max-width: 1024px) {
  :root { --au-gutter: 36px; --au-radius-hero: 44px; --au-radius-cats: 46px; }

  .hero__body { gap: 16px; padding-top: 30px; padding-bottom: 36px; }
  .header__actions { gap: 12px; }
  .header__link { font-size: 14px; }
  .btn { font-size: 14px; padding-inline: 20px; min-height: 50px; }
  .btn--arrow { min-width: 240px; min-height: 54px; gap: 20px; }
  .exhibitors__card { grid-template-columns: 1fr 260px; gap: 44px; padding: 52px 72px; }

  .hero__body { grid-template-columns: 21% 1fr 37%; }
  .hero__payoff { padding-bottom: 40px; }
  .hero__kicker, .hero .au-list li { font-size: 17px; }
  .intro__title  { font-size: clamp(24px, 3vw, 32px); }
  .category h3   { font-size: clamp(22px, 2.6vw, 28px); }
  .footer__claim { font-size: 16px; }
  .hero__wordmark img { width: min(280px, 94%); }

  .intro__cols { gap: 40px; }
  .categories__grid { gap: 32px; }
  .category__icon { width: 120px; height: 120px; }
  .category p, .intro__text p { font-size: 15px; }

  /* gallery: 2 celle e mezzo, resta scorrevole */
  .gallery { height: 260px; }
  .gallery__cell { flex-basis: calc((100% - 2 * var(--au-gutter) - 16px) / 2); }
  .gallery__arrow { width: 52px; height: 52px; }

  .logo-strip__track a { width: 148px; }
  .logo-strip__track img { height: 80px; }
  .logo-strip__track { gap: 20px; }

  .footer__logo { width: 240px; }
}

/* --- ≤834: TABLET VERTICALE ---------------------------------------------- */
@media (max-width: 834px) {
  :root { --au-gutter: 32px; }

  .topbar { font-size: 12px; padding-block: 8px; }

  /* hero in colonna: il payoff ha tutta la larghezza, puo' restare grande */
  .intro__text p, .category p { font-size: 16px; }
  .footer__claim { font-size: 15px; }

  /* Topbar: al posto dei contatti (che passano nel footer) le due CTA.
     Header: resta il solo "Entra in FarFiera". */
  .topbar { justify-content: space-between; gap: 12px; }
  .topbar__info { display: none; }
  .topbar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    /* qui la CTA prende il posto di indirizzo e contatti: misura propria,
       non quella ridotta della topbar, e peso normale */
    font-size: 14px;
    font-weight: 400;
  }
  .header__link,
  .header__tickets { display: none; }
  .header__actions { gap: 10px; }

  /* banda CTA: titolo sopra, bottone sotto */
  .cta-band__inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .btn--arrow { min-width: 0; width: 100%; flex: none; }

  /* intro: una colonna, statistiche sotto il testo */
  /* in colonna: la spaziatura la da' gia' il testo sopra */
  .intro__aside { margin-top: 0; }
  /* in colonna l'immagine ha tutta la larghezza: torna alla sua
     altezza naturale, i 5rem servono solo alla colonna stretta desktop */
  .stats-img { height: auto; object-fit: fill; }

  /* comunicati: bottone sotto al testo */
  .press { padding-block: 60px; }
  .press__item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 24px; }
  .press__item .btn { width: 100%; }

  /* espositori: screenshot sotto */
  .exhibitors__card { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 44px 40px; }
  .exhibitors__text .btn { display: flex; width: 100%; }
  .exhibitors__shot { max-width: 300px; }


  /* FOOTER MOBILE (reference AU_Landingpage_Mobile.jpg)
     - sfondo: SOLO la texture, senza colore sotto
     - logo e claim affiancati
     - blocchi separati da linee orizzontali chiare
     - etichette in peso normale, valori in bold */
  .footer {
    /* solo la texture, senza colore sotto; l'inquadratura (left) la da' la base */
    background-color: transparent;
  }
  .footer__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    padding-top: 40px;
    padding-bottom: 26px;
  }
  .footer__logo { width: auto; flex: none; }
  .footer__logo img { width: 118px; }
  .footer__claim { font-size: 15px; line-height: 1.45; }

  .footer__contacts {
    display: block;
    padding-top: 0;
    padding-bottom: 26px;
  }
  /* la linea va sul contenuto, non sul contenitore con il gutter:
     sul contenitore si disegnerebbe fuori dal padding e toccherebbe i bordi */
  .footer__contacts > .footer__contact:first-child {
    padding-top: 22px;
    border-top: 1px solid var(--au-white);
  }
  .footer__contact + .footer__contact { margin-top: 22px; }
  .footer__contact-label {
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--au-white);
    margin-bottom: 14px !important;
  }
  .footer__contact-value { font-size: 15px; line-height: 1.5; }

  /* barra legale: niente separatori verticali, va a capo */
  .footer__legal {
    /* trasparente: il fondo e' la texture del footer, non un verde pieno */
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;                 /* niente gap verticale: lo da' line-height */
    font-size: 13px;
    line-height: 1.7;
    padding-bottom: 26px;
  }
  .footer__legal .topbar__sep { display: inline; opacity: .55; }

  /* Hero verticale (reference hero_mobile.png): una sola colonna, nell'ordine
     data -> wordmark -> claim -> lista. Cambiano solo le aree: il DOM resta. */
  .hero { min-height: 0; }
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "date" "mark" "claim" "list";
    row-gap: 26px;
    column-gap: 0;
    padding-bottom: 44px;
  }
  .hero__date { margin: 0; }
  .hero__wordmark { justify-content: center; }
  .hero__wordmark img { width: min(330px, 72%); }
  .hero__payoff {
    justify-content: flex-end;      /* claim a DESTRA, come nel reference */
    align-items: flex-start;
    padding-bottom: 0;
  }
  .hero__payoff p { white-space: normal; text-align: right; }
  .hero__col-left { justify-content: flex-start; }

  .intro { padding-top: 60px; }
  .intro__title { margin-bottom: 32px; }
  .intro__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__cols > div:first-child p:last-child { margin-bottom: 24px; }

  .categories { padding-top: 56px; }
  .categories__card { padding: 40px 36px 44px; }
  .categories__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .category__icon { width: 128px; height: 128px; }
  .category h3 { margin: 18px 0 12px; }

  .footer__main { gap: 32px; padding-top: 44px; padding-bottom: 40px; }
  .footer__logo { width: auto; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}

/* --- ≤480: MOBILE -------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --au-gutter: 20px;
    --au-radius-hero: 24px;
    --au-radius-header: 24px;   /* da mobile l'header segue la curva della hero */
    --au-radius-cats: 22px;
    --au-radius-footer: 16px;
  }

  /* topbar compatta: solo l'essenziale */
  .topbar { font-size: 11px; }
  .topbar__info .topbar__addr,
  .topbar__info .topbar__mail,
  .topbar__info .topbar__sep { display: none; }

  .header__inner { padding-top: 17px; padding-bottom: 19px; }
  .header__logo img { width: 96px; }

  .btn-tickets { width: auto; padding-inline: 18px; min-height: 44px; font-size: 14px; }

  /* topbar: a mobile resta il minimo, il resto e' nel footer */
  .topbar { font-size: 11px; }
  .topbar__addr, .topbar__sep { display: none; }

  .header__link { font-size: 13px; }
  /* da telefono TUTTE le CTA a 17px */
  .btn { font-size: 17px; min-height: 46px; padding-inline: 18px; gap: 8px; }
  .btn--arrow { min-height: 50px; gap: 14px; }

  .cta-band__inner { padding-block: 34px; }
  .cta-band__title { font-size: clamp(1.9rem, 10.7vw, 2.6rem); line-height: 1.12; }

  /* su fondo chiaro la foglia va verde SCURO; hero e card espositori
     restano bianche grazie alla loro regola dedicata */
  .au-list { --au-bullet: var(--au-green-dark); }

  .press { padding-block: 44px; }
  /* a mobile i bottoni dei comunicati sono pieni, non con il solo bordo */
  .press__item .btn--ghost {
    background: var(--au-green-dark);
    color: var(--au-white);
    border-color: var(--au-green-dark);
  }
  .press__item .btn--ghost .btn__arrow { background-color: var(--au-white); }
  .press__heading { margin-bottom: 24px; font-size: clamp(27px, 9vw, 44px); line-height: 1.12; }
  .exhibitors__title { font-size: clamp(27px, 9vw, 35px); line-height: 1.12; }
  .intro__aside-title { font-size: 19px; }
  .au-list--dark li { font-size: 17px; }
  .press__title { font-size: 17px; }
  .press__date { font-size: 14px; }
  .exhibitors__text p, .exhibitors__text .au-list li { font-size: 17px; }

  .exhibitors__card { padding: 30px 22px; border-radius: 22px; }



  /* Hero mobile tracciata su references/hero_mobile.png:
     data in alto a sx (una riga) -> wordmark centrato -> claim a destra
     -> Mostra Nazionale + lista in fondo a sx. */
  .hero__body {
    row-gap: 40px;
    padding-top: 41px;        /* stacco dall'header fisso, come nel blocco telefono */
    padding-bottom: 30px;
  }
  .hero__date {
    font-size: clamp(1.05rem, 5.2vw, 1.35rem);
    line-height: 1.15;
    white-space: nowrap;          /* "2 - 4 Aprile 2027" su UNA riga */
  }
  .hero__date br { display: none; }
  .hero__date-sep { display: inline; }   /* lo spazio prima di "2027" */
  .hero__wordmark img { width: min(270px, 78%); }
  .hero__payoff p { font-size: clamp(1.9rem, 8.4vw, 2.35rem); }
  .hero__kicker, .hero .au-list li { font-size: 15px; }
  .intro__title  { font-size: clamp(30px, 10.2vw, 40px); line-height: 1.1; }
  .category h3   { font-size: clamp(26px, 8.4vw, 33px); }
  .footer__claim { font-size: 14px; }
  .footer__logo img { width: 104px; }
  .footer__contact-label, .footer__contact-value { font-size: 14px; }
  .footer__legal { font-size: 12px; }

  .intro { padding-top: 44px; }
  .intro__text p, .category p, .legal p, .legal li { font-size: 19px; line-height: 1.32; }

  .categories { padding-top: 40px; }
  .categories__card { padding: 28px 22px 32px; }
  .category__icon { width: 104px; height: 104px; }

  .logo-strip { padding: 34px 0; }
  .logo-strip--partner { padding: 32px 0; }
  .logo-strip__track { gap: 14px; }
  /* loghi leggermente piu' grandi da mobile (+12%, proporzioni invariate) */
  .logo-strip__track a { width: 130px; }
  .logo-strip__track img { height: 70px; }

  /* gallery: 1 cella + swipe */
  .gallery { height: 220px; }
  .gallery__cell { flex-basis: calc(100% - 2 * var(--au-gutter)); }
  .gallery__arrow { width: 44px; height: 44px; }
  .gallery__arrow img { width: 14px; height: 14px; }
  .gallery__arrow--prev { left: 10px; }
  .gallery__arrow--next { right: 10px; }


  .legal { padding-top: 44px; padding-bottom: 64px; }

  .footer__contact-label {
    font-weight: 200;
  }
  .footer__contact-value strong {
    font-weight: 500;
}
.footer__contact-value.mini{
    font-weight: 200;
}
}

/* --- touch: niente stati hover --------------------------------------------- */
/* Su touch non esiste un cursore: dopo il tap l'hover resterebbe "appiccicato".
   Qui lo stato torna a riposo; :focus-visible continua a valere per la tastiera. */
@media (hover: none) {
  .btn--solid:hover       { background: var(--au-white); color: var(--au-green-dark); border-color: transparent; }
  .btn--ghost:hover       { background: transparent; color: var(--au-green-dark); border-color: var(--au-green-dark); }
  .btn--ghost-light:hover { background: transparent; color: var(--au-white); border-color: var(--au-white); }
  .header__farfiera:hover {border-color: transparent;font-size: 15px;}
  .cta-band .btn--solid:hover,
  .exhibitors .btn--solid:hover {
    background: var(--au-white); color: var(--au-green-dark); border-color: transparent;
  }
  .btn-tickets:hover      { background: var(--au-white); color: var(--au-green-dark); }
  .logo-strip__track a:hover { transform: none; }
  .exhibitors__shot:hover { opacity: 1; }
  .btn:hover .btn__arrow { background-color: var(--au-green-dark); }
  .btn--ghost-light:hover .btn__arrow { background-color: var(--au-white); }
  /* comunicati: da mobile il bottone e' PIENO verde scuro, quindi la freccia
     deve restare bianca. Senza, la regola qui sopra la rende verde scuro su
     fondo verde scuro e sembra sparita. */
  .press__item .btn--ghost:hover .btn__arrow { background-color: var(--au-white); }
  /* CTA del footer: stesso caso dei comunicati. Senza, dopo un tap il fondo
     resterebbe verde chiaro e la freccia diventerebbe verde scuro su verde. */
  .footer__cta:hover { background: var(--au-green-dark); border-color: var(--au-green-dark); }
  .footer__cta:hover .btn__arrow { background-color: var(--au-white); }
  .header__link:hover,
  .topbar__cta:hover      { text-decoration: none; }
  a:hover                 { color: inherit; }
  .topbar a:hover,
  .footer__legal a:hover,
  .footer__contacts a:hover { color: var(--au-white); }
}

/* --- accessibilita' ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
  * { scroll-behavior: auto !important; }
}


/* ==========================================================================
   LIVELLO 2 — UN BLOCCO PER DEVICE
   --------------------------------------------------------------------------
   Ogni blocco e' APPIATTITO: contiene tutte le regole che quel device deve
   avere, non solo le differenze. Cosi' si puo' calibrare un singolo device
   senza effetti sugli altri.

   Stanno DOPO la base a max-width, quindi a parita' di specificita' vincono.
   Il blocco "<=1200 desktop stretto" della base resta come unico punto per
   il desktop stretto, come richiesto.

   NOTA sui tablet VERTICALI sopra 834px (AIR 820-1020, PRO 1024): nella base
   non ricevevano lo stacking, perche' 834 e' una soglia di larghezza. Ma sono
   verticali, e la proposta grafica verticale vuole hero in colonna e
   categorie su una colonna: qui prendono lo stack di 834, non quello di 1024.
   ========================================================================== */


/* ---------- Telefono Verticale ------------------------------------------- */
/* Stack appiattito: 1200 + 1024 + 834 + 480.
   Il vincolo -webkit-min-device-pixel-ratio: 2 e' volutamente ASSENTE:
   escluderebbe i telefoni con DPR 3 e il responsive mode dei DevTools. */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: portrait) {
  :root {
    --au-gutter: 20px;
    --au-radius-hero: 24px;
    --au-radius-header: 24px;   /* da mobile l'header segue la curva della hero */
    --au-radius-cats: 24px;
    --au-radius-footer: 16px;
  }

  /* topbar: restano le due CTA, i contatti sono nel footer */
  .topbar {font-size: 11px;justify-content: flex-end;gap: 12px;padding-block: 3px;}
  .topbar__info { display: none; }
  .topbar__addr, .topbar__sep { display: none; }
  .topbar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    /* qui la CTA prende il posto di indirizzo e contatti: misura propria,
       non quella ridotta della topbar, e peso normale */
    font-size: 14px;
    font-weight: 400;
  }

  .header__inner { padding-top: 17px; padding-bottom: 19px; }
  .header__logo img {width: 110px;}

  .header__link,
  .header__tickets { display: none; }
  .header__actions { gap: 10px; }
  .btn-tickets { width: auto; padding-inline: 18px; min-height: 44px; font-size: 17px; }

  /* da telefono TUTTE le CTA a 17px */
  .btn {font-size: 17px;min-height: 46px;padding-inline: 18px;gap: 8px;}
  .btn--arrow { min-width: 0; width: 100%; flex: none; min-height: 50px; gap: 14px; }

  /* hero in colonna: data -> wordmark -> claim -> lista */
  .hero {min-height: 0;}
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "date"
      "mark"
      "claim"
      "list";
    row-gap: 30px;
    column-gap: 0;
    padding-top: 41px;
    padding-bottom: 30px;
  }
  .hero__date {
    margin: 0;
    font-size: clamp(1.05rem, 8vw, 1.7rem);
    line-height: 1.15;
    white-space: nowrap;          /* "2 - 4 Aprile 2027" su UNA riga */
  }
  .hero__date br { display: none; }
  .hero__date-sep { display: inline; }
  .hero__wordmark { justify-content: center; }
  .hero__wordmark img { width: min(270px, 78%); }
  .hero__payoff {
    justify-content: flex-end;      /* claim a DESTRA, come nel reference */
    align-items: flex-start;
    padding-bottom: 0;
  }
  .hero__payoff p {white-space: normal;text-align: right;font-size: clamp(1.9rem, 12vw, 3rem);}
  .hero__col-left { justify-content: flex-start; }
  .hero__kicker, .hero .au-list li {font-size: 18px;margin-top: 0;}

  .cta-band__inner { flex-direction: column; align-items: stretch; gap: 20px; padding-block: 34px; }
  .cta-band__title {font-size: clamp(30px, 10.2vw, 40px);line-height: 1.12;}

  .intro { padding-top: 44px; }
  .intro__title { font-size: clamp(30px, 10.2vw, 40px); line-height: 1.1; margin-bottom: 32px; }
  .intro__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__cols > div:first-child p:last-child { margin-bottom: 24px; }
  /* in colonna: la spaziatura la da' gia' il testo sopra */
  .intro__aside { margin-top: 0; }
  /* in colonna l'immagine ha tutta la larghezza: torna alla sua
     altezza naturale, i 5rem servono solo alla colonna stretta desktop */
  .stats-img { height: auto; object-fit: fill; }
  .intro__aside-title { font-size: 19px; }
  .au-list--dark li { font-size: 17px; }
  .intro__text p, .category p, .legal p, .legal li { font-size: 19px; line-height: 1.32; }

  .categories {padding-top: 40px;padding-bottom: 40px;}
  .categories__card {padding: 30px;}
  .categories__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .category__icon {width: 120px;height: 120px;}
  .category h3 { font-size: clamp(26px, 8.4vw, 33px); margin: 18px 0 12px; }

  /* comunicati: bottone sotto al testo, pieno e non col solo bordo */
  .press { padding-block: 44px; }
  .press__heading {margin-bottom: 24px;font-size: clamp(30px, 9.9vw, 40px);line-height: 1.12;}
  .press__item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 24px; }
  .press__item .btn { width: 100%; }
  .press__item .btn--ghost {
    background: var(--au-green-dark);
    color: var(--au-white);
    border-color: var(--au-green-dark);
  }
  .press__item .btn--ghost .btn__arrow { background-color: var(--au-white); }
  .press__title {font-size: 20px;line-height: 24px;}
  .press__date { font-size: 14px; }

  .exhibitors__card {grid-template-columns: minmax(0, 1fr);gap: 50px;padding: 30px;border-radius: 22px;}
  .exhibitors__title { font-size: clamp(27px, 9vw, 35px); line-height: 1.12; }
  .exhibitors__text p, .exhibitors__text .au-list li { font-size: 17px; }
  .exhibitors__text .btn { display: flex; width: 100%; }
  .exhibitors__shot { max-width: 300px; }

  .logo-strip { padding: 34px 0; }
  .logo-strip--partner {padding: 50px 0;}
  .logo-strip__track { gap: 14px; }
  /* loghi leggermente piu' grandi da mobile (+12%, proporzioni invariate) */
  .logo-strip__track a { width: 130px; }
  .logo-strip__track img { height: 70px; }

  /* gallery: 1 cella + swipe */
  .gallery { height: 220px; }
  .gallery__cell { flex-basis: calc(100% - 2 * var(--au-gutter)); }
  .gallery__arrow { width: 44px; height: 44px; }
  .gallery__arrow img { width: 14px; height: 14px; }
  .gallery__arrow--prev { left: 10px; }
  .gallery__arrow--next { right: 10px; }

  /* footer: solo la texture, logo e claim affiancati, linee di separazione */
  .footer {background-color: transparent;border-top-left-radius: 24px;border-top-right-radius: 24px;}
  .footer__main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 55px;
    padding-top: 40px;
    padding-bottom: 26px;
    justify-content: space-between;
    width: 100%;
  }
  .footer__logo { width: auto; flex: none; }
  .footer__logo img {width: 110px;}
  .footer__claim {font-size: 14px;line-height: 1.45;display: block;width: 100%;}
  .footer__contacts { display: block; padding-top: 0; padding-bottom: 26px; }
  /* la linea va sul contenuto, non sul contenitore col gutter: li' toccherebbe i bordi */
  .footer__contacts > .footer__contact:first-child {
    padding-top: 30px;
    border-top: 1px solid var(--au-white);
  }
  .footer__contact + .footer__contact { margin-top: 22px; }
  .footer__contact-label {
    font-size: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ffffff60;
    margin-bottom: 8px !important;
  }
  .footer__contact-value { font-size: 14px; line-height: 1.5; }
  .footer__legal {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 12px;
    line-height: 1.7;
    padding-bottom: 26px;
  }
  .footer__legal .topbar__sep { display: inline; opacity: .55; }

  .legal { padding-top: 44px; padding-bottom: 64px; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Telefono Orizzontale ----------------------------------------- */
/* Stack appiattito: 1200 + 1024 + 834 (sopra i 480 di larghezza).
   Schermo basso: i padding verticali sono ridotti rispetto al verticale. */
@media only screen
and (min-width: 667px)
and (max-width: 926px)
and (max-height: 428px)
and (orientation: landscape) {
  :root { --au-gutter: 32px; --au-radius-hero: 44px; --au-radius-cats: 46px; }

  .topbar { font-size: 12px; padding-block: 8px; justify-content: space-between; gap: 12px; }
  :root { --au-topbar-h: 56px; }
  .topbar__info { display: none; }
  .topbar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    /* qui la CTA prende il posto di indirizzo e contatti: misura propria,
       non quella ridotta della topbar, e peso normale */
    font-size: 14px;
    font-weight: 400;
  }
  .header__link,
  .header__tickets { display: none; }
  .header__actions { gap: 10px; }

  /* da telefono TUTTE le CTA a 17px, anche ruotato: stesso device, stesso tocco */
  .btn { font-size: 17px; padding-inline: 20px; min-height: 50px; }
  .btn--arrow { min-width: 0; width: 100%; flex: none; min-height: 54px; gap: 20px; }

  /* hero in colonna, ma compatta: qui l'altezza e' la risorsa scarsa */
  .hero { min-height: 0; }
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "date" "mark" "claim" "list";
    row-gap: 18px;
    column-gap: 0;
    padding-top: 22px;
    padding-bottom: 30px;
  }
  .hero__date { margin: 0; }
  .hero__wordmark { justify-content: center; }
  .hero__wordmark img { width: min(240px, 46%); }
  .hero__payoff { justify-content: flex-end; align-items: flex-start; padding-bottom: 0; }
  .hero__payoff p { white-space: normal; text-align: right; }
  .hero__col-left { justify-content: flex-start; }
  .hero__kicker, .hero .au-list li { font-size: 17px; }

  .cta-band__inner { flex-direction: column; align-items: stretch; gap: 20px; }

  .intro { padding-top: 48px; }
  .intro__title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 32px; }
  .intro__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__cols > div:first-child p:last-child { margin-bottom: 24px; }
  /* in colonna: la spaziatura la da' gia' il testo sopra */
  .intro__aside { margin-top: 0; }
  /* in colonna l'immagine ha tutta la larghezza: torna alla sua
     altezza naturale, i 5rem servono solo alla colonna stretta desktop */
  .stats-img { height: auto; object-fit: fill; }
  .intro__text p, .category p { font-size: 16px; }

  .categories { padding-top: 48px; }
  .categories__card { padding: 40px 36px 44px; }
  .categories__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .category__icon { width: 128px; height: 128px; }
  .category h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 18px 0 12px; }

  .press { padding-block: 48px; }
  .press__item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 24px; }
  .press__item .btn { width: 100%; }

  .exhibitors__card { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 44px 40px; }
  .exhibitors__text .btn { display: flex; width: 100%; }
  .exhibitors__shot { max-width: 300px; }

  .gallery { height: 240px; }
  .gallery__cell { flex-basis: calc((100% - 2 * var(--au-gutter) - 16px) / 2); }
  .gallery__arrow { width: 52px; height: 52px; }

  /* loghi leggermente piu' grandi da mobile (+12% dai 148/80 di partenza) */
  .logo-strip__track a { width: 166px; }
  .logo-strip__track img { height: 90px; }
  .logo-strip__track { gap: 20px; }

  .footer { background-color: transparent; }
  .footer__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    padding-top: 40px;
    padding-bottom: 26px;
  }
  .footer__logo { width: auto; flex: none; }
  .footer__logo img { width: 118px; }
  .footer__claim { font-size: 15px; line-height: 1.45; }
  .footer__contacts { display: block; padding-top: 0; padding-bottom: 26px; }
  .footer__contacts > .footer__contact:first-child {
    padding-top: 22px;
    border-top: 1px solid var(--au-white);
  }
  .footer__contact + .footer__contact { margin-top: 22px; }
  .footer__contact-label {
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--au-white);
    margin-bottom: 14px !important;
  }
  .footer__contact-value { font-size: 15px; line-height: 1.5; }
  .footer__legal {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 13px;
    line-height: 1.7;
    padding-bottom: 26px;
  }
  .footer__legal .topbar__sep { display: inline; opacity: .55; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Tablet MINI Verticale ---------------------------------------- */
/* Stack appiattito: 1200 + 1024 + 834.
   max-width 819.98 e non 820: a 820 esatti si sovrapponeva al Tablet AIR
   (min-width: 820) e gli passava le categorie affiancate, che qui sono
   volute ma li' no. */
@media only screen
and (min-width: 768px)
and (max-width: 819.98px)
and (orientation: portrait) {
  :root {--au-gutter: 32px;--au-radius-hero: 44px;--au-radius-cats: 44px;--au-radius-footer: 44px;}

  .topbar {font-size: 12px;padding-block: 8px;justify-content: flex-end;gap: 12px;}
  :root { --au-topbar-h: 56px; }
  .topbar__info { display: none; }
  .topbar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    /* qui la CTA prende il posto di indirizzo e contatti: misura propria,
       non quella ridotta della topbar, e peso normale */
    font-size: 16px;
    font-weight: 400;
  }
  .header__link,
  .header__tickets { display: none; }
  .header__actions { gap: 10px; }

  .btn {font-size: 16px;padding-inline: 20px;min-height: 50px;}
  /* qui le CTA restano alla loro misura naturale: banda, comunicati ed
     espositori sono in riga come da desktop, non impilati */
  .btn--arrow { min-width: 260px; width: auto; flex: none; min-height: 54px; gap: 20px; }

  .hero { min-height: 0; }
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "date"
      "mark"
      "claim"
      "list";
    row-gap: 20px;
    column-gap: 0;
    padding-top: 80px;   /* stacco dall'header come su desktop (era 30: contenuto sotto l'header) */
    padding-bottom: 44px;
  }
  .hero__date {margin: 0;font-size: 2.5rem;}
  .hero__wordmark { justify-content: center; }
  .hero__wordmark img { width: min(330px, 72%); }
  .hero__payoff {justify-content: flex-end;align-items: flex-start;padding-bottom: 0;padding-top: 2rem;}
  .hero__payoff p {white-space: normal;text-align: right;font-size: 4rem;}
  .hero__col-left {justify-content: flex-start;}
  .hero__kicker, .hero .au-list li {font-size: 20px;}

  /* banda CTA come da desktop: titolo e bottone in riga, centrati.
     Il bottone NON e' a tutta larghezza: torna alla sua misura naturale. */
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .cta-band .btn--arrow { min-width: 260px; width: auto; }

  .intro { padding-top: 60px; }
  .intro__title {font-size: 2.5rem;margin-bottom: 32px;}
  .intro__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__cols > div:first-child p:last-child { margin-bottom: 24px; }
  /* in colonna: la spaziatura la da' gia' il testo sopra */
  .intro__aside { margin-top: 0; }
  /* in colonna l'immagine ha tutta la larghezza: torna alla sua
     altezza naturale, i 5rem servono solo alla colonna stretta desktop */
  .stats-img { height: auto; object-fit: fill; }
  .intro__text p, .category p, .intro__aside-title { font-size: 20px; }
  .category p { font-size: 18px; }
  .cta-band__title{font-size: 2.5rem}
  .au-list li {
    font-size: 20px;
}
  /* categorie: una per riga, con l'icona a SINISTRA e testo a DESTRA.
     La griglia interna evita che il testo scorra sotto l'icona. */
  .categories { padding-top: 56px; }
  .categories__card {padding: 50px;}
  .categories__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .category {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: start;
    column-gap: 24px;
  }
  .category__icon { width: 128px; height: 128px; grid-row: span 2; }
  .category h3 {font-size: 2rem;margin: 0 0 10px;}
  .category p { align-self: start; }

  /* comunicati come da desktop: testo a sinistra, bottone a destra.
     flex-wrap: nowrap e min-width: 0 sul testo sono necessari: senza,
     il body si espande, supera la riga e spinge il bottone a capo. */
  .press { padding-block: 60px; }
  .press__item {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
  }
  .press__body { min-width: 0; }
  .press__item .btn { width: auto; flex: none; min-width: 220px; }

  /* espositori come da desktop: testo e screenshot affiancati */
  .exhibitors__card {grid-template-columns: 1fr 260px;gap: 36px;padding: 50px;}
  .exhibitors__text .btn { display: inline-flex; width: auto; min-width: 260px; }
  .exhibitors__shot { max-width: 300px; }

  .gallery { height: 260px; }
  .gallery__cell { flex-basis: calc((100% - 2 * var(--au-gutter) - 16px) / 2); }
  .gallery__arrow { width: 52px; height: 52px; }

  /* loghi leggermente piu' grandi sui tablet verticali (+12%, proporzioni invariate) */
  .logo-strip__track a { width: 166px; }
  .logo-strip__track img { height: 90px; }
  .logo-strip__track { gap: 20px; }
  .press__heading {
      font-size: 2.5rem;
      margin-bottom: 20px;
  }
  .press__title {
      line-height: 1.25;
  }
    .exhibitors__title {
      font-size: 2.5rem;
  }
  .footer { background-color: transparent; }
  .footer__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding-top: 44px;
    padding-bottom: 40px;
    justify-content: space-between;
  }
  .footer__logo { width: auto; flex: none; }
  .footer__logo img { width: 118px; }
  .footer__claim { font-size: 15px; line-height: 1.45; }
  .footer__contacts { display: block; padding-top: 0; padding-bottom: 26px; }
  /* sul tablet il bottone del catalogo resta della sua misura: a tutta
     larghezza era troppo largo. Selettore doppio per battere .btn--arrow */
  .footer__contacts .footer__cta { width: fit-content; min-width: 0; }
  .footer__contacts > .footer__contact:first-child {
    padding-top: 40px;
    border-top: 1px solid var(--au-white);
  }
  .footer__contact + .footer__contact { margin-top: 22px; }
  .footer__contact-label {
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ffffff60;
    margin-bottom: 14px !important;
  }
  .footer__contact-value { font-size: 15px; line-height: 1.5; }
  .footer__legal {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 13px;
    line-height: 1.7;
    padding-bottom: 26px;
  }
  .footer__legal .topbar__sep { display: inline; opacity: .55; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Tablet AIR Verticale ----------------------------------------- */
/* 820-1020px. Nella base a max-width questo range NON riceveva lo stacking
   (834 e' una soglia di larghezza), ma e' un tablet VERTICALE: la proposta
   verticale vuole hero in colonna e categorie su una colonna. Prende quindi
   lo stack di 834, con misure leggermente piu' generose. */
@media only screen
and (min-width: 820px)
and (max-width: 1020px)
and (orientation: portrait) {
  :root { --au-gutter: 36px; --au-radius-hero: 44px; --au-radius-cats: 46px; }

  .topbar { font-size: 12px; padding-block: 8px; justify-content: space-between; gap: 12px; }
  :root { --au-topbar-h: 56px; }
  .topbar__info { display: none; }
  .topbar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    /* qui la CTA prende il posto di indirizzo e contatti: misura propria,
       non quella ridotta della topbar, e peso normale */
    font-size: 14px;
    font-weight: 400;
  }
  .header__link,
  .header__tickets { display: none; }
  .header__actions { gap: 10px; }

  .btn { font-size: 14px; padding-inline: 20px; min-height: 50px; }
  .btn--arrow { min-width: 0; width: 100%; flex: none; min-height: 54px; gap: 20px; }

  .hero { min-height: 0; }
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "date" "mark" "claim" "list";
    row-gap: 28px;
    column-gap: 0;
    padding-top: 64px;   /* stacco dall'header come su desktop (era 30: contenuto sotto l'header) */
    padding-bottom: 48px;
  }
  .hero__date { margin: 0; }
  .hero__wordmark { justify-content: center; }
  .hero__wordmark img { width: min(360px, 66%); }
  .hero__payoff { justify-content: flex-end; align-items: flex-start; padding-bottom: 0; }
  .hero__payoff p { white-space: normal; text-align: right; }
  .hero__col-left { justify-content: flex-start; }
  .hero__kicker, .hero .au-list li { font-size: 18px; }

  .cta-band__inner { flex-direction: column; align-items: stretch; gap: 20px; }

  .intro { padding-top: 68px; }
  .intro__title { font-size: clamp(26px, 3vw, 34px); margin-bottom: 32px; }
  .intro__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__cols > div:first-child p:last-child { margin-bottom: 24px; }
  /* in colonna: la spaziatura la da' gia' il testo sopra */
  .intro__aside { margin-top: 0; }
  /* in colonna l'immagine ha tutta la larghezza: torna alla sua
     altezza naturale, i 5rem servono solo alla colonna stretta desktop */
  .stats-img { height: auto; object-fit: fill; }
  .intro__text p, .category p { font-size: 16px; }

  .categories { padding-top: 64px; }
  .categories__card { padding: 44px 40px 48px; }
  .categories__grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .category__icon { width: 132px; height: 132px; }
  .category h3 { font-size: clamp(23px, 2.6vw, 29px); margin: 18px 0 12px; }

  .press { padding-block: 64px; }
  .press__item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 26px; }
  .press__item .btn { width: 100%; }

  .exhibitors__card { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 44px; }
  .exhibitors__text .btn { display: flex; width: 100%; }
  .exhibitors__shot { max-width: 320px; }

  .gallery { height: 280px; }
  .gallery__cell { flex-basis: calc((100% - 2 * var(--au-gutter) - 16px) / 2); }
  .gallery__arrow { width: 52px; height: 52px; }

  /* loghi leggermente piu' grandi sui tablet verticali (+12%, proporzioni invariate) */
  .logo-strip__track a { width: 166px; }
  .logo-strip__track img { height: 90px; }
  .logo-strip__track { gap: 20px; }

  .footer { background-color: transparent; }
  .footer__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 40px;
  }
  .footer__logo { width: auto; flex: none; }
  .footer__logo img { width: 128px; }
  .footer__claim { font-size: 16px; line-height: 1.45; }
  .footer__contacts { display: block; padding-top: 0; padding-bottom: 28px; }
  /* sul tablet il bottone del catalogo resta della sua misura: a tutta
     larghezza era troppo largo. Selettore doppio per battere .btn--arrow */
  .footer__contacts .footer__cta { width: fit-content; min-width: 0; }
  .footer__contacts > .footer__contact:first-child {
    padding-top: 22px;
    border-top: 1px solid var(--au-white);
  }
  .footer__contact + .footer__contact { margin-top: 22px; }
  .footer__contact-label {
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--au-white);
    margin-bottom: 14px !important;
  }
  .footer__contact-value { font-size: 15px; line-height: 1.5; }
  .footer__legal {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 13px;
    line-height: 1.7;
    padding-bottom: 28px;
  }
  .footer__legal .topbar__sep { display: inline; opacity: .55; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Tablet PRO Verticale ----------------------------------------- */
/* Esattamente 1024px in verticale. Come l'AIR verticale: e' un tablet in
   portrait, quindi hero in colonna, non il layout a 3 colonne di 1024. */
@media only screen
  and (min-width: 1024px)
  and (max-width: 1032px)
  and (orientation: portrait) {
  /* :root { --au-gutter: 36px; --au-radius-hero: 44px; --au-radius-cats: 46px; }

  .topbar { font-size: 12px; padding-block: 8px; justify-content: space-between; gap: 12px; }
  :root { --au-topbar-h: 56px; }
  .topbar__info { display: none; }
  .topbar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;

    font-size: 14px;
    font-weight: 400;
  }
  .header__link,
  .header__tickets { display: none; }
  .header__actions { gap: 10px; }

  .btn { font-size: 14px; padding-inline: 20px; min-height: 50px; }
  .btn--arrow { min-width: 0; width: 100%; flex: none; min-height: 54px; gap: 20px; } */

  /* schermo alto: la hero tiene una quota minima di viewport */
  .hero { min-height: 55vh; }
  .cta-band__title, .intro__title, .press__heading, .exhibitors__title {
      font-size: 2.5rem;
  }
  .intro__title{margin-bottom: 30px;}
  .press__item {gap: 5rem;}
  .category h3 {
    font-size: 2rem;
}
  /* .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "date" "mark" "claim" "list";
    row-gap: 30px;
    column-gap: 0;
    padding-top: 32px;
    padding-bottom: 52px;
  }
  .hero__date { margin: 0; }
  .hero__wordmark { justify-content: center; }
  .hero__wordmark img { width: min(380px, 62%); }
  .hero__payoff { justify-content: flex-end; align-items: flex-start; padding-bottom: 0; }
  .hero__payoff p { white-space: normal; text-align: right; }
  .hero__col-left { justify-content: flex-start; }
  .hero__kicker, .hero .au-list li { font-size: 18px; }

  .cta-band__inner { flex-direction: column; align-items: stretch; gap: 20px; }

  .intro { padding-top: 72px; }
  .intro__title { font-size: clamp(27px, 3vw, 34px); margin-bottom: 32px; }
  .intro__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__cols > div:first-child p:last-child { margin-bottom: 24px; }
  .intro__aside { margin-top: 0; }
  .stats-img { height: auto; object-fit: fill; }
  .intro__text p, .category p { font-size: 16px; }

  .categories { padding-top: 68px; }
  .categories__card { padding: 48px 44px 52px; }
  .categories__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .category__icon { width: 136px; height: 136px; }
  .category h3 { font-size: clamp(24px, 2.6vw, 29px); margin: 18px 0 12px; }

  .press { padding-block: 68px; }
  .press__item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 28px; }
  .press__item .btn { width: 100%; }

  .exhibitors__card { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 52px 48px; }
  .exhibitors__text .btn { display: flex; width: 100%; }
  .exhibitors__shot { max-width: 340px; }

  .gallery { height: 300px; }
  .gallery__cell { flex-basis: calc((100% - 2 * var(--au-gutter) - 16px) / 2); }
  .gallery__arrow { width: 52px; height: 52px; }

  .logo-strip__track a { width: 148px; }
  .logo-strip__track img { height: 80px; }
  .logo-strip__track { gap: 20px; }

  .footer { background-color: transparent; }
  .footer__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 44px;
  }
  .footer__logo { width: auto; flex: none; }
  .footer__logo img { width: 132px; }
  .footer__claim { font-size: 16px; line-height: 1.45; }
  .footer__contacts { display: block; padding-top: 0; padding-bottom: 28px; }
  .footer__contacts > .footer__contact:first-child {
    padding-top: 22px;
    border-top: 1px solid var(--au-white);
  }
  .footer__contact + .footer__contact { margin-top: 22px; }
  .footer__contact-label {
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--au-white);
    margin-bottom: 14px !important;
  }
  .footer__contact-value { font-size: 15px; line-height: 1.5; }
  .footer__legal {
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 13px;
    line-height: 1.7;
    padding-bottom: 28px;
  }
  .footer__legal .topbar__sep { display: inline; opacity: .55; } */

  /* Regola ATTIVA, volutamente fuori dal commento qui sopra: loghi
     leggermente piu' grandi anche sul PRO verticale (+12% dai 148/80 che
     eredita dalla base <=1024, proporzioni invariate). */
  .logo-strip__track a { width: 166px; }
  .logo-strip__track img { height: 90px; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Tablet MINI Landscape ---------------------------------------- */
/* Stack appiattito: 1200 + 1024. Orizzontale: la hero RESTA a 3 colonne,
   la topbar tiene i contatti, il footer resta quello desktop. */
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (min-height: 429px)
and (orientation: landscape) {
  :root { --au-gutter: 36px; --au-radius-hero: 44px; --au-radius-cats: 46px; }

  .header__actions {gap: 35px;}
  .header__link { font-size: 14px; }
  .btn { font-size: 14px; padding-inline: 20px; min-height: 50px; }
  .btn--arrow { min-width: 240px; min-height: 54px; gap: 20px; }

  .hero__body {
    grid-template-columns: 21% 1fr 37%;
    gap: 16px;
    padding-top: 64px;   /* stacco dall'header come su desktop (era 30: contenuto sotto l'header) */
    padding-bottom: 36px;
  }
  .hero__payoff { padding-bottom: 40px; }
  .hero__kicker, .hero .au-list li { font-size: 17px; }
  .hero__wordmark img {width: min(350px, 94%);}
  .hero__date { font-size: 2.5rem; }
  .intro__title  {font-size: 2.5rem;margin-bottom: 30px;}
  .intro__cols { gap: 40px; }
  .intro { padding-top: 76px; }
  .cta-band__title, .press__heading, .exhibitors__title {
      font-size: 2.5rem;
  }

  .categories { padding-top: 72px; }
  .categories__grid { gap: 32px; }
  .category__icon { width: 120px; height: 120px; }
  .category h3   {font-size: 2rem;}
  .category p, .intro__text p {font-size: 18px;}
.press__item {gap: 5rem;}
  .exhibitors__card { grid-template-columns: 1fr 260px; gap: 44px; padding: 52px 72px; }

  /* gallery: 2 celle e mezzo, resta scorrevole */
  .gallery { height: 260px; }
  .gallery__cell { flex-basis: calc((100% - 2 * var(--au-gutter) - 16px) / 2); }
  .gallery__arrow { width: 52px; height: 52px; }

  .logo-strip__track a { width: 148px; }
  .logo-strip__track img { height: 80px; }
  .logo-strip__track { gap: 20px; }

  .footer__logo { width: 240px; }
  .footer__claim { font-size: 16px; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Tablet AIR Landscape ----------------------------------------- */
/* 1025-1300px orizzontale. Nella base ricadeva nel solo blocco 1200:
   layout desktop con gutter e misure ridotte. */
@media only screen
and (min-width: 1025px)
and (max-width: 1300px)
and (min-height: 429px)
and (orientation: landscape) {
  :root { --au-gutter: 40px; }

  .hero__body { grid-template-columns: 22% 1fr 36%; }
  .hero__wordmark img { width: min(340px, 92%); }

  .intro { padding-top: 76px; }
  .intro__cols { gap: 52px; }

  .categories { padding-top: 72px; }
  .categories__card { padding: 52px 48px 56px; }
  .categories__grid { gap: 40px; }
  .category__icon { width: 140px; height: 140px; }

  .footer__logo { width: 300px; }

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Tablet PRO Landscape ----------------------------------------- */
/* 1300-1377px orizzontale: sopra i 1200, nella base non riceveva nessuna
   regola responsive. E' a tutti gli effetti il layout desktop pieno; qui
   solo il gutter si allarga verso il valore desktop. */
@media only screen
and (min-width: 1300px)
and (max-width: 1377px)
and (min-height: 429px)
and (orientation: landscape) {
  :root { --au-gutter: 32px; }

  /* qui la hero resta a 3 colonne come da desktop: l'altezza minima e'
     legata al viewport, piu' generosa che in verticale */
  .hero { min-height: 80vh; }
  .hero__body {
    padding-top: 6rem;
}

  /* bullet della hero: verde scuro su mobile e tablet (desktop: verde chiaro) */
  .hero .au-list { --au-bullet: var(--au-green-dark); }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
}


/* ---------- Schermi grandi ----------------------------------------------- */
/* Da 1600px in su il contenuto smette di allargarsi e si stacca dai bordi.
   min-width e non min-device-width: quest'ultima guarda lo schermo fisico e
   nel simulatore dei DevTools non corrisponde mai al viewport. */
@media only screen and (min-width: 1600px) { 
  :root { --au-gutter: 250px; }

  /* sfondo della hero ancorato in basso: il -4rem vale solo su desktop */
  .hero { background-position: bottom; }
  .hero__body {padding-top: 7rem;}
  .hero__wordmark img {
      width: min(415px, 100%);
  }
}