/* MSC Design System v1.0 — Maria Stella Cacciola, Biologa Nutrizionista
   Conforme WCAG 2.2 AA. Ordine: font -> token -> base -> componenti.
   Generato il 7 settembre 2026. */

/* ==========================================================================
   00 — FONT SELF-HOSTATI  (GDPR §3: nessuna chiamata a fonts.gstatic.com)
   Fraunces (display) · Source Sans 3 (corpo/UI). Subset latin.
   IBM Plex Mono NON incluso: non va usato nel sito (vedi design system §3).
   ========================================================================== */

/* Fraunces — display */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-v38-latin-italic.woff2") format("woff2");
}

/* Source Sans 3 — corpo e interfaccia */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-v19-latin-700.woff2") format("woff2");
}

/* ==========================================================================
   METODO MSC — DESIGN SYSTEM
   Maria Stella Cacciola · Biologa Nutrizionista
   01 — DESIGN TOKENS
   --------------------------------------------------------------------------
   Ogni coppia colore/sfondo usata nel sistema e' stata verificata contro
   WCAG 2.2 AA (4.5:1 testo normale · 3:1 testo large e componenti UI).
   I rapporti reali sono annotati accanto a ogni token semantico.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. SCALE COLORE PRIMITIVE
     I colori del brand sono contrassegnati con ◆ e non vanno mai alterati.
     I gradini aggiuntivi servono a garantire contrasto e stati.
     --------------------------------------------------------------------- */

  /* Verde salvia — colore identitario */
  --msc-verde-50:  #F4F7F2;
  --msc-verde-100: #E8EDE4; /* ◆ Verde chiaro — salvia chiarissimo */
  --msc-verde-200: #D4DDCE;
  --msc-verde-300: #B5C3AC;
  --msc-verde-400: #8D9C81;
  --msc-verde-500: #66765A; /* ◆ Verde principale — salvia profondo */
  --msc-verde-600: #55654A;
  --msc-verde-700: #3F5038; /* ◆ Verde scuro — oliva bosco */
  --msc-verde-800: #32402C;
  --msc-verde-900: #222C1E;

  /* Oro antico — accento */
  --msc-oro-50:  #FCF8F0;
  --msc-oro-100: #F4EBD8;
  --msc-oro-200: #E9D9B6;
  --msc-oro-300: #D8C79A; /* ◆ Oro chiaro — champagne dorato */
  --msc-oro-400: #C7AC73;
  --msc-oro-500: #B69A57; /* ◆ Oro principale — oro antico */
  --msc-oro-600: #8E7740; /* oro UI: bordi, icone, testo large */
  --msc-oro-700: #6B5A30; /* oro testo: passa AA su fondi chiari */
  --msc-oro-800: #4E4223;

  /* Rosa antico — sezioni dedicate */
  --msc-rosa-50:  #FDF6F5;
  --msc-rosa-100: #EAD8D6; /* ◆ Rosa chiaro — rosa polvere */
  --msc-rosa-200: #DFC4C4;
  --msc-rosa-300: #C58F91; /* ◆ Rosa antico — rosa cipria */
  --msc-rosa-400: #AE7276;
  --msc-rosa-500: #95575D;
  --msc-rosa-600: #7B444A; /* rosa testo: passa AA su fondi chiari */
  --msc-rosa-700: #5E3338;

  /* Neutri caldi — leggermente virati sul verde/avorio, mai grigi puri */
  --msc-bianco:      #FFFFFF; /* ◆ */
  --msc-avorio:      #FAF8F3; /* ◆ Fondo principale — avorio caldo */
  --msc-neutral-100: #F2EFE8;
  --msc-neutral-200: #E5E1D8;
  --msc-neutral-300: #D2CEC3;
  --msc-neutral-400: #ADA99D;
  --msc-neutral-500: #75726A;
  --msc-neutral-600: #5A574F;
  --msc-neutral-700: #46443E;
  --msc-neutral-900: #333630; /* ◆ Testo principale — antracite caldo */

  /* Colori di stato — tonalita' desaturate, coerenti con la palette */
  --msc-success-50:  #EBF3EE;
  --msc-success-500: #2F6B4F;
  --msc-success-700: #23503C;
  --msc-error-50:    #FBEDEC;
  --msc-error-500:   #A32B24;
  --msc-error-700:   #7C201B;
  --msc-warning-50:  #FBF2E2;
  --msc-warning-500: #8A5A0B;
  --msc-warning-700: #6A4508;
  --msc-info-50:     #EAF1F6;
  --msc-info-500:    #2C5C79;
  --msc-info-700:    #21465C;

  /* ---------------------------------------------------------------------
     2. RUOLI SEMANTICI  (usa SEMPRE questi nei componenti, mai le primitive)
     --------------------------------------------------------------------- */

  /* Superfici — nessuna superficie di blocco usa il verde scuro */
  --msc-surface-page:      var(--msc-avorio);       /* fondo dominante 60% */
  --msc-surface-raised:    var(--msc-bianco);       /* card, input, moduli */
  --msc-surface-sunken:    var(--msc-neutral-100);  /* zone tecniche, codice */
  --msc-surface-sage:      var(--msc-verde-100);    /* sezioni alternate 25% */
  --msc-surface-sage-soft: var(--msc-verde-50);
  --msc-surface-rose:      var(--msc-rosa-100);     /* sezioni femminili 10% */
  --msc-surface-rose-soft: var(--msc-rosa-50);
  --msc-surface-gold-soft: var(--msc-oro-100);      /* evidenze rare 5% */

  /* Testo */
  --msc-text-primary:   var(--msc-neutral-900); /* 11.56:1 su avorio */
  --msc-text-secondary: var(--msc-neutral-700); /*  9.17:1 su avorio */
  --msc-text-muted:     var(--msc-neutral-600); /*  6.80:1 su avorio · usa questo su superfici colorate */
  --msc-text-subtle:    var(--msc-neutral-500); /*  4.53:1 su avorio · SOLO su avorio o bianco */
  --msc-text-heading:   var(--msc-verde-700);   /*  8.19:1 su avorio · H1 e H2 */
  --msc-text-eyebrow:   var(--msc-oro-700);     /*  6.32:1 su avorio · occhielli e label */
  --msc-text-rose:      var(--msc-rosa-600);    /*  7.15:1 su avorio · sezioni dedicate */
  --msc-text-inverse:   var(--msc-bianco);

  /* Link */
  --msc-link:         var(--msc-verde-600); /* 5.91:1 su avorio */
  --msc-link-hover:   var(--msc-verde-800);
  --msc-link-visited: var(--msc-verde-700);

  /* Bordi */
  --msc-border-hairline: var(--msc-neutral-200); /* decorativo: divisori */
  --msc-border-soft:     var(--msc-neutral-300); /* decorativo: card */
  --msc-border-strong:   var(--msc-neutral-500); /* 4.53:1 · bordi input e controlli */
  --msc-border-brand:    var(--msc-verde-500);   /* 4.60:1 · bottoni secondari */
  --msc-border-gold:     var(--msc-oro-600);     /* 4.07:1 · dettagli oro funzionali */
  --msc-border-gold-dec: var(--msc-oro-300);     /* decorativo: filetti, cornici */

  /* Azioni */
  --msc-action-bg:            var(--msc-verde-500); /* bianco su verde  4.88:1 */
  --msc-action-bg-hover:      var(--msc-verde-600); /* bianco su verde  6.27:1 */
  --msc-action-bg-active:     var(--msc-verde-700); /* bianco su verde  8.69:1 */
  --msc-action-gold-bg:       var(--msc-oro-500);   /* antracite su oro 4.53:1 */
  --msc-action-gold-hover:    var(--msc-oro-400);   /* schiarisce: 5.60:1 */
  --msc-action-gold-active:   var(--msc-oro-300);   /* schiarisce: 7.34:1 */
  --msc-action-rose-bg:       var(--msc-rosa-500);  /* bianco su rosa  5.53:1 */
  --msc-action-rose-hover:    var(--msc-rosa-600);  /* bianco su rosa  7.59:1 */
  --msc-action-disabled-bg:   var(--msc-neutral-200);
  --msc-action-disabled-text: var(--msc-neutral-600); /* 5.53:1 — leggibile anche da disabilitato */

  /* Focus — anello doppio: alone chiaro interno + anello scuro esterno.
     Funziona su qualunque superficie del sistema (min 4:1 ovunque). */
  --msc-focus-ring:  var(--msc-verde-800);
  --msc-focus-halo:  var(--msc-bianco);
  --msc-focus-width: 3px;
  --msc-focus-offset: 2px;

  /* ---------------------------------------------------------------------
     3. TIPOGRAFIA
     --------------------------------------------------------------------- */
  --msc-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --msc-font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --msc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Scala fluida — rapporto 1.200 su mobile, 1.250 su desktop.
     Tutti i valori in rem: rispettano lo zoom e le preferenze del browser. */
  --msc-text-display: clamp(2.5rem, 1.85rem + 3.2vw, 4rem);      /* 40 → 64 */
  --msc-text-h1:      clamp(2rem, 1.60rem + 2.0vw, 3.125rem);    /* 32 → 50 */
  --msc-text-h2:      clamp(1.625rem, 1.40rem + 1.1vw, 2.375rem);/* 26 → 38 */
  --msc-text-h3:      clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); /* 22 → 28 */
  --msc-text-h4:      clamp(1.1875rem, 1.13rem + 0.3vw, 1.375rem);/*19 → 22 */
  --msc-text-lead:    clamp(1.1875rem, 1.10rem + 0.4vw, 1.375rem);/*19 → 22 */
  --msc-text-body:    clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);/*17 → 18 */
  --msc-text-sm:      1rem;      /* 16 — testo di servizio */
  --msc-text-xs:      0.875rem;  /* 14 — minimo assoluto del sistema */
  --msc-text-label:   0.8125rem; /* 13 — solo per label maiuscole con letter-spacing */

  --msc-weight-light: 300;
  --msc-weight-regular: 400;
  --msc-weight-medium: 500;
  --msc-weight-semibold: 600;
  --msc-weight-bold: 700;

  --msc-leading-tight: 1.12;
  --msc-leading-snug: 1.25;
  --msc-leading-normal: 1.45;
  --msc-leading-relaxed: 1.65; /* default del testo corrente */
  --msc-leading-loose: 1.8;

  --msc-tracking-tight: -0.015em;
  --msc-tracking-normal: 0;
  --msc-tracking-wide: 0.04em;
  --msc-tracking-label: 0.12em;

  --msc-measure: 65ch;       /* lunghezza riga ideale del testo corrente */
  --msc-measure-narrow: 46ch;
  --msc-measure-display: 20ch;

  /* ---------------------------------------------------------------------
     4. SPAZIATURE — scala 4pt
     --------------------------------------------------------------------- */
  --msc-space-1: 0.25rem;  /*  4 */
  --msc-space-2: 0.5rem;   /*  8 */
  --msc-space-3: 0.75rem;  /* 12 */
  --msc-space-4: 1rem;     /* 16 */
  --msc-space-5: 1.25rem;  /* 20 */
  --msc-space-6: 1.5rem;   /* 24 */
  --msc-space-7: 1.75rem;  /* 28 */
  --msc-space-8: 2rem;     /* 32 */
  --msc-space-10: 2.5rem;  /* 40 */
  --msc-space-12: 3rem;    /* 48 */
  --msc-space-14: 3.5rem;  /* 56 */
  --msc-space-16: 4rem;    /* 64 */
  --msc-space-20: 5rem;    /* 80 */
  --msc-space-24: 6rem;    /* 96 */
  --msc-space-32: 8rem;    /* 128 */

  /* Ritmo verticale delle sezioni di pagina */
  --msc-section-y: clamp(4rem, 2.75rem + 5.5vw, 7.5rem);

  /* ---------------------------------------------------------------------
     5. LAYOUT
     --------------------------------------------------------------------- */
  --msc-container: 74rem;        /* 1184 — contenitore standard */
  --msc-container-narrow: 46rem; /*  736 — articoli e testi lunghi */
  --msc-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --msc-grid-gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);

  /* Breakpoint (documentativi: in CSS si usano nelle media query) */
  --msc-bp-sm: 30rem;   /* 480 */
  --msc-bp-md: 48rem;   /* 768 */
  --msc-bp-lg: 64rem;   /* 1024 */
  --msc-bp-xl: 80rem;   /* 1280 */

  /* ---------------------------------------------------------------------
     6. FORMA — raggi, ombre, tratti
     --------------------------------------------------------------------- */
  --msc-radius-xs: 4px;
  --msc-radius-sm: 6px;
  --msc-radius-md: 10px;  /* bottoni, input */
  --msc-radius-lg: 18px;  /* card, box */
  --msc-radius-xl: 28px;  /* immagini, blocchi editoriali */
  --msc-radius-pill: 999px;

  /* Ombre tinte di verde, mai nero puro: restano calde sull'avorio */
  --msc-shadow-sm: 0 1px 2px rgba(51, 54, 48, 0.06), 0 1px 3px rgba(51, 54, 48, 0.05);
  --msc-shadow-md: 0 2px 4px rgba(51, 54, 48, 0.05), 0 6px 16px -4px rgba(51, 54, 48, 0.10);
  --msc-shadow-lg: 0 4px 8px rgba(51, 54, 48, 0.04), 0 16px 32px -8px rgba(51, 54, 48, 0.13);
  --msc-shadow-focus-inset: inset 0 0 0 1px rgba(63, 80, 56, 0.18);

  /* ---------------------------------------------------------------------
     7. MOVIMENTO — sempre breve, sempre disattivabile
     --------------------------------------------------------------------- */
  --msc-duration-fast: 120ms;
  --msc-duration-base: 200ms;
  --msc-duration-slow: 320ms;
  --msc-ease: cubic-bezier(0.33, 0.1, 0.25, 1);

  /* ---------------------------------------------------------------------
     8. TARGET TATTILI
     WCAG 2.2 AA chiede 24×24px. Il sistema adotta 44×44px come minimo
     reale per tutti i controlli: e' il valore raccomandato da Apple e
     l'unico confortevole per utenti con tremori o dita grandi.
     --------------------------------------------------------------------- */
  --msc-target-min: 44px;
  --msc-target-comfortable: 48px;

  --msc-z-base: 1;
  --msc-z-sticky: 100;
  --msc-z-header: 200;
  --msc-z-overlay: 300;
  --msc-z-modal: 400;
  --msc-z-toast: 500;
}

/* ==========================================================================
   02 — RESET E BASE ACCESSIBILE
   ========================================================================== */

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

html {
  /* Nessun font-size fisso: l'utente deve poter cambiare la base del browser */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* evita che l'header sticky copra l'ancora messa a fuoco */
}

body {
  margin: 0;
  background: var(--msc-surface-page);
  color: var(--msc-text-primary);
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-body);
  font-weight: var(--msc-weight-regular);
  line-height: var(--msc-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Titoli --------------------------------------------------------------
   H1 e H2 sono sempre in verde oliva bosco, come da linee guida di brand.
   H3 mantiene il verde per continuita'; da H4 in giu' si passa all'antracite
   e al sans, cosi' la gerarchia resta leggibile anche senza colore.        */

h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; }

h1, .msc-h1 {
  font-family: var(--msc-font-display);
  font-optical-sizing: auto;
  font-size: var(--msc-text-h1);
  font-weight: var(--msc-weight-semibold);
  line-height: var(--msc-leading-tight);
  letter-spacing: var(--msc-tracking-tight);
  color: var(--msc-text-heading);
}

h2, .msc-h2 {
  font-family: var(--msc-font-display);
  font-optical-sizing: auto;
  font-size: var(--msc-text-h2);
  font-weight: var(--msc-weight-semibold);
  line-height: var(--msc-leading-snug);
  letter-spacing: var(--msc-tracking-tight);
  color: var(--msc-text-heading);
}

h3, .msc-h3 {
  font-family: var(--msc-font-display);
  font-optical-sizing: auto;
  font-size: var(--msc-text-h3);
  font-weight: var(--msc-weight-semibold);
  line-height: var(--msc-leading-snug);
  color: var(--msc-text-heading);
}

h4, .msc-h4 {
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-h4);
  font-weight: var(--msc-weight-semibold);
  line-height: var(--msc-leading-normal);
  color: var(--msc-text-primary);
}

h5, .msc-h5, h6, .msc-h6 {
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-sm);
  font-weight: var(--msc-weight-semibold);
  line-height: var(--msc-leading-normal);
  color: var(--msc-text-primary);
}

/* Nessun limite di misura: il testo arriva in modo naturale al gutter
   destro del contenitore (scelta del progetto — supera il 65ch del DS). */
p { margin: 0; }

.msc-lead {
  font-size: var(--msc-text-lead);
  line-height: var(--msc-leading-normal);
  color: var(--msc-text-secondary);
}

/* Occhiello: solo testo. Nessun trattino, nessun filetto decorativo davanti
   all'etichetta — la gerarchia e' data da colore, corpo e spaziatura. */
.msc-eyebrow {
  display: block;
  font-size: var(--msc-text-label);
  font-weight: var(--msc-weight-semibold);
  letter-spacing: var(--msc-tracking-label);
  text-transform: uppercase;
  line-height: var(--msc-leading-normal);
  color: var(--msc-text-eyebrow);
}

.msc-text-muted { color: var(--msc-text-muted); }
.msc-text-sm { font-size: var(--msc-text-sm); }
.msc-text-xs { font-size: var(--msc-text-xs); }

/* ---- Link ---------------------------------------------------------------- */

a {
  color: var(--msc-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--msc-link) 45%, transparent);
  transition: color var(--msc-duration-fast) var(--msc-ease),
              text-decoration-color var(--msc-duration-fast) var(--msc-ease);
}
a:hover {
  color: var(--msc-link-hover);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
a:visited { color: var(--msc-link-visited); }
a:active { color: var(--msc-verde-900); }

/* ---- Focus visibile: regola unica per tutto il sistema -------------------
   Anello doppio (alone chiaro + anello verde-800): resta ≥4:1 su tutte le
   superfici del sistema, comprese quelle colorate e i bottoni pieni.       */

:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
  outline: var(--msc-focus-width) solid var(--msc-focus-ring);
  outline-offset: var(--msc-focus-offset);
  box-shadow: 0 0 0 var(--msc-focus-offset) var(--msc-focus-halo);
  border-radius: var(--msc-radius-xs);
}
/* Il focus non viene mai rimosso: si sostituisce solo quando il componente
   ha un raggio proprio (vedi .msc-btn, .msc-input). */
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip link ----------------------------------------------------------- */

.msc-skip-link {
  position: absolute;
  inset-inline-start: var(--msc-space-4);
  inset-block-start: var(--msc-space-4);
  z-index: var(--msc-z-toast);
  padding: var(--msc-space-3) var(--msc-space-5);
  background: var(--msc-verde-700);
  color: var(--msc-text-inverse);
  font-weight: var(--msc-weight-semibold);
  text-decoration: none;
  border-radius: var(--msc-radius-md);
  box-shadow: var(--msc-shadow-lg);
  /* Nascosta senza ingombro visivo: niente rettangolo verde che spunta
     durante l'overscroll in cima alla pagina. */
  clip-path: inset(50%);
}
.msc-skip-link:focus { clip-path: none; color: var(--msc-text-inverse); }

/* ---- Solo per screen reader --------------------------------------------- */

.msc-sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Media --------------------------------------------------------------- */

img, picture, video, svg { max-inline-size: 100%; block-size: auto; display: block; }
figure { margin: 0; }
figcaption {
  margin-block-start: var(--msc-space-3);
  font-size: var(--msc-text-sm);
  color: var(--msc-text-muted);
}

hr {
  border: 0;
  block-size: 1px;
  background: var(--msc-border-hairline);
  margin-block: var(--msc-space-10);
}

::selection { background: var(--msc-oro-200); color: var(--msc-verde-900); }

code, kbd, samp, pre {
  font-family: var(--msc-font-mono);
  font-size: 0.9em;
}

/* ---- Layout di base ------------------------------------------------------ */

.msc-container {
  inline-size: 100%;
  max-inline-size: var(--msc-container);
  margin-inline: auto;
  padding-inline: var(--msc-gutter);
}
/* Contenitore "stretto": allineato a sinistra come tutte le sezioni, mai
   centrato. Il contenuto occupa l'intera larghezza fino al gutter destro. */
.msc-container--narrow { max-inline-size: var(--msc-container); }

.msc-section { padding-block: var(--msc-section-y); }
/* L'hero gestisce già il proprio ritmo verticale (padding-block clamp
   2.5–5.5rem): la sezione che lo contiene non deve raddoppiarlo. */
.msc-section:has(> .msc-container > .msc-hero) { padding-block: 0; }
.msc-section--sage { background: var(--msc-surface-sage); }
.msc-section--sage-soft { background: var(--msc-surface-sage-soft); }
.msc-section--rose { background: var(--msc-surface-rose); }
.msc-section--rose-soft { background: var(--msc-surface-rose-soft); }
.msc-section--white { background: var(--msc-surface-raised); }

.msc-stack { display: flex; flex-direction: column; }
.msc-stack--2 { gap: var(--msc-space-2); }
.msc-stack--3 { gap: var(--msc-space-3); }
.msc-stack--4 { gap: var(--msc-space-4); }
.msc-stack--5 { gap: var(--msc-space-5); }
.msc-stack--6 { gap: var(--msc-space-6); }
.msc-stack--8 { gap: var(--msc-space-8); }
.msc-stack--12 { gap: var(--msc-space-12); }
/* Elementi impilati tutti della stessa altezza (dal breakpoint a due colonne) */
@media (min-width: 60rem) {
  .msc-stack--rows { display: grid; grid-auto-rows: 1fr; }
}

.msc-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--msc-space-4);
}
.msc-cluster--tight { gap: var(--msc-space-3); }

/* ---- Flusso verticale ----------------------------------------------------
   Ritmo di lettura di un blocco di contenuto. Ogni elemento riceve solo un
   margine superiore, quindi non ci sono margini che collassano o si sommano.
   Le eccezioni riproducono le distanze definite in "Ritmo verticale".      */

.msc-flow > * { margin-block: 0; }
.msc-flow > * + * { margin-block-start: var(--_flow, var(--msc-space-5)); }

/* occhiello → titolo: legati, sono la stessa unità */
.msc-flow > .msc-eyebrow + * { --_flow: var(--msc-space-3); }
/* titolo → testo */
.msc-flow > h1 + *, .msc-flow > h2 + *, .msc-flow > h3 + *,
.msc-flow > h4 + *, .msc-flow > .msc-h1 + *, .msc-flow > .msc-h2 + *,
.msc-flow > .msc-h3 + *, .msc-flow > .msc-h4 + * { --_flow: var(--msc-space-4); }
/* blocco di testo → gruppo di azioni: lo stacco più ampio del sistema */
.msc-flow > .msc-actions { --_flow: var(--msc-space-8); }
/* azioni → nota di supporto sotto i bottoni */
.msc-flow > .msc-actions + * { --_flow: var(--msc-space-5); }
/* un titolo che segue del testo apre una nuova unità */
.msc-flow > * + h2, .msc-flow > * + h3 { --_flow: var(--msc-space-10); }

@media (min-width: 48rem) {
  .msc-flow > .msc-actions { --_flow: var(--msc-space-10); }
}

/* Testo a piena larghezza del contenitore, senza misura di riga ristretta:
   per le sezioni che devono allinearsi al bordo di pagina come il resto. */
.msc-flow--wide > p,
.msc-flow--wide > .msc-lead { max-width: none; }

/* ---- Gruppo di azioni ----------------------------------------------------
   I bottoni non toccano mai il testo che li precede: 32px su mobile,
   40px da tablet in su. Fra due bottoni adiacenti sempre 16px, così un
   tocco impreciso non attiva quello sbagliato.                             */

.msc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--msc-space-4);
}
.msc-actions--between { justify-content: space-between; }
/* Da usare quando le azioni stanno in una colonna propria della griglia e
   la distanza è già data dal gap del contenitore. */
.msc-flow > .msc-actions.msc-actions--flush,
.msc-actions--flush { --_flow: 0; }

/* ---- Movimento ridotto --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   03 — COMPONENTI
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTTONI
   Target minimo 44×44px. Label sempre ≥16px e ≥4.5:1 in ogni stato,
   compreso lo stato disabilitato.
   -------------------------------------------------------------------------- */

.msc-btn {
  --_btn-bg: transparent;
  --_btn-fg: var(--msc-text-primary);
  --_btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--msc-space-2);
  min-block-size: var(--msc-target-comfortable);
  padding-inline: var(--msc-space-7);
  padding-block: var(--msc-space-3);
  border: 2px solid var(--_btn-border);
  border-radius: var(--msc-radius-md);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-sm);
  font-weight: var(--msc-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--msc-duration-fast) var(--msc-ease),
              border-color var(--msc-duration-fast) var(--msc-ease),
              color var(--msc-duration-fast) var(--msc-ease),
              transform var(--msc-duration-fast) var(--msc-ease);
}
.msc-btn:visited { color: var(--_btn-fg); }
.msc-btn:active:not(:disabled) { transform: translateY(1px); }

.msc-btn:focus-visible {
  outline: var(--msc-focus-width) solid var(--msc-focus-ring);
  outline-offset: var(--msc-focus-offset);
  box-shadow: 0 0 0 var(--msc-focus-offset) var(--msc-focus-halo);
}

.msc-btn:disabled,
.msc-btn[aria-disabled="true"] {
  --_btn-bg: var(--msc-action-disabled-bg);
  --_btn-fg: var(--msc-action-disabled-text);
  --_btn-border: var(--msc-action-disabled-bg);
  cursor: not-allowed;
  transform: none;
}

/* Primario — verde salvia */
.msc-btn--primary {
  --_btn-bg: var(--msc-action-bg);
  --_btn-fg: var(--msc-text-inverse);
  --_btn-border: var(--msc-action-bg);
}
.msc-btn--primary:hover:not(:disabled) {
  --_btn-bg: var(--msc-action-bg-hover);
  --_btn-border: var(--msc-action-bg-hover);
  color: var(--msc-text-inverse);
}
.msc-btn--primary:active:not(:disabled) {
  --_btn-bg: var(--msc-action-bg-active);
  --_btn-border: var(--msc-action-bg-active);
}

/* Secondario — contorno verde */
.msc-btn--secondary {
  --_btn-bg: transparent;
  --_btn-fg: var(--msc-verde-700);
  --_btn-border: var(--msc-border-brand);
}
.msc-btn--secondary:hover:not(:disabled) {
  --_btn-bg: var(--msc-verde-100);
  --_btn-fg: var(--msc-verde-800);
  --_btn-border: var(--msc-verde-700);
}
.msc-btn--secondary:active:not(:disabled) { --_btn-bg: var(--msc-verde-200); }

/* Terziario — testuale, per azioni a bassa priorita' */
.msc-btn--tertiary {
  --_btn-bg: transparent;
  --_btn-fg: var(--msc-verde-700);
  --_btn-border: transparent;
  padding-inline: var(--msc-space-3);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.msc-btn--tertiary:hover:not(:disabled) {
  --_btn-bg: var(--msc-verde-100);
  --_btn-fg: var(--msc-verde-800);
}

/* Oro — accento, una sola istanza per schermata.
   Attenzione: negli stati hover/active l'oro SCHIARISCE invece di scurirsi,
   perche' la label e' antracite: scurendo il fondo il contrasto crollerebbe. */
.msc-btn--gold {
  --_btn-bg: var(--msc-action-gold-bg);
  --_btn-fg: var(--msc-neutral-900);
  --_btn-border: var(--msc-oro-600);
}
.msc-btn--gold:hover:not(:disabled) {
  --_btn-bg: var(--msc-action-gold-hover);
  --_btn-border: var(--msc-oro-700);
  color: var(--msc-neutral-900);
}
.msc-btn--gold:active:not(:disabled) { --_btn-bg: var(--msc-action-gold-active); }

/* Rosa — solo dentro le sezioni dedicate alla salute femminile */
.msc-btn--rose {
  --_btn-bg: var(--msc-action-rose-bg);
  --_btn-fg: var(--msc-text-inverse);
  --_btn-border: var(--msc-action-rose-bg);
}
.msc-btn--rose:hover:not(:disabled) {
  --_btn-bg: var(--msc-action-rose-hover);
  --_btn-border: var(--msc-action-rose-hover);
  color: var(--msc-text-inverse);
}

/* Dimensioni */
.msc-btn--sm {
  min-block-size: var(--msc-target-min);
  padding-inline: var(--msc-space-5);
  font-size: var(--msc-text-xs);
}
.msc-btn--lg {
  min-block-size: 56px;
  padding-inline: var(--msc-space-10);
  font-size: var(--msc-text-body);
}
.msc-btn--block { inline-size: 100%; }

/* Icona sola — richiede sempre aria-label */
.msc-btn--icon {
  inline-size: var(--msc-target-comfortable);
  min-block-size: var(--msc-target-comfortable);
  padding: 0;
  border-radius: var(--msc-radius-md);
}

/* Stato di caricamento — annunciato via aria-busy, non solo visivo */
.msc-btn[aria-busy="true"] { cursor: progress; }
.msc-btn[aria-busy="true"] .msc-btn__spinner {
  inline-size: 1.05em; block-size: 1.05em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: msc-spin 700ms linear infinite;
}
@keyframes msc-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   MODULI
   Label sempre visibile e associata. Il placeholder non sostituisce mai la label.
   -------------------------------------------------------------------------- */

.msc-field { display: flex; flex-direction: column; gap: var(--msc-space-2); }

.msc-label {
  font-size: var(--msc-text-sm);
  font-weight: var(--msc-weight-semibold);
  color: var(--msc-text-primary);
  line-height: var(--msc-leading-normal);
}
.msc-label__required {
  color: var(--msc-error-700);
  font-weight: var(--msc-weight-regular);
  font-size: var(--msc-text-xs);
}

.msc-hint {
  font-size: var(--msc-text-xs);
  color: var(--msc-text-muted);
  line-height: var(--msc-leading-normal);
}

.msc-input,
.msc-textarea,
.msc-select {
  inline-size: 100%;
  min-block-size: var(--msc-target-comfortable);
  padding: var(--msc-space-3) var(--msc-space-4);
  border: 1.5px solid var(--msc-border-strong);
  border-radius: var(--msc-radius-md);
  background: var(--msc-surface-raised);
  color: var(--msc-text-primary);
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-sm); /* mai sotto 16px: evita lo zoom automatico su iOS */
  line-height: var(--msc-leading-normal);
  transition: border-color var(--msc-duration-fast) var(--msc-ease),
              box-shadow var(--msc-duration-fast) var(--msc-ease);
}
.msc-textarea { min-block-size: 8rem; resize: vertical; }

.msc-input::placeholder,
.msc-textarea::placeholder { color: var(--msc-neutral-500); opacity: 1; }

.msc-input:hover:not(:disabled),
.msc-textarea:hover:not(:disabled),
.msc-select:hover:not(:disabled) { border-color: var(--msc-verde-600); }

.msc-input:focus-visible,
.msc-textarea:focus-visible,
.msc-select:focus-visible {
  border-color: var(--msc-verde-700);
  outline: var(--msc-focus-width) solid var(--msc-focus-ring);
  outline-offset: var(--msc-focus-offset);
  box-shadow: none;
}

.msc-input:disabled,
.msc-textarea:disabled,
.msc-select:disabled {
  background: var(--msc-neutral-100);
  border-color: var(--msc-neutral-400);
  color: var(--msc-neutral-600);
  cursor: not-allowed;
}

.msc-input[aria-invalid="true"],
.msc-textarea[aria-invalid="true"],
.msc-select[aria-invalid="true"] {
  border-color: var(--msc-error-500);
  border-width: 2px;
  background: var(--msc-error-50);
}

/* Il messaggio d'errore usa icona + testo: il colore non e' mai l'unico segnale */
.msc-error {
  display: flex;
  align-items: flex-start;
  gap: var(--msc-space-2);
  font-size: var(--msc-text-xs);
  font-weight: var(--msc-weight-semibold);
  color: var(--msc-error-700);
  line-height: var(--msc-leading-normal);
}
.msc-error svg { flex: none; margin-block-start: 0.1em; }

.msc-select {
  appearance: none;
  padding-inline-end: var(--msc-space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2346443E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--msc-space-4) center;
  background-size: 1.15rem;
}

/* Checkbox e radio — area cliccabile estesa a tutta la riga */
.msc-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--msc-space-3);
  min-block-size: var(--msc-target-min);
  padding-block: var(--msc-space-2);
  cursor: pointer;
}
.msc-choice input[type="checkbox"],
.msc-choice input[type="radio"] {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin: 0.2rem 0 0;
  accent-color: var(--msc-verde-600);
  cursor: pointer;
}
.msc-choice input:focus-visible {
  outline: var(--msc-focus-width) solid var(--msc-focus-ring);
  outline-offset: var(--msc-focus-offset);
}
.msc-choice__text { font-size: var(--msc-text-sm); line-height: var(--msc-leading-normal); }

/* Fieldset per gruppi di scelte */
.msc-fieldset {
  border: 1px solid var(--msc-border-soft);
  border-radius: var(--msc-radius-md);
  padding: var(--msc-space-5) var(--msc-space-6) var(--msc-space-6);
  margin: 0;
}
.msc-fieldset legend {
  padding-inline: var(--msc-space-2);
  font-size: var(--msc-text-sm);
  font-weight: var(--msc-weight-semibold);
  color: var(--msc-text-primary);
}

/* --------------------------------------------------------------------------
   PROSE — corpo di un articolo del blog (single-post.php), contenuto
   importato via wp_insert_post: paragrafi, titoli, liste e immagini senza
   classi .msc-*, quindi qui si stila l'elemento nudo, non una classe
   applicata a mano come nel resto del sito.
   -------------------------------------------------------------------------- */

.msc-prose {
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-body);
  color: var(--msc-text-primary);
  line-height: var(--msc-leading-relaxed);
}
.msc-prose > * + * { margin-block-start: var(--msc-space-5); }
.msc-prose h2 {
  font-family: var(--msc-font-display);
  font-size: var(--msc-text-h3);
  font-weight: var(--msc-weight-semibold);
  color: var(--msc-text-heading);
  line-height: var(--msc-leading-snug);
  margin-block-start: var(--msc-space-10) !important;
}
.msc-prose h3 {
  font-family: var(--msc-font-display);
  font-size: var(--msc-text-h4);
  font-weight: var(--msc-weight-semibold);
  color: var(--msc-text-heading);
  margin-block-start: var(--msc-space-8) !important;
}
.msc-prose p { margin-block-start: var(--msc-space-5); }
.msc-prose ul, .msc-prose ol { padding-inline-start: 1.25em; }
.msc-prose li + li { margin-block-start: var(--msc-space-2); }
.msc-prose a { color: var(--msc-link); text-decoration: underline; text-underline-offset: 0.15em; }
.msc-prose a:hover { color: var(--msc-link-hover); }
.msc-prose a:visited { color: var(--msc-link-visited); }
.msc-prose img {
  /* Altezza massima 800px su richiesta esplicita: valore fisso dato dalla
     cliente, non un token di sistema. Larghezza "auto", non 100%, perché
     è l'altezza a comandare il ridimensionamento qui: l'immagine resta
     centrata e più piccola invece di riempire tutta la colonna. Nessun
     object-fit/crop: il rapporto originale resta intatto. */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 800px;
  margin-inline: auto;
  border-radius: var(--msc-radius-lg);
  margin-block: var(--msc-space-8);
}
.msc-prose strong { font-weight: var(--msc-weight-semibold); }

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */

.msc-card {
  display: flex;
  flex-direction: column;
  gap: var(--msc-space-3);
  padding: var(--msc-space-7);
  background: var(--msc-surface-raised);
  border: 1px solid var(--msc-border-hairline);
  border-radius: var(--msc-radius-lg);
  block-size: 100%;
}
.msc-card--flat { box-shadow: none; background: transparent; border-color: var(--msc-border-soft); }
.msc-card--sage { background: var(--msc-surface-sage); border-color: var(--msc-verde-200); }
.msc-card--rose { background: var(--msc-surface-rose); border-color: var(--msc-rosa-200); }

/* Card interattiva: tutto il blocco e' cliccabile ma il link resta uno solo */
.msc-card--link { position: relative; transition: box-shadow var(--msc-duration-base) var(--msc-ease),
                                                    transform var(--msc-duration-base) var(--msc-ease); }
.msc-card--link:hover { box-shadow: var(--msc-shadow-md); transform: translateY(-2px); }
.msc-card--link:has(a:focus-visible) {
  outline: var(--msc-focus-width) solid var(--msc-focus-ring);
  outline-offset: var(--msc-focus-offset);
}
.msc-card--link a::after { content: ""; position: absolute; inset: 0; }
.msc-card--link a:focus-visible { outline: none; box-shadow: none; }

.msc-card > .msc-badge { align-self: flex-start; }
/* Spinge l'ultimo elemento in fondo: card affiancate restano allineate */
.msc-card__footer {
  margin-block-start: auto;
  padding-block-start: var(--msc-space-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--msc-space-3);
}
.msc-card__title { font-size: var(--msc-text-h4); }
.msc-card__icon {
  inline-size: 2.75rem; block-size: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--msc-radius-md);
  background: var(--msc-verde-100);
  color: var(--msc-verde-700);
  margin-block-end: var(--msc-space-2);
}
.msc-card--rose .msc-card__icon { background: var(--msc-rosa-200); color: var(--msc-rosa-700); }

.msc-card__cta { color: var(--msc-oro-700); font-weight: var(--msc-weight-semibold); }
.msc-card--link:hover .msc-card__cta,
.msc-card--link:has(a:focus-visible) .msc-card__cta {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Card orizzontale: elenco impilato, foto a sinistra, testo e CTA a destra.
   La foto sfonda il padding della card: nessuno spazio interno intorno
   all'immagine, che tocca i bordi non affacciati sul testo. L'arrotondamento
   è dato dall'overflow:hidden della card, non dalla foto stessa.
   Le foto sorgente sono quadrate (1:1): a larghezza di colonna fissa hanno
   sempre la stessa dimensione e non vengono mai ritagliate. */
.msc-card-list { display: flex; flex-direction: column; gap: var(--msc-space-6); }

.msc-card--horizontal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--msc-space-5);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .msc-card--horizontal {
    grid-template-columns: minmax(16rem, 20rem) 1fr;
    align-items: stretch;
    gap: var(--msc-space-8);
  }
}
.msc-card--horizontal .msc-card__media {
  margin-block-start: calc(-1 * var(--msc-space-7));
  margin-inline: calc(-1 * var(--msc-space-7));
}
@media (min-width: 48rem) {
  .msc-card--horizontal .msc-card__media {
    margin-block: calc(-1 * var(--msc-space-7));
    margin-inline-end: 0;
    display: flex;
    align-items: center;
  }
}
.msc-card--horizontal .msc-card__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.msc-card--horizontal .msc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--msc-space-3);
}

/* --------------------------------------------------------------------------
   CARD CON MEDIA — segnaposto/immagine a filo, testo nello spazio restante
   -------------------------------------------------------------------------- */
.msc-card--media { padding: 0; gap: 0; overflow: hidden; }
.msc-card--media > .msc-hero__media { border-radius: 0; aspect-ratio: 4 / 3; }
.msc-card--media > .msc-flow { padding: var(--msc-space-8); }

/* Con immagine reale: sotto i 60rem è la MEDIA (non la card) a ritagliare
   l'immagine in un quadrato ancorato in alto — deroga circoscritta a
   "immagini mai tagliate", richiesta per le 3 card di metodo.html.
   Da 60rem in su l'immagine si vede intera. */
.msc-card--media > .msc-hero__media:has(> img) {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.msc-card--media > .msc-hero__media > img {
  block-size: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}

@media (min-width: 60rem) {
  .msc-card--media {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
  }
  .msc-card--media-right { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .msc-card--media > .msc-hero__media { aspect-ratio: auto; block-size: 100%; }
  .msc-card--media > .msc-hero__media:has(> img) {
    aspect-ratio: auto;
    block-size: auto;
    align-self: start;
    overflow: visible;
  }
  .msc-card--media > .msc-hero__media > img { block-size: auto; object-fit: fill; }
}

/* Sotto i 60rem: nella card -right l'immagine va sopra il testo, così su
   mobile le 3 card sono identiche. Nessun effetto da 60rem in su. */
@media (max-width: 59.99rem) {
  .msc-card--media-right { display: flex; flex-direction: column; }
  .msc-card--media-right > .msc-hero__media { order: -1; }
}

/* --------------------------------------------------------------------------
   BADGE E CHIP
   -------------------------------------------------------------------------- */

.msc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--msc-space-2);
  padding: 0.3rem var(--msc-space-3);
  border-radius: var(--msc-radius-pill);
  font-size: var(--msc-text-xs);
  font-weight: var(--msc-weight-semibold);
  line-height: 1.35;
  white-space: nowrap;
}
.msc-badge--sage { background: var(--msc-verde-200); color: var(--msc-verde-800); }
.msc-badge--gold { background: var(--msc-oro-200); color: var(--msc-oro-800); }
.msc-badge--rose { background: var(--msc-rosa-200); color: var(--msc-rosa-700); }
.msc-badge--neutral { background: var(--msc-neutral-200); color: var(--msc-neutral-700); }
.msc-badge--success { background: var(--msc-success-50); color: var(--msc-success-700); }
.msc-badge--error { background: var(--msc-error-50); color: var(--msc-error-700); }

/* --------------------------------------------------------------------------
   ALERT — icona + parola chiave: il colore non e' mai l'unico segnale
   -------------------------------------------------------------------------- */

.msc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--msc-space-4);
  padding: var(--msc-space-5) var(--msc-space-6);
  border-radius: var(--msc-radius-md);
  border-inline-start: 4px solid;
  font-size: var(--msc-text-sm);
  line-height: var(--msc-leading-normal);
}
.msc-alert svg { flex: none; margin-block-start: 0.15em; }
.msc-alert__title { font-weight: var(--msc-weight-semibold); display: block; }
.msc-alert p { max-inline-size: none; }

.msc-alert--info { background: var(--msc-info-50); border-color: var(--msc-info-500); color: var(--msc-info-700); }
.msc-alert--success { background: var(--msc-success-50); border-color: var(--msc-success-500); color: var(--msc-success-700); }
.msc-alert--warning { background: var(--msc-warning-50); border-color: var(--msc-warning-500); color: var(--msc-warning-700); }
.msc-alert--error { background: var(--msc-error-50); border-color: var(--msc-error-500); color: var(--msc-error-700); }
.msc-alert a { color: inherit; }

/* --------------------------------------------------------------------------
   ACCORDION / FAQ — <details> nativo: funziona anche senza JavaScript
   -------------------------------------------------------------------------- */

.msc-accordion { border-block-start: 1px solid var(--msc-border-soft); }
.msc-accordion__item { border-block-end: 1px solid var(--msc-border-soft); }

.msc-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--msc-space-4);
  min-block-size: var(--msc-target-comfortable);
  padding-block: var(--msc-space-5);
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-body);
  font-weight: var(--msc-weight-semibold);
  color: var(--msc-verde-700);
  cursor: pointer;
  list-style: none;
}
.msc-accordion__summary::-webkit-details-marker { display: none; }
.msc-accordion__summary:hover { color: var(--msc-verde-800); }
.msc-accordion__summary:focus-visible {
  outline: var(--msc-focus-width) solid var(--msc-focus-ring);
  outline-offset: -2px;
  border-radius: var(--msc-radius-sm);
  box-shadow: none;
}
.msc-accordion__chevron {
  flex: none;
  color: var(--msc-oro-700);
  transition: transform var(--msc-duration-base) var(--msc-ease);
}
.msc-accordion__item[open] .msc-accordion__chevron { transform: rotate(180deg); }
.msc-accordion__panel {
  padding-block-end: var(--msc-space-6);
  color: var(--msc-text-secondary);
}

/* --------------------------------------------------------------------------
   TABELLA
   -------------------------------------------------------------------------- */

.msc-table-wrap { overflow-x: auto; border-radius: var(--msc-radius-md); }
.msc-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--msc-text-sm);
  font-variant-numeric: tabular-nums;
}
.msc-table caption {
  text-align: start;
  font-size: var(--msc-text-xs);
  color: var(--msc-text-muted);
  padding-block-end: var(--msc-space-3);
}
.msc-table th, .msc-table td {
  padding: var(--msc-space-4) var(--msc-space-5);
  text-align: start;
  border-block-end: 1px solid var(--msc-border-hairline);
  vertical-align: top;
}
.msc-table thead th {
  background: var(--msc-verde-100);
  color: var(--msc-verde-800);
  font-weight: var(--msc-weight-semibold);
  white-space: nowrap;
}
.msc-table tbody tr:nth-child(even) { background: var(--msc-neutral-100); }

/* --------------------------------------------------------------------------
   NAVIGAZIONE
   -------------------------------------------------------------------------- */

.msc-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--msc-z-header);
  background: color-mix(in srgb, var(--msc-avorio) 92%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--msc-border-hairline);
}
.msc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--msc-space-6);
  min-block-size: 4.5rem;
}
.msc-nav ul {
  display: flex;
  align-items: center;
  gap: var(--msc-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.msc-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--msc-target-min);
  padding-inline: var(--msc-space-3);
  border-radius: var(--msc-radius-sm);
  color: var(--msc-text-secondary);
  font-size: var(--msc-text-sm);
  font-weight: var(--msc-weight-semibold);
  text-decoration: none;
}
.msc-nav__link:hover { background: var(--msc-verde-100); color: var(--msc-verde-800); }
/* La pagina corrente e' segnalata da colore + tratto + aria-current: mai dal solo colore */
.msc-nav__link[aria-current="page"] {
  color: var(--msc-verde-700);
  box-shadow: inset 0 -3px 0 var(--msc-oro-600);
  border-radius: var(--msc-radius-sm) var(--msc-radius-sm) 0 0;
}

/* --------------------------------------------------------------------------
   MENU MOBILE — overlay a tutta pagina (hamburger, ≤62rem)
   Superficie chiara come il resto del sistema: mai un fondo verde scuro.
   Markup iniettato da assets/js/components.js; lo scorrimento in entrata/
   uscita e' animato dal JS che alterna la sola proprieta' transform.
   Ogni coppia testo/fondo e' AA su avorio, in tutti gli stati del link
   (default, visitato, hover/focus, pagina corrente).
   -------------------------------------------------------------------------- */
.msc-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--msc-z-modal);
  display: flex;
  flex-direction: column;
  padding: calc(var(--msc-space-8) + env(safe-area-inset-top, 0px)) var(--msc-space-6) calc(var(--msc-space-8) + env(safe-area-inset-bottom, 0px));
  background: var(--msc-avorio);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--msc-duration-slow) var(--msc-ease);
}
.msc-mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--msc-space-4);
  margin-block-end: var(--msc-space-12);
}
.msc-mobile-menu__logo { display: inline-flex; line-height: 0; }
.msc-mobile-menu__logo img { block-size: 44px; inline-size: auto; display: block; }
.msc-mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--msc-target-min);
  min-inline-size: var(--msc-target-min);
  margin-inline-end: calc(var(--msc-space-2) * -1);
  padding: var(--msc-space-2);
  background: none;
  border: 0;
  color: var(--msc-verde-700);
  cursor: pointer;
}
.msc-mobile-menu__nav { flex: 1; display: flex; flex-direction: column; }

.msc-mobile-link {
  display: block;
  padding-block: var(--msc-space-4);
  border-block-end: 1px solid var(--msc-border-hairline);
  font-family: var(--msc-font-display);
  font-size: var(--msc-text-h3);
  font-weight: var(--msc-weight-semibold);
  line-height: 1.2;
  color: var(--msc-text-secondary);
  text-decoration: none;
  opacity: 0;
  transform: translateX(var(--msc-space-6));
  transition: color var(--msc-duration-fast) var(--msc-ease),
              opacity var(--msc-duration-base) var(--msc-ease),
              transform var(--msc-duration-base) var(--msc-ease);
}
.msc-mobile-link:visited { color: var(--msc-text-secondary); }
.msc-mobile-link:hover,
.msc-mobile-link:focus-visible { color: var(--msc-verde-800); }
.msc-mobile-link[aria-current="page"] {
  color: var(--msc-verde-700);
  box-shadow: inset 0 -3px 0 var(--msc-oro-600);
}
.msc-mobile-link.msc-link-visible { opacity: 1; transform: translateX(0); }

/* La CTA usa il componente .msc-btn--primary (fondo, testo, hover, focus e
   :visited li gestisce quello). Qui solo la resa a piena larghezza nel menu. */
.msc-mobile-menu__cta {
  display: flex;
  margin-block-start: var(--msc-space-8);
}

.msc-mobile-menu__meta {
  margin-block-start: var(--msc-space-5);
  color: var(--msc-text-muted);
  font-family: var(--msc-font-body);
  font-size: var(--msc-text-label);
  letter-spacing: 0.04em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .msc-mobile-menu { transition-duration: 0.01ms; }
  .msc-mobile-link {
    opacity: 1;
    transform: none;
    transition: color var(--msc-duration-fast) var(--msc-ease);
  }
}

.msc-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--msc-space-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--msc-text-xs);
  color: var(--msc-text-muted);
}
.msc-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--msc-space-2); color: var(--msc-neutral-400); }

/* Footer chiaro come impostazione predefinita: nessun blocco in verde scuro.
   Spaziature in literal: da tokenizzare in cleanup. */
.msc-footer {
  background: var(--msc-surface-sage-soft);
  border-block-start: 3px solid var(--msc-border-gold-dec);
  color: var(--msc-neutral-700);
  font-family: var(--msc-font-body);
  font-size: 1rem;
  line-height: 1.5;
}
.msc-footer h2, .msc-footer h3 { color: var(--msc-verde-700); }

.msc-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
  padding-block: 4rem 2.5rem;
  text-align: left;
}
@media (min-width: 36rem) { .msc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .msc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }

.msc-footer__col { min-inline-size: 0; }
.msc-footer__logo { display: inline-block; line-height: 0; text-decoration: none; margin-block-end: 1rem; }
.msc-footer__logo img { block-size: 60px; inline-size: auto; display: block; }
.msc-footer__tagline { font-size: 1rem; line-height: 1.6; max-inline-size: 38ch; margin: 0; }
.msc-footer__ordine { margin-block-start: 1.75rem; block-size: 76px; inline-size: auto; display: block; }

.msc-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.5rem; }
.msc-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; border-radius: 10px;
  color: var(--msc-neutral-700);
  transition: color .12s, background .12s;
}
.msc-footer__social a:hover { color: var(--msc-verde-700); background: var(--msc-verde-100); }

.msc-footer__title {
  font-size: .875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--msc-neutral-600); margin: 0 0 .5rem;
}
.msc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }
.msc-footer__contact li { inline-size: 100%; }
.msc-footer__col ul a {
  color: var(--msc-neutral-700); text-decoration: none; font-size: 1rem;
  display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.25rem;
  transition: color .12s;
}
.msc-footer__col ul a:hover { color: var(--msc-verde-700); text-decoration: underline; text-underline-offset: .18em; }
.msc-footer__col ul a svg { flex: none; }
.msc-footer__contact ul a { display: flex; align-items: flex-start; }
.msc-footer__contact ul a svg { margin-block-start: .15rem; }
.msc-footer__contact ul a span { min-inline-size: 0; overflow-wrap: anywhere; }
/* Indirizzo sotto il link dello studio: allineato al testo (oltre l'icona) */
.msc-footer__addr {
  display: block;
  margin-block: -.4rem var(--msc-space-3);
  margin-inline-start: 1.5rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--msc-neutral-600);
}

.msc-footer__base {
  border-block-start: 1px solid var(--msc-neutral-200);
  padding-block: 1.25rem;
  font-size: .9375rem;
  color: var(--msc-neutral-600);
}
.msc-footer__base a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.msc-footer__base a:hover { color: var(--msc-verde-700); }

/* --------------------------------------------------------------------------
   PATTERN DI PAGINA
   -------------------------------------------------------------------------- */

.msc-hero {
  display: grid;
  gap: var(--msc-grid-gap);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
}
@media (min-width: 60rem) {
  .msc-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--msc-space-16); }
}
.msc-hero__title { max-inline-size: var(--msc-measure-display); }
.msc-hero__media {
  border-radius: var(--msc-radius-xl);
  overflow: hidden;
  background: var(--msc-verde-100);
  aspect-ratio: 4 / 5;
}
/* Con un'immagine reale: la cornice si adatta all'immagine, mai ritagliarla.
   Il riquadro 4:5 in salvia resta solo per i segnaposto (senza <img>). */
.msc-hero__media:has(> img),
.msc-hero__media:has(> picture) {
  aspect-ratio: auto;
  background: none;
  overflow: visible;
}
.msc-hero__media > img,
.msc-hero__media > picture > img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--msc-radius-xl);
}

.msc-grid { display: grid; gap: var(--msc-grid-gap); }
.msc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.msc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.msc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Griglia 2x2 fissa (non auto-fit): 1 colonna sotto i 40rem, 2 sopra */
.msc-grid--2x2 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .msc-grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Variante di .msc-grid--2 dove l'immagine resta in alto accanto al testo
   lungo; quando la griglia si impila (sotto 48rem) l'immagine va PRIMA del
   testo, non in coda dopo i bottoni. */
.msc-grid--media-first { align-items: start; }
@media (max-width: 47.99rem) {
  .msc-grid--media-first { display: flex; flex-direction: column; align-items: stretch; }
  .msc-grid--media-first > img { order: -1; }
}

/* Percorso a step — la numerazione e' informativa: descrive un ordine reale */
.msc-steps { counter-reset: msc-step; display: grid; gap: var(--msc-space-10); }
.msc-step { display: grid; grid-template-columns: auto 1fr; gap: var(--msc-space-6); align-items: start; }
.msc-step__num {
  counter-increment: msc-step;
  inline-size: 2.75rem; block-size: 2.75rem;
  display: grid; place-items: center;
  border: 2px solid var(--msc-border-gold);
  border-radius: 50%;
  color: var(--msc-oro-700);
  font-family: var(--msc-font-display);
  font-size: var(--msc-text-h4);
  font-weight: var(--msc-weight-semibold);
}
.msc-step__num::before { content: counter(msc-step); }

.msc-cta-band {
  display: grid;
  gap: var(--msc-space-8);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  border-radius: var(--msc-radius-xl);
  background: var(--msc-surface-sage);
  border: 1px solid var(--msc-verde-200);
}
.msc-cta-band p { max-width: none; }

.msc-quote {
  margin: 0;
  padding: var(--msc-space-7) var(--msc-space-7) var(--msc-space-7) var(--msc-space-8);
  border-inline-start: 3px solid var(--msc-border-gold-dec);
  background: var(--msc-surface-raised);
  border-radius: 0 var(--msc-radius-lg) var(--msc-radius-lg) 0;
}
.msc-quote p {
  font-family: var(--msc-font-display);
  font-size: var(--msc-text-h4);
  font-weight: var(--msc-weight-regular);
  line-height: var(--msc-leading-normal);
  color: var(--msc-text-primary);
}
.msc-quote footer {
  margin-block-start: var(--msc-space-5);
  font-size: var(--msc-text-xs);
  font-weight: var(--msc-weight-semibold);
  color: var(--msc-text-muted);
}