/* Token copiati da carrierafutura/frontend/src/styles.css (:root e tema scuro, 2026-10-26); il blocco «token del sito» in fondo ai token è l'unica aggiunta. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --verde: #0c9d58;
  --verde-vivo: #16b96b;
  --verde-scuro: #077843;
  --verde-azione: #087f47;
  --ink: #0b2b1d;
  --ink-2: #113f2b;
  --verde-tinta: #e6f6ed;
  --verde-tinta-2: #d2efdf;
  --bg: #f2f5f3;
  --card: #ffffff;
  --testo: #1a2620;
  --muted: #5d6d65;
  --bordo: #e2e9e4;
  --bordo-forte: #cdd9d1;
  --raggio-s: 10px;
  --raggio: 14px;
  --raggio-l: 20px;
  --raggio-bottone: 10px;
  --altezza-bottone: 40px;
  --peso-bottone: 600;
  --ombra-2: 0 2px 4px rgba(11, 43, 29, 0.05), 0 12px 28px -10px rgba(11, 43, 29, 0.16);
  --anello: 0 0 0 2px var(--card), 0 0 0 4px var(--verde-azione);
  --grad-ink: linear-gradient(140deg, #0b2b1d 0%, #10492f 60%, #14603c 100%);
  --campo: #ffffff;
  --hover-riga: #f7faf8;
  --incasso: #eef2ef;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vel: 0.18s;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --bianco: #fff;
  --inchiostro-verde: #062a17;
  --verde-lume: #3ed488;
  --testo-su-scuro: #eef7f2;
  --muted-su-scuro: #b6cdc0;
  --linea-su-scuro: rgba(238, 247, 242, 0.18);
  --barra: #0b2b1d;
  --inchiostro-btn: var(--bianco);
  color-scheme: light;

  /* token del sito (non esistono nella piattaforma) */
  --larghezza-sito: 1080px;
  --larghezza-lettura: 52rem;
  --t-xs: 0.8rem;
  --t-s: 0.9rem;
  --t-m: 1rem;
  --t-l: 1.2rem;
  --t-xl: 1.6rem;
  --t-2xl: 2.1rem;
  --t-hero: 2.8rem;
  --t-prezzo: 4rem;
  --altezza-barra: 64px;
  --logo: 28px;
  --filo-forte: 3px;
  --larghezza-dialogo: 30rem;
  --velo: rgba(11, 43, 29, 0.6);
}

/* Tema scuro: stessi valori della piattaforma, scelti dal sistema dell'utente. */
@media (prefers-color-scheme: dark) {
  :root {
    --verde: #17b56a;
    --verde-vivo: #2ecb7d;
    --verde-azione: #17b56a;
    --verde-scuro: #5cd695;
    --ink: #ecf4ef;
    --ink-2: #cfdfd6;
    --verde-tinta: rgba(23, 181, 106, 0.14);
    --verde-tinta-2: rgba(23, 181, 106, 0.32);
    --bg: #0e1512;
    --card: #17211b;
    --testo: #dbe6df;
    --muted: #8fa198;
    --bordo: #26332b;
    --bordo-forte: #35453c;
    --ombra-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px -10px rgba(0, 0, 0, 0.5);
    --campo: #1c2721;
    --hover-riga: #1e2a24;
    --incasso: #101915;
    --inchiostro-btn: var(--inchiostro-verde);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altezza-barra) + var(--sp-4)); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-m);
  background: var(--bg);
  color: var(--testo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; margin: 0; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l); }
p { margin: 0; }
a { color: var(--verde-scuro); text-decoration: none; transition: color var(--vel) var(--curva); }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--anello); border-radius: var(--raggio-s); }
.salta { position: absolute; left: var(--sp-3); top: -100px; z-index: 20; padding: var(--sp-2) var(--sp-4); background: var(--card); border-radius: var(--raggio-s); }
.salta:focus { top: var(--sp-3); }

.nascosto { position: absolute; }
/* ---------- primitive ---------- */
.contenitore { max-width: var(--larghezza-sito); margin: 0 auto; padding: 0 var(--sp-5); }
.pila { display: flex; flex-direction: column; gap: var(--sp-4); }
.riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sezione { padding: var(--sp-7) 0; }
.sezione + .sezione { border-top: 1px solid var(--bordo); }
.sovratitolo { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-scuro); }
.sommario { color: var(--muted); max-width: var(--larghezza-lettura); }
.nota { font-size: var(--t-s); color: var(--muted); max-width: var(--larghezza-lettura); }

/* ---------- pulsanti: una forma sola, come la piattaforma ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--altezza-bottone); padding: var(--sp-2) var(--sp-4);
  background: var(--campo); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-bottone);
  color: var(--ink-2); cursor: pointer; font: inherit; font-size: var(--t-s); font-weight: var(--peso-bottone);
  text-decoration: none;
  transition: transform var(--vel) var(--curva), background var(--vel) var(--curva), border-color var(--vel) var(--curva);
}
.btn:hover { background: var(--hover-riga); color: var(--ink); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--verde-azione); color: var(--inchiostro-btn); border-color: transparent; }
.btn.primary:hover { background: var(--verde-scuro); color: var(--inchiostro-btn); }
@media (prefers-color-scheme: dark) { .btn.primary:hover { background: var(--verde-vivo); } }
.btn.piena { width: 100%; }

/* ---------- barra in alto ---------- */
.barra { position: sticky; top: 0; z-index: 10; background: var(--barra); color: var(--testo-su-scuro); }
.barra .contenitore { height: var(--altezza-barra); display: flex; align-items: center; gap: var(--sp-5); }
.brand, .barra .btn { white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--t-l); letter-spacing: -0.01em; color: var(--bianco); }
.brand:hover { text-decoration: none; }
.logo-mark { width: var(--logo); height: var(--logo); color: var(--verde-lume); flex: none; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.barra nav a:not(.btn) { color: var(--muted-su-scuro); font-weight: 600; font-size: var(--t-s); padding: var(--sp-2) var(--sp-1); }
.barra nav a:not(.btn):hover { color: var(--bianco); text-decoration: none; }
.barra :focus-visible { box-shadow: 0 0 0 2px var(--barra), 0 0 0 4px var(--verde-lume); }

/* ---------- hero ---------- */
.hero { background: var(--grad-ink); color: var(--testo-su-scuro); padding: var(--sp-7) 0; }
.hero .contenitore { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-7); align-items: center; }
.hero h1 { font-size: var(--t-hero); color: var(--bianco); font-weight: 800; letter-spacing: -0.03em; }
.hero h1 span { color: var(--verde-lume); display: block; }
.hero .sovratitolo { color: var(--verde-lume); }
.hero .sommario { color: var(--muted-su-scuro); }
.hero .nota { color: var(--muted-su-scuro); }
.hero .nota strong { color: var(--bianco); }
.hero :focus-visible { box-shadow: 0 0 0 2px var(--barra), 0 0 0 4px var(--verde-lume); }
.hero .btn.primary { background: var(--verde-lume); color: var(--inchiostro-verde); }
.hero .btn.primary:hover { background: var(--verde-vivo); color: var(--inchiostro-verde); }
.percorso { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-su-scuro); }
.percorso a { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--linea-su-scuro); color: var(--testo-su-scuro); }
.percorso a:hover { text-decoration: none; }
.percorso a:hover strong { color: var(--verde-lume); }
.percorso .numero { font-size: var(--t-xl); font-weight: 800; color: var(--verde-lume); width: var(--sp-6); flex: none; font-variant-numeric: tabular-nums; }
.percorso strong { display: block; font-size: var(--t-m); }
.percorso small { color: var(--muted-su-scuro); font-size: var(--t-xs); }
.percorso .freccia { margin-left: auto; color: var(--verde-lume); }
.percorso-titolo { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-su-scuro); margin-bottom: var(--sp-3); }

/* ---------- vantaggi ---------- */
.vantaggi { list-style: none; margin: 0; padding: var(--sp-5) 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--t-s); font-weight: 600; }
.vantaggi li::before { content: "✓"; color: var(--verde-scuro); margin-right: var(--sp-2); font-weight: 800; }

/* ---------- servizio, passi ---------- */
.intestazione { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.tre h3 { margin-bottom: var(--sp-2); }
.tre p { color: var(--muted); font-size: var(--t-s); }
.passo-etichetta { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; color: var(--verde-scuro); margin-bottom: var(--sp-2); }
.avviso { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-left: var(--filo-forte) solid var(--verde); background: var(--verde-tinta); font-size: var(--t-s); max-width: var(--larghezza-lettura); border-radius: 0 var(--raggio-s) var(--raggio-s) 0; }

/* ---------- prezzo ---------- */
.prezzo-griglia { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); align-items: start; }
.annualita { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-top: 1px solid var(--bordo); }
.annualita li { display: flex; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--bordo); }
.annualita span { color: var(--muted); font-variant-numeric: tabular-nums; }
.scheda-prezzo { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio-l); box-shadow: var(--ombra-2); padding: var(--sp-6); }
.prezzo-ordinario { color: var(--muted); margin-top: var(--sp-3); }
.prezzo { font-size: var(--t-prezzo); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: var(--sp-1); }
.prezzo small { font-size: var(--t-m); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.scheda-prezzo ul { list-style: none; margin: var(--sp-5) 0; padding: var(--sp-5) 0 0; border-top: 1px solid var(--bordo); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-s); }
.scheda-prezzo li::before { content: "✓"; color: var(--verde-scuro); margin-right: var(--sp-2); font-weight: 800; }
.scheda-prezzo .nota { margin-top: var(--sp-2); }
.scheda-prezzo .btn + .nota { text-align: center; margin-top: var(--sp-4); }

/* ---------- tabella titoli di studio ---------- */
.guida { margin-top: var(--sp-7); }
.guida h3 { font-size: var(--t-xl); margin-bottom: var(--sp-3); }
.guida .nota { margin-top: var(--sp-3); }
table { width: 100%; border-collapse: collapse; margin-top: var(--sp-5); font-size: var(--t-s); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--bordo); vertical-align: top; }
thead th { font-size: var(--t-xs); font-weight: 800; color: var(--muted); letter-spacing: 0.04em; border-bottom-color: var(--bordo-forte); }
tbody th { font-weight: 600; width: 50%; }
td { font-variant-numeric: tabular-nums; }

/* ---------- domande ---------- */
.domande { max-width: var(--larghezza-lettura); }
.domande h2 { margin: var(--sp-2) 0 var(--sp-5); }
details { border-bottom: 1px solid var(--bordo); }
details:first-of-type { border-top: 1px solid var(--bordo); }
summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; min-height: var(--altezza-bottone); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--verde-scuro); font-size: var(--t-xl); line-height: 1; }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); font-size: var(--t-s); padding: 0 var(--sp-6) var(--sp-4) 0; }

/* ---------- chiusura e consulenti ---------- */
.chiusura { background: var(--verde-tinta); padding: var(--sp-7) 0; text-align: center; }
.chiusura .pila { align-items: center; }
.chiusura .riga { justify-content: center; }
.consulenti { padding: var(--sp-6) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.consulenti p { color: var(--muted); font-size: var(--t-s); max-width: var(--larghezza-lettura); }

/* ---------- footer ---------- */
.piede { background: var(--barra); color: var(--muted-su-scuro); padding: var(--sp-6) 0; font-size: var(--t-xs); }
.piede .contenitore { display: flex; flex-direction: column; gap: var(--sp-5); }
.piede .brand { font-size: var(--t-m); }
.piede a { color: var(--testo-su-scuro); text-decoration: underline; }
.piede a.brand { color: var(--bianco); text-decoration: none; }
.piede :focus-visible { box-shadow: 0 0 0 2px var(--barra), 0 0 0 4px var(--verde-lume); }
.piede-legale { border-top: 1px solid var(--linea-su-scuro); padding-top: var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-5); }
.piede-legale strong { color: var(--bianco); }

/* ---------- finestra consulenti ---------- */
dialog { border: 1px solid var(--bordo); border-radius: var(--raggio-l); padding: var(--sp-6); max-width: var(--larghezza-dialogo); width: calc(100% - var(--sp-6)); background: var(--card); color: var(--testo); box-shadow: var(--ombra-2); }
dialog::backdrop { background: var(--velo); }
dialog .pila { gap: var(--sp-3); }
dialog p { color: var(--muted); }
dialog .riga { margin-top: var(--sp-3); }

/* ---------- un solo breakpoint ---------- */
@media (max-width: 560px) {
  .contenitore { padding: 0 var(--sp-4); }
  h2 { font-size: var(--t-xl); }
  .sezione { padding: var(--sp-6) 0; }
  .barra .contenitore { gap: var(--sp-3); }
  .barra nav { gap: var(--sp-2); }
  .barra .voce-accedi { display: none; }
  .hero { padding: var(--sp-6) 0; }
  .hero .contenitore { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero h1 { font-size: var(--t-2xl); }
  .hero .riga .btn, .chiusura .riga .btn, dialog .btn { width: 100%; }
  .vantaggi { flex-direction: column; }
  .tre, .prezzo-griglia { grid-template-columns: 1fr; gap: var(--sp-5); }
  .scheda-prezzo { padding: var(--sp-5); }
  .prezzo { font-size: var(--t-2xl); }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table, tbody, tr, th, td { display: block; }
  tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--bordo); }
  th, td { border: 0; padding: var(--sp-1) 0; width: auto; }
  td::before { content: attr(data-etichetta) ": "; color: var(--muted); }
  .consulenti, .piede-legale { flex-direction: column; align-items: flex-start; }
  .consulenti .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, a { transition: none; }
}