/* Prototipo desktop 1440 px, ridimensionato in proporzione sugli schermi più stretti. Palette unica, fissata dal sito. */
:root { --ink:#0A1330; --paper:#FFFFFF; --brand:#1853FF; --gx: max(clamp(32px, 8.33vw, 120px), calc((100vw - 1200px) / 2)); color-scheme: light; }
html, body { background: var(--paper); color: var(--ink); overflow-x: hidden; }
body { margin: 0; font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
#app { width: 100%; }

/* ===== Desktop (da 1024 px): fasce colorate a tutta larghezza, contenuti centrati =====
   Le fasce occupano tutta la finestra; i contenuti restano in una colonna centrale
   larga al massimo 1200 px. Tra 1024 e 1440 px i margini laterali si riducono. */
#app > section > div { width: 100% !important; }
#app svg[width="1440"] { width: 100%; height: auto; min-height: 100%; }
@media (min-width: 1024px) {
  #app [style*="padding"][style*="120px"] { padding-left: var(--gx) !important; padding-right: var(--gx) !important; }
  #app [style*="max-width: 980px"][style*="120px"] { max-width: none !important; padding-right: max(var(--gx), calc(100% - var(--gx) - 860px)) !important; }
  /* apertura della home: immagine e contatore entro la propria colonna */
  #app [style*="height: 470px"] > img { width: calc(100% - 60px) !important; }
  #app [style*="height: 470px"] > div { width: min(360px, 80%) !important; }
  #app nav > * { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #app nav { gap: 14px !important; font-size: 14px !important; }
  #app nav > a[style*="padding: 12px 20px"] { padding: 10px 14px !important; }
  #app [style*="height: 88px"] img { height: 34px !important; }
}
@media (min-width: 1024px) and (max-width: 1150px) {
  #app nav { gap: 10px !important; font-size: 13.5px !important; }
  #app [style*="height: 88px"] { gap: 24px; }
}
#app a { color: var(--brand); text-decoration: none; }
#app a:hover { opacity: .88; }
#app a:focus-visible { outline: 3px solid #FF6F61; outline-offset: 3px; }
#app strong { font-weight: 700; }
#app h1, #app h2 { text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ===== Smartphone e tablet (sotto 1024 px): impaginazione a una colonna =====
   Le pagine usano stili in linea pensati per 1440 px: qui vengono adattati
   con selettori sugli attributi e !important. Il desktop non cambia. */
@media (max-width: 1023px) {
  #app { width: 100%; }
  #app > section > div { width: 100% !important; }
  #app img { max-width: 100%; }
  #app svg[width="1440"] { display: none; }

  /* margini laterali */
  #app [style*="120px"] { padding-left: 20px !important; padding-right: 20px !important; }
  #app [style*="padding: 72px"], #app [style*="padding: 64px"], #app [style*="padding: 60px"],
  #app [style*="padding: 52px"], #app [style*="padding: 80px"], #app [style*="padding: 40px 120px"] {
    padding-top: 44px !important; padding-bottom: 44px !important; }

  /* griglie e affiancamenti: una colonna */
  #app [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  #app [style*="gap: 64px"], #app [style*="gap: 48px"] { gap: 28px !important; }
  #app [style*="justify-content: space-between"] { flex-wrap: wrap; gap: 16px; }
  #app [style*="display: flex"][style*="gap: 16px; align-items: center"],
  #app [style*="display: flex; gap: 16px"] { flex-wrap: wrap; }
  #app [style*="white-space: nowrap"] { white-space: normal !important; }

  /* titoli e testi */
  #app h1 { font-size: 40px !important; line-height: 1.1 !important; }
  #app h2 { font-size: 30px !important; line-height: 1.18 !important; }
  #app [style*="font-size: 84px"], #app [style*="font-size: 76px"], #app [style*="font-size: 64px"] { font-size: 48px !important; }
  #app [style*="font-size: 52px"], #app [style*="font-size: 46px"] { font-size: 30px !important; }
  #app [style*="font-size: 38px"], #app [style*="font-size: 34px"] { font-size: 28px !important; }
  #app [style*="font-size: 30px"] { font-size: 24px !important; }
  #app [style*="font-size: 28px"] { font-size: 22px !important; }
  #app p, #app li { font-size: 16px !important; }

  /* striscia in alto */
  #app a[style*="height: 44px"] { height: auto !important; padding: 10px 20px; flex-wrap: wrap; gap: 6px 10px !important; font-size: 13px !important; text-align: center; }

  /* intestazione e menu: solo le voci cliccabili, su più righe se serve */
  #app [style*="height: 88px"] { height: auto !important; flex-wrap: wrap; padding-top: 14px !important; padding-bottom: 12px !important; row-gap: 12px; }
  #app nav { width: 100%; flex-wrap: wrap; gap: 12px 18px !important; font-size: 15px !important; }
  #app nav > span { display: none !important; } /* voci non ancora cliccabili */
  #app nav > * { white-space: nowrap; }

  /* apertura della home: immagine e contatore impilati */
  #app [style*="height: 470px"] { height: auto !important; display: flex; flex-direction: column; gap: 16px; }
  #app [style*="height: 470px"] > * { position: static !important; width: 100% !important; }
  #app [style*="height: 470px"] > img { height: 220px !important; }

  /* immagini ad altezza fissa */
  #app img[style*="height: 420px"], #app img[style*="height: 380px"] { height: 240px !important; }

  /* footer */
  #app [style*="padding: 52px 120px 32px 120px"] { padding-top: 40px !important; }
  /* illustrazioni vettoriali e righe orizzontali lunghe */
  #app svg[role="img"] { width: 100% !important; height: auto !important; }
  #app [style*="display: flex; gap: 40px"] { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  /* griglie da mantenere affiancate su smartphone */
  #app [style*="grid-template-columns: 22px 1fr"] { grid-template-columns: 22px 1fr !important; gap: 10px !important; }
  #app [style*="grid-template-columns: 40px 1fr"] { grid-template-columns: 40px 1fr !important; gap: 12px !important; }
  #app [style*="grid-template-columns: 44px 1fr"] { grid-template-columns: 44px 1fr !important; gap: 12px !important; }
  #app [style*="grid-template-columns: 150px 1fr"] { grid-template-columns: 110px 1fr !important; gap: 14px !important; }
  #app [style*="grid-template-columns: 150px 1fr"] > img { width: 110px !important; height: 72px !important; }
  #app [style*="grid-template-columns: 180px 1fr"] { grid-template-columns: 96px 1fr !important; gap: 0 !important; }
  #app [style*="grid-template-columns: 180px 1fr"] > img { width: 96px !important; min-height: 0 !important; }
  #app [style*="grid-template-columns: 180px 1fr"] > div { padding: 18px !important; }
  #app [style*="grid-template-columns: 140px repeat(3"] { grid-template-columns: 34px repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; font-size: 12px !important; }
  #app [style*="grid-template-columns: 140px repeat(3"] * { font-size: 10.5px !important; letter-spacing: 0 !important; }
  #app [style*="grid-template-columns: 140px repeat(3"] > div { padding: 8px 5px !important; overflow-wrap: break-word; }
  #app [style*="grid-template-columns: 140px repeat(3"] > div > * { padding-left: 0 !important; padding-right: 0 !important; }
  #app [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* pagina SGR e SIM: numeri dei servizi */
  #app [style*="font-size: 140px"] { font-size: 72px !important; }
}