/* ============================================================================
   ARCADIA — TEMA GLOBALE
   Sistema unico, derivato dai colori reali del logo (#910250 borgogna,
   #c89c3c oro). Sostituisce le palette in conflitto dei file precedenti:
   arcadia-design-system-2025.css usava un azzurro Tailwind (#0ea5e9) che non
   ha mai avuto niente a che fare con il marchio.

   Indice
     1. Token           7. Card
     2. Reset e base    8. Form
     3. Layout          9. Tabelle
     4. Tipografia     10. Accordion / Tab
     5. Bottoni        11. Blocchi di pagina (hero, sezioni, CTA)
     6. Badge / Alert  12. Utility e responsive
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKEN */

:root {
  /* Borgogna — colore del marchio, campionato dal logo */
  --a-brand-50:  #fdf2f7;
  --a-brand-100: #fce7f0;
  --a-brand-200: #f9cfe0;
  --a-brand-300: #f0a6c5;
  --a-brand-400: #e070a2;
  --a-brand-500: #c9407f;
  --a-brand-600: #ab1f63;
  --a-brand-700: #910250;  /* logo */
  --a-brand-800: #760343;
  --a-brand-900: #5c0535;
  --a-brand-950: #3a0121;

  /* Oro — accento, usato con parsimonia: filetti, occhielli, dettagli */
  --a-gold-50:  #fdf9ef;
  --a-gold-100: #f9f0d8;
  --a-gold-200: #f2dfad;
  --a-gold-300: #e8c878;
  --a-gold-400: #dbb052;
  --a-gold-500: #c89c3c;  /* logo */
  --a-gold-600: #a87c2e;
  --a-gold-700: #855d28;
  --a-gold-800: #6d4b26;
  --a-gold-900: #5c3f23;

  /* Neutri caldi — pietra/avorio. Il grigio freddo stona con il borgogna. */
  --a-n-0:   #ffffff;
  --a-n-25:  #fdfcfa;
  --a-n-50:  #faf8f5;
  --a-n-100: #f4f1ec;
  --a-n-200: #e8e3db;
  --a-n-300: #d6cfc3;
  --a-n-400: #b3a99a;
  --a-n-500: #8c8275;
  --a-n-600: #6b6358;
  --a-n-700: #514b43;
  --a-n-800: #37332e;
  --a-n-900: #211f1c;
  --a-n-950: #131211;

  /* Semantici */
  --a-success: #2f7d55;
  --a-success-bg: #eaf5ee;
  --a-warning: #a8700f;
  --a-warning-bg: #fdf4e3;
  --a-danger:  #a32020;
  --a-danger-bg: #fbecec;
  --a-info:    #1f5f7d;
  --a-info-bg: #eaf2f6;

  /* Ruoli */
  --a-bg:          var(--a-n-50);
  --a-surface:     var(--a-n-0);
  --a-surface-alt: var(--a-n-100);
  --a-border:      var(--a-n-200);
  --a-border-soft: var(--a-n-100);
  --a-text:        var(--a-n-900);
  --a-text-muted:  var(--a-n-600);
  --a-text-soft:   var(--a-n-500);
  --a-text-invert: var(--a-n-0);
  --a-accent:      var(--a-brand-700);
  --a-accent-hover:var(--a-brand-800);

  /* Tipografia — serif display come il wordmark, Inter per il testo */
  --a-font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --a-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --a-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

  --a-fs-xs:   0.75rem;
  --a-fs-sm:   0.875rem;
  --a-fs-base: 1rem;
  --a-fs-lg:   1.125rem;
  --a-fs-xl:   1.25rem;
  --a-fs-2xl:  1.5rem;
  --a-fs-3xl:  1.875rem;
  --a-fs-4xl:  2.25rem;
  --a-fs-5xl:  3rem;
  --a-fs-6xl:  3.75rem;

  /* Spaziatura */
  --a-s-1: 0.25rem;  --a-s-2: 0.5rem;   --a-s-3: 0.75rem;
  --a-s-4: 1rem;     --a-s-5: 1.25rem;  --a-s-6: 1.5rem;
  --a-s-8: 2rem;     --a-s-10: 2.5rem;  --a-s-12: 3rem;
  --a-s-16: 4rem;    --a-s-20: 5rem;    --a-s-24: 6rem;
  --a-s-32: 8rem;

  /* Raggi */
  --a-r-sm: 4px;  --a-r-md: 8px;  --a-r-lg: 12px;
  --a-r-xl: 18px; --a-r-2xl: 26px; --a-r-full: 999px;

  /* Ombre — tinte di bruno, mai nero puro: il nero sporca i neutri caldi */
  --a-sh-xs: 0 1px 2px rgba(55, 51, 46, 0.05);
  --a-sh-sm: 0 2px 6px rgba(55, 51, 46, 0.07);
  --a-sh-md: 0 6px 18px rgba(55, 51, 46, 0.08);
  --a-sh-lg: 0 16px 40px rgba(55, 51, 46, 0.10);
  --a-sh-xl: 0 28px 70px rgba(55, 51, 46, 0.14);
  --a-sh-brand: 0 14px 34px rgba(145, 2, 80, 0.22);

  /* Gradienti */
  --a-grad-brand: linear-gradient(135deg, var(--a-brand-700) 0%, var(--a-brand-900) 100%);
  --a-grad-deep:  linear-gradient(140deg, #5c0535 0%, #910250 45%, #3a0121 100%);
  --a-grad-gold:  linear-gradient(135deg, var(--a-gold-400) 0%, var(--a-gold-600) 100%);

  /* Movimento */
  --a-t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --a-t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --a-t-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Misure */
  --a-container: 1200px;
  --a-measure: 68ch;
}

/* ------------------------------------------------------- 2. RESET E BASE */

.a-scope,
body.a-theme {
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--a-font-body);
  font-size: var(--a-fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.a-scope *,
.a-scope *::before,
.a-scope *::after { box-sizing: border-box; }

.a-scope img,
.a-scope svg { max-width: 100%; }

.a-scope img { height: auto; display: block; }

.a-scope :focus-visible {
  outline: 2px solid var(--a-brand-600);
  outline-offset: 3px;
  border-radius: var(--a-r-sm);
}

/* ------------------------------------------------------------- 3. LAYOUT */

.a-container {
  width: 100%;
  max-width: var(--a-container);
  margin-inline: auto;
  padding-inline: var(--a-s-6);
}
.a-container--narrow { max-width: 820px; }
.a-container--wide   { max-width: 1400px; }

.a-section { padding-block: var(--a-s-24); }
.a-section--tight { padding-block: var(--a-s-16); }
.a-section--alt { background: var(--a-surface-alt); }
.a-section--surface { background: var(--a-surface); }

/* Griglia: sostituisce .row/.col-lg-* di Bootstrap, che in questo progetto
   non sono mai esistiti — da cui i layout collassati sulle pagine attuali. */
.a-grid { display: grid; gap: var(--a-s-6); }
.a-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.a-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.a-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--a-s-12); }
.a-grid--gap-lg { gap: var(--a-s-10); }

.a-stack { display: flex; flex-direction: column; gap: var(--a-s-4); }
.a-row { display: flex; align-items: center; gap: var(--a-s-4); flex-wrap: wrap; }
.a-row--between { justify-content: space-between; }
.a-row--center { justify-content: center; }

/* --------------------------------------------------------- 4. TIPOGRAFIA */

.a-scope h1, .a-scope h2, .a-scope h3,
.a-display, .a-h1, .a-h2, .a-h3 {
  font-family: var(--a-font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--a-text);
  margin: 0;
  text-wrap: balance;
}

.a-display { font-size: clamp(2.6rem, 5.4vw, var(--a-fs-6xl)); font-weight: 700; }
.a-h1 { font-size: clamp(2.1rem, 4.2vw, var(--a-fs-5xl)); }
.a-h2 { font-size: clamp(1.7rem, 3.2vw, var(--a-fs-4xl)); }
.a-h3 { font-size: clamp(1.25rem, 2vw, var(--a-fs-2xl)); }

.a-h4 {
  font-family: var(--a-font-body);
  font-size: var(--a-fs-lg);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

/* Occhiello: etichetta in maiuscoletto spaziato sopra al titolo.
   È il dettaglio che dà il tono editoriale al posto del solito badge pillola. */
.a-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--a-s-2);
  font-family: var(--a-font-body);
  font-size: var(--a-fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-brand-700);
  margin-bottom: var(--a-s-4);
}
.a-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--a-gold-500);
}
.a-eyebrow--gold { color: var(--a-gold-700); }
.a-eyebrow--invert { color: var(--a-gold-300); }
.a-eyebrow--invert::before { background: var(--a-gold-300); }

.a-lead {
  font-size: var(--a-fs-lg);
  line-height: 1.7;
  color: var(--a-text-muted);
  max-width: var(--a-measure);
  margin: var(--a-s-4) 0 0;
}
.a-lead--center { margin-inline: auto; }

.a-prose { max-width: var(--a-measure); color: var(--a-text-muted); }
.a-prose h2 { margin: var(--a-s-12) 0 var(--a-s-4); }
.a-prose h3 { margin: var(--a-s-8) 0 var(--a-s-3); }
.a-prose p { margin: 0 0 var(--a-s-4); }
.a-prose ul, .a-prose ol { margin: 0 0 var(--a-s-4); padding-left: var(--a-s-6); }
.a-prose li { margin-bottom: var(--a-s-2); }
.a-prose a { color: var(--a-brand-700); text-underline-offset: 3px; }
.a-prose strong { color: var(--a-text); font-weight: 600; }

/* Intestazione di sezione */
.a-section-head { max-width: 740px; margin-bottom: var(--a-s-12); }
.a-section-head--center { margin-inline: auto; text-align: center; }
.a-section-head--center .a-lead { margin-inline: auto; }
.a-section-head--center .a-eyebrow { justify-content: center; }

/* Numero/statistica in evidenza */
.a-figure {
  font-family: var(--a-font-display);
  font-size: clamp(2rem, 3.4vw, var(--a-fs-4xl));
  font-weight: 700;
  line-height: 1;
  color: var(--a-brand-700);
  font-variant-numeric: tabular-nums;
}
.a-figure--invert { color: var(--a-gold-300); }

/* ------------------------------------------------------------ 5. BOTTONI */

/* Raggio architettonico, non pillola. Card a 12px e campi a 8px accanto a
   bottoni completamente stondati erano la stonatura piu' evidente del
   sistema: la pillola e' anche la forma che segnala "template" a colpo
   d'occhio. Il pill resta disponibile come modificatore. */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--a-r-md);
  font-family: var(--a-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--a-t-fast), color var(--a-t-fast),
              border-color var(--a-t-fast), transform var(--a-t-fast),
              box-shadow var(--a-t-fast);
  white-space: nowrap;
}
.a-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.a-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--a-n-0), 0 0 0 4px var(--a-brand-600);
}
.a-btn:disabled, .a-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Primario: pieno borgogna. Il rilievo viene da un bordo interno chiaro in
   alto e da un'ombra della stessa famiglia cromatica, mai nera. */
.a-btn--primary {
  background-color: var(--a-brand-700);
  color: var(--a-text-invert);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 1px 2px rgba(92, 5, 53, 0.24);
}
.a-btn--primary:hover {
  background-color: var(--a-brand-800);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 4px 12px rgba(92, 5, 53, 0.26);
  transform: translateY(-1px);
}
.a-btn--primary:active {
  background-color: var(--a-brand-900);
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(58, 1, 33, 0.35);
}

/* Secondario: il vero cavallo da tiro accanto al primario. Fondo chiaro,
   bordo neutro, testo scuro. */
.a-btn--secondary {
  background-color: var(--a-surface);
  color: var(--a-text);
  border-color: var(--a-n-300);
  box-shadow: 0 1px 2px rgba(55, 51, 46, 0.05);
}
.a-btn--secondary:hover {
  border-color: var(--a-brand-700);
  color: var(--a-brand-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(55, 51, 46, 0.09);
}
.a-btn--secondary:active { transform: translateY(0); box-shadow: none; background-color: var(--a-n-50); }

/* Contorno: bordo del marchio. Il rosa pallido di prima spariva sul fondo. */
.a-btn--outline {
  background-color: transparent;
  color: var(--a-brand-700);
  border-color: var(--a-brand-300);
}
.a-btn--outline:hover {
  background-color: var(--a-brand-50);
  border-color: var(--a-brand-700);
  color: var(--a-brand-800);
}
.a-btn--outline:active { background-color: var(--a-brand-100); }

.a-btn--ghost { background-color: transparent; color: var(--a-text-muted); }
.a-btn--ghost:hover { background-color: var(--a-n-100); color: var(--a-text); }
.a-btn--ghost:active { background-color: var(--a-n-200); }

/* Oro: filetto e testo, non lastra. Il pieno mostarda con testo scuro
   sembrava un bottone di avviso, non un accento di lusso. */
.a-btn--gold {
  background-color: var(--a-gold-50);
  color: var(--a-gold-800);
  border-color: var(--a-gold-300);
}
.a-btn--gold:hover {
  background-color: var(--a-gold-100);
  border-color: var(--a-gold-600);
  color: var(--a-gold-900);
  transform: translateY(-1px);
}
.a-btn--gold:active { transform: translateY(0); background-color: var(--a-gold-200); }

/* Su fondo scuro */
.a-btn--invert {
  background-color: var(--a-n-0);
  color: var(--a-brand-800);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}
.a-btn--invert:hover {
  background-color: var(--a-n-50);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.a-btn--invert:active { transform: translateY(0); box-shadow: none; }
.a-btn--invert-outline {
  background-color: transparent;
  color: var(--a-n-0);
  border-color: rgba(255, 255, 255, 0.38);
}
.a-btn--invert-outline:hover {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.75);
}
.a-btn:focus-visible.a-btn--invert,
.a-btn:focus-visible.a-btn--invert-outline {
  box-shadow: 0 0 0 2px var(--a-brand-900), 0 0 0 4px var(--a-gold-300);
}

/* Misure */
.a-btn--sm { padding: 0.45rem 0.9rem; font-size: 0.8125rem; border-radius: var(--a-r-sm); }
.a-btn--lg { padding: 0.9rem 1.85rem; font-size: 1rem; }
.a-btn--block { width: 100%; }
.a-btn--pill { border-radius: var(--a-r-full); }

/* Solo icona */
.a-btn--icon { padding: 0.6rem; aspect-ratio: 1; }
.a-btn--icon svg { width: 1.15em; height: 1.15em; }

/* Gruppo di bottoni affiancati */
.a-btn-group { display: inline-flex; }
.a-btn-group .a-btn { border-radius: 0; margin-left: -1px; }
.a-btn-group .a-btn:first-child { border-radius: var(--a-r-md) 0 0 var(--a-r-md); margin-left: 0; }
.a-btn-group .a-btn:last-child { border-radius: 0 var(--a-r-md) var(--a-r-md) 0; }

/* Link con freccia */
.a-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--a-brand-700);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--a-t-fast);
}
.a-link::after {
  content: '';
  width: 1em; height: 1em;
  background: currentColor;
  /* freccia disegnata: la maschera evita il glifo tipografico, che cambia
     forma e allineamento a seconda del font disponibile */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--a-t-base);
}
.a-link:hover { color: var(--a-brand-900); }
.a-link:hover::after { transform: translateX(4px); }
.a-link--invert { color: var(--a-gold-300); }
.a-link--invert:hover { color: var(--a-gold-200); }

/* ------------------------------------------------------- 6. BADGE / ALERT */

/* Etichetta editoriale: maiuscoletto spaziato su filetto sottile, la stessa
   lingua dell'occhiello. Niente pillole pastello: erano il pezzo piu' generico
   di tutta la pagina. */
.a-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-sm);
  background: var(--a-surface);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--a-text-muted);
  white-space: nowrap;
}
.a-tag--brand { border-color: var(--a-brand-200); background: var(--a-brand-50); color: var(--a-brand-800); }
.a-tag--gold  { border-color: var(--a-gold-300); background: var(--a-gold-50); color: var(--a-gold-800); }
.a-tag--solid { border-color: transparent; background: var(--a-brand-700); color: var(--a-text-invert); }
.a-tag--dark  { border-color: transparent; background: var(--a-n-900); color: var(--a-n-0); }

/* Etichetta "in evidenza" con bollino d'oro, per il piano consigliato */
.a-tag--star::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--a-gold-500);
}

/* Stato: il colore lo porta il pallino, non il fondo. Si legge meglio e non
   trasforma l'interfaccia in un semaforo. */
.a-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.28rem 0.65rem 0.28rem 0.5rem;
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-full);
  background: var(--a-surface);
  font-size: var(--a-fs-xs);
  font-weight: 600;
  color: var(--a-text);
  white-space: nowrap;
}
.a-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--a-n-400);
  box-shadow: 0 0 0 3px var(--a-n-100);
  flex: none;
}
.a-status--success::before { background: var(--a-success); box-shadow: 0 0 0 3px var(--a-success-bg); }
.a-status--warning::before { background: var(--a-warning); box-shadow: 0 0 0 3px var(--a-warning-bg); }
.a-status--danger::before  { background: var(--a-danger);  box-shadow: 0 0 0 3px var(--a-danger-bg); }
.a-status--brand::before   { background: var(--a-brand-700); box-shadow: 0 0 0 3px var(--a-brand-100); }

/* Pallino che pulsa, per gli stati "in corso" */
.a-status--live::before { animation: a-pulse 2s ease-in-out infinite; }
@keyframes a-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--a-success-bg); }
  50%      { box-shadow: 0 0 0 6px rgba(47, 125, 85, 0.10); }
}

/* Retrocompatibilita': .a-badge resta un alias di .a-tag */
.a-badge, .a-badge--gold, .a-badge--success, .a-badge--warning,
.a-badge--danger, .a-badge--neutral, .a-badge--solid {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-sm);
  background: var(--a-surface);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--a-text-muted);
}
.a-badge--gold    { border-color: var(--a-gold-300); background: var(--a-gold-50); color: var(--a-gold-800); }
.a-badge--success { border-color: #bfe0cc; background: var(--a-success-bg); color: var(--a-success); }
.a-badge--warning { border-color: #ecd9ab; background: var(--a-warning-bg); color: var(--a-warning); }
.a-badge--danger  { border-color: #edc4c4; background: var(--a-danger-bg); color: var(--a-danger); }
.a-badge--neutral { border-color: var(--a-border); background: var(--a-n-100); color: var(--a-n-700); }
.a-badge--solid   { border-color: transparent; background: var(--a-brand-700); color: var(--a-text-invert); }

/* Avviso: fondo chiaro, filetto colorato, icona in un pozzetto tinto.
   Il rettangolo colorato pieno era la versione da framework. */
.a-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--a-s-4);
  padding: var(--a-s-4) var(--a-s-5);
  border: 1px solid var(--a-border);
  border-left: 3px solid var(--a-n-400);
  border-radius: var(--a-r-md);
  background: var(--a-surface);
  box-shadow: var(--a-sh-xs);
  font-size: var(--a-fs-sm);
}
.a-alert__icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--a-r-sm);
  background: var(--a-n-100);
  color: var(--a-n-600);
  flex: none;
  margin-top: -1px;
}
.a-alert__icon svg { width: 16px; height: 16px; }
.a-alert__title { font-weight: 600; color: var(--a-text); margin: 0 0 0.15rem; }
.a-alert__body { color: var(--a-text-muted); margin: 0; }

.a-alert--success { border-left-color: var(--a-success); }
.a-alert--success .a-alert__icon { background: var(--a-success-bg); color: var(--a-success); }
.a-alert--warning { border-left-color: var(--a-warning); }
.a-alert--warning .a-alert__icon { background: var(--a-warning-bg); color: var(--a-warning); }
.a-alert--danger  { border-left-color: var(--a-danger); }
.a-alert--danger .a-alert__icon  { background: var(--a-danger-bg); color: var(--a-danger); }
.a-alert--info    { border-left-color: var(--a-info); }
.a-alert--info .a-alert__icon    { background: var(--a-info-bg); color: var(--a-info); }

/* --------------------------------------------------------------- 7. CARD */

.a-card {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  padding: var(--a-s-6);
  transition: transform var(--a-t-base), box-shadow var(--a-t-base),
              border-color var(--a-t-base);
}
.a-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--a-sh-lg);
  border-color: var(--a-brand-200);
}
.a-card--flat { border: none; box-shadow: none; background: var(--a-surface-alt); }
.a-card--raised { border: none; box-shadow: var(--a-sh-md); }
.a-card--pad-lg { padding: var(--a-s-10); }

/* Card in colonna con il pulsante ancorato in fondo: dentro una griglia le
   schede hanno testi di lunghezza diversa e senza questo i pulsanti finiscono
   ad altezze sfalsate. */
.a-card--stretch {
  display: flex;
  flex-direction: column;
}
.a-card--stretch > .a-btn:last-child,
.a-card--stretch > .a-card__foot { margin-top: auto; }

/* Filetto oro in testa: segna le card "in evidenza" senza urlare */
.a-card--featured {
  border-color: var(--a-brand-200);
  box-shadow: var(--a-sh-lg);
  position: relative;
  overflow: hidden;
}
.a-card--featured::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--a-grad-gold);
}

.a-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--a-r-md);
  background: var(--a-brand-50);
  color: var(--a-brand-700);
  margin-bottom: var(--a-s-4);
}
.a-card__icon svg { width: 22px; height: 22px; }
.a-card__icon--gold { background: var(--a-gold-100); color: var(--a-gold-700); }

.a-card__title { font-family: var(--a-font-display); font-size: var(--a-fs-xl); font-weight: 600; margin: 0 0 var(--a-s-2); }
.a-card__text { color: var(--a-text-muted); font-size: var(--a-fs-sm); margin: 0; }

/* Elenco con spunta */
.a-checklist { list-style: none; margin: var(--a-s-4) 0 0; padding: 0; }
.a-checklist li {
  position: relative;
  padding-left: var(--a-s-6);
  margin-bottom: var(--a-s-2);
  font-size: var(--a-fs-sm);
  color: var(--a-text-muted);
}
.a-checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--a-gold-500);
}

/* Statistica */
.a-stat { text-align: center; padding: var(--a-s-4); }
.a-stat__value { font-family: var(--a-font-display); font-size: clamp(1.8rem, 3vw, var(--a-fs-4xl)); font-weight: 700; line-height: 1; color: var(--a-brand-700); font-variant-numeric: tabular-nums; }
.a-stat__label { display: block; margin-top: var(--a-s-2); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-text-soft); }
.a-stat--invert .a-stat__value { color: var(--a-gold-300); }
.a-stat--invert .a-stat__label { color: rgba(255, 255, 255, 0.7); }

/* Citazione / testimonianza */
.a-quote {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  padding: var(--a-s-8);
  position: relative;
}
.a-quote__mark {
  font-family: var(--a-font-display);
  font-size: 4rem;
  line-height: 0.7;
  color: var(--a-gold-300);
  display: block;
  margin-bottom: var(--a-s-2);
}
.a-quote__text { font-family: var(--a-font-display); font-size: var(--a-fs-lg); line-height: 1.55; color: var(--a-text); margin: 0 0 var(--a-s-5); font-style: italic; }
.a-quote__author { display: flex; align-items: center; gap: var(--a-s-3); }
.a-quote__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--a-grad-brand); color: var(--a-n-0);
  display: grid; place-items: center;
  font-weight: 600; font-size: var(--a-fs-sm); flex: none;
}
.a-quote__name { font-weight: 600; font-size: var(--a-fs-sm); }
.a-quote__meta { font-size: var(--a-fs-xs); color: var(--a-text-soft); }
.a-stars { color: var(--a-gold-500); font-size: var(--a-fs-sm); letter-spacing: 0.1em; }

/* --------------------------------------------------------------- 8. FORM */

.a-field { margin-bottom: var(--a-s-5); }

/* Etichetta con eventuale nota allineata a destra ("facoltativo", contatore) */
.a-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a-s-3);
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--a-text);
}
.a-label__note { font-weight: 400; font-size: var(--a-fs-xs); color: var(--a-text-soft); }
.a-label__req { color: var(--a-brand-600); }

.a-input, .a-select, .a-textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--a-n-300);
  border-radius: var(--a-r-md);
  background: var(--a-surface);
  font-family: var(--a-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--a-text);
  /* Incavo appena percettibile: da' al campo un dentro e un fuori */
  box-shadow: inset 0 1px 2px rgba(55, 51, 46, 0.04);
  transition: border-color var(--a-t-fast), box-shadow var(--a-t-fast), background var(--a-t-fast);
}
.a-input::placeholder, .a-textarea::placeholder { color: var(--a-n-400); }
.a-input:hover, .a-select:hover, .a-textarea:hover { border-color: var(--a-n-400); }
.a-input:focus, .a-select:focus, .a-textarea:focus {
  outline: none;
  border-color: var(--a-brand-600);
  /* background-color, non la scorciatoia `background`: quella azzera anche
     background-repeat e background-position, e la freccia del select si
     ripeteva a tappeto sopra il testo rendendolo illeggibile. */
  background-color: var(--a-n-0);
  box-shadow: 0 0 0 3px rgba(145, 2, 80, 0.10), inset 0 1px 2px rgba(55, 51, 46, 0.02);
}
.a-input:disabled, .a-select:disabled, .a-textarea:disabled {
  background: var(--a-n-100);
  color: var(--a-text-soft);
  cursor: not-allowed;
  box-shadow: none;
}
.a-textarea { min-height: 130px; resize: vertical; }

/* Select: freccia disegnata da noi. Quella nativa tradiva subito il campo
   non stilizzato ed era il dettaglio piu' sciatto del modulo. */
.a-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238c8275' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  cursor: pointer;
}
.a-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23910250' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
/* Il popup del select lo disegna il sistema operativo: senza fondo e colore
   espliciti le voci restavano trasparenti e quasi illeggibili. */
.a-select option {
  background-color: var(--a-n-0);
  color: var(--a-text);
  font-weight: 400;
}
.a-select option:disabled { color: var(--a-n-400); }

/* Campo con icona in testa */
.a-input-group { position: relative; }
.a-input-group .a-input { padding-left: 2.6rem; }
.a-input-group__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--a-n-400);
  pointer-events: none;
}
.a-input-group .a-input:focus + .a-input-group__icon,
.a-input-group__icon + .a-input:focus ~ .a-input-group__icon { color: var(--a-brand-600); }

.a-help { display: block; margin-top: 0.4rem; font-size: var(--a-fs-xs); color: var(--a-text-soft); }
.a-error {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.4rem;
  font-size: var(--a-fs-xs);
  font-weight: 500;
  color: var(--a-danger);
}
.a-error::before {
  content: '!';
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--a-danger);
  color: var(--a-n-0);
  font-size: 10px;
  font-weight: 700;
  flex: none;
}
.a-input--invalid, .a-select--invalid, .a-textarea--invalid { border-color: var(--a-danger); }
.a-input--invalid:focus { box-shadow: 0 0 0 3px rgba(163, 32, 32, 0.10); border-color: var(--a-danger); }
.a-input--valid { border-color: var(--a-success); }

/* Casella e radio disegnate: la nativa stona con tutto il resto */
.a-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--a-fs-sm);
  color: var(--a-text-muted);
  cursor: pointer;
}
.a-check input[type="checkbox"],
.a-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 0.18em 0 0;
  border: 1px solid var(--a-n-300);
  border-radius: var(--a-r-sm);
  background: var(--a-surface);
  box-shadow: inset 0 1px 2px rgba(55, 51, 46, 0.05);
  flex: none;
  cursor: pointer;
  transition: background var(--a-t-fast), border-color var(--a-t-fast);
}
.a-check input[type="radio"] { border-radius: 50%; }
.a-check:hover input { border-color: var(--a-brand-400); }
.a-check input:checked {
  background: var(--a-brand-700);
  border-color: var(--a-brand-700);
  box-shadow: none;
}
.a-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.a-check input[type="radio"]:checked {
  background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px);
}
.a-check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(145, 2, 80, 0.12);
}

/* Scelta a schede: alternativa ai radio quando le opzioni vanno confrontate */
.a-choice {
  display: block;
  position: relative;
  padding: var(--a-s-4) var(--a-s-5);
  border: 1px solid var(--a-n-300);
  border-radius: var(--a-r-md);
  background: var(--a-surface);
  cursor: pointer;
  transition: border-color var(--a-t-fast), box-shadow var(--a-t-fast);
}
.a-choice:hover { border-color: var(--a-brand-400); }
.a-choice input { position: absolute; opacity: 0; pointer-events: none; }
.a-choice__title { display: block; font-weight: 600; font-size: var(--a-fs-sm); color: var(--a-text); }
.a-choice__desc { display: block; font-size: var(--a-fs-xs); color: var(--a-text-soft); margin-top: 0.15rem; }
.a-choice:has(input:checked) {
  border-color: var(--a-brand-700);
  box-shadow: 0 0 0 1px var(--a-brand-700), var(--a-sh-sm);
}
.a-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(145, 2, 80, 0.12); }

/* Aggancio ai form Symfony, che rendono markup proprio */
.a-form-symfony label { display: block; margin-bottom: var(--a-s-2); font-size: var(--a-fs-sm); font-weight: 600; color: var(--a-text); }
.a-form-symfony input[type="text"],
.a-form-symfony input[type="email"],
.a-form-symfony input[type="tel"],
.a-form-symfony input[type="number"],
.a-form-symfony input[type="password"],
.a-form-symfony input[type="date"],
.a-form-symfony select,
.a-form-symfony textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--a-n-300);
  border-radius: var(--a-r-md);
  background: var(--a-surface);
  font-family: var(--a-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--a-text);
  margin-bottom: var(--a-s-4);
  box-shadow: inset 0 1px 2px rgba(55, 51, 46, 0.04);
  transition: border-color var(--a-t-fast), box-shadow var(--a-t-fast);
}
.a-form-symfony input:hover,
.a-form-symfony select:hover,
.a-form-symfony textarea:hover { border-color: var(--a-n-400); }
.a-form-symfony input:focus,
.a-form-symfony select:focus,
.a-form-symfony textarea:focus {
  outline: none;
  border-color: var(--a-brand-600);
  box-shadow: 0 0 0 3px rgba(145, 2, 80, 0.10);
}
.a-form-symfony textarea { min-height: 130px; resize: vertical; }

/* Stessa freccia disegnata dei select nostri */
.a-form-symfony select option {
  background-color: var(--a-n-0);
  color: var(--a-text);
}
.a-form-symfony select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238c8275' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  cursor: pointer;
}

/* Stesse caselle disegnate */
.a-form-symfony input[type="checkbox"],
.a-form-symfony input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 0 0.55rem 0 0;
  padding: 0;
  vertical-align: -3px;
  border: 1px solid var(--a-n-300);
  border-radius: var(--a-r-sm);
  background: var(--a-surface);
  box-shadow: inset 0 1px 2px rgba(55, 51, 46, 0.05);
  cursor: pointer;
}
.a-form-symfony input[type="radio"] { border-radius: 50%; }
.a-form-symfony input[type="checkbox"]:checked,
.a-form-symfony input[type="radio"]:checked {
  background-color: var(--a-brand-700);
  border-color: var(--a-brand-700);
  box-shadow: none;
}
.a-form-symfony input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.a-form-symfony input[type="radio"]:checked {
  background-image: radial-gradient(circle, #fff 0 3px, transparent 3.5px);
}
.a-form-symfony .form-check,
.a-form-symfony input[type="checkbox"] + label { display: inline; font-weight: 400; }

/* Messaggi di validazione Symfony */
.a-form-symfony ul { list-style: none; padding: 0; margin: -0.6rem 0 var(--a-s-3); }
.a-form-symfony ul li {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--a-fs-xs);
  font-weight: 500;
  color: var(--a-danger);
}
.a-form-symfony ul li::before {
  content: '!';
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--a-danger);
  color: var(--a-n-0);
  font-size: 10px;
  font-weight: 700;
  flex: none;
}

/* ------------------------------------------------------------ 9. TABELLE */

.a-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  background: var(--a-surface);
}
.a-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--a-fs-sm);
  font-variant-numeric: tabular-nums;
}
.a-table th, .a-table td {
  padding: 0.95rem var(--a-s-5);
  text-align: left;
  border-bottom: 1px solid var(--a-border-soft);
}

/* Intestazione: niente fondo grigio, solo maiuscoletto su filetto marcato.
   Il fondo pieno faceva sembrare la tabella un foglio di calcolo. */
.a-table thead th {
  padding-top: var(--a-s-5);
  padding-bottom: 0.7rem;
  background: transparent;
  border-bottom: 1.5px solid var(--a-n-300);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-text-soft);
  white-space: nowrap;
  vertical-align: bottom;
}
.a-table tbody tr:last-child td { border-bottom: none; }
.a-table tbody tr { transition: background var(--a-t-fast); }
.a-table tbody tr:hover { background: var(--a-n-25); }

/* Prima colonna: e' l'etichetta di riga, va distinta dai valori */
.a-table tbody td:first-child { font-weight: 600; color: var(--a-text); }
.a-table td { color: var(--a-text-muted); }
.a-table .a-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Presente / assente come segni grafici, non come parole */
.a-table .is-yes, .a-table .is-no { color: transparent; font-size: 0; line-height: 0; }
.a-table .is-yes::before, .a-table .is-no::before {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.a-table .is-yes::before {
  content: '\2713';
  background: var(--a-success-bg);
  color: var(--a-success);
}
.a-table .is-no::before {
  content: '\2013';
  background: var(--a-n-100);
  color: var(--a-n-400);
}

/* Colonna consigliata: emerge per elevazione e cappello d'oro, non per
   velatura rosa stesa su tutte le righe. */
.a-table .is-highlight {
  position: relative;
  background: var(--a-brand-50);
}
.a-table thead .is-highlight {
  background: var(--a-brand-50);
  color: var(--a-brand-800);
  border-bottom-color: var(--a-brand-700);
  border-radius: var(--a-r-md) var(--a-r-md) 0 0;
}
/* Filetto d'oro solo in cima alla colonna */
.a-table thead .is-highlight::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--a-grad-gold);
  border-radius: var(--a-r-md) var(--a-r-md) 0 0;
}
.a-table tbody .is-highlight { color: var(--a-text); font-weight: 500; }
.a-table tbody tr:last-child .is-highlight { border-radius: 0 0 var(--a-r-md) var(--a-r-md); }
.a-table tbody tr:hover .is-highlight { background: var(--a-brand-100); }

/* Occhiello sopra il nome del piano consigliato */
.a-table__flag {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: var(--a-gold-700);
  margin-bottom: 0.25rem;
}

/* Variante compatta, per le tabelle dati della dashboard */
.a-table--compact th, .a-table--compact td { padding: 0.6rem var(--a-s-4); }

/* ------------------------------------------------- 10. ACCORDION / TAB */

.a-accordion { border: 1px solid var(--a-border); border-radius: var(--a-r-lg); overflow: hidden; background: var(--a-surface); }
.a-accordion__item + .a-accordion__item { border-top: 1px solid var(--a-border-soft); }
.a-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-s-4);
  padding: var(--a-s-5) var(--a-s-6);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--a-fs-base);
  color: var(--a-text);
  list-style: none;
  transition: background var(--a-t-fast), color var(--a-t-fast);
}
.a-accordion__item summary::-webkit-details-marker { display: none; }
.a-accordion__item summary::after {
  content: '+';
  font-family: var(--a-font-display);
  font-size: var(--a-fs-xl);
  color: var(--a-brand-700);
  transition: transform var(--a-t-base);
  flex: none;
}
.a-accordion__item[open] summary { color: var(--a-brand-700); }
.a-accordion__item[open] summary::after { transform: rotate(45deg); }
.a-accordion__item summary:hover { background: var(--a-n-25); }
.a-accordion__body { padding: 0 var(--a-s-6) var(--a-s-5); color: var(--a-text-muted); font-size: var(--a-fs-sm); }

/* Passi numerati */
.a-steps { counter-reset: astep; display: grid; gap: var(--a-s-8); }
.a-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--a-s-5); align-items: start; }
.a-step__num {
  counter-increment: astep;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--a-grad-brand);
  color: var(--a-n-0);
  display: grid; place-items: center;
  font-family: var(--a-font-display);
  font-size: var(--a-fs-lg);
  font-weight: 700;
  flex: none;
  box-shadow: var(--a-sh-sm);
}
.a-step__num::before { content: counter(astep); }

/* Cronologia */
.a-timeline { position: relative; padding-left: var(--a-s-8); }
.a-timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--a-border); }
.a-timeline__item { position: relative; padding-bottom: var(--a-s-8); }
.a-timeline__item:last-child { padding-bottom: 0; }
.a-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--a-s-8) + 3px);
  top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--a-gold-500);
  box-shadow: 0 0 0 3px var(--a-bg);
}
.a-timeline__year { font-family: var(--a-font-display); font-weight: 700; color: var(--a-brand-700); font-size: var(--a-fs-lg); }

/* ------------------------------------- 11. BLOCCHI DI PAGINA (hero, CTA) */

.a-hero {
  position: relative;
  background: var(--a-grad-deep);
  color: var(--a-text-invert);
  padding-block: var(--a-s-24);
  overflow: hidden;
  isolation: isolate;
}
/* Velo luminoso: dà profondità al fondo scuro senza immagini */
.a-hero::before {
  content: '';
  position: absolute;
  /* Tutti e quattro i lati oltre il bordo: con height in percentuale il velo
     finiva a mezza sezione e lasciava una fascia netta ben visibile. */
  inset: -30% -10%;
  background: radial-gradient(44% 46% at 72% 26%, rgba(230, 130, 180, 0.17) 0%, transparent 72%),
              radial-gradient(38% 40% at 14% 76%, rgba(200, 156, 60, 0.09) 0%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.a-hero__inner { max-width: 780px; }
.a-hero--center .a-hero__inner { margin-inline: auto; text-align: center; }
.a-hero--center .a-eyebrow { justify-content: center; }
.a-hero h1, .a-hero .a-h1, .a-hero .a-display { color: var(--a-text-invert); }
.a-hero .a-lead { color: rgba(255, 255, 255, 0.82); }
.a-hero--compact { padding-block: var(--a-s-16); }

/* Variante chiara, per pagine di testo dove il fondo scuro pesa */
.a-hero--light {
  background: linear-gradient(170deg, var(--a-n-100) 0%, var(--a-n-50) 100%);
  color: var(--a-text);
  border-bottom: 1px solid var(--a-border);
}
.a-hero--light::before { display: none; }
.a-hero--light h1, .a-hero--light .a-h1, .a-hero--light .a-display { color: var(--a-text); }
.a-hero--light .a-lead { color: var(--a-text-muted); }

.a-hero__actions { display: flex; flex-wrap: wrap; gap: var(--a-s-3); margin-top: var(--a-s-8); }
.a-hero--center .a-hero__actions { justify-content: center; }

.a-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--a-s-6);
  margin-top: var(--a-s-12);
  padding-top: var(--a-s-8);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Fascia CTA */
.a-cta {
  background: linear-gradient(150deg, var(--a-brand-800) 0%, var(--a-brand-700) 42%, var(--a-brand-900) 100%);
  color: var(--a-text-invert);
  border-radius: var(--a-r-xl);
  padding: var(--a-s-16) var(--a-s-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Filetto d'oro netto sul bordo superiore: un dettaglio deciso al posto
   dell'alone diffuso, che sopra il borgogna virava a marrone sporco e
   sembrava un artefatto piu' che una scelta. */
.a-cta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%, var(--a-gold-500) 22%,
              var(--a-gold-300) 50%, var(--a-gold-500) 78%, transparent 100%);
}
/* Luce radente nella stessa famiglia del fondo: da' volume senza sporcare */
.a-cta::after {
  content: '';
  position: absolute;
  inset: -60% -20% auto -20%;
  height: 160%;
  background: radial-gradient(42% 46% at 50% 38%, rgba(230, 130, 180, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.a-cta > * { position: relative; z-index: 1; }
.a-cta h2, .a-cta .a-h2 { color: var(--a-text-invert); }
.a-cta .a-lead { color: rgba(255, 255, 255, 0.85); margin-inline: auto; }
.a-cta__actions { display: flex; flex-wrap: wrap; gap: var(--a-s-3); justify-content: center; margin-top: var(--a-s-8); }

/* Fondo scuro generico */
.a-dark { background: var(--a-n-950); color: var(--a-text-invert); }
.a-dark h2, .a-dark .a-h2, .a-dark h3, .a-dark .a-h3 { color: var(--a-text-invert); }
.a-dark .a-lead { color: rgba(255, 255, 255, 0.72); }

/* Prima/dopo, per i case study */
.a-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--a-s-5); align-items: center; }
.a-ba__col { text-align: center; padding: var(--a-s-5); border-radius: var(--a-r-md); }
.a-ba__col--before { background: var(--a-n-100); }
.a-ba__col--after { background: var(--a-brand-50); }
.a-ba__label { font-size: var(--a-fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-text-soft); }
.a-ba__value { font-family: var(--a-font-display); font-size: var(--a-fs-3xl); font-weight: 700; line-height: 1.1; }
.a-ba__col--before .a-ba__value { color: var(--a-n-500); }
.a-ba__col--after .a-ba__value { color: var(--a-brand-700); }
.a-ba__arrow { color: var(--a-gold-500); font-size: var(--a-fs-2xl); }

/* Filetto decorativo */
.a-rule { height: 1px; background: var(--a-border); border: none; margin-block: var(--a-s-12); }
.a-rule--gold { height: 2px; width: 54px; background: var(--a-grad-gold); margin-block: var(--a-s-5); }

/* Briciole */
.a-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-s-2); font-size: var(--a-fs-xs); color: var(--a-text-soft); margin-bottom: var(--a-s-4); }
.a-crumbs a { color: inherit; text-decoration: none; }
.a-crumbs a:hover { color: var(--a-brand-700); }
.a-crumbs li + li::before { content: '/'; margin-right: var(--a-s-2); color: var(--a-n-300); }
.a-crumbs ol, .a-crumbs ul { display: contents; list-style: none; }

/* --------------------------------------------- 12. UTILITY E RESPONSIVE */

.a-text-center { text-align: center; }
.a-text-muted { color: var(--a-text-muted); }
.a-text-brand { color: var(--a-brand-700); }
.a-text-gold { color: var(--a-gold-600); }
/* Scala completa: prima mancavano dei gradini (a-mb-6 su tutti) e le classi
   usate nei template cadevano nel vuoto senza dare errore. */
.a-mt-0 { margin-top: 0; }
.a-mt-2 { margin-top: var(--a-s-2); }
.a-mt-3 { margin-top: var(--a-s-3); }
.a-mt-4 { margin-top: var(--a-s-4); }
.a-mt-5 { margin-top: var(--a-s-5); }
.a-mt-6 { margin-top: var(--a-s-6); }
.a-mt-8 { margin-top: var(--a-s-8); }
.a-mt-10 { margin-top: var(--a-s-10); }
.a-mt-12 { margin-top: var(--a-s-12); }
.a-mt-16 { margin-top: var(--a-s-16); }
.a-mb-0 { margin-bottom: 0; }
.a-mb-2 { margin-bottom: var(--a-s-2); }
.a-mb-3 { margin-bottom: var(--a-s-3); }
.a-mb-4 { margin-bottom: var(--a-s-4); }
.a-mb-5 { margin-bottom: var(--a-s-5); }
.a-mb-6 { margin-bottom: var(--a-s-6); }
.a-mb-8 { margin-bottom: var(--a-s-8); }
.a-mb-10 { margin-bottom: var(--a-s-10); }
.a-mb-12 { margin-bottom: var(--a-s-12); }
.a-mb-16 { margin-bottom: var(--a-s-16); }
.a-full { width: 100%; }

/* Comparsa progressiva. Chi preferisce meno movimento la vede già ferma. */
.a-reveal { opacity: 0; transform: translateY(18px); animation: a-reveal var(--a-t-slow) forwards; }
.a-reveal--d1 { animation-delay: 0.08s; }
.a-reveal--d2 { animation-delay: 0.16s; }
.a-reveal--d3 { animation-delay: 0.24s; }
.a-reveal--d4 { animation-delay: 0.32s; }
@keyframes a-reveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) {
  .a-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  :root { --a-s-24: 4rem; --a-s-20: 3.5rem; --a-s-16: 3rem; }
  .a-container { padding-inline: var(--a-s-4); }
  .a-grid--2, .a-grid--3, .a-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .a-ba { grid-template-columns: minmax(0, 1fr); }
  .a-ba__arrow { transform: rotate(90deg); }
  .a-cta { padding: var(--a-s-12) var(--a-s-5); border-radius: var(--a-r-xl); }
  .a-card--pad-lg { padding: var(--a-s-6); }
  .a-hero__actions .a-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .a-reveal { animation: none; opacity: 1; transform: none; }
  .a-scope *, .a-scope *::before, .a-scope *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .a-hero, .a-cta { background: none !important; color: #000 !important; }
  .a-btn { display: none; }
}

/* ------------------------------- CORREZIONI ALLA NAVIGAZIONE ESISTENTE */

/* L'attributo hidden deve vincere sulle classi del tema: .a-btn e .a-card
   dichiarano display, e senza !important un elemento con hidden resta
   visibile. Si vedeva nell'onboarding, dove il pulsante di invio compariva
   gia' al primo passo. */
[hidden] { display: none !important; }

/* La barra di avanzamento dello scorrimento usava --gradient-primary, cioe'
   l'azzurro del vecchio design system: stonava su ogni pagina. */
.scroll-progress { background: var(--a-grad-brand) !important; }

/* Voci dei sottomenu su due righe: titolo e una riga che spiega dove porta.
   Le icone ora sono disegnate a tratto e hanno un senso, quindi meritano
   spazio e allineamento propri. */
.nav-dropdown-link {
  display: flex !important;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem !important;
}
.nav-dropdown-icon {
  width: 19px !important;
  height: 19px !important;
  flex: none;
  margin-top: 2px;
  color: var(--a-brand-700);
}
.nav-dropdown-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-dropdown-text strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--a-n-900);
  line-height: 1.3;
}
.nav-dropdown-text small {
  font-size: 0.75rem;
  color: var(--a-n-500);
  line-height: 1.35;
}
.nav-dropdown-link:hover .nav-dropdown-text strong { color: var(--a-brand-800); }
.nav-dropdown { min-width: 290px; }

/* --- Il piede resta attaccato al fondo, e la pagina non e' piu' bianca --

   Fra la fine del contenuto e il piede restava una fascia bianca larga:
   tre cose insieme. `.a-scope` dipinge l'avorio del tema solo su se
   stesso, quindi tutto cio' che restava di <main> intorno era il bianco
   del <body>; `arcadia-navigation-2025.css` metteva 80px di margine sopra
   il piede; e <main> aveva un'altezza minima di 100vh che sulle pagine
   corte sfondava di altri 250px.

   Adesso il corpo e' una colonna: <main> cresce quanto serve, il piede
   sta sotto e su una pagina corta scende in fondo alla finestra da solo.
   Lo spazio che avanza e' avorio come il resto della pagina. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1 0 auto;
  min-height: 0;
  background: var(--a-bg);
}
.modern-footer {
  flex: none;
  margin-top: 0;
}

/* L'area riservata e' uno strumento, non una pagina di vendita: il
   respiro delle sezioni pubbliche (96px sopra e sotto) qui diventa una
   fascia vuota fra l'ultima scheda e il piede. */
.main-content.private-area .a-section { padding-block: var(--a-s-10) var(--a-s-12); }

/* --- Menu dell'utente, area riservata ---------------------------------
   Prima sotto l'intestazione c'era una seconda barra con le sezioni
   dell'area, e dentro le pagine le briciole: tre livelli di navigazione
   uno sopra l'altro. Adesso la barra in alto porta le sezioni, e quello
   che si fa una volta ogni tanto (conto, abbonamento, uscita) sta qui.

   Solo da 1025px in su: sotto, la barra sparisce e vale il menu a panino,
   dove le stesse voci ci sono gia'. Una tendina che si apre al passaggio
   del mouse su un telefono non si apre mai. */
.user-drop { position: relative; }
.user-menu-button.is-on {
  background: var(--a-brand-50);
  border-color: var(--a-brand-200);
}
.user-drop__freccia { transition: transform var(--a-t-fast); flex: none; }

.user-drop__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  padding: var(--a-s-2);
  background: #fff;
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--a-t-fast), transform var(--a-t-fast), visibility var(--a-t-fast);
  z-index: 1001;
}

/* Il varco di 8px fra bottone e tendina spezzerebbe il passaggio del
   mouse: questo pseudo-elemento lo copre. */
.user-drop__menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.user-drop__voce {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--a-s-3);
  border-radius: var(--a-r-md);
  font-size: var(--a-fs-sm);
  font-weight: 500;
  color: var(--a-text-muted);
  text-decoration: none;
  transition: background var(--a-t-fast), color var(--a-t-fast);
}
.user-drop__voce:hover { background: var(--a-n-100); color: var(--a-text); }
.user-drop__voce.is-on { background: var(--a-brand-50); color: var(--a-brand-800); font-weight: 600; }
.user-drop__voce--esci { color: var(--a-brand-700); }

.user-drop__riga {
  height: 1px;
  margin: var(--a-s-2) var(--a-s-3);
  background: var(--a-border);
}

@media (min-width: 1025px) {
  .user-drop:hover .user-drop__menu,
  .user-drop:focus-within .user-drop__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .user-drop:hover .user-drop__freccia,
  .user-drop:focus-within .user-drop__freccia { transform: rotate(180deg); }
}

/* Sotto i 1024px la tendina non serve: il menu a panino ha le stesse voci. */
@media (max-width: 1024px) {
  .user-drop__menu,
  .user-drop__freccia { display: none; }
}

/* La voce attiva della navigazione usava --primary-500/600, cioe' l'azzurro
   Tailwind del vecchio design system: restava un puntino celeste sotto la
   pagina corrente, su ogni pagina del sito. */
.arcadia-header .nav-link.active {
  color: var(--a-brand-700);
  background: var(--a-brand-50);
}
.arcadia-header .nav-link.active::after {
  background: var(--a-brand-700);
}
.arcadia-header .nav-link:hover { color: var(--a-brand-800); }

/* ------------------------------- INTESTAZIONE SU SCHERMI STRETTI */

/* Il bottone di attivazione andava a capo e diventava alto 90px dentro
   un'intestazione di 64: sforava, e la parte cliccabile finiva fuori. */
.arcadia-header .btn-header {
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}
.arcadia-header .cta-corta { display: none; }

@media (max-width: 900px) {
  .arcadia-header .cta-lunga { display: none; }
  .arcadia-header .cta-corta { display: inline; }
  .arcadia-header .btn-header { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
}

/* Sotto i 560px resta solo l'azione principale: "Accedi" e' gia' dentro
   il menu, tenerlo qui accanto schiaccia tutto. */
@media (max-width: 560px) {
  .arcadia-header .btn-header-ghost { display: none; }
}

/* Il menu a scomparsa: il pannello scorre da sopra e il velo scuro dietro
   chiarisce che il resto della pagina e' in pausa. */
.mobile-menu { visibility: hidden; }
.mobile-menu.is-aperto {
  visibility: visible;
  transform: translateY(0) !important;
  max-height: calc(100dvh - var(--nav-height-mobile, 64px)) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-velo {
  position: fixed;
  inset: var(--nav-height-mobile, 64px) 0 0 0;
  background: rgba(19, 18, 17, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--a-t-base);
  z-index: 997;
}
.mobile-velo.is-aperto { opacity: 1; pointer-events: auto; }
body.menu-aperto { overflow: hidden; }

/* Le tre righe diventano una croce quando il menu e' aperto */
.mobile-menu-toggle .hamburger-line { transition: transform var(--a-t-base), opacity var(--a-t-fast); }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Voci del menu su schermi stretti: area di tocco comoda, icona allineata
   e la voce corrente riconoscibile. */
.mobile-menu-link {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.25rem !important;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--a-n-800);
  text-decoration: none;
}
.mobile-menu-link svg { width: 20px; height: 20px; flex: none; color: var(--a-n-500); }
.mobile-menu-link:active { background: var(--a-n-100); }
.mobile-menu-link.is-attiva { color: var(--a-brand-700); font-weight: 600; }
.mobile-menu-link.is-attiva svg { color: var(--a-brand-700); }

.mobile-menu-link--attiva {
  margin: 0.5rem 1.25rem;
  border-radius: var(--a-r-md);
  background: var(--a-grad-brand);
  color: #fff !important;
  font-weight: 600;
  justify-content: center;
}
.mobile-menu-link--attiva svg { color: #fff; }

.mobile-menu-sep {
  height: 1px;
  margin: 0.5rem 1.25rem;
  background: var(--a-border);
  list-style: none;
}
.mobile-menu-list { list-style: none; margin: 0; padding: 0.5rem 0 1rem; }

/* ====================================================================
   RIFINITURE PER SCHERMI PICCOLI
   ==================================================================== */

/* --- ZOOM AL TOCCO SU iOS ---------------------------------------------
   Safari su iPhone ingrandisce la pagina appena si tocca un campo con
   carattere sotto i 16px, e poi non torna indietro da solo: l'utente si
   ritrova il modulo fuori scala. I campi erano tutti a 15px. */
@media (max-width: 860px) {
  .a-input, .a-select, .a-textarea,
  /* Elencare i singoli type lasciava fuori time, file e datetime-local, e
     i campi con la sola classe .form-control resi da Symfony: sotto i 16px
     iOS Safari zooma al fuoco e l'impaginazione salta. Meglio prendere
     ogni campo e togliere solo quelli senza testo digitabile. */
  .a-form-symfony input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]),
  .a-form-symfony select,
  .a-form-symfony textarea,
  .a-scope input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]),
  .a-scope select,
  .a-scope textarea,
  .form-control:not([type="file"]),
  .form-select {
    font-size: 16px;
  }

  /* Il campo file cresce con la dimensione del carattere e sfondava il
     riquadro: la larghezza intrinseca del bottone "Sfoglia" non si comprime
     da sola. Non digiti nulla dentro, quindi iOS non zooma comunque. */
  .a-scope input[type="file"],
  .a-form-symfony input[type="file"],
  .form-control[type="file"] {
    max-width: 100%;
    font-size: 0.875rem;
  }
}

/* --- AREE DI TOCCO ----------------------------------------------------
   I collegamenti isolati stavano sui 17-25px di altezza: sotto la soglia
   comoda per un dito. I collegamenti dentro un paragrafo restano come
   sono, perche' allargarli spezzerebbe l'interlinea del testo. */
@media (max-width: 860px) {
  .a-link {
    min-height: 44px;
    align-items: center;
  }
  .a-btn { min-height: 44px; }
  .a-btn--sm { min-height: 38px; }

  .modern-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .modern-footer li { margin-bottom: 0; }

  .a-accordion__item summary { min-height: 52px; }
  .pf-nav__link, .db-tabs__link, .pr-tabs__link { min-height: 42px; display: inline-flex; align-items: center; }

  /* Briciole di pane: il link "Home" restava alto 15px, isolato in cima
     alla pagina e quindi senza l'esenzione dei link dentro una frase. */
  .a-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Lo scambio accedi/registrati e' formalmente dentro una frase, ma su
     login e registrazione e' il secondo gesto piu' frequente della pagina:
     vale allargarlo lo stesso. */
  .a-scope p.a-text-center a,
  .a-scope .a-label a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- LEGGIBILITA' -----------------------------------------------------
   Etichette e occhielli scendevano fino a 9px, illeggibili su un telefono
   tenuto a distanza di braccio. */
@media (max-width: 860px) {
  .a-tag, .a-badge, .a-status { font-size: 0.75rem; }
  .a-eyebrow { font-size: 0.75rem; }
  .a-stat__label { font-size: 0.7rem; }
  .a-help, .a-error { font-size: 0.8125rem; }
  .modern-footer h4 { font-size: 0.75rem; }
  .footer-bottom { font-size: 0.8125rem; }
  .piano__anno, .piano__nastro { font-size: 0.72rem; }
  .cf-durata { font-size: 0.75rem; }
  .conto__barra em { font-size: 0.8125rem; }
}

/* --- LEGGIBILITA' MINIMA SU TELEFONO ---------------------------------
   Alcune etichette sono definite negli <style> delle singole pagine, che
   arrivano dopo questo foglio: qui serve una specificita' maggiore per
   riportarle tutte sopra la soglia leggibile. */
@media (max-width: 860px) {
  .a-scope .a-table__flag,
  .a-scope .pr-switch__save,
  .a-scope .cf-durata,
  .a-scope .piano__nastro,
  .a-scope .mockup-fallback__brand,
  .a-scope .a-stat__label,
  .a-scope .ga-hero__brand {
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
  }
}