/* 2026-10-09 — "Rompere la monotonia dello scroll" sul TELEFONO (richiesta del titolare: punti 1, 3, 6).
   Pagine statiche /servizi/* e /blog/*. Gli elementi 3 e 6 li crea /assets/tw-monotonia.js.
   Solo transform/opacity nelle animazioni (nessun salto di pagina). File NUOVO: la cache di /assets è
   "immutable", quindi per modificarlo alzare il ?v= nei link delle 16 pagine.
   1) Carosello: elenchi a schede con 4 o più voci -> fila orizzontale da scorrere col dito + pallini.
   3) Sommario fisso: dopo "In questa pagina" compare una barra in alto con la sezione attiva illuminata.
   6) Mini-scelta "Di cosa hai bisogno?": 3 pulsanti grandi che aprono WhatsApp con il messaggio già scritto. */

/* ---------- 1) Carosello delle schede (solo telefono) ---------- */
@media (max-width: 640px) {
  ul.tw-cards:has(> li:nth-child(4)) {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 2px 6px !important;   /* spazio per il sollevamento della scheda al tocco */
    margin-bottom: 4px !important;
  }
  ul.tw-cards:has(> li:nth-child(4))::-webkit-scrollbar { display: none; }
  ul.tw-cards:has(> li:nth-child(4)) > li {
    flex: 0 0 84%;
    scroll-snap-align: start;
    min-height: 100%;
  }
  .tw-car-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 6px 0 18px; }
  .tw-car-dots span {
    width: 7px; height: 7px; border-radius: 999px; background: rgba(148, 163, 184, .35);
    transition: transform .25s ease, background .25s ease;
  }
  .tw-car-dots span.on { background: rgb(var(--c1l, 103, 232, 249)); transform: scale(1.45); }
  .tw-car-hint {
    display: block; margin: -2px 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #94a3b8; text-align: right;
  }
}
@media (min-width: 641px) { .tw-car-dots, .tw-car-hint { display: none; } }

/* ---------- 3) Sommario fisso in alto (solo telefono) ---------- */
.tw-tocbar { display: none; }
@media (max-width: 760px) {
  .tw-tocbar {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 9997;
    padding: 8px 10px calc(8px); background: rgba(2, 6, 23, .94);
    border-bottom: 1px solid rgba(var(--c1, 34, 211, 238), .35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    transform: translateY(-110%); transition: transform .28s ease;
  }
  .tw-tocbar.is-on { transform: none; }
  .tw-tocbar-row {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tw-tocbar-row::-webkit-scrollbar { display: none; }
  .tw-tocbar a {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 13px;
    border-radius: 999px; font-size: .84rem; font-weight: 700; line-height: 1.2; text-decoration: none;
    white-space: nowrap; color: #cbd5e1; background: rgba(148, 163, 184, .10); border: 1px solid rgba(148, 163, 184, .22);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .tw-tocbar a.on {
    color: #0b1220; background: linear-gradient(135deg, rgb(var(--c1l, 103, 232, 249)), rgb(var(--c2l, 196, 181, 253)));
    border-color: transparent;
  }
  .tw-tocbar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  /* i titoli raggiunti dal sommario non finiscono sotto la barra */
  [id^="tw-sez-"], #apparecchiature-medicali, #macchinari-palestra-fitness, #strumenti-laboratorio,
  #macchinari-speciali-industriali, #faq, #contatto-apparecchiature, #zone-vicine { scroll-margin-top: 66px !important; }
}

/* ---------- 6) Mini-scelta "Di cosa hai bisogno?" (solo telefono) ---------- */
.tw-scelta { display: none; }
@media (max-width: 760px) {
  .tw-scelta {
    display: block; margin: 30px 0; padding: 20px 16px 16px; border-radius: 22px; text-align: left;
    background: linear-gradient(160deg, rgba(var(--c2, 167, 139, 250), .16), rgba(15, 23, 42, .65) 60%);
    border: 1px solid rgba(var(--c2, 167, 139, 250), .38);
  }
  .tw-scelta-k {
    display: block; margin: 0 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: rgb(var(--c2l, 196, 181, 253));
  }
  .tw-scelta-t { margin: 0 0 4px !important; font-size: 1.32rem !important; font-weight: 900; line-height: 1.2; color: #fff; }
  .tw-scelta-s { margin: 0 0 14px !important; font-size: .9rem !important; color: #cbd5e1 !important; line-height: 1.5; }
  .tw-scelta-g { display: grid; gap: 10px; }
  .tw-scelta a {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border-radius: 16px;
    text-decoration: none !important; color: #fff !important; font-weight: 800; font-size: 1rem; line-height: 1.3;
    background: rgba(2, 6, 23, .55); border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .tw-scelta a:active { transform: scale(.97); }
  .tw-scelta a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  .tw-scelta-i {
    flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
    font-size: 1.3rem; background: rgba(var(--c1, 34, 211, 238), .16);
  }
  .tw-scelta-x { flex: 1 1 auto; min-width: 0; }
  .tw-scelta-x small { display: block; margin-top: 2px; font-size: .8rem; font-weight: 600; color: #94a3b8; }
  .tw-scelta-go { flex: 0 0 auto; color: #25d366; font-size: 1.2rem; }
}