/* Tasti di Boosted (dal foglio «Tasti di Boosted Main», 21/10/2026), col carattere del sito.
   Il tasto: una pillola di vetro («G1 · Liquid») con un filo di metallo liquido che le gira attorno (tasti.js, Paper Shaders,
   licenza Apache 2.0 in paper-shaders-LICENSE.txt). Basta data-metallo su un <a> o un <button>.
   Senza WebGL 2, o con «riduci movimento», il bordo resta di metallo fermo (la sfumatura qui sotto).
   Ogni tasto tiene la sua luce con una chiave (href o id): due tasti con lo stesso href (i tre «Prenota…»)
   vogliono data-metallo-chiave diversi, se no si rubano la stessa luce e solo uno brilla. */

.metallo {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: transparent; color: #F7F8F8; text-decoration: none; cursor: pointer;
  font: 650 15.5px/1.25 'Montserrat', system-ui, sans-serif; letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
/* the LED: liquid metal that runs only on the 2 px ring around the glass (the mask cuts out the middle) */
.metallo-luce {
  position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; padding: 2px;
  background: linear-gradient(135deg, #fdfdfe 0%, #9a9aa4 9%, #3e3e46 18%, #efe4fa 27%, #f1f1f5 30%, #ffffff 36%, #dfc9f0 39%, #77777f 48%, #2c2c33 57%, #d7d7de 67%, #fbfbfd 75%, #8b8b95 86%, #4a4a52 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.metallo-luce canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; contain: strict; }
/* the body is glass, «G1 · Liquid» of the buttons sheet: clear glass, lilac glass for the main call */
.metallo-corpo {
  position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.12), inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.7),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.45), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.45), inset 0 0 6px 6px rgba(255, 255, 255, 0.03);
}
.cta .metallo-corpo, .metallo-pillola .metallo-corpo {
  background: rgba(201, 169, 233, 0.16);
  box-shadow: inset 0 0 16px rgba(201, 169, 233, 0.35), inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.12), inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.55), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.55), inset 0 0 6px 6px rgba(255, 255, 255, 0.035);
}
.metallo-scritta { position: relative; display: inline-flex; align-items: center; gap: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.metallo:active:not(:disabled) { transform: translateY(1px) scale(0.98); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); }
.metallo:active:not(:disabled) .metallo-corpo { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.metallo:disabled { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) {
  .metallo:hover { color: #fff; }
}
.metallo-onda { position: absolute; z-index: 1; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%); transform: translate(-50%, -50%) scale(0); animation: metallo-onda 0.6s ease-out forwards; }
@keyframes metallo-onda { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; } }

/* the main call to action: «Prenota la tua consulenza gratuita», with the arrow */
.cta { min-height: 58px; padding: 0 10px 0 26px; font-size: 16px; text-align: left; }
.cta .metallo-scritta { gap: 14px; }
.cta__freccia { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(201, 169, 233, 0.16); box-shadow: inset 0 0 0 1px rgba(201, 169, 233, 0.35); }
.cta__freccia svg { width: 18px; height: 18px; fill: none; stroke: #F7F8F8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.cta:active .cta__freccia svg { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .cta:hover .cta__freccia svg { transform: translateX(3px); } }
.metallo.piccolo { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* the switch: a metal pill slides under the chosen option (a group of buttons with aria-pressed) */
.segmenti { position: relative; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.segmenti button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: #A3A9B3; font: 650 14.5px/1 'Montserrat', system-ui, sans-serif;
}
.segmenti button[aria-pressed="true"] { color: #fff; background: rgba(201, 169, 233, 0.18); }
.segmenti.metallo-interruttore { isolation: isolate; }
.metallo-pillola { position: absolute; z-index: 0; border-radius: 999px; isolation: isolate; overflow: hidden; pointer-events: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); }
.metallo-pillola[hidden] { display: none; }
.metallo-interruttore.pronta .metallo-pillola { transition: left 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), width 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); }
.metallo-interruttore > button { position: relative; z-index: 1; }
.segmenti.metallo-interruttore button[aria-pressed="true"] { background: transparent; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .metallo { transition: none; } .metallo-onda { display: none; }
  .metallo-interruttore.pronta .metallo-pillola { transition: none; }
}