/* SOS Numero Verde — foglio di stile unico.
   Scritto partendo dal telefono: le regole base valgono per lo schermo stretto,
   le media query aggiungono soltanto ciò che serve quando c'è più spazio. */

/* ---------------------------------------------------------------- tessitura */

:root {
  color-scheme: light dark;

  /* Marchio */
  --s-marchio: #0a8a5a;
  --s-marchio-forte: #076e47;
  --s-marchio-tenue: #e8f7f0;
  --s-marchio-bordo: #b6e3ce;

  /* L'arancio è riservato alle chiamate al numero: se lo usiamo anche altrove
     smette di dire "premi qui per parlare con qualcuno". */
  --s-azione: #d85512;
  --s-azione-calda: #b8430a;
  --s-su-azione: #fff;

  /* Superfici e inchiostri */
  --s-fondo: #fff;
  --s-fondo-2: #f7faf9;
  --s-fondo-3: #eef5f2;
  --s-ink: #071a28;
  --s-ink-2: #33505f;
  --s-ink-3: #61798a;
  --s-bordo: #dde7e4;
  --s-bordo-forte: #a9c2b8;

  /* Palcoscenico animato della homepage */
  --s-notte: #06131f;
  --s-notte-2: #0b2033;

  /* Servizi */
  --s-luce: #8a6206;
  --s-luce-bg: #fff8e3;
  --s-luce-bordo: #f0dca6;
  --s-gas: #10648f;
  --s-gas-bg: #e7f4fb;
  --s-gas-bordo: #b3ddf1;

  /* Stati */
  --s-ok: #0a7a52;
  --s-ok-bg: #e8f7f0;
  --s-avviso: #8a6206;
  --s-avviso-bg: #fff8e3;
  --s-errore: #b3261e;
  --s-errore-bg: #fdecea;

  /* Tipografia: system stack, così non c'è un solo byte di font da scaricare
     e il primo paragrafo è leggibile all'istante anche in 3G. */
  --s-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --s-font-titoli: var(--s-font);
  --s-font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Scala fluida: nessun testo sotto i 16px sul telefono, mai. */
  --s-t-xs: 0.8125rem;
  --s-t-sm: 0.9375rem;
  --s-t-base: 1.0625rem;
  --s-t-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --s-t-xl: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem);
  --s-t-2xl: clamp(1.6rem, 1.35rem + 1.3vw, 2.1rem);
  --s-t-3xl: clamp(2rem, 1.55rem + 2.2vw, 3rem);
  --s-t-4xl: clamp(2.4rem, 1.7rem + 3.4vw, 4rem);

  /* Spaziature */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;

  --s-r-sm: 8px;
  --s-r: 14px;
  --s-r-lg: 20px;
  --s-r-xl: 28px;
  --s-r-pill: 999px;

  --s-ombra-1: 0 1px 2px rgba(7, 26, 40, 0.07);
  --s-ombra-2: 0 4px 14px rgba(7, 26, 40, 0.09);
  --s-ombra-3: 0 12px 34px rgba(7, 26, 40, 0.14);

  --s-max: 1180px;
  --s-max-testo: 68ch;
  --s-nav-h: 60px;
  /* Altezza della barra telefono fissa in fondo allo schermo stretto: serve a
     staccare il fondo pagina, altrimenti la barra copre l'ultimo paragrafo. */
  --s-barra-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --s-marchio: #2be8a8;
    --s-marchio-forte: #14d693;
    --s-marchio-tenue: rgba(43, 232, 168, 0.12);
    --s-marchio-bordo: rgba(43, 232, 168, 0.32);

    --s-azione: #ff7a3d;
    --s-azione-calda: #ff9761;
    --s-su-azione: #1a0a02;

    --s-fondo: #06131f;
    --s-fondo-2: #0b2033;
    --s-fondo-3: #102a41;
    --s-ink: #f2f8f6;
    --s-ink-2: #c4d6d0;
    --s-ink-3: #8ba5b3;
    --s-bordo: #1d3a4f;
    --s-bordo-forte: #2f5a72;

    --s-luce: #f5c344;
    --s-luce-bg: rgba(245, 195, 68, 0.14);
    --s-luce-bordo: rgba(245, 195, 68, 0.34);
    --s-gas: #63c3f0;
    --s-gas-bg: rgba(99, 195, 240, 0.14);
    --s-gas-bordo: rgba(99, 195, 240, 0.34);

    --s-ok: #35d99b;
    --s-ok-bg: rgba(53, 217, 155, 0.13);
    --s-avviso: #f5c344;
    --s-avviso-bg: rgba(245, 195, 68, 0.13);
    --s-errore: #ff8a80;
    --s-errore-bg: rgba(255, 138, 128, 0.13);

    --s-ombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --s-ombra-2: 0 4px 18px rgba(0, 0, 0, 0.5);
    --s-ombra-3: 0 12px 44px rgba(0, 0, 0, 0.6);
  }
}

/* ------------------------------------------------------------------ reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Le ancore non devono finire sotto l'header appiccicato. */
  scroll-padding-top: calc(var(--s-nav-h) + var(--s4));
}

body {
  margin: 0;
  font-family: var(--s-font);
  font-size: var(--s-t-base);
  line-height: 1.65;
  color: var(--s-ink);
  background: var(--s-fondo);
  -webkit-font-smoothing: antialiased;
  /* Il telefono è stretto: qualunque elemento più largo dello schermo produce
     lo scorrimento laterale che rende un sito "rotto" a occhio. */
  overflow-x: hidden;
  /* Spazio per la barra telefono fissa. */
  padding-bottom: calc(var(--s-barra-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 820px) {
  body {
    padding-bottom: 0;
  }
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--s-font-titoli);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
  font-weight: 750;
}

h1 { font-size: var(--s-t-3xl); }
h2 { font-size: var(--s-t-2xl); margin-top: var(--s10); }
h3 { font-size: var(--s-t-xl); margin-top: var(--s8); }
h4 { font-size: var(--s-t-lg); margin-top: var(--s6); }

p, ul, ol {
  margin: 0 0 var(--s4);
  max-width: var(--s-max-testo);
}

li { margin-bottom: var(--s2); }

a {
  color: var(--s-marchio-forte);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover { color: var(--s-marchio); }

strong { font-weight: 700; }

hr {
  border: 0;
  border-top: 1px solid var(--s-bordo);
  margin: var(--s10) 0;
}

/* Chi naviga da tastiera deve vedere dove si trova. */
:focus-visible {
  outline: 3px solid var(--s-marchio);
  outline-offset: 2px;
  border-radius: 4px;
}

.s-salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--s-marchio-forte);
  color: #fff;
  padding: var(--s3) var(--s5);
  z-index: 200;
  border-radius: 0 0 var(--s-r) 0;
}
.s-salta:focus {
  left: 0;
}

/* --------------------------------------------------------------- impianto */

.s-cont {
  width: 100%;
  max-width: var(--s-max);
  margin-inline: auto;
  padding-inline: var(--s4);
}

@media (min-width: 640px) {
  .s-cont { padding-inline: var(--s6); }
}

.s-stretto { max-width: 780px; }

.s-sezione { padding-block: var(--s10); }

@media (min-width: 820px) {
  .s-sezione { padding-block: var(--s16); }
}

.s-fondo-2 { background: var(--s-fondo-2); }
.s-fondo-3 { background: var(--s-fondo-3); }

.s-griglia {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .s-griglia-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .s-griglia-3 { grid-template-columns: repeat(3, 1fr); }
  .s-griglia-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 560px) and (max-width: 859px) {
  .s-griglia-3, .s-griglia-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- marchio */

.s-marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--s-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.06rem;
  white-space: nowrap;
}

.s-marchio svg { flex: none; }

.s-marchio-testo { display: flex; flex-direction: column; line-height: 1.05; }
.s-marchio-testo b { font-weight: 800; }
.s-marchio-testo span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-ink-3);
}

/* --------------------------------------------------------------- bottoni */

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  /* 48px di altezza minima: sotto questa soglia il pollice sbaglia bersaglio. */
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border-radius: var(--s-r-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: var(--s-t-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.1s ease,
    box-shadow 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.s-btn:active { transform: translateY(1px); }

.s-btn-telefono {
  background: var(--s-azione);
  color: var(--s-su-azione);
  box-shadow: var(--s-ombra-2);
  font-size: var(--s-t-base);
  padding-inline: var(--s6);
}
.s-btn-telefono:hover {
  background: var(--s-azione-calda);
  color: var(--s-su-azione);
}

.s-btn-primario {
  background: var(--s-marchio-forte);
  color: #fff;
}
.s-btn-primario:hover { background: var(--s-marchio); color: #05231a; }

.s-btn-secondario {
  background: var(--s-fondo);
  color: var(--s-ink);
  border-color: var(--s-bordo-forte);
}
.s-btn-secondario:hover { background: var(--s-fondo-3); color: var(--s-ink); }

.s-btn-chiaro {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.s-btn-chiaro:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.s-btn-blocco { width: 100%; }

/* ------------------------------------------------------------------ card */

.s-card {
  background: var(--s-fondo);
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-lg);
  padding: var(--s5);
  box-shadow: var(--s-ombra-1);
}

.s-card h3 { margin-top: 0; }
.s-card p:last-child { margin-bottom: 0; }

a.s-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.16s ease, box-shadow 0.16s ease,
    transform 0.16s ease;
}
a.s-card:hover {
  border-color: var(--s-marchio-bordo);
  box-shadow: var(--s-ombra-2);
  transform: translateY(-2px);
  color: inherit;
}

.s-card-titolo {
  font-family: var(--s-font-titoli);
  font-weight: 750;
  font-size: var(--s-t-lg);
  letter-spacing: -0.02em;
  margin-bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.s-card-nota {
  font-size: var(--s-t-sm);
  color: var(--s-ink-3);
  margin: 0;
}

/* ------------------------------------------------------------------- tag */

.s-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--s-t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px var(--s3);
  border-radius: var(--s-r-pill);
  background: var(--s-fondo-3);
  color: var(--s-ink-2);
  border: 1px solid var(--s-bordo);
}

.s-tag-luce {
  background: var(--s-luce-bg);
  color: var(--s-luce);
  border-color: var(--s-luce-bordo);
}
.s-tag-gas {
  background: var(--s-gas-bg);
  color: var(--s-gas);
  border-color: var(--s-gas-bordo);
}
.s-tag-marchio {
  background: var(--s-marchio-tenue);
  color: var(--s-marchio-forte);
  border-color: var(--s-marchio-bordo);
}

/* ------------------------------------------------------------ testo utile */

.guida {
  font-size: var(--s-t-lg);
  color: var(--s-ink-2);
  line-height: 1.6;
}

.s-nota {
  font-size: var(--s-t-sm);
  color: var(--s-ink-3);
}

.s-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.s-occhiello {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--s-t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-marchio-forte);
}

/* ---------------------------------------------------------------- avvisi */

.s-avviso {
  border: 1px solid var(--s-bordo);
  border-left: 4px solid var(--s-marchio);
  background: var(--s-fondo-2);
  border-radius: var(--s-r);
  padding: var(--s4) var(--s5);
  margin-block: var(--s6);
}
.s-avviso :last-child { margin-bottom: 0; }
.s-avviso-titolo {
  font-weight: 750;
  font-family: var(--s-font-titoli);
  margin-bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.s-avviso-attenzione {
  border-left-color: var(--s-avviso);
  background: var(--s-avviso-bg);
}
.s-avviso-pericolo {
  border-left-color: var(--s-errore);
  background: var(--s-errore-bg);
}

/* --------------------------------------------------------------- tabelle */

/* Una tabella larga su schermo stretto non si può restringere: si fa scorrere
   dentro il suo contenitore, mai insieme alla pagina. */
.s-tabella-avvolge {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--s6);
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--s-t-sm);
  min-width: 34rem;
}

th, td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--s-bordo);
  vertical-align: top;
}

th {
  font-family: var(--s-font-titoli);
  font-weight: 700;
  background: var(--s-fondo-2);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- accordion */

.s-fisarmonica {
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  background: var(--s-fondo);
  margin-bottom: var(--s3);
  overflow: hidden;
}

.s-fisarmonica summary {
  cursor: pointer;
  padding: var(--s4) var(--s5);
  font-weight: 700;
  font-family: var(--s-font-titoli);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
}

.s-fisarmonica summary::-webkit-details-marker { display: none; }

.s-fisarmonica summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2.2px solid var(--s-ink-3);
  border-bottom: 2.2px solid var(--s-ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.s-fisarmonica[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.s-fisarmonica-corpo {
  padding: 0 var(--s5) var(--s5);
  color: var(--s-ink-2);
}
.s-fisarmonica-corpo :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- briciole */

.s-briciole {
  font-size: var(--s-t-sm);
  color: var(--s-ink-3);
  padding-block: var(--s4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}
.s-briciole a { color: var(--s-ink-3); }
.s-briciole a:hover { color: var(--s-marchio-forte); }
.s-briciole span[aria-hidden] { opacity: 0.5; }

/* ------------------------------------------------------------------ form */

.s-campo { margin-bottom: var(--s4); }

.s-campo label {
  display: block;
  font-weight: 650;
  font-size: var(--s-t-sm);
  margin-bottom: var(--s2);
}

.s-campo input,
.s-campo select,
.s-campo textarea {
  width: 100%;
  /* 16px esatti: sotto questa misura iOS ingrandisce la pagina al focus e il
     modulo salta via dallo schermo. */
  font-size: 16px;
  font-family: inherit;
  padding: var(--s3) var(--s4);
  min-height: 48px;
  border: 1px solid var(--s-bordo-forte);
  border-radius: var(--s-r-sm);
  background: var(--s-fondo);
  color: var(--s-ink);
}

.s-campo textarea { min-height: 120px; resize: vertical; }

.s-campo input:focus,
.s-campo select:focus,
.s-campo textarea:focus {
  border-color: var(--s-marchio);
  outline: 2px solid var(--s-marchio-bordo);
  outline-offset: 0;
}

.s-campo-nota {
  font-size: var(--s-t-xs);
  color: var(--s-ink-3);
  margin-top: var(--s1);
}

.s-consenso {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: var(--s-t-sm);
  color: var(--s-ink-2);
  margin-bottom: var(--s4);
}

.s-consenso input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--s-marchio-forte);
}

/* Trappola per i robot: invisibile a chi vede, compilata da chi non guarda. */
.s-onesto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------- intestazione */

.s-testata {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--s-fondo);
  border-bottom: 1px solid var(--s-bordo);
}

.s-testata-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--s-nav-h);
}

.s-nastro {
  background: var(--s-marchio-tenue);
  color: var(--s-marchio-forte);
  font-size: var(--s-t-xs);
  font-weight: 600;
  text-align: center;
  padding-block: 6px;
  display: none;
}

@media (min-width: 640px) {
  .s-nastro { display: block; }
}

.s-nav { display: none; }

.s-testata-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 800;
  font-size: var(--s-t-sm);
  color: var(--s-azione);
  text-decoration: none;
  white-space: nowrap;
}

/* Il numero per esteso ruba spazio al logo sotto i 420px: resta l'icona. */
.s-testata-tel span { display: none; }

@media (min-width: 420px) {
  .s-testata-tel span { display: inline; }
}

.s-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-sm);
  background: var(--s-fondo);
  color: var(--s-ink);
  cursor: pointer;
  flex: none;
}

@media (min-width: 980px) {
  .s-menu-btn { display: none; }

  .s-nav {
    display: flex;
    align-items: center;
    gap: var(--s1);
  }

  .s-nav-voce {
    position: relative;
  }

  .s-nav-voce > a,
  .s-nav-voce > button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--s2) var(--s3);
    border-radius: var(--s-r-sm);
    font: inherit;
    font-size: var(--s-t-sm);
    font-weight: 650;
    color: var(--s-ink);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
  }

  .s-nav-voce > a:hover,
  .s-nav-voce > button:hover {
    background: var(--s-fondo-3);
    color: var(--s-ink);
  }

  .s-nav-pannello {
    position: absolute;
    top: calc(100% + 8px);
    width: max-content;
    max-width: min(30rem, calc(100vw - 3rem));
    /* Il pannello si apre otto pixel più in basso della voce: senza un ponte
       che copra quello stacco, il mouse esce dall'area al primo movimento e il
       menu si richiude prima che si riesca a raggiungerlo. */
    left: 0;
    min-width: 22rem;
    background: var(--s-fondo);
    border: 1px solid var(--s-bordo);
    border-radius: var(--s-r-lg);
    box-shadow: var(--s-ombra-3);
    padding: var(--s3);
    display: none;
    z-index: 70;
  }

  .s-nav-pannello::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }

  /* Un margine di tolleranza anche ai lati: scendendo in diagonale verso una
     voce del pannello il puntatore taglia l'angolo, e senza questo esce. */
  .s-nav-voce::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 14px;
  }

  .s-nav-voce:last-child .s-nav-pannello {
    left: auto;
    right: 0;
  }

  .s-nav-voce:hover .s-nav-pannello,
  .s-nav-voce:focus-within .s-nav-pannello {
    display: block;
    animation: s-pannello 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .s-nav-pannello a {
    display: block;
    padding: var(--s3);
    border-radius: var(--s-r-sm);
    text-decoration: none;
    color: var(--s-ink);
  }

  .s-nav-pannello a:hover { background: var(--s-fondo-3); }

  .s-nav-pannello b {
    display: block;
    font-weight: 700;
    font-size: var(--s-t-sm);
    /* Il titolo della voce resta su una riga sola: spezzato in due si legge
       come se fossero due voci diverse. È il pannello ad allargarsi. */
    white-space: nowrap;
  }

  .s-nav-pannello i {
    font-style: normal;
    font-size: var(--s-t-xs);
    color: var(--s-ink-3);
    line-height: 1.4;
  }
}

@keyframes s-pannello {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Menu a tutto schermo sul telefono: un pannello che scorre, non un accordion
   incastrato sotto l'intestazione. */
.s-menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--s-fondo);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--s16) + env(safe-area-inset-bottom, 0px));
  animation: s-menu-entra 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-menu-mobile[hidden] { display: none; }

@keyframes s-menu-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.s-menu-mobile-testa {
  position: sticky;
  top: 0;
  background: var(--s-fondo);
  border-bottom: 1px solid var(--s-bordo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--s-nav-h);
  padding-inline: var(--s4);
  z-index: 2;
}

.s-menu-gruppo {
  border-bottom: 1px solid var(--s-bordo);
  padding: var(--s4) var(--s4) var(--s5);
}

.s-menu-gruppo > b {
  display: block;
  font-size: var(--s-t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--s-ink-3);
  margin-bottom: var(--s3);
}

.s-menu-gruppo a {
  display: block;
  padding: var(--s3) 0;
  min-height: 48px;
  text-decoration: none;
  color: var(--s-ink);
  border-bottom: 1px solid var(--s-bordo);
}

.s-menu-gruppo a:last-child { border-bottom: 0; }
.s-menu-gruppo a b { display: block; font-weight: 700; }
.s-menu-gruppo a i {
  font-style: normal;
  font-size: var(--s-t-sm);
  color: var(--s-ink-3);
}

/* -------------------------------------------------- barra telefono mobile */

/* Sul telefono il numero non si cerca: sta sempre in fondo allo schermo. */
.s-barra-tel {
  position: fixed;
  /* Al primo sguardo la barra non c'è: coprirebbe l'ultima riga di una pagina
     appena aperta, e chi è arrivato non ha ancora deciso niente. Compare quando
     si comincia a scorrere, cioè quando la persona sta leggendo. */
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--s3)
    calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--s-fondo) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--s-bordo);
}

.s-barra-tel.s-barra-visibile { transform: none; }

/* Se JavaScript non parte la barra resta comunque raggiungibile: meglio averla
   sempre che non averla mai. */
.s-senza-js .s-barra-tel { transform: none; }

.s-barra-tel .s-btn { flex: 1; }
.s-barra-tel .s-btn-secondario { flex: 0 0 auto; padding-inline: var(--s4); }

@media (min-width: 820px) {
  .s-barra-tel { display: none; }
}

/* ------------------------------------------------------------ blocco CTA */

.s-richiamo {
  background: linear-gradient(150deg, var(--s-notte), var(--s-notte-2));
  color: #fff;
  border-radius: var(--s-r-xl);
  padding: var(--s8) var(--s5);
  text-align: center;
  margin-block: var(--s12);
}

.s-richiamo h2 { margin-top: 0; color: #fff; }
.s-richiamo p { color: rgba(255, 255, 255, 0.82); margin-inline: auto; }

.s-richiamo-num {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--s-font-titoli);
  font-size: var(--s-t-2xl);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-block: var(--s4);
}

@media (min-width: 640px) {
  .s-richiamo { padding: var(--s12) var(--s10); }
}

/* --------------------------------------------------------------- footer */

.s-fondopagina {
  background: var(--s-notte);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--s10) var(--s8);
  margin-top: var(--s16);
  font-size: var(--s-t-sm);
}

.s-fondopagina a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
.s-fondopagina a:hover { color: #fff; text-decoration: underline; }

.s-fondopagina h4 {
  color: #fff;
  font-size: var(--s-t-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--s3);
}

.s-fondopagina-griglia {
  display: grid;
  gap: var(--s8);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .s-fondopagina-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .s-fondopagina-griglia { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

.s-fondopagina ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.s-fondopagina li { margin-bottom: var(--s2); }

.s-fondopagina-coda {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: var(--s8);
  padding-top: var(--s5);
  font-size: var(--s-t-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* ----------------------------------------------------------- il racconto */

/* Le scene erano impilate una sopra l'altra e si scambiavano il posto in
   dissolvenza: durante lo scambio si vedevano due testi sovrapposti, e sullo
   schermo largo — dove uno sta a sinistra e l'altro a destra — diventava
   illeggibile. Ora ogni scena ha il suo spazio e si limita a comparire quando
   arriva: niente si sovrappone più a niente. Il movimento resta, la confusione
   no. */

.s-palco {
  position: relative;
  background: var(--s-fondo);
  color: var(--s-ink);
}

.s-scena {
  position: relative;
  padding-block: var(--s12);
  border-top: 1px solid transparent;
}

/* Fondo appena percettibile a scene alterne: dà il ritmo della lettura senza
   spezzare la pagina in blocchi di colore. */
.s-scena:nth-child(even) {
  background: linear-gradient(180deg, var(--s-fondo-2), var(--s-fondo));
}

@media (min-width: 900px) {
  .s-scena { padding-block: var(--s16); }
}

.s-scena-alta {
  padding-top: var(--s10);
  padding-bottom: var(--s12);
}

@media (min-width: 900px) {
  .s-scena-alta { padding-block: var(--s16) var(--s20); }
}

.s-scena-corpo {
  position: relative;
  width: 100%;
  max-width: var(--s-max);
  margin-inline: auto;
  padding-inline: var(--s4);
}

@media (min-width: 640px) {
  .s-scena-corpo { padding-inline: var(--s6); }
}

.s-scena h1,
.s-scena h2,
.s-scena h3 { color: var(--s-ink); }

.s-scena p { color: var(--s-ink-2); }

.s-scena-testo { max-width: none; }

@media (min-width: 900px) {
  .s-scena-testo { max-width: 34rem; }
  .s-scena-testo-dx { margin-left: auto; }
}

/* Il velo non serve più: non c'è più niente da coprire. */
.s-velo { display: none; }
.s-cielo { display: none; }
.s-invito { display: none; }

/* ---- comparsa guidata dallo scorrimento --------------------------------- */

@keyframes s-comparsa {
  from {
    opacity: 0;
    transform: translate3d(0, 2.4rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes s-comparsa-media {
  from {
    opacity: 0;
    transform: translate3d(0, 3.5rem, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  /* La comparsa è legata alla posizione dell'elemento nello schermo, non a un
     ascoltatore di scroll: la calcola il compositore e resta fluida anche
     mentre la pagina scorre per inerzia. Finisce presto, così il testo è
     leggibile appena entra. */
  .s-scena-testo,
  .s-scena-media {
    animation: s-comparsa linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 62%;
  }

  .s-scena-media {
    animation-name: s-comparsa-media;
  }

  /* La prima scena si vede all'apertura della pagina: non deve aspettare
     nessuno scorrimento per comparire. */
  .s-scena-1 .s-scena-testo,
  .s-scena-1 .s-scena-media {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Chi ha chiesto meno movimento vede le stesse scene, ferme. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .s-scena-testo,
  .s-scena-media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.s-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-stat-num {
  font-family: var(--s-font-titoli);
  font-size: var(--s-t-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--s-marchio-forte);
}

.s-stat-lab {
  font-size: var(--s-t-sm);
  color: var(--s-ink-3);
}

.s-scena-stat {
  display: flex;
  gap: var(--s8);
  flex-wrap: wrap;
  margin-top: var(--s6);
}

/* ------------------------------------------------------------- utilità */

.s-flex { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.s-centro { text-align: center; }
.s-mt0 { margin-top: 0; }
.s-mb0 { margin-bottom: 0; }
.s-solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- elenco fornitori */

/* Sono centinaia di voci: sul telefono una colonna, poi tante quante ne
   entrano senza che il nome vada a capo in mezzo alla parola. */
.s-fornitori {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .s-fornitori { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
}

@media (min-width: 900px) {
  .s-fornitori { grid-template-columns: repeat(3, 1fr); }
}

.s-fornitore {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  min-height: 64px;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  background: var(--s-fondo);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.s-fornitore:hover {
  border-color: var(--s-marchio-bordo);
  box-shadow: var(--s-ombra-1);
  color: inherit;
}

.s-fornitore img {
  width: 40px;
  height: 40px;
  flex: none;
  /* I loghi arrivano dai siti dei venditori con proporzioni molto diverse:
     contain li lascia interi invece di tagliarli a metà. */
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.s-fornitore-testo { min-width: 0; }

.s-fornitore-testo b {
  display: block;
  font-weight: 650;
  font-size: var(--s-t-sm);
  line-height: 1.3;
  /* Alcune ragioni sociali sono lunghissime: due righe e poi si taglia,
     altrimenti una scheda diventa alta il triplo delle altre. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.s-fornitore-testo i {
  font-style: normal;
  font-size: var(--s-t-xs);
  color: var(--s-ink-3);
}

/* Chi non espone un logo raggiungibile riceve le proprie iniziali: meglio di
   un riquadro vuoto, e resta stabile nel tempo perché il colore deriva dal nome. */
.s-monogramma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.s-monogramma-grande {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
  border-radius: var(--s-r-sm);
}

/* ------------------------------------------------------- consensi cookie */

/* In fondo allo schermo e non a metà pagina: su un telefono un riquadro
   centrato copre il contenuto e la prima cosa che si fa è chiuderlo a caso. */
.s-consensi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background: var(--s-fondo);
  border-top: 1px solid var(--s-bordo);
  box-shadow: 0 -8px 30px rgba(7, 26, 40, 0.16);
  padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  animation: s-consensi-entra 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.s-consensi[hidden] { display: none; }

@keyframes s-consensi-entra {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.s-consensi-corpo {
  max-width: var(--s-max);
  margin-inline: auto;
}

.s-consensi p {
  font-size: var(--s-t-sm);
  color: var(--s-ink-2);
  margin-bottom: var(--s3);
  max-width: 74ch;
}

.s-consensi-bottoni {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.s-consensi-bottoni .s-btn { flex: 1 1 12rem; }

@media (min-width: 720px) {
  .s-consensi-bottoni .s-btn { flex: 0 0 auto; }
}

/* Quando la barra dei consensi è aperta, quella del telefono le sta sopra:
   due strisce sovrapposte in fondo allo schermo sono illeggibili. */
body.s-consensi-aperti .s-barra-tel { display: none; }

.s-gestisci-consensi {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------- rifiniture per il dito e per la vista */

/* Il sottotitolo del marchio era leggibile solo da vicino. */
.s-marchio-testo span { font-size: 0.75rem; letter-spacing: 0.08em; }

/* Il marchio in testata è il bersaglio più premuto di tutti: deve essere
   grande quanto gli altri, non quanto il testo che contiene. */
.s-marchio {
  min-height: 44px;
  padding-block: 2px;
}

/* Briciole e link di piede: sono in colonna e vengono premuti col pollice,
   quindi ognuno si prende la propria fascia alta abbastanza. */
.s-briciole a,
.s-briciole span:not([aria-hidden]) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.s-fondopagina li a,
.s-gestisci-consensi {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* La casella di consenso: il quadratino resta piccolo per estetica, ma tutta
   la riga è cliccabile e ha l'altezza giusta. */
.s-consenso {
  min-height: 44px;
  padding-block: var(--s1);
  cursor: pointer;
}

@media (min-width: 820px) {
  /* Sullo schermo largo si punta col mouse: le fasce alte servono meno e
     stringerle rende il piede pagina più compatto. */
  .s-fondopagina li a,
  .s-briciole a,
  .s-briciole span:not([aria-hidden]) { min-height: 32px; }
}

/* Sotto i 420px la testata mostra solo l'icona della cornetta: senza una
   superficie dichiarata il bersaglio scende a 18 pixel, cioè meno della metà
   di un polpastrello — e per giunta proprio sul link che deve far chiamare. */
.s-testata-tel {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  border-radius: var(--s-r-sm);
}

.s-testata-tel:active { background: var(--s-fondo-3); }

/* Stesso motivo per il numero e l'email in fondo alla pagina. */
.s-fondopagina a[href^="tel:"],
.s-fondopagina a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* ---------------------------------------------------------- illustrazioni */

/* Le illustrazioni aprono la pagina e dicono in un colpo d'occhio di cosa si
   parla. Hanno proporzioni dichiarate nel markup, così il testo sotto non
   sobbalza quando l'immagine arriva. */
.s-ill {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--s-r-lg);
  margin-block: var(--s6);
  border: 1px solid var(--s-bordo);
}

.s-card .s-ill {
  margin: 0 0 var(--s4);
  max-width: none;
  border-radius: var(--s-r);
}

@media (prefers-color-scheme: dark) {
  /* Le illustrazioni sono disegnate su fondi chiari: al buio si smorzano
     appena, invece di sparare bianco in faccia a chi legge di notte. */
  .s-ill { opacity: 0.9; }
}

.s-ill-testata {
  display: block;
  margin-inline: auto;
}


/* -------------------------------------------------- immagini nelle scene */

/* Ogni scena ha la sua illustrazione: sullo schermo largo affianca il testo,
   su quello stretto gli sta sopra. Si muove con un ritardo rispetto alle
   parole, così lo scorrimento ha profondità invece di essere una dissolvenza. */
.s-scena-griglia {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .s-scena-griglia {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s10);
  }

  /* Quando il testo sta a destra, l'immagine passa a sinistra senza toccare
     l'ordine del markup: chi legge con uno screen reader sente prima il testo. */
  .s-scena-testo-dx + .s-scena-media,
  .s-scena-griglia-inversa .s-scena-media { order: -1; }
}

.s-scena-media {
  position: relative;
  will-change: transform;
}

.s-scena-media img {
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 18px 40px rgba(7, 26, 40, 0.13));
}

/* Sul telefono l'illustrazione non deve rubare spazio alle parole: resta più
   piccola e sopra il testo. */
@media (max-width: 899px) {
  /* Sul telefono l'immagine viene prima del testo. */
  .s-scena-media { order: -1; }
  .s-scena-media img { max-width: 12rem; }
  .s-scena-griglia { gap: var(--s3); }

  /* La scena si stringe per far posto all'illustrazione senza spingere fuori
     schermo il bottone del telefono. */
  .s-scena h2 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .s-scena .guida { font-size: var(--s-t-base); }
  .s-scena-stat { gap: var(--s5); margin-top: var(--s4); }
}


.s-scena-testo { max-width: none; }

@media (min-width: 900px) {
  .s-scena-testo { max-width: 34rem; }
}

/* La prima scena ha anche i due bottoni: l'illustrazione si fa più piccola
   perché la chiamata all'azione resti sopra la piega. */
@media (max-width: 899px) {
  .s-scena-alta .s-scena-media img { max-width: 9rem; }
  .s-scena-alta h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
}


/* ------------------------------------------------------- pagina con fianco */

/* Su uno schermo largo una colonna di testo centrata lascia due fasce vuote
   ai lati: invece di allargare le righe fino a renderle illeggibili, il posto
   si riempie con quello che serve mentre si legge — il numero da chiamare,
   l'indice della pagina, dove andare dopo. */
.s-articolo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s8);
  align-items: start;
}

@media (min-width: 1080px) {
  .s-articolo {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--s12);
  }
}

@media (min-width: 1280px) {
  .s-articolo { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.s-articolo-corpo { min-width: 0; }

/* Il fianco resta in vista mentre si scorre: chi decide di chiamare lo fa a
   metà lettura, non in fondo alla pagina. */
.s-fianco {
  position: static;
  display: grid;
  gap: var(--s4);
}

@media (min-width: 1080px) {
  .s-fianco {
    position: sticky;
    top: calc(var(--s-nav-h) + var(--s4));
  }
}

.s-fianco-carta {
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-lg);
  padding: var(--s5);
  background: var(--s-fondo);
}

.s-fianco-carta h3,
.s-fianco-carta .s-fianco-titolo {
  font-family: var(--s-font-titoli);
  font-size: var(--s-t-sm);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s-ink-3);
  margin: 0 0 var(--s3);
}

.s-fianco-chiama {
  background: linear-gradient(155deg, var(--s-notte), var(--s-notte-2));
  border-color: transparent;
  color: #fff;
  text-align: center;
}

.s-fianco-chiama .s-fianco-titolo { color: rgba(255, 255, 255, 0.62); }
.s-fianco-chiama p { color: rgba(255, 255, 255, 0.82); font-size: var(--s-t-sm); }

.s-fianco-num {
  display: block;
  font-family: var(--s-font-titoli);
  font-size: var(--s-t-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  margin-block: var(--s2) var(--s3);
}

.s-fianco-num:hover { color: #fff; text-decoration: underline; }

/* L'indice: la voce corrispondente alla sezione che si sta leggendo si accende
   da sola, senza una riga di JavaScript. */
.s-indice {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--s-t-sm);
  max-height: 22rem;
  overflow-y: auto;
}

.s-indice li { margin: 0; }

.s-indice a {
  display: block;
  padding: var(--s2) var(--s3);
  border-left: 2px solid var(--s-bordo);
  color: var(--s-ink-2);
  text-decoration: none;
  line-height: 1.35;
}

.s-indice a:hover {
  border-left-color: var(--s-marchio);
  background: var(--s-fondo-2);
  color: var(--s-ink);
}

.s-fianco-elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--s-t-sm);
}

.s-fianco-elenco li { margin-bottom: var(--s2); }
.s-fianco-elenco li:last-child { margin-bottom: 0; }

.s-fianco-elenco a {
  display: block;
  padding: var(--s2) 0;
  min-height: 40px;
  color: var(--s-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--s-bordo);
}

.s-fianco-elenco li:last-child a { border-bottom: 0; }
.s-fianco-elenco a:hover { color: var(--s-marchio-forte); }
.s-fianco-elenco b { display: block; font-weight: 650; line-height: 1.3; }

/* Sul telefono il fianco arriva in fondo: lì l'indice non serve più, mentre
   il numero e i rimandi sì. */
@media (max-width: 1079px) {
  .s-fianco-indice { display: none; }
}

/* Il numero grande nel riquadro laterale è un link, e sul telefono si preme
   col pollice: gli serve la stessa fascia degli altri bersagli. */
.s-fianco-num {
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------- quotazioni GME */

.s-quotazione {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: flex-end;
  justify-content: space-between;
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r-lg);
  padding: var(--s5);
  background: linear-gradient(180deg, var(--s-fondo-2), var(--s-fondo));
  margin-block: var(--s6);
}

.s-quotazione-eti {
  display: block;
  font-size: var(--s-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-ink-3);
}

.s-quotazione-num {
  display: block;
  font-family: var(--s-font-titoli);
  font-size: var(--s-t-4xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--s-ink);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s1);
}

.s-quotazione-num small {
  font-size: 0.32em;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--s-ink-3);
  margin-left: 0.35em;
}

.s-variazione {
  display: inline-block;
  margin-top: var(--s2);
  font-size: var(--s-t-sm);
  font-weight: 700;
}

.s-variazione.su { color: var(--s-errore); }
.s-variazione.giu { color: var(--s-ok); }

.s-quotazione-dett {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
  margin: 0;
}

.s-quotazione-dett dt {
  font-size: var(--s-t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s-ink-3);
  font-weight: 700;
}

.s-quotazione-dett dd {
  margin: 2px 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Il grafico è fatto di elementi, non di un disegno caricato a parte: appare
   insieme al testo e non ha bisogno di nessuna libreria. */
.s-grafico {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 150px;
  padding: var(--s3);
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  background: var(--s-fondo);
  margin-top: var(--s5);
}

.s-barra-ora {
  flex: 1;
  min-width: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--s-marchio), var(--s-marchio-forte));
  transition: opacity 0.15s ease;
}

.s-barra-ora:hover { opacity: 0.65; }

.s-barra-giorno {
  background: linear-gradient(180deg, var(--s-gas), color-mix(in srgb, var(--s-gas) 70%, black));
}

.s-grafico-assi {
  display: flex;
  justify-content: space-between;
  font-size: var(--s-t-xs);
  color: var(--s-ink-3);
  padding-inline: var(--s3);
  margin-top: var(--s1);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- indici in home */

.s-indici {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.s-indice-voce {
  display: block;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--s-bordo);
  border-radius: var(--s-r);
  background: var(--s-fondo);
  text-decoration: none;
  color: inherit;
  min-width: 9.5rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.s-indice-voce:hover {
  border-color: var(--s-marchio-bordo);
  box-shadow: var(--s-ombra-1);
  color: inherit;
}

.s-indice-eti {
  display: block;
  font-size: var(--s-t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-ink-3);
}

.s-indice-val {
  display: block;
  font-family: var(--s-font-titoli);
  font-size: var(--s-t-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--s-marchio-forte);
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}

.s-indice-val small {
  font-size: 0.52em;
  font-weight: 650;
  color: var(--s-ink-3);
  margin-left: 0.25em;
}