/* Blocco 19 — Menu fluttuante a pillola: compare quando la testata esce dallo schermo, segna la sezione in cui sei,
   si apre a tutto schermo. Solo da 821 px in su: su telefono c'è già la barra Chiama/Indicazioni. */
.pillola { position: fixed; top: 16px; left: 50%; z-index: 70; display: none;
  transform: translate(-50%, -140%); transition: transform .45s cubic-bezier(.32,.72,0,1); }
@media (min-width: 821px) { .pillola { display: block; } }
.pillola.visibile { transform: translate(-50%, 0); }
.pillola-barra { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px;
  background: var(--pillola-fondo, color-mix(in srgb, var(--notte, #16181c) 88%, transparent));
  color: var(--pillola-testo, #fff); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); }
.pillola a { position: relative; z-index: 1; display: block; padding: 9px 16px; border-radius: 999px; color: inherit;
  text-decoration: none; font: 500 14px/1 var(--sans, system-ui); white-space: nowrap; transition: color .2s ease; }
.pillola a.cta { background: var(--accent, #2F5D8A); color: #fff; margin-left: 6px; }
.pillola .segno { position: absolute; z-index: 0; top: 6px; height: calc(100% - 12px); border-radius: 999px;
  background: rgba(255,255,255,.14); transition: left .35s cubic-bezier(.23,1,.32,1), width .35s cubic-bezier(.23,1,.32,1), opacity .2s; opacity: 0; }
.pillola .segno.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .pillola a:not(.cta):hover { color: var(--pillola-accento, #fff); } }
.pillola a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .pillola, .pillola .segno { transition: none; } }
/* quando la pillola è visibile la testata fissa della demo si toglie di mezzo (niente due menu) */
@media (min-width: 821px) {
  .testata { transition: transform .4s cubic-bezier(.32,.72,0,1), background .35s ease; }
  .pillola-attiva .testata { transform: translateY(-110%); }
}