/* Excel Spiegato Bene — foglio di stile
   Segno distintivo: la barra della formula e la cella selezionata nell'intestazione delle pagine.
   Tutto il resto è volutamente quieto. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --carta: #ffffff;
  --inchiostro: #18212b;
  --piombo: #56606d;
  --griglia: #d9dee5;
  --griglia-tenue: #eef1f5;
  --cobalto: #1f4bb5;
  --cobalto-scuro: #163a8f;
  --evidenziatore: #fff1a8;
  --intestazioni: #f4f6f9;
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  --misura: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #12171e; --inchiostro: #e6eaf0; --piombo: #a3acb8; --griglia: #2c3542; --griglia-tenue: #1a212b;
    --cobalto: #7ea2ff; --cobalto-scuro: #a9c0ff; --evidenziatore: #4a4116; --intestazioni: #1a212b;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.7;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--cobalto); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cobalto-scuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--cobalto); outline-offset: 2px; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 1rem; top: 1rem; background: var(--carta); padding: .5rem 1rem; z-index: 10; }

/* Intestazione del sito */
.testata { border-bottom: 1px solid var(--griglia); background: var(--carta); }
.testata__dentro { max-width: 68rem; margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.marchio { font-family: var(--sans); font-weight: 700; font-stretch: 88%; font-size: 1.15rem; color: var(--inchiostro); text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: .55rem; }
.marchio__cella { width: 1.35rem; height: 1.35rem; border: 2px solid var(--cobalto); position: relative; }
.marchio__cella::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 6px; height: 6px; background: var(--cobalto); border: 1px solid var(--carta); }
.menu { display: flex; gap: 1.25rem; font-family: var(--sans); font-size: .98rem; }
.menu a { color: var(--inchiostro); text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--cobalto); text-decoration: underline; }

/* La barra della formula: il segno distintivo */
.foglio { max-width: 68rem; margin: 0 auto; padding: 2rem 1rem 0; }
.formula { display: grid; grid-template-columns: 4.5rem 2.5rem 1fr; border: 1px solid var(--griglia); font-family: var(--sans); font-size: .92rem; background: var(--carta); }
.formula__nome { padding: .45rem .6rem; border-right: 1px solid var(--griglia); color: var(--piombo); }
.formula__fx { padding: .45rem 0; text-align: center; border-right: 1px solid var(--griglia); font-style: italic; color: var(--piombo); font-family: var(--serif); }
.formula__contenuto { padding: .45rem .75rem; overflow-x: auto; white-space: nowrap; }
.formula__contenuto code { font-family: var(--mono); font-size: .88rem; }
.colonne { display: grid; grid-template-columns: 2.25rem repeat(6, 1fr); border-left: 1px solid var(--griglia); border-right: 1px solid var(--griglia); background: var(--intestazioni); font-family: var(--sans); font-size: .8rem; color: var(--piombo); }
.colonne span { text-align: center; padding: .15rem 0; border-right: 1px solid var(--griglia); border-bottom: 1px solid var(--griglia); }
.colonne span:last-child { border-right: 0; }
.cella-titolo { display: grid; grid-template-columns: 2.25rem 1fr; border: 1px solid var(--griglia); border-top: 0; }
.cella-titolo__riga { background: var(--intestazioni); border-right: 1px solid var(--griglia); font-family: var(--sans); font-size: .8rem; color: var(--piombo); text-align: center; padding-top: 1.1rem; }
.cella-titolo__contenuto { position: relative; margin: -1px; border: 2px solid var(--cobalto); padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 1.75rem; }
.cella-titolo__contenuto::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; background: var(--cobalto); border: 2px solid var(--carta); }
h1 { font-family: var(--sans); font-weight: 750; font-stretch: 85%; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 .75rem; max-width: 22ch; }
.sommario { font-size: 1.2rem; color: var(--piombo); margin: 0; max-width: 34em; }
.firma { font-family: var(--sans); font-size: .9rem; color: var(--piombo); margin: 1rem 0 0; }

/* Corpo dell'articolo */
.contenuto { max-width: 68rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.colonna { max-width: var(--misura); }
.contenuto h2 { font-family: var(--sans); font-weight: 700; font-stretch: 90%; font-size: 1.65rem; line-height: 1.2; margin: 3rem 0 .75rem; letter-spacing: -0.01em; }
.contenuto h3 { font-family: var(--sans); font-weight: 650; font-size: 1.2rem; margin: 2rem 0 .5rem; }
.contenuto p, .contenuto li { max-width: var(--misura); }
.contenuto ul, .contenuto ol { padding-left: 1.3rem; }
.contenuto li { margin: .3rem 0; }
code { font-family: var(--mono); font-size: .86em; background: var(--griglia-tenue); padding: .08em .3em; border-radius: 2px; }
.percorso { font-family: var(--sans); font-weight: 600; white-space: nowrap; }
kbd { font-family: var(--sans); font-size: .85em; border: 1px solid var(--griglia); border-bottom-width: 2px; padding: 0 .35em; border-radius: 3px; background: var(--carta); }

/* Passaggi numerati come le righe di Excel: è una sequenza vera */
.contenuto .passaggi { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: riga; max-width: calc(var(--misura) + 3rem); }
.passaggi > li { counter-increment: riga; position: relative; padding: 0 0 1.25rem 3rem; margin: 0; border-left: 1px solid var(--griglia); max-width: none; }
.passaggi > li::before { content: counter(riga); position: absolute; left: 0; top: .2rem; width: 2.25rem; text-align: center; font-family: var(--sans); font-size: .85rem; color: var(--piombo); background: var(--intestazioni); border: 1px solid var(--griglia); border-left: 0; }
.passaggi > li > h3 { margin-top: 0; }

/* Una cella evidenziata: usata solo per il kit */
.kit { margin: 2.5rem 0; padding: 1.25rem 1.5rem; background: var(--evidenziatore); border-left: 4px solid var(--inchiostro); max-width: var(--misura); }
.kit h2, .kit h3 { margin-top: 0; }
.kit p:last-child { margin-bottom: 0; }

.nota { margin: 1.5rem 0; padding: .9rem 1.1rem; border: 1px solid var(--griglia); background: var(--griglia-tenue); max-width: var(--misura); font-size: 1.02rem; }
.nota strong:first-child { font-family: var(--sans); }

.pulsante { display: inline-block; font-family: var(--sans); font-weight: 650; font-size: 1rem; padding: .7rem 1.2rem; background: var(--cobalto); color: #fff; text-decoration: none; border: 0; cursor: pointer; }
.pulsante:hover { background: var(--cobalto-scuro); color: #fff; text-decoration: none; }
@media (prefers-color-scheme: dark) { .pulsante, .pulsante:hover { color: #0c1220; } }

/* Tabella semplice */
.tabella { border-collapse: collapse; font-family: var(--sans); font-size: .95rem; margin: 1rem 0 1.5rem; width: 100%; max-width: var(--misura); }
.tabella th, .tabella td { border: 1px solid var(--griglia); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.tabella th { background: var(--intestazioni); font-weight: 600; }
.tabella td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Video: si carica solo al clic */
.video { position: relative; aspect-ratio: 16 / 9; max-width: 44rem; margin: 1.5rem 0 .5rem; background: var(--inchiostro); color: #fff; display: grid; place-items: center; border: 1px solid var(--griglia); }
.video button { all: unset; cursor: pointer; display: grid; place-items: center; gap: .75rem; width: 100%; height: 100%; text-align: center; font-family: var(--sans); }
.video button:focus-visible { outline: 3px solid var(--evidenziatore); outline-offset: -6px; }
.video__play { width: 4.5rem; height: 4.5rem; border: 2px solid #fff; display: grid; place-items: center; }
.video__play::before { content: ""; border-left: 1.4rem solid #fff; border-top: .85rem solid transparent; border-bottom: .85rem solid transparent; margin-left: .3rem; }
.video__titolo { font-size: 1.05rem; max-width: 30ch; }
.video__nota { font-size: .8rem; opacity: .75; max-width: 40ch; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-color-scheme: dark) { .video { background: #000; } }
.contenuto .capitoli { font-family: var(--sans); font-size: .95rem; columns: 2 16rem; padding-left: 0; list-style: none; max-width: 44rem; }
.capitoli li { margin: .2rem 0; }

/* Elenco di guide in home */
.contenuto .guide { list-style: none; padding: 0; margin: 1rem 0; max-width: 46rem; border-top: 1px solid var(--griglia); }
.guide li { border-bottom: 1px solid var(--griglia); padding: 1rem 0; max-width: none; }
.guide a { font-family: var(--sans); font-weight: 650; font-size: 1.2rem; text-decoration: none; }
.guide a:hover { text-decoration: underline; }
.guide p { margin: .25rem 0 0; color: var(--piombo); font-size: 1rem; }
.guide .presto { font-family: var(--sans); font-weight: 650; font-size: 1.2rem; color: var(--piombo); }

/* Modulo email */
.modulo { display: grid; gap: .75rem; max-width: 30rem; margin-top: 1rem; }
.modulo label { font-family: var(--sans); font-size: .95rem; font-weight: 600; }
.modulo input[type="email"], .modulo input[type="text"] { font: inherit; font-family: var(--sans); padding: .6rem .7rem; border: 1px solid var(--inchiostro); background: var(--carta); color: var(--inchiostro); width: 100%; }
.modulo .consenso { font-family: var(--sans); font-size: .85rem; font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; line-height: 1.45; }
.modulo .consenso input { margin-top: .2rem; }
.modulo__esito { font-family: var(--sans); font-size: .95rem; min-height: 1.5em; }

/* Domande frequenti */
.faq details { border-bottom: 1px solid var(--griglia); padding: .75rem 0; max-width: var(--misura); }
.faq summary { cursor: pointer; font-family: var(--sans); font-weight: 650; }
.faq details p { margin: .5rem 0 0; }

/* Piede */
.piede { border-top: 1px solid var(--griglia); background: var(--intestazioni); font-family: var(--sans); font-size: .9rem; color: var(--piombo); }
.piede__dentro { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1rem 2rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; }
.piede a { color: var(--piombo); }
.piede nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .colonne { grid-template-columns: 2.25rem repeat(3, 1fr); }
  .colonne span:nth-child(n+5) { display: none; }
  .formula { grid-template-columns: 3.5rem 2rem 1fr; }
  .passaggi > li { padding-left: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .testata, .piede, .video, .kit, .formula, .colonne { display: none; } .cella-titolo__contenuto { border: 0; } }