/* ============================================================
   BIRROCCO HOME — DESIGN SYSTEM
   Mobile-first | Breakpoint: 769px (tablet) · 1025px (desktop)
   ============================================================ */

/* ============================================================
   @FONT-FACE
   Metti i file in /assets/fonts/

   Druk:
     Druk-Wide-Bold.woff2 / .woff

   Graphik:
     Graphik-Regular.woff2 / .woff
     Graphik-Medium.woff2  / .woff
   ============================================================ */

/* DrukTextWide — usato per --font-display */
@font-face {
  font-family: "Druk";
  src: url("../fonts/Druk-Wide-Bold.woff2") format("woff2"),
       url("../fonts/Druk-Wide-Bold.woff")  format("woff");
  font-weight: 400 900;   /* copre tutti i pesi richiesti con un file solo */
  font-style: normal;
  font-display: swap;
}

/* GraphikWide Medium Trial — usato per --font-body */
@font-face {
  font-family: "Graphik";
  src: url("../fonts/Graphik-Medium.woff2") format("woff2"),
       url("../fonts/Graphik-Medium.woff")  format("woff");
  font-weight: 400 700;   /* un solo file, copre regular e medium */
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* Base */
  --color-bg:           #FFFFFF;
  --color-text:         #000000;

  /* Brand / accenti */
  --color-bordeaux:     #81251E;
  --color-lime:         #BFC403;
  --color-green:        #004903;

  /* Testo su fondi colorati */
  --color-on-bordeaux:  #FFFFFF;
  --color-on-lime:      #000000;

  /* Font */
  --font-display: "Druk", sans-serif;
  --font-body:    "Graphik", sans-serif;

  /* Spaziature (base 8px) */
  --space-2:    8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   96px;
  --space-9:  128px;
  --space-10: 160px;
}

/* ============================================================
   RESET MINIMALE
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior: auto — Lenis gestisce lo smooth scroll, non il browser */
}



body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.4;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul,
ol {
  list-style: none;
}

/* ============================================================
   TIPOGRAFIA — MOBILE FIRST
   Mobile:  title 38.4px · body 20px
   Tablet:  body 28px
   Desktop: title 6rem (96px)
   ============================================================ */

.title {
  font-family: var(--font-display);
  font-size: 38.4px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.body,
.paragraph {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-text);
  /* Contiene le .word dell'effetto "Simultaneous words": traslano +x in
     entrata e, a riposo (pre-scroll), sporgono ~30px a destra. Affidarsi a
     `body { overflow-x:hidden }` non bastava — con Lenis + html overflow-x
     visible quelle parole finivano comunque nello scrollWidth del documento
     ed espandevano la ICB su mobile (shrink-to-fit → hero tagliato). clip
     contiene solo l'asse X, lasciando intatto il reveal verticale. */
  overflow-x: clip;
}
.paragraph-norm {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-text);
  padding: 40px 40px var(--space-3);
}
/* Tablet */
@media (min-width: 769px) {
  .body,
  .paragraph {
    font-size: 28px;
  }
}

/* Tablet: titoli intermedi (base 38.4px mobile · 96px desktop).
   Solo 769–1024px — desktop e mobile restano invariati. */
@media (min-width: 769px) and (max-width: 1024px) {
  .title {
    font-size: 59px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .title {
    font-size: 6rem; /* 96px */
  }
}

/* ============================================================
   REVEAL TITOLO — struttura a mascheratura per linea

   HTML atteso per titoli spezzati ("titolo spezzato" §2):
     <h2 class="title">
       <span class="title-line"><span class="title-inner">BIRRE</span></span>
       <span class="title-line"><span class="title-inner">ARTIGIANALI</span></span>
     </h2>

   text.js anima .title-inner da yPercent:110 → 0
   attraverso il clip creato da overflow:hidden su .title-line.

   Per titoli a singola riga text.js aggiunge la struttura automaticamente.
   ============================================================ */

.title-line {
  display: block;
  overflow: hidden;
  line-height: inherit;
}

.title-inner {
  display: block;
  will-change: transform;
}

/* ============================================================
   HIGHLIGHT TESTO (§1)
   Uso: <span class="hl">parola chiave</span>
   ============================================================ */

.hl {
  color: var(--color-green);
}

/* ============================================================
   GRANA / DUST — overlay globale (texture immagine, DUE layer)
   Entrambi SCORRONO COL CONTENUTO (position:absolute, alti quanto
   tutta la pagina → vedi sizeGrain in main.js) con bg-grana.png
   ripetuta in verticale (repeat-y) → strip lunga e continua, non un
   fotogramma fermo. pointer-events:none → non intercettano input.

   Perché due layer: la texture ha solo granelli SCURI, e nessun
   singolo blend li mostra sia sul chiaro che sullo scuro. Quindi:
     • .grain--dark  (multiply)        → scurisce i fondi CHIARI
     • .grain--light (invert + screen) → schiarisce i fondi SCURI
   Insieme → grana visibile su OGNI sezione (chiare, scure, colorate).

   Intensità regolabile con .grain--dark/.grain--light { opacity }.
   ============================================================ */

.grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;         /* l'altezza reale = intera pagina, settata via JS */
  z-index: 9000;            /* sopra il contenuto, sotto eventuali modali full-screen */
  pointer-events: none;
  background-image: url("../img/bg-grana.png");
  background-size: 100% auto;   /* larghezza piena, altezza proporzionale */
  background-repeat: repeat-y;  /* si ripete verso il basso → continua su tutta la pagina */
}

/* Granelli scuri × multiply → visibili sui fondi CHIARI (panna, carta) */
.grain--dark {
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* Texture invertita (granelli chiari) × screen → visibili sui fondi
   SCURI e colorati (hero, verde, bordeaux, notte) */
.grain--light {
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: invert(1);
}

/* ============================================================
   SECTION BASE (§3)
   Padding fisso: 70px top/bottom · 40px left/right
   Ogni section DEVE avere un id univoco
   ============================================================ */

.section {
  padding: 70px 40px;
  position: relative;
}

/* Spaziatura interna gerarchica (desktop) */
.section .title + .body,
.section .title + .paragraph {
  margin-top: var(--space-4); /* 24px */
}

.section .body + .btn,
.section .paragraph + .btn {
  margin-top: 50px;
}

/* Tra blocchi interni alla stessa section */
.section > * + * {
  /* override specifico per block gaps — usa --space-6 / --space-5 */
}

/* Mobile */
@media (max-width: 768px) {
  .section .title + .body,
  .section .title + .paragraph {
    margin-top: var(--space-3); /* 16px */
  }

  .section .body + .btn,
  .section .paragraph + .btn {
    margin-top: 50px;
  }
}

/* ============================================================
   CONTAINER (wrapper max-width)
   ============================================================ */

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.accent{
  color:#BFC403;
}
.accent-red{
font-size: 46px;
color:#BFC403;
position: relative;
top:8px;
}
@media screen and (max-width: 576px) {
  .accent-red{
    position: relative;
    top:18px;
    }
}
/* ============================================================
   PIN — wrapper per paragrafi animati (scrub §6.1)
   Struttura attesa:
     <div class="pin">
       <div class="container">
         <p class="paragraph">Testo…</p>
       </div>
     </div>

   .pin viene pinnato da ScrollTrigger; overflow:hidden
   nasconde le parole fuori schermo durante l'animazione.
   ============================================================ */

.pin {
  overflow: visible; /* body overflow-x:hidden previene scrollbar; intro__text ha il proprio clip */
  min-height: 100vh; /* Il contenuto è centrato (align-items:center) → il testo si
                        allinea al centro viewport dove atterra il mascherone 3D
                        (.scene-3d fixed, anch'esso centrato nel viewport). Ridurre
                        sotto 100vh alza il testo e lo disallinea dal 3D. */
  display: flex;
  align-items: center;
  padding-inline: 40px;
}

/* ============================================================
   INTRO — due versioni separate (mobile-first)
     .intro-mobile  (≤768px): solo paragrafo → CTA, niente 3D
     .intro-desktop (≥769px): 3/5 testo + 2/5 dove atterra il 3D
   Le animazioni della versione NON visibile non vengono create
   (gsap.matchMedia in main.js) → nessun conflitto di ScrollTrigger.
   ============================================================ */

/* Default = mobile */
.intro-desktop { display: none; }

.intro-mobile {
  display: block;
  /* 96px top: respiro, il paragrafo non resta incollato al top.
     Flusso normale + overflow visibile → nessuna riga tagliata.
     Laterali 10px su mobile (gutter ridotto, vedi §3/override mobile). */
  padding: var(--space-8) 10px 70px;
}

/* ── Desktop: layout 3/5 testo + 2/5 mascherone 3D ── */
.intro__layout {
  display: flex;
  align-items: center;
  width: 100%;
}

.intro__text {
  width: 60%;
  flex-shrink: 0;
  /* no overflow:hidden — le .char non escono dai bordi (fade in-place) */
}

/* Spaziatore della colonna 2/5: riserva lo spazio dove la .scene-3d
   fixed atterra al termine della discesa. Vuoto per scelta. */
.intro__model {
  width: 40%;
  flex-shrink: 0;
  height: 80vh;
  pointer-events: none;
}

/* Intro a due colonne (testo + 3D) SOLO da desktop (≥1025px). Su tablet
   e mobile (≤1024px) resta la versione .intro-mobile (solo paragrafo + CTA):
   il mascherone non viaggia qui, sfuma nell'hero (vedi hero.js/text.js). */
@media (min-width: 1025px) {
  .intro-desktop { display: block; }
  .intro-mobile  { display: none; }
}

/* ============================================================
   CHAR — <span> iniettato da text.js per ogni lettera (tutorial081)
   display: inline-block necessario per SplitText + opacity
   ============================================================ */

.char {
  display: inline-block;
  will-change: opacity, transform;
}

/* Wrapper parola iniettato da SplitText (type:'chars,words') */
.char-word {
  display: inline-block;
  white-space: nowrap;
}

/* ============================================================
   WORD — <span> iniettato da text.js (split per parola) per
   l'effetto "Simultaneous words" §6.1 della versione mobile
   dell'intro. inline-block: le parole traslano (x/opacity) senza
   riflusso; l'eventuale sporgenza a destra è contenuta dal
   contenitore (`.body/.paragraph { overflow-x: clip }`), non più
   dal solo `body` (insufficiente con Lenis su mobile).
   ============================================================ */

.word {
  display: inline-block;
  will-change: opacity, transform;
}

/* ============================================================
   PULSANTE / CTA (§5)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-lime);
  color: var(--color-on-lime);
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: var(--space-3) var(--space-5); /* 16px / 32px */
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-bordeaux);
  color: var(--color-on-bordeaux);
  outline: none;
}

/* Margine sopra il pulsante CTA all'interno del .pin — SEMPRE 50px (CLAUDE.md §3) */
.intro__btn {
  margin-top: 50px;
}

/* Pulsante centrato orizzontalmente nel suo contenitore block.
   width:fit-content + margin auto → resta della larghezza del
   contenuto (non si stira) e si centra. */
.btn-center {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* ============================================================
   MARQUEE — separatore bordeaux tra section (§4)

   HTML atteso:
     <div class="marquee" aria-hidden="true" role="presentation">
       <div class="marquee__inner">
         <span>BIRROCCO 2026 – 11° EDIZIONE // ... //&nbsp;</span>
         <span>BIRROCCO 2026 – 11° EDIZIONE // ... //&nbsp;</span>
       </div>
     </div>

   Il contenuto è duplicato nel DOM.
   main.js → gsap.to(.marquee__inner, { xPercent: -50 }) crea il loop.
   ============================================================ */

.marquee {
  background: var(--color-bordeaux);
  color: var(--color-on-bordeaux);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  white-space: nowrap;
  padding-block: var(--space-3); /* 16px */
  /*margin-inline: 40px;*/
  border-radius: 40px;
  user-select: none;
}

.marquee__inner {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.marquee__inner span {
  padding-inline: var(--space-4); /* 24px — piccolo respiro laterale */
}

/* ============================================================
   ACCESSIBILITÀ — focus visibile globale
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}

/* skip-link per screen reader / tastiera */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   PREFERS REDUCED MOTION
   Disabilita tutte le animazioni CSS; text.js rispetta la stessa
   media query lato JS prima di inizializzare ScrollTrigger.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .title-inner {
    transform: none !important;
  }

  .word {
    transform: none !important;
    opacity: 1 !important;
  }

  .marquee__inner {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   NAVBAR — fissa in alto, overlay sul contenuto
   Sinistra: REEL · Centro: voci · Destra: date (sempre visibili)
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;          /* voci centrate */
  padding: var(--space-3) 40px;
  min-height: 64px;
  pointer-events: none;
}

/* ── Logo — assoluto a sinistra ─────────────────────────── */
.nav__logo {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  line-height: 0;
}

.nav__logo img {
  height: 38px;
  width: auto;
  display: block;
}

.nav__center,
.nav__right {
  pointer-events: auto;
  display: flex;
  align-items: center;
}

/* ── Toggle — assoluto a destra ─────────────────────────── */
.nav__right {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Voci di menu — pill lime, centrate, senza bordo ────── */
.nav__center {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.nav__center a {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.68rem, 0.9vw, 0.85rem);
  white-space: nowrap;
  padding: 8px 16px;
  background: var(--color-lime);
  color: var(--color-on-lime);
  border: none;
  border-radius: 999px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.nav__center a:hover,
.nav__center a:focus-visible {
  filter: brightness(0.9);
  transform: scale(1.03);
  outline: none;
}

/* ── Pulsante REEL — fisso in basso a sinistra ──────────── */
.reel-btn {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-lime);
  color: var(--color-on-lime);
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.reel-btn:hover {
  filter: brightness(0.95);
  transform: scale(1.04);
}

.reel-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-lime);
}

/* ── Modale REEL — lightbox video ───────────────────────── */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
}

.reel-modal[hidden] { display: none; }

/* Blocco scroll di sfondo quando il modale è aperto */
html.reel-open,
html.reel-open body { overflow: hidden; }

.reel-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #0E0E0C 82%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  cursor: pointer;
}

.reel-modal__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* MOBILE (default): larghezza = larghezza del video verticale (così la
     caption non allarga la cornice e il ✕ resta ancorato all'angolo del video).
     Derivata dall'altezza utile: height = width·16/9 ≤ (100dvh − reserve);
     su schermi stretti non supera mai il 92vw. */
  width: min(92vw, calc((100dvh - 150px) * 0.5625));
  will-change: clip-path, transform;
}

.reel-modal__video {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  border-radius: 6px;
  /* Cornice pop-barocca: filo lime + ombra profonda */
  box-shadow:
    0 0 0 3px var(--color-lime),
    0 0 0 6px color-mix(in srgb, var(--color-bordeaux) 70%, transparent),
    0 40px 90px rgba(0, 0, 0, 0.55);
}

/* Reel verticale 9:16 (sorgente 1080×1920) — solo mobile */
.reel-modal__video--vertical   { aspect-ratio: 9 / 16; }
/* Spot orizzontale 16:9 — solo desktop/tablet (nascosto su mobile) */
.reel-modal__video--horizontal { aspect-ratio: 16 / 9; display: none; }

/* Desktop e tablet (≥769px): mostra l'orizzontale, nascondi il verticale
   e allarga la cornice sul 16:9 (width = height·16/9 ≤ altezza utile). */
@media (min-width: 769px) {
  .reel-modal__frame {
    width: min(90vw, calc((100dvh - 150px) * 1.7778), 1100px);
  }
  .reel-modal__video--vertical   { display: none; }
  .reel-modal__video--horizontal { display: block; }
}

.reel-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Controllo custom play/pausa (Vimeo con controls=0) ──────
   Unico comando del player, ancorato in basso a sinistra del video.
   Stile brand: lime → bordeaux all'hover (come i .btn, §5). */
.reel-play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-lime);
  color: var(--color-on-lime);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.reel-play:hover,
.reel-play:focus-visible {
  background: var(--color-bordeaux);
  color: var(--color-on-bordeaux);
  transform: scale(1.06);
}
.reel-play__ico {
  width: 22px;
  height: 22px;
  display: block;
}
/* A riposo/in pausa mostra ▶ ; durante il play mostra ❚❚ */
.reel-play__ico--pause { display: none; }
.reel-modal__video.is-playing .reel-play__ico--play  { display: none; }
.reel-modal__video.is-playing .reel-play__ico--pause { display: block; }

@media (max-width: 768px) {
  .reel-play { width: 46px; height: 46px; left: 12px; bottom: 12px; }
  .reel-play__ico { width: 20px; height: 20px; }
}

.reel-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--color-lime);
  color: var(--color-on-lime);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.reel-modal__close:hover,
.reel-modal__close:focus-visible {
  background: var(--color-bordeaux);
  color: var(--color-on-bordeaux);
  transform: scale(1.06) rotate(90deg);
}

/* Desktop/tablet: ✕ leggermente più rientrato all'angolo (così non viene
   mai tagliato e resta tutto visibile). Mobile mantiene il suo override. */
@media (min-width: 769px) {
  .reel-modal__close {
    top: -6px;
    right: 6px;
  }
}

.reel-modal__cap {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.9rem, 2vw, 1.25rem);
  color: #FBFAF7;
}

@media (max-width: 768px) {
  .reel-modal__close {
    top: 8px;
    right: 8px;
    background: var(--color-lime);
  }
}

/* ── Toggle mobile (hamburger) ──────────────────────────── */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav--open .nav__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* ── Responsive nav ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav__toggle { display: flex; }

  .nav--open {
    z-index: 200;
  }

  .nav__center {
    position: fixed;
    inset: 0;
    flex-direction: column;
    flex-wrap: nowrap;        /* base è wrap (per il nav orizzontale desktop): in
                                colonna faceva "colonnare" LABORATORI a destra.
                                nowrap → tutte le voci in una sola colonna. */
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--color-bordeaux);   /* #81251E — fondo del pannello menu mobile */
    padding: 96px 40px var(--space-6);
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 999;
    overflow-y: auto;         /* se le voci non ci stanno in altezza, scrolla */
  }

  .nav--open .nav__center {
    transform: translateY(0);
  }

  /* nav__right (wrapper del toggle) sopra l'overlay */
  .nav--open .nav__right {
    position: absolute;
    z-index: 1000;
  }
  .nav--open .nav__toggle span { background: #ffffff; }   /* X di chiusura bianca */

  /* Voci del menu mobile: restano pillole lime (--color-lime, ereditato dalla
     regola base), ma qui il testo diventa bianco invece del nero standard
     (--color-on-lime) — solo in questo pannello, non tocca i pulsanti/CTA
     del resto del sito che restano lime+nero come da design system. */
  .nav__center a {
    font-size: 1.4rem;
    text-align: center;
    color: var(--color-on-bordeaux);   /* #FFFFFF */
  }
}

/* ============================================================
   SECTION 1 — HERO
   .hero è alto 220vh — fornisce la distanza di scroll per
   l'animazione. .hero__sticky resta incollato nel viewport
   (position: sticky) durante tutto lo scroll del blocco.
   Nessun GSAP pin → nessun problema con containing block.
   ============================================================ */

.hero {
  position: relative;
  height: 220vh;               /* spazio scroll per l'animazione */
}

/* ── Layer sticky: tutto il contenuto visibile vi sta dentro ── */
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ── BACKGROUND HERO — container del tunnel three.js ──────────
   fixed, copre il viewport, z-index:-2 → DIETRO al mascherone 3D
   (.scene-3d, z-index:-1) e ai testi (z-index:10). Fondo nero come
   fallback (evita flash bianco prima del render WebGL). L'opacità è
   animata in main.js: scura nell'hero → 0 (bianco) nelle section. */
#hero-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #000;
  pointer-events: none;
  will-change: opacity;
}
#hero-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Filtro: alone di luce dietro il mascherone + vignettatura → più profondità.
   È dentro #hero-bg (z-index:-2) quindi resta DIETRO al mascherone (-1) e ai
   testi (10): agisce solo sullo sfondo, non sul primo piano.
   3 layer (dipinti dall'alto verso il basso):
   1) ALONE DI LUCE: radiale caldo, luminoso al centro (dietro il 3D) →
      trasparente ai lati. Dà l'effetto "spot" richiesto: centro più chiaro,
      lati più scuri, come una sorgente di luce dietro il modello.
   2) VIGNETTATURA: scurisce i bordi (invariata).
   3) SCURIMENTO piatto (più leggero di prima: 0.3/0.42 → 0.22/0.34, così
      l'alone al centro respira di più). */
#hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 50% 45%, rgba(255, 244, 224, 0.20) 0%, rgba(255, 244, 224, 0.08) 34%, transparent 66%),
    radial-gradient(125% 105% at 50% 38%, transparent 28%, rgba(0, 0, 0, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.34));
}

/* ── SCENA 3D — un solo mascherone, fixed dietro a tutto ──
   Viaggia da centro-hero a colonna 2/5 dell'intro tramite GSAP.
   z-index: 0 + pointer-events:none → sta dietro ai testi (che sono
   sopra grazie a z-index/stacking) ma davanti al bianco di sfondo. */
.scene-3d {
  position: fixed;
  inset: 0;
  z-index: -1; /* dietro a tutti i testi, davanti al bianco di sfondo */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}

.scene-3d model-viewer {
  width: 100%;
  height: 100%;
  background-color: transparent;
  --poster-color: transparent;
}

/* ── Ritocchi SOLO DESKTOP (≥1025px) ──────────────────────────
   • più aria sopra la navbar
   • mascherone 3D abbassato ~3% (transform sul model-viewer, non sulla
     .scene-3d → non interferisce con le timeline GSAP del viaggio). */
@media (min-width: 1025px) {
  .nav { padding-top: 30px; }
  .scene-3d model-viewer { transform: translateY(3%); }
}

/* ── LAYER DRAG del mascherone hero ──────────────────────────
   Trasparente, fixed, z-index 5: DAVANTI al contenuto in-flow
   (così intercetta il drag del cursore, che altrimenti non
   raggiungerebbe la .scene-3d a z-index:-1) ma DIETRO a navbar e
   REEL (z-index:100, restano cliccabili). pointer-events:none di
   default → hero.js lo attiva SOLO mentre l'hero è a schermo.
   touch-action:pan-y → su touch lo scroll verticale resta libero. */
.scene-3d__grab {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  cursor: grab;
  touch-action: pan-y;
}
.scene-3d__grab.is-grabbing {
  cursor: grabbing;
}
/* Fase intro (desktop): il mascherone è atterrato nella colonna 2/5 a
   destra → il layer copre solo la striscia destra, lasciando libera (e
   cliccabile) la colonna sinistra con paragrafo e CTA.
   NB: durante il viaggio hero.js anima `left` inline da 0% a 55%
   (insegue il modello); questo valore è il fallback/stato finale. */
.scene-3d__grab--intro {
  left: 55%;
}

/* Nasconde la progress-bar grigia di caricamento di model-viewer
   (default-progress-bar) su TUTTI i model-viewer: hero + premio. */
model-viewer::part(default-progress-bar) {
  display: none;
}

/* ── Topbar hero: label (sx) ── linea lime ── date (dx) ──
   Flex row centrata in alto (max 900px): la linea lime collega le due
   etichette. Centratura coerente su mobile / tablet / desktop. */
.hero__topbar {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  z-index: 10;
  /* Solo testo, nessun link: trasparente al cursore, così il drag del
     mascherone (.scene-3d__grab, z-index 5) funziona anche qui sopra. */
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-inline: 40px;   /* margine dai bordi (vale ovunque) */
}

/* ── Linea lime che collega label e date ─────────────────── */
.hero__rule {
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  height: 2px;
  background: var(--color-lime);
}

/* ── Label (sx) + Date (dx) — stesso stile, ora in flow nella topbar ── */
.hero__label,
.hero__dates {
  flex: 0 0 auto;
  color: var(--color-on-bordeaux);
  font-family: var(--font-body);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: clamp(0.7em, 1.3vw, 1rem);
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 8px 0;
}

@media screen and (max-width: 576px) {
  /* Mobile: layout VERTICALE — "Porto turistico di Marina di Ragusa" è troppo
     lungo per stare in riga con le date, quindi si impila: label sopra, poi la
     linea lime animata, poi le date sotto (l'ordine in HTML è già label→rule→date). */
  .hero__topbar {
    top: 96px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-inline: 16px;
    text-align: center;
  }
  /* La linea lime: da "connettore" flessibile a trattino orizzontale centrato.
     L'animazione scaleX dal centro (heroIntro.js) resta valida. */
  .hero__rule {
    flex: 0 0 auto;
    width: clamp(72px, 40vw, 150px);
    min-width: 0;
  }
  .hero__label,
  .hero__dates {
    font-size: 0.72rem;
    letter-spacing: 0;
    padding: 4px 0;
    white-space: normal;    /* può andare a capo su schermi molto stretti */
    text-align: center;
  }
}

/* ── Blocco titoli (bottom) ─────────────────────────────── */
/* z-index alto + isolation per battere il canvas WebGL di model-viewer */
.hero__titles {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 70px;
  z-index: 10;
  isolation: isolate;
  transform: translateZ(0);  /* promuove su layer GPU separato */
  /* Solo testo display, nessun link: trasparente al cursore. Il blocco
     (largo quasi tutto il viewport) saliva SOPRA il mascherone e, stando
     a z-index 10 > 5, rubava il pointer al layer di drag → il cursore
     "a volte non funzionava" nella metà bassa dell'hero. */
  pointer-events: none;
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;     /* "11 ANNI" verso sinistra */
  margin: 0;
}

.hero__line {
  display: block;
}

/* "11 ANNI" centrato a sinistra (leggermente staccato dal bordo) */
.hero__line--anni {
  align-self: flex-start;
  margin-left: clamp(0px, 6vw, 120px);
}

/* "DI" e "BIRROCCO" centrati */
.hero__line--di,
.hero__line--birrocco {
  align-self: center;
}

/* Parola con background — 5px di padding orizzontale.
   padding-bottom in em: le metriche di Druk con line-height:1 lasciano
   ~0.21em d'aria sopra le maiuscole ma solo ~0.03em sotto la baseline →
   le lettere toccano il bordo inferiore del chip. 0.18em estende il
   background sotto la scritta bilanciando l'aria naturale che c'è sopra.

/* Parola con background — solo 5px di padding orizzontale */
.hero__word {
  display: inline-block;
  background: var(--color-green);
  color: var(--color-on-bordeaux);   /* #FFFFFF, contrasto su verde */
  padding: 0 5px;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
}
/* Stesso font-size per tutte e tre le righe (CLAUDE.md: 6rem desktop / 38.4px mobile) */
.hero__line--anni     .hero__word,
.hero__line--di       .hero__word,
.hero__line--birrocco .hero__word { font-size: clamp(38.4px, 7.5vw, 6rem); }

/* ── Location (centrata, sotto i titoli) ────────────────── */
/* Bianco: la hero ha fondo scuro (tunnel #hero-bg) → testo leggibile */
.hero__location {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--color-bg); /* #FFFFFF su fondo scuro */
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
}

.hero__pin {
  margin-right: var(--space-2);
}

/* ── Stats numeriche (dopo .hero__location) ── */
.hero__stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 20px;
  margin-top: 64px;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.8vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #BFC403;
  text-transform: uppercase;
}

.hero__stat-label {
  font-family: var(--font-body);
  font-size: clamp(8px, 0.75vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--page-fg);
  line-height: 1.35;
  max-width: 300px;
}

.hero__stat-bar {
  display: block;
  height: 1.5px;
  background: #BFC403;
  width: 100%;                    /* = larghezza colonna = larghezza label */
  transform: scaleX(0);          /* animata a scaleX(1) da heroStats.js */
  transform-origin: left center;
  margin-top: 7px;
}

@media (max-width: 768px) {
  /* Numeri a tutta larghezza: space-between (niente spazio esterno) + margine
     negativo che compensa l'inset di 40px di .hero__titles → i numeri arrivano
     a ~8px dai bordi del viewport (prima erano stretti al centro). */
  .hero__stats {
    justify-content: space-between;
    gap: 2px;
    margin-inline: -32px;
  }
  .hero__stat-label { max-width: 120px; font-size: 10px; }
}

/* ── Desktop tweaks ─────────────────────────────────────── */
@media (min-width: 1025px) {
  .hero__title {
    gap: var(--space-4);
  }
}

/* ============================================================
   SECTION 3 — BIRRE ARTIGIANALI — nastro orizzontale infinito
   Una riga di foto INCLINATE in loop seamless: scorre lenta da
   ferma, ACCELERA con la velocità di scroll della pagina ed è
   TRASCINABILE (puntatore + touch). Logica in slider.js.
   ============================================================ */

/* Nastro full-bleed: clip orizzontale, padding verticale ampio = respiro per
   tilt forti + stagger verticale (gli angoli inclinati non vengono tagliati). */
.birre-strip {
  overflow: hidden;
  padding: 96px 0;
  background: transparent;
}

/* La riga: il clip orizzontale lo fa .birre-strip; qui tilt e stagger restano
   visibili. Trascinabile col puntatore; su touch lo scroll verticale è libero. */
.birre-row {
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
}
.birre-row.is-dragging {
  cursor: grabbing;
}

/* gap ridotto: con tilt forti + stagger gli angoli delle foto si sovrappongono
   leggermente (effetto "una sopra l'altra sui corner", come brewsandgrooves). */
.birre-row__inner {
  display: flex;
  align-items: center;
  width: max-content;           /* GSAP legge la larghezza reale del contenuto */
  gap: 10px;
  will-change: transform;
}

/* Immagine singola — scaglionata in verticale (--shift) e inclinata (--tilt).
   Larghezza/altezza da custom prop iniettate da slider.js. Niente border-radius. */
.birre-img {
  flex-shrink: 0;
  width: var(--w, 300px);
  height: var(--h, 400px);
  background-size: cover;
  background-position: center;
  display: block;
  transform: translateY(var(--shift, 0%)) rotate(var(--tilt, 0deg));
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
  border:4px solid var(--color-bordeaux);
}

@media (max-width: 768px) {
  .birre-strip { padding: 64px 0; }
  .birre-row__inner { gap: 6px; }
  /* riduce le foto mantenendo le proporzioni variabili */
  .birre-img {
    width: calc(var(--w, 300px) * 0.62);
    height: calc(var(--h, 400px) * 0.62);
  }
}

/* ============================================================
   SECTION 4 — BIRRE ARTIGIANALI MANIFESTO
   Titoli display stile hero (bg verde, Druk) + paragrafo pinnato.
   ============================================================ */

.birre-manifesto {
  /* nessun padding globale: header e pin gestiscono separatamente */
}

/* ── Header titoli ─────────────────────────────────────────── */
.birre-manifesto__header {
  padding: 70px 40px var(--space-4); /* top 70px — bottom 24px (titolo→testo, CLAUDE.md §3) */
}

.birre-manifesto__title {
  /* eredita .title — aggiunge solo il posizionamento per linea */
}

/* "BIRRE" — sinistra, leggero rientro */
.birre-manifesto__line--birre {
  margin-left: clamp(0px, 0px, 0px);
  margin-bottom: 6px;   /* = gap tra le righe del .passport__title */
}

/* "ARTIGIANALI" — più verso il centro */
.birre-manifesto__line--artigianali {
  margin-left: clamp(40px, 14vw, 220px);
}

@media (max-width: 768px) {
  .birre-manifesto__header {
    padding: 70px 10px var(--space-3); /* bottom 16px (mobile, CLAUDE.md §3) · laterali 10px */
  }

  .birre-manifesto__line--birre {
    margin-left: 0;
  }

  /* Font uguale a .passport__title (base .title, niente riduzione). "ARTIGIANALI"
     è più lunga → su mobile tolgo del tutto il rientro così entra a tutta larghezza. */
  .birre-manifesto__line--artigianali {
    margin-left: 0;
  }
}

/* Telefoni molto stretti (≤380px, es. iPhone mini/SE): SOLO la riga
   "ARTIGIANALI" (parola lunga) scende di qualche px — font fluido così entra
   giù fino ai ~320px. Il resto del titolo resta identico al .passport__title. */
@media (max-width: 380px) {
  .birre-manifesto__line--artigianali {
    font-size: clamp(28px, 9vw, 38.4px);
  }
}

/* ============================================================
   GRIGLIA BIRRIFICI — editorial tiles 4×2 (layout A)
   Desktop 4 col · Tablet 2 col · Mobile 2 col.
   Le linee della griglia sono lo sfondo nero che traspare dai
   gap di 1px. Hover/tap: tile → bordeaux, testo → bianco.
   ============================================================ */

.brewery-grid-wrap {
  padding: var(--space-6) 40px 70px; /* 96px top per staccare dal paragrafo */
}

.brewery-grid {
  display: grid;
  /* Desktop: 3 per riga di DEFAULT (adatto ai 6 birrifici attuali).
     Diventa 4 per riga in automatico quando i birrifici sono 7 o 8 —
     vedi la quantity-query :has() nel blocco desktop più sotto.
     Tablet/mobile: sempre 2 per riga (override nelle media query). */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;                       /* le linee della griglia */
  background: var(--color-text);  /* nero che traspare dai gap */
  border: 1px solid var(--color-text);
}

/* Auto 3 → 4 colonne SOLO su desktop: se esiste una 7ª tile, passa a 4/riga.
   :has() è una "quantity query": conta le tile senza JS. Scoped a ≥1025px
   così non scavalca mai le 2 colonne di tablet/mobile (che hanno specificità
   minore ma vincono perché questa regola qui non le tocca). */
@media (min-width: 1025px) {
  .brewery-grid:has(.brewery-tile:nth-child(7)) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Singola tile ─────────────────────────────────────────── */
.brewery-tile {
  background: var(--color-bg);
  padding: var(--space-4) var(--space-3); /* 24 / 16 */
  min-height: 150px;
  min-width: 0;                   /* colonne 1fr uguali: evita overflow min-content */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover solo su device con puntatore + tap (active) su touch:
   stesso effetto bordeaux su entrambi (CLAUDE.md §5/§9). */
.brewery-tile:hover,
.brewery-tile:focus-within,
.brewery-tile:active {
  background: var(--color-bordeaux);
  color: var(--color-on-bordeaux);
}

/* ── Numero progressivo (watermark) ───────────────────────── */
.brewery-tile__num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: #e0e0e0;
  transition: color 0.3s ease;
}

.brewery-tile:hover .brewery-tile__num,
.brewery-tile:focus-within .brewery-tile__num,
.brewery-tile:active .brewery-tile__num {
  color: rgba(255, 255, 255, 0.25);
}

/* ── Riga logo + info ─────────────────────────────────────── */
.brewery-tile__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* ── Logo (cerchio — le webp sono già rotonde col proprio sfondo) ── */
.brewery-tile__logo {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
}

.brewery-tile__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Testi ────────────────────────────────────────────────── */
.brewery-tile__info {
  min-width: 0;
}

.brewery-tile__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: inherit;
}

.brewery-tile__desc {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: #666;
  transition: color 0.3s ease;
}

.brewery-tile:hover .brewery-tile__desc,
.brewery-tile:focus-within .brewery-tile__desc,
.brewery-tile:active .brewery-tile__desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Desktop: testi più grandi (le tile hanno più spazio a 3/riga) */
@media (min-width: 1025px) {
  .brewery-tile__name { font-size: 17px; }
  .brewery-tile__desc { font-size: 15px; }
}

/* ── Tablet: 2 colonne ────────────────────────────────────── */
@media (max-width: 1024px) {
  .brewery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile: 2 colonne, logo sopra il testo (più stretto) ──── */
@media (max-width: 768px) {
  .brewery-grid-wrap {
    padding: var(--space-6) 10px 70px; /* 64px top su mobile · laterali 10px */
  }

  .brewery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brewery-tile {
    padding: var(--space-4) var(--space-3);
    min-height: 140px;
  }

  .brewery-tile__row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .brewery-tile__num {
    font-size: 1.6rem;
  }
}

/* ============================================================
   SECTION 5 — BEER PASSPORT (#passport)
   BLOCCO A: 2 colonne (sx pin + dx passaporto) · BLOCCO B: full
   width (titoletto + 5 icone). Padding section 70/40 (CLAUDE.md §3).
   Mobile-first: stack di default, due colonne da ≥769px.
   ============================================================ */
#passport{
  margin-top:40px;
}

.passport {
  padding: 70px 0;          /* 40px laterali gestiti per-blocco: bottom full-width */
  position: relative;
}

/* ── BLOCCO A — layout colonne ─────────────────────────────── */
.passport__top {
  display: flex;
  flex-direction: column;   /* mobile-first: impilato */
  gap: var(--space-7);      /* 64px tra testo e passaporto */
  padding-inline: 40px;     /* i 40px laterali vivono qui (CLAUDE.md §3) */
}

/* ── Colonna sinistra (pinnata da JS su desktop) ───────────── */
.passport__left {
  /* niente width su mobile: full width */
}

.passport__title {
  /* eredita .title — reveal gestito da animateTitles (text.js) */
}

.passport__title .title-line + .title-line {
  margin-top: 6px;
}

/* "PASSPORT" leggermente spostato verso destra (stilema titolo spezzato) */
.passport__line--passport {
  margin-left: clamp(24px, 6vw, 110px);
}

/* Titolo → paragrafo: 16px mobile (CLAUDE.md §3) */
.passport__intro {
  margin-top: var(--space-3);
}

/* ── Accordion REGOLAMENTO ─────────────────────────────────── */
.accordion {
  margin-top: var(--space-6); /* 48px: blocco interno */
  border-top: 1px solid var(--color-text);
}

.accordion__heading {
  margin: 0;
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-align: left;
}

.accordion__label {
  line-height: 1;
}

/* Icona +/− costruita in CSS (ruota a −/+ quando aperto) */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg); /* barra verticale → "+" */
}
/* Stato aperto: la verticale ruota fino a sparire → "−" */
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Pannello: collassato di default (max-height animata via JS).
   `hidden` lo nasconde finché il JS non lo apre. */
.accordion__panel {
  overflow: hidden;
}
.accordion__content {
  padding-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: #444;
}

.accordion__lead {
  font-weight: 700;
  color: var(--color-text);
}

/* Lista step numerata (il reset globale toglie list-style → la riabilito) */
.accordion__steps {
  list-style: decimal;
  padding-left: 1.4em;
  margin: var(--space-3) 0;
}
.accordion__steps li {
  margin-bottom: var(--space-2);
}

/* ── Colonna destra — passaporto ───────────────────────────── */
.passport__right {
  /* full width su mobile */
}

.passport-stage {
  position: relative;
  min-height: 60vw;          /* spazio verticale su mobile */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas della sequenza frame (apertura + sfoglio del passaporto).
   I frame sono 700×602 (crop quasi quadrato) con sfondo trasparente →
   aspect-ratio 700/602 così drawImage riempie il canvas senza distorsione,
   e il fondo del capitolo resta visibile dietro. Disegno in passport.js.
   max-width: min(900px, 95vh) → grande, ma l'altezza (≈0.86×larghezza) non
   sfora il viewport quando la sezione è centrata/pinnata. */
.passport-canvas {
  display: block;
  width: 100%;
  max-width: min(900px, 95vh);
  aspect-ratio: 700 / 602;
}

/* ── Placeholder generico (.ph) ────────────────────────────── */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed #c4c4c4;
  background: #f6f6f6;
  color: #9a9a9a;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── BLOCCO B — titoletto + 5 icone ────────────────────────── */
.passport__bottom {
  margin-top: 40px; /* 128px: stacco netto dal blocco A */
}

.passport__subtitle {
  text-align: center;         /* font-size: eredita .title (= BEER PASSPORT) */
}

/* Respiro sopra il chip "i birrifici" quando va a capo sotto "Timbra tutti":
   stesso gap (6px) delle righe dei titoli spezzati (.birre-manifesto__line--birre). */
.passport__subtitle .hero__word {
  margin-top: 6px;
}

.stamp-row {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;            /* mobile: va a capo se non ci sta */
}

.stamp-row__item {
  flex: 0 0 auto;
  position: relative;   /* ancora per il bollino sovrapposto al logo */
}

/* 6 loghi birrifici visibili; i 2 slot extra (birrifici non ancora
   annunciati) sono nascosti — al momento — su TUTTI i dispositivi,
   SOLO in questa section (le tile TBA della sezione birre restano
   visibili). Torneranno quando verranno annunciati. */
.stamp-row__item--tba { display: none; }

/* Timbro "B" grunge: SVG monocromatico su trasparente usato come MASK → il
   segno prende il colore del capitolo (--page-fg = panna sul bordeaux del
   passaporto) come fosse inchiostro sulla pagina. Si re-tinta da solo
   ad ogni capitolo, niente colore hardcoded. */
.stamp-icon {
  display: block;
  width: clamp(84px, 11vw, 128px);
  height: clamp(84px, 11vw, 128px);
  background-color: var(--page-fg);
  -webkit-mask: url("../img/birrocco-timbrino.svg") center / contain no-repeat;
          mask: url("../img/birrocco-timbrino.svg") center / contain no-repeat;
  opacity: 0.92;            /* leggera trasparenza → resa "inchiostro" */
}

/* Logo birrificio = la "casella" della pagina del passaporto: sempre
   visibile ma attenuato (70%), sotto il bollino. Le webp sono già
   rotonde col proprio sfondo (stessi asset delle tile birrifici) →
   cerchio pieno, stessa misura del timbro. */
.stamp-logo {
  display: block;
  width: clamp(84px, 11vw, 128px);
  height: clamp(84px, 11vw, 128px);
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.6;
}

/* Bollino "B" SOPRA il logo (solo negli slot con logo — nei due slot
   TBA resta in flow e dà la misura): il nuovo timbro ovale è PIÙ GRANDE
   del logo (120%) e leggermente sfalsato, così la timbrata "sborda" dal
   cerchio abbracciandolo come nel mockup.
   La rotazione random è impostata da passport.js. */
.stamp-logo + .stamp-icon {
  position: absolute;
  width: 120%;
  height: 120%;
  left: 15%;
  top: 32%;
}

/* ── Premio — "E VINCI UN BOCCALE 2026" + 3D interattivo ───── */
.passport__prize {
  margin-top: var(--space-9); /* 128px: stacco dal blocco timbri */
  text-align: center;
}

.passport__prize-title {
  /* font-size: eredita .title (= BEER PASSPORT) */
}

.prize-3d {
  position: relative;
  margin: var(--space-2) auto 0;
  max-width: 620px;
}

/* Il mascherone resta fermo; camera-controls = rotazione col cursore.
   cursor grab/grabbing comunica la possibilità di trascinarlo. */
.prize-3d__viewer {
  width: 100%;
  height: 52vh;
  min-height: 340px;
  cursor: grab;
  background-color: transparent;
  --poster-color: transparent;
}
.prize-3d__viewer:active {
  cursor: grabbing;
}

/* Hint "pill lime": pillola d'accento (capitolo cromatico) con glifo di
   rotazione che gira + leggero galleggiamento. Colori dal capitolo:
   fondo = --page-accent (lime su bordeaux), testo/glifo = --page-accent-ink.
   prefers-reduced-motion: niente rotazione/galleggiamento. */
.prize-3d__hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /*margin-top: var(--space-4);*/
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--page-accent);
  color: var(--page-accent-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: prize-hint-float 2.8s ease-in-out infinite;
}

.prize-3d__hint-glyph {
  width: 16px;
  height: 16px;
  color: currentColor;
  animation: prize-hint-spin 3.6s linear infinite;
}

@keyframes prize-hint-spin {
  to { transform: rotate(360deg); }
}

@keyframes prize-hint-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .prize-3d__hint,
  .prize-3d__hint-glyph { animation: none; }
}

/* Disclaimer sotto la pill hint (rimanda all'asterisco del titolo premio).
   Tipografia come gli altri paragrafi: 20px → 28px (≥769px), line-height 1.4.
   Inchiostro del capitolo (--page-fg) → transita coi capitoli come i .paragraph. */
.prize-3d__note {
  margin-top: var(--space-4);   /* 24px: stacco dalla pill hint */
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--page-fg);
}

@media (min-width: 769px) {
  .prize-3d__note { font-size: 28px; }
}

@media (min-width: 769px) {
  .prize-3d__viewer {
    height: 60vh;
  }
}

/* ── Solo Desktop (≥1025px): due colonne ───────────────────────
   Tablet e mobile (≤1024px) restano IMPILATI come mobile: titolo →
   testo → regolamento → canvas. Su tablet la colonna passaporto era
   troppo stretta a due colonne (canvas minuscolo), da qui il passaggio
   del confine da 769 a 1025 (coerente col pin di passport.js). */
@media (min-width: 1025px) {
  .passport__top {
    flex-direction: row;
    align-items: center;      /* contenuto centrato verticalmente nel viewport… */
    min-height: 100vh;        /* …così, pinnata, la sezione ha spazio uguale sopra/sotto */
    gap: var(--space-6);      /* 48px (era 96px): più larghezza alla colonna passaporto */
  }

  .passport__left {
    flex: 0 0 42%;
  }

  .passport__right {
    flex: 1 1 auto;
  }

  /* Titolo → paragrafo: 24px desktop (CLAUDE.md §3) */
  .passport__intro {
    margin-top: var(--space-4);
  }

  /* La colonna è centrata nel viewport (.passport__top min-height 100vh):
     il canvas definisce la propria altezza, niente min-height forzata. */
  .passport-stage {
    min-height: auto;
  }

  .accordion__trigger {
    font-size: 24px;
  }
}

/* ============================================================
   GUTTER LATERALE MOBILE (≤768px)
   Su mobile il padding sinistro/destro delle section passa da
   40px a 10px (più larghezza ai contenuti). Override mirato del
   solo asse orizzontale (padding-inline) → top/bottom invariati.
   Posizionato in fondo al file così vince sulle regole base che
   impostano i 40px (.section, .paragraph-norm, .passport__top).
   Le altre section (.intro-mobile, .birre-manifesto__header,
   .brewery-grid-wrap) hanno già il 10px nelle rispettive regole.
   I separatori marquee restano full-bleed (gestiti a parte).
   ============================================================ */
@media (max-width: 768px) {
  .section,
  .paragraph-norm,
  .passport__top {
    padding-inline: 10px;
  }
}


.hero__stats {
   
    display: none!important;
}