/* ══════════════════════════════
   MODULO: Responsive
   Breakpoints tablet e mobile
══════════════════════════════ */

/* ── TABLET (768–1024px) — identico desktop, solo burger ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-nav { display: none; }
  .burger     { display: flex; }
}

/* ── MOBILE (< 768px) ── */
@media (max-width: 767px) {
  body { overflow: auto; }

  /* Header */
  .header-main   { display: none; }
  .header-mobile { display: block; position: relative; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); }

  /* Layout */
  .main-desktop { display: none; }
  .main-mobile  { display: flex; flex-direction: column; flex: 1; overflow: auto; }

  /* Footer */
  .footer-main   { display: none; }
  .footer-mobile { display: block; background: var(--bg2); border-top: 1px solid var(--border); flex-shrink: 0; }

  /* Storia */
  .storia-sezione--tf,
  .storia-sezione--ft { grid-template-columns: 1fr; }
  .storia-sezione--tf .storia-foto-wrap { order: -1; }
  .storia-foto-wrap   { height: 240px; }
  .storia-testo-wrap  { padding: 32px 24px; }
  .storia-intro       { padding: 40px 24px 28px; }

  /* Zona C CTA mobile */
  .zone-c { border-left: none; border-top: 1px solid var(--border); padding: 32px 24px; flex: 1; }
}