/* ==========================================================================
   MarkCom · proposta di tema
   Palette: arancio #B83F00 dal 18/09/2026, lo stesso del logo (C-34; era #DB4C00,
   SB3 [MKC][LOCK][01]), nero #141414
   Un solo foglio di stile. Nessun framework.
   ========================================================================== */

/* ---------- token ---------- */
:root {
  --arancio: #b83f00;
  --arancio-chiaro: #ff6a1f;
  --nero: #141414;
  --carta: #faf8f5;
  --carta-2: #f2eee8;
  --bordo: #e2dcd3;
  --testo: #1c1a18;
  --testo-tenue: #5f5952;

  --sfondo: var(--carta);
  --superficie: #ffffff;

  --display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --lettura: "Source Serif 4", Georgia, "Times New Roman", serif;

  --misura: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --largo: 1240px;
  --stretto: 760px;

  --r: 4px;
  --r-g: 14px;
  --ombra: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 24px -12px rgba(20, 20, 20, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --carta: #0f0f10;
    --carta-2: #17171a;
    --bordo: #2a2a2e;
    --testo: #ece9e4;
    --testo-tenue: #a29c95;
    --sfondo: var(--carta);
    --superficie: #17171a;
    --arancio: #ff6a1f;
  }
}
/* C-34, 18/09/2026. In modalita' scura l'arancio e' chiaro, e il bianco sopra
   non regge (2,86): sui fondi arancio il testo e' nero, 6,43. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .btn--pieno,
  :root:not([data-tema="chiaro"]) .paginazione a[aria-current="page"],
  :root:not([data-tema="chiaro"]) .salta:focus { color: var(--nero); }
  :root:not([data-tema="chiaro"]) .btn--pieno:hover { background: #ff8547; }
}

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

/* C-47, 20/09/2026. La testata e' `position: sticky` e copriva il titolo di arrivo di
   un'ancora: il salto allinea il bersaglio al bordo alto della finestra, dove la testata
   sta sopra. `scroll-padding-top` sposta quel bordo piu' in basso per ogni scorrimento
   della pagina, ancore e `scrollIntoView()` compresi, e non tocca il contenuto.
   Il valore tiene conto anche del fatto che la testata si accorcia appena la pagina
   scorre, 104 -> 80 px sopra i 1240 e 76 -> 64 sotto: il contenuto sale di quella
   differenza dopo il salto. Misurato nella simulazione: con 112 e 84 il titolo arriva
   27 px sotto il bordo della testata a 1280 e a 390 px. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 112px; }
@media (max-width: 1240px) { html { scroll-padding-top: 84px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* C-48, 21/09/2026. Un indirizzo o una parola senza spazi piu' lunga della riga non va a
   capo e allarga la pagina: a 390 px /feed-rss-blogging/ arrivava a 433 px e
   /wordpress-per-le-aziende/ a 418, misurati con i caratteri del tema e non visti dal
   controllo del 18/09, che girava senza. `break-word` spezza soltanto cio' che
   altrimenti uscirebbe dalla riga, quindi il testo che ci sta resta com'e'. Vale su
   tutto il testo e non solo nel corpo dell'articolo: lo stesso indirizzo puo' stare
   nel piede o in una scheda, e sul prossimo sito. */
body { overflow-wrap: break-word; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- impaginazione ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--largo)); margin-inline: auto; }
.wrap-stretto { width: min(100% - var(--gutter) * 2, var(--stretto)); margin-inline: auto; }
.sezione { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sezione--carta { background: var(--carta-2); }
.sezione--scura { background: var(--nero); color: #f4f1ec; }
.sezione--scura .occhiello { color: var(--arancio-chiaro); }
.sezione--scura .tenue { color: #b3aca4; }

/* ---------- tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
h4 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
.guida { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--testo-tenue); max-width: 46ch; }
.tenue { color: var(--testo-tenue); }

.occhiello {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arancio);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.occhiello::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  flex: none;
}

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--pieno { background: var(--arancio); color: #fff; }
.btn--pieno:hover { background: #9a3500; }
.btn--vuoto { border-color: currentColor; }
.btn--vuoto:hover { background: rgba(184, 63, 0, .08); border-color: var(--arancio); color: var(--arancio); }
.btn .freccia { transition: transform .15s ease; }
.btn:hover .freccia { transform: translateX(3px); }

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--sfondo) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.testata.staccata { border-bottom-color: var(--bordo); }

.testata__riga {
  position: relative;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  height: 104px;
  transition: height .22s ease;
}
.testata.staccata .testata__riga { height: 80px; }

.marchio { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.marchio img, .marchio svg { height: 75px; width: auto; display: block; transition: height .22s ease; }
.testata.staccata .marchio img, .testata.staccata .marchio svg { height: 55px; }

.nav { margin-left: auto; display: flex; gap: clamp(1rem, 2vw, 1.9rem); align-items: center; }
.nav > a, .tendina > button {
  text-decoration: none; font: inherit; font-size: .97rem; font-weight: 500;
  color: var(--testo-tenue); background: none; border: 0; cursor: pointer;
  padding: .4rem 0; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav > a:hover, .tendina > button:hover,
.nav > a[aria-current="page"] { color: var(--testo); border-color: var(--arancio); }

/* voce con sottomenu */
.tendina { position: static; }
.tendina--semplice { position: relative; }
.tendina > button::after { content: "⌄"; font-size: .8em; transform: translateY(-2px); }
.tendina__pannello--largo { left: 0; right: 0; }
.tendina__pannello {
  position: absolute; top: 100%; left: -1rem;
  margin-top: 14px;
  padding: 1.2rem;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r-g); box-shadow: 0 24px 50px -24px rgba(20,20,20,.3);
  display: grid; gap: 2rem; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
}
/* il ponte invisibile sopra il pannello: senza, il mouse che attraversa lo
   spazio fra la voce e la tendina esce dal menu e la tendina si chiude */
.tendina__pannello::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.tendina__pannello[hidden] { display: none; }
.tendina__pannello a {
  text-decoration: none; color: var(--testo); font-size: .93rem;
  padding: .45rem .6rem; border-radius: var(--r); display: block;
}
.tendina__pannello a:hover { background: var(--carta-2); color: var(--arancio); }

.gruppo { display: grid; gap: .1rem; align-content: start; }
.gruppo__titolo {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--arancio); margin: 0 0 .5rem .6rem; padding: 0 0 .5rem;
  border-bottom: 1px solid var(--bordo); display: block; text-decoration: none;
}
a.gruppo__titolo:hover { color: var(--testo); background: none; }

/* Il titolo di un gruppo deve avere lo stesso aspetto sia che porti a una pagina
   sia che non ci porti. Senza questa regola vince `.tendina__pannello a`, piu'
   specifica di `.gruppo__titolo`, e i titoli cliccabili diventano piu' grandi,
   scuri e spaziati come una voce qualsiasi: e' cosi' che nello stesso pannello
   "Argomenti" sembrava una voce e "Guide e tutorial" un titolo. */
/* Il widget delle recensioni: fuori dalla colonna di lettura, largo quanto la
   fascia. TrustIndex misura il proprio contenitore, e dentro una misura da 70
   caratteri ripiega sul carosello stretto invece della fila di schede. */
.recensioni { display: block; width: 100%; margin: 1.5rem 0; }

.tendina__pannello a.gruppo__titolo {
  font-size: .72rem; color: var(--arancio);
  margin: 0 0 .5rem .6rem; padding: 0 0 .5rem;
  border-radius: 0;
}

.testata__azioni { display: flex; align-items: center; gap: 1rem; margin-left: .5rem; }
.tel { text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.tel:hover { color: var(--arancio); }
.btn--testata { padding: .65rem 1.15rem; font-size: .92rem; }

.menu-btn {
  display: none; margin-left: auto; gap: .5rem;
  background: none; border: 1px solid var(--bordo); border-radius: var(--r);
  padding: .6rem .9rem; font: inherit; font-weight: 600; cursor: pointer; color: inherit;
  align-items: center;
}

@media (max-width: 1240px) {
  .testata__riga { height: 76px; }
  .testata.staccata .testata__riga { height: 64px; }
  .marchio img, .marchio svg { height: 49px; }
  .testata.staccata .marchio img, .testata.staccata .marchio svg { height: 42px; }
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; inset: 76px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--superficie); border-bottom: 1px solid var(--bordo);
    padding: .5rem var(--gutter) 1.5rem;
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav > a, .tendina > button {
    padding: .95rem 0; width: 100%; border-bottom: 1px solid var(--bordo);
    border-top: 0; font-size: 1.05rem; justify-content: space-between;
  }
  .tendina__pannello {
    position: static; border: 0; box-shadow: none; padding: .2rem 0 .8rem 1rem;
    background: none; min-width: 0; margin-top: 0;
    grid-auto-flow: row; gap: 1.2rem;
  }
  .tendina__pannello::before { display: none; }
  .gruppo__titolo { margin-left: 0; }
  .testata__azioni { margin: 1.2rem 0 0; flex-direction: column; align-items: stretch; }
  .testata__azioni .btn { justify-content: center; }
  .tel { padding: .6rem 0; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem); position: relative; overflow: hidden; }
.hero__griglia { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero__griglia { grid-template-columns: 1.15fr .85fr; align-items: end; } }
.hero h1 .acceso { color: var(--arancio); }
.hero__spalla { border-left: 2px solid var(--arancio); padding-left: 1.4rem; }
.hero__spalla p { font-size: 1.05rem; color: var(--testo-tenue); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.numeri { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--bordo); }
.numeri div { min-width: 120px; }
.numeri b { display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.numeri span { font-size: .85rem; color: var(--testo-tenue); }

/* ---------- griglie ---------- */
.griglia { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--r-g);
  padding: 1.75rem;
  box-shadow: var(--ombra);
}
.scheda__n { font-size: .8rem; font-weight: 700; color: var(--arancio); letter-spacing: .1em; display: block; margin-bottom: .9rem; }
.scheda h3 { margin-bottom: .5rem; }
.scheda p { margin: 0; color: var(--testo-tenue); font-size: .97rem; }

.due-colonne { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .due-colonne { grid-template-columns: 1fr 1fr; } }
.due-colonne img { border-radius: var(--r-g); }

/* ---------- citazioni ---------- */
.citazione { border-left: 3px solid var(--arancio); padding-left: 1.5rem; font-family: var(--lettura); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4; }
.citazione cite { display: block; margin-top: 1rem; font-family: var(--display); font-size: .88rem; font-style: normal; color: var(--testo-tenue); }

/* ---------- articoli in evidenza ---------- */
.lista-articoli { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.anteprima a { text-decoration: none; display: block; }
.anteprima img { border-radius: var(--r-g); aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1rem; max-width: 100%; }
.anteprima .meta { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--arancio); margin-bottom: .5rem; }
.anteprima h2, .anteprima h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: .4rem; }
.anteprima a:hover h2, .anteprima a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- articolo ---------- */
.articolo { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }

.articolo__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.articolo__griglia > * { min-width: 0; }
@media (min-width: 1080px) {
  .articolo__griglia {
    grid-template-columns: minmax(0, 70ch) minmax(190px, 240px);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    justify-content: space-between;
  }
  .articolo__griglia > :not(.articolo__lato) { grid-column: 1; }
  .articolo__lato {
    grid-column: 2; grid-row: 1 / span 20;
    align-self: start; position: sticky; top: 130px;
  }
}

/* percorso */
.briciole { display: flex; gap: .5rem; font-size: .85rem; color: var(--testo-tenue); margin-bottom: 1.5rem; }
.briciole a { text-decoration: none; }
.briciole a:hover { color: var(--arancio); }
.briciole a:last-child { color: var(--arancio); font-weight: 600; }

.articolo h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.12; letter-spacing: -.025em;
  margin: 0 0 .5em; max-width: 22ch;
}
.articolo__sommario {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.5;
  color: var(--testo-tenue); max-width: 60ch; margin: 0 0 1.8rem;
}
.articolo__firma {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-size: .88rem; color: var(--testo-tenue);
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--bordo); margin: 0;
}
.articolo__firma b { color: var(--testo); font-weight: 600; }

/* M-63, 19/09/2026: la copertina e' un img, oppure un figure che porta il collegamento e la
   didascalia dell'originale. L'immagine ha lo stesso aspetto nelle due forme. */
.articolo__copertina {
  width: 100%; margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
}
img.articolo__copertina, .articolo__copertina img {
  width: 100%; border-radius: var(--r-g); aspect-ratio: 16 / 8.5; object-fit: cover;
}
.articolo__copertina figcaption {
  font-family: var(--display); font-size: .85rem; color: var(--testo-tenue); margin-top: .6rem;
}

/* corpo */
.articolo__corpo {
  font-family: var(--lettura);
  font-size: 1.16rem; line-height: 1.78;
  margin-top: clamp(2rem, 3vw, 2.8rem);
}
.articolo__corpo > p:first-of-type { font-size: 1.32rem; line-height: 1.62; }
.articolo__corpo p { margin: 0 0 1.3em; }
.articolo__corpo h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2;
  margin: 2.6em 0 .7em; padding-top: 1.4rem; border-top: 1px solid var(--bordo);
}
.articolo__corpo h3 {
  font-family: var(--display); font-size: 1.22rem; margin: 2em 0 .5em;
}
.articolo__corpo ul, .articolo__corpo ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.articolo__corpo li { margin-bottom: .55em; }
.articolo__corpo ul li::marker { color: var(--arancio); }
.articolo__corpo a { color: var(--arancio); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.articolo__corpo img { border-radius: var(--r-g); margin: 2rem 0; width: 100%; }
.articolo__corpo figure { margin: 2rem 0; }
.articolo__corpo figcaption {
  font-family: var(--display); font-size: .85rem; color: var(--testo-tenue); margin-top: .6rem;
}
.articolo__corpo blockquote {
  margin: 2rem 0; padding-left: 1.4rem; border-left: 3px solid var(--arancio);
  font-style: normal; color: var(--testo);
}
.articolo__corpo table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-family: var(--display); font-size: .95rem; }
.articolo__corpo th, .articolo__corpo td { border: 1px solid var(--bordo); padding: .6rem .8rem; text-align: left; }
/* C-38. La tabella scorre dentro il suo contenitore, scritto da guscio(), invece
   di allargare la pagina; il margine passa dalla tabella al contenitore. Il testo
   preformattato va a capo: sono indirizzi e annunci di una riga, non codice. */
.tabella-scorre { overflow-x: auto; margin: 2rem 0; }
.tabella-scorre > table { margin: 0; }
.articolo__corpo pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.articolo__corpo strong, .articolo__corpo b { font-weight: 600; }

.articolo__chiusura {
  margin-top: 3.5rem; padding: 2rem; border-radius: var(--r-g);
  background: var(--carta-2); border: 1px solid var(--bordo);
}
.articolo__chiusura p:last-child { margin: 1.2rem 0 0; }

/* indice laterale */
.indice {
  font-size: .92rem; border-left: 2px solid var(--bordo); padding-left: 1.1rem;
}
.indice summary {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--testo-tenue); cursor: pointer; list-style: none; margin-bottom: .6rem;
}
.indice summary::-webkit-details-marker { display: none; }
.indice summary::after { content: " —"; color: var(--arancio); }
.indice[open] summary::after { content: " —"; }
.indice ol { list-style: none; margin: 0; padding: 0; counter-reset: voce; }
.indice li { counter-increment: voce; }
.indice li a {
  display: flex; gap: .6rem; padding: .4rem 0;
  text-decoration: none; color: var(--testo-tenue); line-height: 1.35;
}
.indice li a::before { content: counter(voce, decimal-leading-zero); color: var(--arancio); font-size: .78rem; padding-top: .15rem; }
.indice li a:hover { color: var(--arancio); }
@media (max-width: 1079px) {
  .articolo__lato { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
  .indice {
    background: var(--carta-2); border: 1px solid var(--bordo);
    border-radius: var(--r-g); padding: 1rem 1.2rem;
  }
}

/* glossario: la definizione sta nella pagina, nessuna chiamata al server */
.termine { border-bottom: 1px dashed var(--arancio); cursor: help; text-decoration: none; position: relative; }
.termine:hover .definizione, .termine:focus-visible .definizione { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.definizione {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 6px);
  width: min(300px, 80vw);
  background: var(--nero); color: #f4f1ec;
  font-family: var(--display); font-size: .87rem; line-height: 1.45;
  padding: .8rem 1rem; border-radius: 10px;
  opacity: 0; visibility: hidden; transition: all .18s ease;
  z-index: 20; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4);
}

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--bordo); padding: 1.25rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; gap: 1rem; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--arancio); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 1rem 0 0; color: var(--testo-tenue); max-width: var(--misura); }
.faq__risposta { margin-top: .9rem; color: var(--testo-tenue); }
.faq__risposta > :first-child { margin-top: 0; }
.faq__risposta > :last-child { margin-bottom: 0; }
.faq__risposta p { margin: 0 0 .9em; }
.articolo__corpo .faq {
  font-family: var(--display); font-size: 1rem; line-height: 1.6;
  margin: 2.2rem 0 2.8rem; border-top: 1px solid var(--bordo);
}
.articolo__corpo .faq summary { font-size: 1.02rem; }
.articolo__corpo .faq details:last-child { border-bottom: 1px solid var(--bordo); }

/* ---------- fasi numerate ---------- */
.fasi { counter-reset: fase; display: grid; gap: 0; }
.fase { counter-increment: fase; display: grid; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--bordo); grid-template-columns: 1fr; }
@media (min-width: 820px) { .fase { grid-template-columns: 200px 1fr; gap: 3rem; } }
.fase::before { content: counter(fase, decimal-leading-zero); font-size: .85rem; font-weight: 700; color: var(--arancio); letter-spacing: .1em; }
.fase h3 { margin-bottom: .5rem; }
.fase p { margin: 0 0 .8rem; color: var(--testo-tenue); }
.fase ul { margin: 0; padding-left: 1.1rem; color: var(--testo-tenue); font-size: .96rem; }

/* ---------- richiamo finale ---------- */
.richiamo { background: var(--nero); color: #f4f1ec; border-radius: var(--r-g); padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.richiamo h2 { max-width: 20ch; margin-inline: auto; }
.richiamo p { color: #b3aca4; max-width: 52ch; margin-inline: auto; }
.richiamo .btn--vuoto { color: #f4f1ec; }
/* C-34: sul nero l'arancio scuro scende a 3,29, qui va quello chiaro */
.sezione--scura .btn--vuoto:hover, .richiamo .btn--vuoto:hover { color: var(--arancio-chiaro); border-color: var(--arancio-chiaro); }

/* ---------- piede ---------- */
.piede { background: var(--nero); color: #b3aca4; padding-block: clamp(3rem, 6vw, 5rem) 2rem; margin-top: clamp(3rem, 7vw, 6rem); }
.piede a { color: #e8e4de; text-decoration: none; }
.piede a:hover { color: var(--arancio-chiaro); }
.piede__griglia { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.piede h2 { color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.piede__basso { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #2a2a2e; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; }

/* ---------- utilità ---------- */
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 1rem; top: 1rem; background: var(--arancio); color: #fff; padding: .7rem 1rem; border-radius: var(--r); z-index: 100; }
:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; }
.nota-proposta {
  background: var(--nero); color: #f0c4a4;
  font-size: .82rem; letter-spacing: .01em;
  padding: .55rem 0; margin: 0; text-align: center;
}
.nota-proposta b { color: var(--arancio-chiaro); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .nota-proposta { background: #2a1508; border-color: #5c2c0f; color: #f0c4a4; } }

/* ---------- paginazione archivi ---------- */
.paginazione { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.paginazione a {
  min-width: 44px; height: 44px; padding: 0 .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bordo); border-radius: var(--r);
  text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--testo-tenue);
}
.paginazione a:hover { border-color: var(--arancio); color: var(--arancio); }
.paginazione a[aria-current="page"] { background: var(--arancio); border-color: var(--arancio); color: #fff; }

/* la categoria nell'intestazione articolo è un link */
.articolo__meta .categoria { text-decoration: none; }
.articolo__meta .categoria:hover { text-decoration: underline; text-underline-offset: 3px; }

/* contenuto recuperato dalle pagine: immagini e tabelle */
.wrap-stretto img { border-radius: var(--r-g); margin: 1.5rem 0; }
.wrap-stretto table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.wrap-stretto th, .wrap-stretto td { border: 1px solid var(--bordo); padding: .6rem .8rem; text-align: left; }
.wrap-stretto ul, .wrap-stretto ol { padding-left: 1.2rem; }
.wrap-stretto li { margin-bottom: .4em; }

/* ---------- colonna di lettura delle pagine ---------- */
.colonna-testo { max-width: var(--misura); }
.colonna-testo > h2 { margin-bottom: .8em; }
.colonna-testo img { border-radius: var(--r-g); margin: 1.5rem 0; }
.colonna-testo table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.colonna-testo th, .colonna-testo td { border: 1px solid var(--bordo); padding: .6rem .8rem; text-align: left; }
.colonna-testo ul, .colonna-testo ol { padding-left: 1.2rem; }
.colonna-testo li { margin-bottom: .4em; }
.colonna-testo .faq { margin-top: 2rem; }
/* un'icona piccola dentro una riga di testo resta nella riga (C-30) */
.colonna-testo img.in-riga { display: inline-block; vertical-align: -.2em; margin: 0 .35em 0 0; border-radius: 0; }

/* gruppi di schede delle pagine, le persone di /chi-siamo/. Il generatore segna il
   primo gruppo della pagina come schede--grandi, tre per riga, e i successivi come
   schede--piccole, quattro per riga. Deciso da Diego il 17/09/2026, C-29. La
   sezione che le contiene esce dalla misura di lettura, i suoi testi no. La foto e'
   un cerchio su fondo bianco nel file: il ritaglio toglie il bordo bianco; un logo
   resta intero. La scheda e' quella del tema, la stessa della home. */
.sezione:has(.schede) .colonna-testo { max-width: none; }
.sezione:has(.schede) .colonna-testo > :not(.schede) { max-width: var(--misura); }
/* in righe centrate: l'ultima riga, se incompleta, sta al centro e non a sinistra */
.schede { --per-riga: 3; --spazio: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spazio); margin: 2.5rem 0 .5rem; }
.schede--piccole { --per-riga: 4; --spazio: 1.25rem; }
@media (max-width: 1000px) { .schede--piccole { --per-riga: 3; } }
@media (max-width: 820px) { .schede--grandi, .schede--piccole { --per-riga: 2; } }
@media (max-width: 540px) { .schede--grandi, .schede--piccole { --per-riga: 1; } }
.schede .scheda {
  flex: 0 0 calc((100% - var(--spazio) * (var(--per-riga) - 1)) / var(--per-riga));
  text-align: center;
}
.schede--piccole .scheda { padding: 1.4rem 1.2rem; }
.colonna-testo .schede .scheda img {
  width: 150px; height: 150px; margin: 0 auto 1.2rem;
  object-fit: cover; border-radius: 50%; clip-path: circle(46%);
}
.colonna-testo .schede--piccole .scheda img { width: 112px; height: 112px; }
.colonna-testo .schede .scheda img[alt*="logo" i] { clip-path: none; border-radius: var(--r); object-fit: contain; }
.schede .scheda h3 { font-size: 1.2rem; margin: 0 0 .3rem; }
.schede--piccole .scheda h3 { font-size: 1.05rem; }
.schede .scheda h3 a { text-decoration: none; }
.schede .scheda h3 a:hover, .schede .scheda h3 a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.schede .scheda p { font-size: .93rem; line-height: 1.55; }
.schede--piccole .scheda p { font-size: .87rem; }
.schede .scheda .scheda__ruolo {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--arancio); margin: 0 0 .8rem;
}
.schede .scheda .scheda__link { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; }
.scheda__link a { color: var(--testo-tenue); display: inline-flex; }
/* M-59, 18/09/2026: la stessa riga di link fuori dalle schede, su /contattaci/ */
.colonna-testo .scheda__link { display: flex; gap: .8rem; }
.scheda__link a:hover, .scheda__link a:focus-visible { color: var(--arancio); }

/* sezione di sola immagine delle pagine: a tutta finestra, fuori dalla colonna
   di lettura e fuori dall'alternanza degli sfondi. Nell'originale e' un
   contenitore Elementor a tutta fascia. Deciso da Diego il 17/09/2026, C-23. */
.sezione-immagine img { width: 100%; height: auto; margin: 0; border-radius: 0; }

/* video e contenuti incorporati dentro gli articoli */
/* M-50: `frameborder="0"` non si scrive piu' nel markup, e' obsoleto. Il bordo
   di default del browser lo toglie questa regola, che vale per ogni iframe
   marcato `incorporato` e non solo per quelli dentro le due colonne. */
.incorporato { border: 0; }
.articolo__corpo iframe, .colonna-testo iframe {
  width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 0; border-radius: var(--r-g); margin: 2rem 0; display: block;
}
.articolo__corpo .wp-video, .articolo__corpo .ast-oembed-container { max-width: 100%; }

/* ---------- M-54, 18/09/2026: gli stili che il generatore scriveva in riga ----------
   Stessi valori di prima, due classi per selettore cosi' vincono sulle regole
   generali come vinceva l'attributo style. */
.piede .piede__marchio { color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.piede .piede__punto { color: var(--arancio-chiaro); }
.piede .piede__testo { font-size: .95rem; }
.piede .piede__social { display: flex; gap: 1rem; align-items: center; }
.hero.hero--archivio { padding-bottom: 2rem; }
.sezione.sezione--archivio { padding-top: 1rem; }
.guida.guida--56 { max-width: 56ch; }
.guida.guida--52 { max-width: 52ch; }
.guida.guida--sopra-griglia { margin-bottom: 3rem; }
.richiamo .richiamo__azioni { margin-top: 2rem; display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.wrap .azione { margin-top: 1.8rem; }
.wrap .azione--larga { margin-top: 2.5rem; }
.wrap .titolo--20ch { max-width: 20ch; }
.wrap .titolo--sopra-lista { margin-bottom: 2.5rem; }

/* ---------- C-42, 19/09/2026: il blocco «Dove operiamo» del piede ----------
   Una fascia sotto le colonne. I collegamenti dentro la frase sono sottolineati,
   perche' il colore da solo non li distingue dal testo (WCAG 1.4.1). */
.piede .piede__zona { margin-top: 2.5rem; }
.piede .piede__zona p { max-width: 70ch; }
.piede .piede__zona a { text-decoration: underline; text-underline-offset: .2em; }
/* C-45, 20/09/2026: i blocchi tornati dal piede vecchio. I dati della societa' stanno
   sotto telefono ed email, i due collegamenti sotto «Dove operiamo» dopo il separatore
   che l'originale disegnava con una riga di trattini bassi, e l'avviso sul dominio in
   fondo, dove nell'originale sta dopo le colonne. */
.piede .piede__dati { margin-top: .8rem; font-size: .9rem; line-height: 1.7; }
.piede .piede__oltre { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid #2a2a2e; max-width: 46ch; }
.piede .piede__ufficiale p { max-width: 80ch; }
.piede .piede__ufficiale strong { color: #e8e4de; font-weight: 600; }

/* D-06, 30/09/2026. I contenuti di terze parti restano bloccati finche' manca il consenso
   "Esperienza" di iubenda, e al loro posto compare un avviso scritto qui, senza codice nelle
   pagine. Mappe e video sono iframe marcati _iub_cs_activate che, senza consenso, puntano a
   empty.html di iubenda; Trustindex e' uno script text/plain dentro .recensioni. Quando
   iubenda attiva il contenuto le due condizioni cadono e l'avviso sparisce da solo. Nei
   browser senza :has() l'avviso non compare e resta lo spazio vuoto di prima. */
iframe._iub_cs_activate[src*="cookie_solution/empty.html"] { display: none; }
:has(> iframe._iub_cs_activate[src*="cookie_solution/empty.html"])::before,
.recensioni:has(> script._iub_cs_activate[type="text/plain"])::before {
  display: block;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--bordo);
  border-radius: var(--r-g);
  background: var(--superficie);
  color: var(--testo-tenue);
  font-family: var(--display);
  font-size: .95rem;
  line-height: 1.55;
}
:has(> iframe._iub_cs_activate[src*="cookie_solution/empty.html"])::before {
  content: "Qui ci sarebbe un contenuto esterno, una mappa o un video. Si carica solo se accetti i cookie \0000abEsperienza\0000bb: puoi farlo dal pulsante della privacy in basso a sinistra, o da \0000abModifica opzioni privacy\0000bb  in fondo alla pagina.";
}
.recensioni:has(> script._iub_cs_activate[type="text/plain"])::before {
  content: "Qui ci sono le recensioni dei nostri clienti su Google. Si caricano solo se accetti i cookie \0000abEsperienza\0000bb: puoi farlo dal pulsante della privacy in basso a sinistra, o da \0000abModifica opzioni privacy\0000bb  in fondo alla pagina.";
}