/* Pulsante "Richiedi un preventivo" (.pill) dell'intestazione — scelta del 26 luglio 2026,
   variante 04 "scintilla di luce": una lama verde acqua lo attraversa ogni 3,2 secondi.

   Il testo del pulsante non e' avvolto in nessun elemento e l'intestazione e' duplicata
   in tutte le pagine: per non toccare il markup la lama e' uno pseudo-elemento a
   z-index negativo, confinato dentro al pulsante da isolation:isolate. Cosi' passa
   sotto la scritta e sopra lo sfondo, e non intercetta il clic. */
/* display:inline-block e' indispensabile, non decorativo: su un elemento in linea
   overflow:hidden non ritaglia nulla e la lama esce dal bordo arrotondato.
   Nell'intestazione il pulsante e' figlio di un contenitore flex e viene gia'
   trattato come blocco; altrove no. */
.pill{display:inline-block;position:relative;overflow:hidden;isolation:isolate}
.pill::after{
  content:"";position:absolute;top:0;bottom:0;left:-32%;width:32%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(22,201,176,.55),transparent);
  animation:pillSpark 3.2s linear infinite;
}
@keyframes pillSpark{from{left:-32%}to{left:112%}}
.pill:hover::after{animation-duration:1.5s}
/* Stessa lama sul pulsante del riquadro finale "Raccontaci il tuo processo"
   (home e pagina prodotti, EN + IT). Li' il pulsante ha gia' un alone teal:
   la lama e' piu' tenue per non impastarsi con quello. */
.cta .btn{display:inline-block;position:relative;overflow:hidden;isolation:isolate;vertical-align:middle}
.cta .btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-32%;width:32%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(22,201,176,.42),transparent);
  animation:pillSpark 3.2s linear infinite;
}
.cta .btn:hover::after{animation-duration:1.5s}

@media (prefers-reduced-motion: reduce){
  .pill::after,.cta .btn::after{animation:none;opacity:0}
}

/* ---- BERSAGLI PER IL DITO (telefono e tablet) ----
   Ogni comando arriva a 44px e ha una zona morta attorno: sotto quella misura,
   o senza stacco fra un bersaglio e l'altro, il tocco finisce sull'elemento
   sbagliato. Misure prese davvero a 375px, prima e dopo. */
@media(max-width:880px){

  /* intestazione: il tasto del menu era 36x28 */
  header button.burger{min-width:44px;min-height:44px;padding:10px 8px;
    align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}

  /* menu a tendina: la x stava sopra la voce "Home"; le sottovoci erano alte 20px */
  nav.drawer{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  nav.drawer .x{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
    top:14px;right:16px;border:1px solid var(--line);border-radius:50%;
    background:rgba(10,22,20,.75);font-size:26px;z-index:2}
  .drawer>a{margin:3px 0}
  .drawer .sub>div{display:flex;flex-wrap:wrap;gap:8px}
  .drawer .sub a{display:inline-flex;align-items:center;min-height:44px;
    padding:0 14px;margin-right:0;border:1px solid var(--line);border-radius:40px}

  /* piede: e-mail e telefono erano alti 26px e distanti 4px l'uno dall'altro */
  footer .fcols .fcol a{display:flex;align-items:center;min-height:44px;padding:0;
    margin-top:8px;border-top:1px solid var(--line)}
  footer .fcols .fcol a:first-of-type{margin-top:4px;border-top:0}
  footer .fbrand .word{display:inline-block;padding:7px 0}

  /* piede: icone social, erano 21x29 senza contorno */
  footer .fcols .fsocial{gap:10px;margin-top:14px}
  footer .fcols .fsocial a{width:44px;height:44px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:12px}

  /* piede legale: andando a capo, Privacy e Cookie si toccavano */
  .fmeta{align-items:flex-start}
  .fmeta>span+span{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px}
  .fmeta>span+span a{display:inline-flex;align-items:center;min-height:44px}

  /* pagina contatti: righe da 26px senza separazione */
  .info-panel .row{align-items:center;margin:0;padding:5px 0;border-top:1px solid var(--line)}
  .info-panel .pin + .row{border-top:0;padding-top:0}
  .info-panel .row a{display:flex;align-items:center;min-height:44px;flex:1}
  .info-panel .cta2{width:100%;max-width:340px;min-height:44px;margin-top:22px;padding:0 16px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:40px;background:rgba(22,201,176,.06)}

  /* home: "Tutti i prodotti" era 174x26 */
  .sec-top .vall{display:inline-flex;min-height:44px;padding:0 18px;align-items:center;
    justify-content:center;border:1px solid var(--line);border-radius:40px}

  /* caselle di consenso: erano 13x13 (misura predefinita) e 18x18 */
  .consent input[type=checkbox],
  .qform .consent input[type=checkbox],
  .soon-consent input[type=checkbox],
  .dlg-consent input[type=checkbox]{
    width:24px;height:24px;flex:0 0 24px;margin-top:1px;accent-color:var(--teal)}

  /* visore delle immagini: la x era 21x40 */
  .lb .lb-x{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
    top:14px;right:14px;border:1px solid rgba(237,232,221,.28);border-radius:50%;
    background:rgba(10,22,20,.85);font-size:28px;line-height:1;z-index:3}

  /* comandi in linea che restavano alti 15-20px: il collegamento alla curva
     fac-simile, "Scrivici" e la briciola di navigazione in cima alle schede */
  .plate-list a.pdf,.crumb a{display:inline-flex;align-items:center;min-height:34px}

  /* i due collegamenti alle informative dentro la riga del consenso: erano alti 16px,
     bersaglio troppo piccolo per un dito. Sono due parole, quindi restano in linea nel
     testo senza spezzarsi male; cresce solo l'altezza della riga che li ospita. */
  .consent label a,.soon-consent a,.dlg-consent a{
    display:inline-flex;align-items:center;min-height:34px}
  .pcta a,.info-panel .row a.mail{min-height:44px}
  /* l'intestazione appiccicata e' alta 85px e copriva il punto di arrivo dei link interni */
  /* ATTENZIONE: qui si decide anche dove atterra «Richiedi un preventivo» su
     telefono. Sotto gli 880px fz-app.js manda il salto sul MODULO invece che
     sulla sezione #quote (l'introduzione e' lunga 620px e lasciava il primo
     campo fuori schermo); l'altezza dello stacco resta questa, non e' scritta
     nel codice. Se si toglie questa riga, il modulo torna sotto l'intestazione.
     NON aggiungere anche uno scroll-margin-top al modulo: i due si sommano. */
  html{scroll-padding-top:100px}
  .quote{scroll-margin-top:0}
}

/* Schermi tattili: niente sollevamenti che restano accesi dopo il tocco
   (su un telefono il "mouseleave" non arriva mai e l'effetto resta impresso) */
@media(hover:none){
  .card:hover,.thumb:hover,.btn:hover,.pgal .imgcard:hover,
  .conncard:hover,.match:hover,.tile:hover{transform:none}
  .card:hover .imw img{transform:none}
  .btn-ghost:hover .ar,.card:hover .go .ar{transform:none}
}