/* zz-derived-mobile.css — RESPONSIVE DERIVATO (nessun artboard mobile nel
   prototipo): generato da derive-responsive.mjs + rifiniture. NON è contratto
   1:1 — sopra 991px il rendering resta identico al prototipo desktop. */
@media (max-width: 991px) {
  /* i reveal "da destra/sinistra" entrano con un translateX fuori schermo: si
     clippa l'asse X così non generano scroll orizzontale (l'asse Y resta
     scrollabile). */
  html, body { overflow-x: clip; }
  /* header STICKY con fondo pieno: resta in cima allo scroll (occupa il suo
     spazio nel flow, quindi non copre l'hero come farebbe un fixed) */
  header { position: sticky !important; top: 0; z-index: 80; flex-wrap: wrap; row-gap: 10px; background: #0F1F66 !important; }
  header nav { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { color: rgba(255,255,255,0.92) !important; white-space: nowrap; }
  img, video, svg { max-width: 100%; }
}

/* rifiniture mobile dichiarate nel progetto (derived.extraCss) */
@media (max-width: 991px) {
  /* sezione percorso: sul mobile le due colonne si impilano e la colonna
     sinistra (titolo + numerone) non e piu sticky, cosi non si sovrappone
     agli step che scorrono */
  .bruschetta-home-percorso-3 { flex-direction: column; }
  .bruschetta-home-percorso-4 { position: static !important; }
  /* titoli con parti in corsivo (em) che sul mobile non andavano a capo
     e venivano tagliati a destra: forzato il wrap */
  h1, h2, h1 em, h2 em, h3 em { overflow-wrap: break-word; white-space: normal; max-width: 100%; }
}

@media (max-width: 991px) {
.bruschetta-cp-header-11 { color: rgb(21, 43, 141) !important; }
.bruschetta-cs-header-11 { color: rgb(21, 43, 141) !important; }
.bruschetta-home-header-13 { color: rgb(21, 43, 141) !important; }
.bruschetta-lca-header-12 { color: rgb(21, 43, 141) !important; }
.bruschetta-ti-header-12 { color: rgb(21, 43, 141) !important; }
}