/* ═══════════════════════════════════════════════════════
   Sci Club Portegrandi – TEMA C: "Alpine Blanc"  v1.0
   Menu Nordic Noir · Bianco neve · Oro · Blu alpino
   ═══════════════════════════════════════════════════════ */

/* ── Font SELF-HOSTED ───────────────────────────────────────────────
   Prima erano caricati con @import da fonts.googleapis.com: la CSP del
   sito (`style-src 'self'`, `font-src 'self'`) BLOCCAVA quella richiesta,
   quindi i font non venivano mai applicati e ogni pagina registrava un
   errore in console (penalizza "Best practice"). Ospitandoli in locale:
   niente errori, niente richieste a terzi (anche meglio lato GDPR),
   niente CSS esterno che blocca il rendering. font-display:swap evita
   il testo invisibile durante il caricamento.
   Font variabili → un solo file copre tutti i pesi della famiglia. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/dmsans.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/playfair.woff2') format('woff2');
}

/* ── Variables ─────────────────────────────────────── */
:root {
  --blue-dark:   #0a2a6e;
  --blue-mid:    #1a4db5;
  --blue-light:  #3a7bd5;
  --blue-icy:    #dce8f7;
  --gold:        #b8860b;
  --gold-light:  #d4a017;
  --gold-warm:   #f5c400;
  /* Oro leggibile COME TESTO su bianco: 5,32:1 (WCAG AA).
     --gold (#b8860b) è solo 3,25:1 → usarlo esclusivamente per bordi/decori. */
  --gold-text:   #8a6508;
  --snow:        #ffffff;
  --snow-soft:   #f7f9fc;
  --snow-deep:   #edf1f8;
  --mist:        #c8d4e8;
  --text-dark:   #0a2a6e;
  --text-body:   #3a4a6b;
  --text-muted:  #5a6784;
  --border:      #dce8f7;
  --radius:      2px;
  --shadow-sm:   0 2px 12px rgba(10,42,110,.08);
  --shadow-md:   0 8px 32px rgba(10,42,110,.12);
  --shadow-lg:   0 16px 48px rgba(10,42,110,.16);
  --transition:  .25s ease;
  --font-head:   'Playfair Display', Georgia, serif;
  --font-body:   'DM Sans', system-ui, sans-serif;

  /* Variabili di interazione consumate dai LAYOUT (struttura).
     Ogni palette le ridefinisce così le strutture si adattano ai colori.
     Default = palette Alpine (header navy scuro). */
  --lay-accent:    var(--gold);            /* numeri sezione, dettagli struttura */
  --rule-color:    var(--blue-dark);       /* hairline/divisori (swiss, magazine) */
  --nav-hover-bg:  rgba(255,255,255,.09);  /* hover voce nav in sidebar */
  --nav-active-bg: rgba(255,255,255,.12);  /* voce nav attiva */
  --nav-active-fg: #ffffff;                /* testo voce nav attiva */
  --band-bg:       rgba(10,42,110,.04);    /* fasce alternate (fullbleed) */
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--snow);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
  /* Sfondo Dolomiti: fisso, copre tutto, non si ripete */
  background-image:
    linear-gradient(rgba(245,248,252,.65), rgba(245,248,252,.65)),
    url('../img/background-1280.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

img { max-width:100%; height:auto; display:block; }
a { color: var(--blue-mid); text-decoration:none; transition: color var(--transition); }
a:hover { color: var(--gold-text); }
ul { list-style:none; }

/* ── Typography ────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-dark);
}
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1rem, 2.5vw, 1.25rem); }
p  { line-height: 1.75; color: var(--text-body); font-size: .95rem; font-weight: 400; }

/* ── Layout helpers ────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}
.section {
  padding: 60px 0;
  background: transparent;
}

.section--alt {
  background: transparent;
  position: relative;
}
.section--alt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-warm), transparent);
  opacity: .4;
}

.section--blue {
  background: linear-gradient(135deg, rgba(10,42,110,.90) 0%, rgba(26,77,181,.88) 100%);
  color: var(--snow);
  position: relative;
  overflow: hidden;
}
.section--blue::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(245,196,0,.08) 0%, transparent 70%);
  pointer-events: none;
}
.section--blue::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  pointer-events: none;
}
.section--blue p { color: rgba(255,255,255,.75); }
.section--blue h2 { color: var(--snow); }

/* ═══════════════════════════════════════════════════
   HEADER — stile Nordic Noir mantenuto
   ═══════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,42,110,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 32px rgba(10,42,110,.35);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 12px;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-link img { height: 44px; width: auto; filter: brightness(1.1); }
.logo-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  color: var(--snow);
  letter-spacing: .01em;
}
.logo-text span {
  display: block;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 500;
  color: var(--gold-warm);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Desktop nav — identico al Nordic Noir */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  padding: 8px 14px;
  position: relative;
  transition: color var(--transition);
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 14px; right: 14px;
  height: 1px;
  background: var(--gold-warm);
  transform: scaleX(0);
  transition: transform .3s ease;
  transform-origin: left;
}
.main-nav a:hover { color: var(--snow); }
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--snow); }
.main-nav a.nav-soci {
  border: 1px solid var(--gold-warm);
  color: var(--gold-warm);
  margin-left: 10px;
  padding: 7px 18px;
  white-space: nowrap;
  font-weight: 400;
  transition: background var(--transition), color var(--transition);
}
.main-nav a.nav-soci:hover {
  background: var(--gold-warm);
  color: var(--blue-dark);
}
.main-nav a.nav-soci::after { display: none; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 100%; height: 1px;
  background: var(--gold-warm);
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--blue-dark);
  border-top: 1px solid rgba(255,255,255,.08);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--transition), background var(--transition);
}
.mobile-nav a:hover,
.mobile-nav a.active { color: var(--gold-warm); background: rgba(245,196,0,.06); }
.mobile-nav a.nav-soci {
  color: var(--gold-warm);
  margin: 12px 20px 8px;
  border: 1px solid var(--gold-warm);
  border-bottom: 1px solid var(--gold-warm);
  justify-content: center;
}
.mobile-nav a.nav-soci:hover { background: var(--gold-warm); color: var(--blue-dark); }

/* ═══════════════════════════════════════════════════
   HERO — bianco con accento blu
   ═══════════════════════════════════════════════════ */
.hero {
  background: rgba(255,255,255,.40);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(220,232,247,.5);
  padding: 12px 0;
}
.hero .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero h1 {
  color: var(--text-dark);
  font-size: clamp(1rem, 3vw, 1.4rem);
  margin: 0;
}
.hero-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  padding: 11px 28px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-appearance: none;
  min-height: 44px;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius);
}
.btn--primary {
  background: var(--blue-dark);
  color: var(--snow);
  border-color: var(--blue-dark);
}
.btn--primary:hover {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--snow);
}
.btn--outline {
  background: transparent;
  color: var(--snow);
  border-color: rgba(255,255,255,.5);
}
.btn--outline:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--snow);
  color: var(--snow);
}
.btn--blue {
  background: var(--blue-mid);
  color: var(--snow);
  border-color: var(--blue-mid);
}
.btn--blue:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  color: var(--snow);
}
.btn--whatsapp {
  background: #0f7a3f;
  color: #fff;
  border-color: #0f7a3f;
}
.btn--whatsapp:hover {
  background: #0c5f31;
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,.3);
}

/* ═══════════════════════════════════════════════════
   GRID & CARDS
   ═══════════════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-top: 3px solid var(--blue-light);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--gold);
}
.card__icon { font-size: 2rem; margin-bottom: 12px; }
.card__title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.card p { font-size: .88rem; color: var(--text-body); }

/* ═══════════════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════════════ */
.section-header {
  text-align: center;
  margin-bottom: 12px;
}
.section-header h2 {
  margin-bottom: 16px;
  text-shadow: 0 1px 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.7);
}
.section-header p {
  text-shadow: 0 1px 6px rgba(255,255,255,.8);
}
.section-header::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 14px auto 20px;
}
.section-header p { max-width: 540px; margin: 0 auto; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  margin-top: 24px;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
}
th {
  background: var(--blue-dark);
  color: var(--gold-warm);
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-body);
}
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: var(--snow-soft); }
tr:hover td { background: var(--snow-deep); }

/* ═══════════════════════════════════════════════════
   PRICE CARDS
   ═══════════════════════════════════════════════════ */
.price-card {
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
/* Luce riflessa angolo — neve che brilla */
.price-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: linear-gradient(225deg, rgba(245,196,0,.12) 0%, transparent 60%);
  pointer-events: none;
}
.price-card--featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(184,134,11,.15);
}
.price-card--featured::after {
  content: "Più scelto";
  position: absolute;
  top: 16px; right: -28px;
  background: var(--gold);
  color: var(--snow);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 40px;
  transform: rotate(45deg);
}
.price-card__name {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold-text);
  margin-bottom: 12px;
}
.price-card__price {
  font-family: var(--font-head);
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--blue-dark);
  line-height: 1;
  margin: 8px 0 4px;
}
.price-card__price sup { font-size: 1.1rem; vertical-align: super; color: var(--text-muted); }
.price-card__sub  { font-size: .75rem; color: var(--text-muted); margin-bottom: 20px; }
.price-card__list { text-align: left; margin: 16px 0; }
.price-card__list li {
  font-size: .85rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.price-card__list li::before {
  content: "—";
  color: var(--gold-text);
  flex-shrink: 0;
  font-size: .7rem;
  margin-top: 3px;
}
.price-card__list li:last-child { border-bottom: none; }
@media (hover: hover) {
  .price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .price-card--featured:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(184,134,11,.25);
  }
}

/* ═══════════════════════════════════════════════════
   PARTNER / SPONSOR
   ═══════════════════════════════════════════════════ */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.partner-card {
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-top: 2px solid var(--blue-light);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-top-color var(--transition);
}
.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--gold);
}
.partner-card__icon { font-size: 2rem; margin-bottom: 10px; }
.partner-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.partner-card p { font-size: .8rem; color: var(--text-body); }

/* ═══════════════════════════════════════════════════
   CONTATTI
   ═══════════════════════════════════════════════════ */
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.contact-row:last-child { border-bottom: none; }
.contact-row__icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.contact-row__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 4px;
}
.contact-row p { font-size: .9rem; margin: 0; color: var(--text-body); }
.contact-row a { color: var(--blue-mid); }
.contact-row a:hover { color: var(--gold-text); }
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #0f7a3f;
  border: 1px solid #0f7a3f;
  padding: 10px 22px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 10px;
  min-height: 44px;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  border-radius: var(--radius);
}
.whatsapp-btn:hover {
  background: #0f7a3f;
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,.25);
}

/* ═══════════════════════════════════════════════════
   INFO BOX
   ═══════════════════════════════════════════════════ */
.info-box {
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-left: 3px solid var(--blue-light);
  padding: 16px 18px;
  margin: 20px 0;
}
.info-box p { font-size: .88rem; color: var(--text-body); }
.info-box a { color: var(--blue-mid); }
.info-box ol { color: var(--text-body); font-size: .85rem; line-height: 1.8; }

/* Form inputs */
input, textarea, select {
  background: var(--snow) !important;
  color: var(--text-dark) !important;
  border-color: var(--border) !important;
}
input:focus, textarea:focus {
  border-color: var(--blue-light) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(58,123,213,.1) !important;
}
label { color: var(--text-body) !important; }

/* ═══════════════════════════════════════════════════
   PAGE HERO
   ═══════════════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(90deg, transparent, var(--gold-warm), transparent);
  height: 1px;
  padding: 0;
  overflow: hidden;
  opacity: .45;
}
.page-hero h1, .page-hero p { display: none; }

/* ═══════════════════════════════════════════════════
   FOOTER — blu scuro come header, coerente
   ═══════════════════════════════════════════════════ */
.site-footer {
  background: var(--blue-dark);
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.6);
  margin-top: auto;
  padding: 48px 0 0;
  font-size: .82rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-col h3 {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 16px;
}
.footer-col p { color: rgba(255,255,255,.55); font-size: .82rem; line-height: 1.7; margin: 0; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a { color: rgba(255,255,255,.55); font-size: .82rem; }
.footer-col ul li a:hover { color: var(--gold-warm); }
.footer-bottom {
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .72rem;
  color: rgba(255,255,255,.78);
}
.footer-bottom a { color: var(--gold-warm); }
.footer-bottom a:hover { color: var(--snow); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
/* Fix iOS: background-attachment:fixed non funziona su Safari mobile */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  body { background-attachment: scroll; }
  .main-nav  { display: none; }
  .hamburger { display: flex; }
  .section   { padding: 36px 0; }
  .grid { grid-template-columns: 1fr; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .grid--3 { grid-template-columns: 1fr; }
  table    { font-size: .78rem; }
  th, td   { padding: 8px 10px; }
  .hero .container { flex-direction: column; gap: 8px; text-align: center; }
  .section { padding: 24px 0; }
}
@media (max-width: 420px) {
  .partner-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; }
  .hero-btns    { flex-direction: column; align-items: center; }
  .btn          { width: 100%; max-width: 280px; }
}

/* ══════════════════════════════════════════════════════════════
   CSS-1: Form contatti — classi per stili inline (MOB-2 incluso)
   ══════════════════════════════════════════════════════════════ */
.pub-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: 4px;
}
.pub-input,
.pub-textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #ccd6e8;
  border-radius: 4px;
  font-size: 1rem; /* ≥16px: previene zoom automatico su iOS Safari */
  font-family: inherit;
  outline: none;
  min-height: 44px;  /* touch target */
  box-sizing: border-box;
  transition: border-color .15s;
}
.pub-input:focus,
.pub-textarea:focus { border-color: var(--blue-mid); }
.pub-textarea  { resize: vertical; min-height: 120px; }
/* Form contatti: flex column container */
.pub-form { display: flex; flex-direction: column; gap: 14px; }
/* Honeypot: nascosto a utenti, compilato dai bot */
.hp-field { position: absolute; left: -9999px; top: -9999px; }
/* MOB-2: submit full-width su mobile */
@media (max-width: 600px) {
  .pub-form-submit { align-self: stretch; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   CSS-2/3: Convenzioni — titoli sezione e varianti info-box
   ══════════════════════════════════════════════════════════════ */
.conv-area-title {
  margin: 36px 0 8px;
  color: var(--blue-dark);
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.conv-area-desc {
  margin-bottom: 12px;
  font-size: .85rem;
  color: var(--text-muted, #666);
}
.conv-step-list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: .85rem;
  color: var(--blue-dark);
  line-height: 1.8;
}
.conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
/* Varianti colore per .info-box */
.info-box--blu    { border-left-color: var(--blue-dark); }
.info-box--azzurro{ border-left-color: var(--blue-mid); }
.info-box--giallo { border-left-color: var(--gold-warm, #f0a500); }
.info-box--verde  { border-left-color: #25D366; }
.info-box--rosso  { border-left-color: #e74c3c; }

/* ══════════════════════════════════════════════════════════════
   CSS-4/5: Form iscrizione online e pagina conferma
   ══════════════════════════════════════════════════════════════ */
/* Griglia a 2 colonne → 1 colonna su mobile (MOB-1) */
.iscr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
}
@media (max-width: 480px) {
  .iscr-grid { grid-template-columns: 1fr; }
}
.iscr-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: #444;
}
.iscr-required { color: #c0392b; }
.iscr-input,
.iscr-select {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid #ccd0d5;
  border-radius: 5px;
  font-size: 1rem; /* ≥16px: evita zoom automatico su iOS Safari */
  font-family: inherit;
  min-height: 44px;
  height: 44px;            /* esplicita: i <select> nativi onorano height, non sempre min-height */
  box-sizing: border-box;
}
.iscr-input:focus,
.iscr-select:focus { border-color: #1a3a5c; outline: none; }
.iscr-hint  { font-size: .73rem; color: #667085; margin-top: .25rem; }
.iscr-divider { border: none; border-top: 1px solid #eee; margin: 1.1rem 0; }
.iscr-alert-error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: .9rem 1.1rem;
  border-radius: 6px;
  margin-bottom: 1.2rem;
}
/* Pagina conferma iscrizione */
.iscr-confirm-wrap      { padding: 3rem 0; max-width: 560px; margin: 0 auto; text-align: center; }
.iscr-confirm-icon      { font-size: 4rem; margin-bottom: .5rem; }
.iscr-confirm-title     { font-size: 1.6rem; color: #1a7a40; margin-bottom: .6rem; }
.iscr-confirm-text      { color: #444; font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.65; }
.iscr-confirm-box {
  background: #f0f9f4;
  border: 1px solid #a8d5b8;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}
/* CSS-5: stili inline residui in conferma.php */
.iscr-confirm-box-title { margin: 0 0 .4rem; font-weight: 700; color: #1a7a40; }
.iscr-confirm-box-list  { margin: .4rem 0 0 1.2rem; padding: 0; color: #444; font-size: .9rem; line-height: 1.7; }
/* Testo bianco FORZATO su tutti gli stati link (incluso :active, tap iOS) e via
   -webkit-text-fill-color, che ha priorità su qualsiasi `color` ereditato — così
   né il globale `a:hover{color:var(--gold)}` né l'auto-tint/Smart Invert di Safari
   iOS possono renderlo illeggibile. color-scheme:light evita l'auto-dark. */
.iscr-confirm-btn,
.iscr-confirm-btn:link,
.iscr-confirm-btn:visited,
.iscr-confirm-btn:hover,
.iscr-confirm-btn:focus,
.iscr-confirm-btn:active {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.iscr-confirm-btn {
  display: inline-block;
  background: #1a3a5c;
  color-scheme: light;
  padding: .75rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background .15s;
}
.iscr-confirm-btn:hover,
.iscr-confirm-btn:focus,
.iscr-confirm-btn:active { background: #244b73; }

/* ══════════════════════════════════════════════════════════════
   Wizard iscrizione — percorso guidato a 5 passi (mobile-first, anziani)
   ══════════════════════════════════════════════════════════════ */
/* Intestazione passo + barra avanzamento */
.iscr-wz-head      { margin-bottom: 1.1rem; }
.iscr-wz-count     { font-size: .85rem; color: #1a5fa8; font-weight: 700; letter-spacing: .02em; }
.iscr-wz-steptitle { font-size: 1.2rem; color: #1a3a5c; font-weight: 700; margin: .15rem 0 .6rem; }
.iscr-wz-bar       { height: 9px; background: #e9eef4; border-radius: 99px; overflow: hidden; }
.iscr-wz-bar-fill  { height: 100%; width: 20%; background: #1a5fa8; border-radius: 99px; transition: width .28s ease; }

/* Passi: visibile uno alla volta */
.iscr-wz-step              { display: none; }
.iscr-wz-step.is-active    { display: block; animation: iscrWzFade .22s ease; }
.iscr-wz-step:focus        { outline: none; }
@keyframes iscrWzFade { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Barra di navigazione sticky in basso: totale sempre visibile + Avanti/Indietro */
.iscr-wz-nav     { position: sticky; bottom: .6rem; z-index: 6; background: #fff;
                   border: 1px solid #dee2e6; border-radius: 6px; padding: .85rem 1rem; margin-top: 1rem;
                   box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.iscr-wz-actions { display: flex; gap: .6rem; }
.iscr-wz-back    { flex: 0 0 auto; padding: .9rem 1.15rem; font-size: 1rem; font-weight: 600;
                   border: 1px solid #c9d3df; background: #fff; color: #1a3a5c; border-radius: 8px; cursor: pointer; }
.iscr-wz-back:disabled { opacity: .4; cursor: default; }
.iscr-wz-next    { flex: 1; padding: .95rem; font-size: 1.1rem; font-weight: 700;
                   background: #1a5fa8; color: #fff; border: none; border-radius: 8px; cursor: pointer; }
.iscr-wz-next:hover { background: #154f96; }
.iscr-wz-hint    { text-align: center; font-size: .8rem; color: #667085; margin: .55rem 0 0; }
@media (max-width: 560px) { .iscr-wz-steptitle { font-size: 1.08rem; } }

/* Banner "conferma ricevuta" per l'allineamento cross-dispositivo (verifica.php) */
.iscr-otp-sync {
  display: none;
  background: #e6f7ed; border: 1px solid #b6e2c6; color: #1a7a40;
  padding: .8rem 1rem; border-radius: 6px; margin-bottom: 1.2rem;
  font-size: .95rem; font-weight: 600;
}

/* Messaggio di validazione gentile (sostituisce il popup nativo del browser) */
.iscr-wz-err     { margin: .45rem 0 .2rem; padding: .55rem .75rem; background: #fdecea;
                   border: 1px solid #f5c6cb; color: #a3261f; border-radius: 6px;
                   font-size: .88rem; font-weight: 600; line-height: 1.4; }
.iscr-wz-err::before { content: "⚠ "; }
.iscr-field-err  { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220,53,69,.12) !important; }

/* ══════════════════════════════════════════════════════════════
   CSS-4 (cont.): Classi per gli stili inline residui di iscrizione/index.php
   ══════════════════════════════════════════════════════════════ */

/* Struttura pagina */
.iscr-page-main  { padding-top: 2.5rem; padding-bottom: 3rem; max-width: 760px; }
.iscr-page-title { font-size: 1.6rem; color: #1a3a5c; margin-bottom: .4rem; }
.iscr-page-intro { color: #555; margin-bottom: 1.8rem; }

/* Card header scuro (sostituisce lo style inline ripetuto 4 volte) */
.iscr-card-hd {
  background: #1a3a5c; color: #fff;
  padding: .75rem 1.25rem; font-weight: 600;
  border-radius: 6px 6px 0 0;
}
.iscr-card-hd-flex { display: flex; align-items: center; justify-content: space-between; }
.iscr-card-bd { padding: 1.25rem; }

/* MOB-1: Griglie indirizzo — crollano a 1 colonna su mobile */
.iscr-addr-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem 1rem;
  align-items: end;
}
.iscr-city-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  margin-top: .75rem;
}
@media (max-width: 480px) {
  .iscr-addr-grid,
  .iscr-city-grid { grid-template-columns: 1fr; }
  /* Su mobile i campi a larghezza fissa diventano full-width */
  .iscr-input-civico,
  .iscr-input-cap,
  .iscr-input-prov { width: 100%; }
}

/* Input a larghezza fissa (civico, CAP, provincia) */
.iscr-input-civico { width: 70px; padding: .5rem .7rem; border: 1px solid #ccd0d5; border-radius: 5px; font-size: .95rem; height: 44px; box-sizing: border-box; }
.iscr-input-cap    { width: 80px; padding: .5rem .7rem; border: 1px solid #ccd0d5; border-radius: 5px; font-size: .95rem; height: 44px; box-sizing: border-box; }
.iscr-input-prov   { width: 60px; padding: .5rem .7rem; border: 1px solid #ccd0d5; border-radius: 5px; font-size: .95rem; text-transform: uppercase; height: 44px; box-sizing: border-box; }

/* Codice fiscale (uppercase + letter-spacing) — estende .iscr-input */
.iscr-input-cf { text-transform: uppercase; letter-spacing: .08em; }

/* Blocco livello corso (hidden di default) */
.iscr-level-wrap { display: none; margin-top: .6rem; }

/* Blocco minorenne / accompagnatore */
.iscr-minor-wrap  { display: none; margin-top: .85rem; background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; padding: .9rem 1rem; }
.iscr-minor-title { font-size: .82rem; font-weight: 700; color: #e65100; margin-bottom: .5rem; }
.iscr-minor-input { border-color: #ffe082 !important; }

/* Bottone "Aggiungi familiare" nel card-hd */
.iscr-add-fam-btn {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: .3rem .8rem; border-radius: 4px; cursor: pointer; font-size: .85rem;
}

/* Testi vari */
.iscr-familiari-intro { margin: 0 0 .8rem; color: #666; font-size: .88rem; }
.iscr-familiari-empty { color: #667085; font-size: .88rem; font-style: italic; margin: 0; }
.iscr-totale-header   { font-size: .95rem; font-weight: 700; opacity: .9; }
.iscr-riepilogo-intro { margin: 0 0 1rem; color: #444; font-size: .82rem; }
.iscr-riepilogo-empty { color: #667085; font-style: italic; font-size: .88rem; margin: 0; }

/* Box condizioni e consenso */
.iscr-conditions-box {
  background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px;
  padding: 1rem; font-size: .83rem; color: #444; line-height: 1.6;
  max-height: 180px; overflow-y: auto; margin-bottom: 1rem;
}
.iscr-accept-label { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.iscr-accept-cb    { margin-top: .2rem; flex-shrink: 0; width: 17px; height: 17px; }
.iscr-accept-text  { font-size: .88rem; color: #333; }

/* Bottone submit e nota post-invio */
.iscr-submit-btn {
  width: 100%; background: #1a3a5c; color: #fff; border: none;
  padding: .9rem; border-radius: 6px; font-size: 1rem;
  font-weight: 600; cursor: pointer; letter-spacing: .02em;
}
.iscr-submit-hint { text-align: center; color: #667085; font-size: .78rem; margin-top: .6rem; }

/* Blocchi familiari (JS-generated) */
.iscr-fam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem .9rem;
}
@media (max-width: 480px) {
  .iscr-fam-grid { grid-template-columns: 1fr; }
}
.iscr-fam-label  { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .2rem; color: #555; }
.iscr-fam-ctrl   { width: 100%; padding: .45rem .6rem; border: 1px solid #ccd0d5; border-radius: 4px; font-size: .9rem; box-sizing: border-box; height: 42px; }
.iscr-fam-ctrl.cf { text-transform: uppercase; letter-spacing: .06em; }
.iscr-fam-hint   { font-size: .72rem; margin-top: .2rem; }
.iscr-fam-section {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem .9rem; margin-top: .6rem;
  padding-top: .6rem; border-top: 1px solid #e8edf2;
}
@media (max-width: 480px) {
  .iscr-fam-section { grid-template-columns: 1fr; }
}
.iscr-fam-level        { display: none; margin-top: .4rem; }
.iscr-fam-minor        { display: none; margin-top: .6rem; background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; padding: .7rem .85rem; }
.iscr-fam-minor-title  { font-size: .78rem; font-weight: 700; color: #e65100; margin-bottom: .4rem; }
.iscr-fam-minor-note   { font-size: .72rem; color: #667085; margin-top: .2rem; }

/* ══════════════════════════════════════════════════════════════
   MOB-3: pulsanti landing page — touch target garantito
   ══════════════════════════════════════════════════════════════ */
.enter-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   NAV pubblica — 7 voci + "Area personale": evita overflow su
   desktop stretti (Google Ad Grants: navigazione senza scroll orizz.)
   - header più largo del contenuto per ospitare la nav completa
   - nav compatta quando è visibile (≥1150px)
   - sotto i 1150px si passa al menu hamburger (già presente)
   ══════════════════════════════════════════════════════════════ */
.site-header .container { max-width: 1200px; }
@media (min-width: 1150px) {
  .main-nav { gap: 2px; }
  .main-nav a { padding: 8px 11px; }
  .main-nav a.nav-soci { margin-left: 6px; padding: 7px 14px; }
}
@media (max-width: 1149px) {
  .site-header .main-nav { display: none; }
  .site-header .hamburger { display: flex; }
}
/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITÀ, HOME E UTILITY  (SCP 7.0)
   Regole aggiunte per l'audit Lighthouse/Ad Grants:
   contrasto AA, landmark <main>, gerarchia titoli, reduced-motion.
   NB: i colori del TESTO stanno qui (in classi), MAI in style=""
   inline con var(): axe non risolve le variabili inline e
   calcolerebbe un contrasto sbagliato (falso "bianco su bianco").
   ══════════════════════════════════════════════════════════════ */

/* Skip-link per navigazione da tastiera */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue-dark); color: #fff; padding: 10px 18px;
  border-radius: 0 0 4px 0; font-size: .9rem; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* Il landmark <main> non deve alterare il layout */
main { display: block; }

/* ── HERO della home ─────────────────────────────────────────── */
.hero--home {
  background: rgba(255,255,255,.88);
  padding: 54px 0 48px;
  text-align: center;
}
.hero--home .container { display: block; }
.hero--home h1 {
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--text-dark);
  margin: 6px 0 14px;
}
.hero-badge {
  display: inline-block;
  background: var(--blue-dark);
  color: #fff;                        /* 13,4:1 */
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  line-height: 1.4;
}
.hero-mission {
  max-width: 660px;
  margin: 0 auto 26px;
  font-size: 1.02rem;
  color: var(--text-body);            /* 8,9:1 */
}
.hero--home .hero-btns { justify-content: center; }

/* ── Fascia alternata: classe ESPLICITA, non nth-child ────────
   (lo striping posizionale si rompe quando le sezioni vengono
   incapsulate in <main> o se ne aggiunge una) */
.section.bg-alt { background: rgba(10,42,110,.035); }

/* ── Titoli ──────────────────────────────────────────────────
   Le sottopagine usano <h1> dentro .section-header: stessa resa
   grafica dell'<h2>, ma un solo h1 per pagina e gerarchia continua. */
.section-header h1 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  margin-bottom: 16px;
  text-shadow: 0 1px 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.7);
}

/* ── Utility di testo/allineamento (sostituiscono gli style inline) ── */
.testo-centrato   { text-align: center; }
.azioni-centrate  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.text-muted       { color: var(--text-muted); }      /* 5,7:1 */
.cta-sub          { margin: 12px auto 28px; max-width: 520px; }
.mt-40            { margin-top: 40px; }
.nota-piccola     { font-size: .8rem; color: var(--text-muted); }
.tabella-vuota    { text-align: center; color: var(--text-muted); padding: 1.5rem; }
.testo-elenco     { color: var(--text-dark); line-height: 1.8; font-size: .85rem;
                    margin-top: 10px; padding-left: 18px; }

/* ── Leggibilità dei contenitori sopra la foto di sfondo ──────
   Con opacità .45 il testo poggiava su un fondo variabile (foto):
   contrasto non deterministico per l'audit e faticoso da leggere. */
.card, .price-card, .partner-card, .info-box, table { background: rgba(255,255,255,.88); }
.hero:not(.hero--home) { background: rgba(255,255,255,.82); }

/* ── Movimento ridotto (preferenza di sistema) ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .price-card:hover, .partner-card:hover,
  .btn--primary:hover, .btn--blue:hover { transform: none !important; }
}

/* Classi per i testi che erano in style="" inline (vedi nota su var() inline) */
.conv-nota   { margin-top: 8px;  font-size: .85rem; color: var(--text-dark); }
.conv-avviso { margin-top: 16px; font-size: .78rem; color: var(--text-muted); }
.cella-note  { color: var(--text-body); font-size: .9em; }

/* Sezione blu: il gradiente semitrasparente si SCHIARISCE sopra lo sfondo chiaro,
   e col testo bianco al 75% il contrasto scendeva a 4,02:1 (sotto AA).
   Gradiente pieno + testo al 92% → 6,8:1 anche nel punto più chiaro. */
.section--blue { background: linear-gradient(135deg, #0a2a6e 0%, #1a4db5 100%); }
.section--blue p { color: rgba(255,255,255,.92); }

/* ── Touch target (Lighthouse: min 24x24 px) ──────────────────────────
   I link del footer erano alti 16px con 8px di distanza: troppo piccoli
   e troppo ravvicinati da toccare su mobile. */
.footer-col ul { gap: 4px; }
.footer-col ul li a,
.footer-bottom a {
  display: inline-block;
  padding: 6px 0;
  min-height: 24px;
  line-height: 1.5;
}