/* ═══════════════════════════════════════
   PULSANTE CONTATTI FLOTTANTE
   Compare quando la hero e' scorsa via e
   accompagna la lettura fino al footer,
   dove si ritira per non coprirlo.
   Solo in homepage: e' la pagina lunga, ed
   e' l'unica che carica questo foglio.
═══════════════════════════════════════ */

.cta-contatti {
  position: fixed;
  right: 40px;                 /* stesso filo del contenuto delle sezioni */
  bottom: 40px;
  z-index: 400;                /* sotto il menu mobile (410) e l'hamburger (420):
                                  a menu aperto resta coperto, come dev'essere */

  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--t-pulsante);
  font-weight: var(--peso-pulsante);
  letter-spacing: var(--ls-pulsante);
  text-transform: uppercase;
  text-decoration: none;

  /* Pieno, non contornato come il "discover" della hero: qui galleggia su
     fondi diversi — grigio, verde, foto, footer scuro — e solo un pieno
     resta leggibile su tutti. Nero con la scritta verde: e' lo stesso
     accostamento dello stato attivo del "discover" e dei link del footer. */
  color: var(--accent);
  background: var(--dark);
  padding: 15px 34px;
  border: 1px solid var(--dark);
  cursor: pointer;

  /* Stato di riposo: fuori campo e non raggiungibile nemmeno col tasto Tab.
     visibility, non solo opacity: con la sola opacity resterebbe cliccabile
     e nell'ordine di tabulazione pur essendo invisibile. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity .35s cubic-bezier(0.22, 1, 0.36, 1),
    transform .35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility .35s,
    background .25s, color .25s, border-color .25s;
}

.cta-contatti.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Con un pannello aperto sopra (scheda attivazione o video) il pulsante
   resta sotto per z-index, ma sarebbe ancora raggiungibile col tasto Tab:
   un bersaglio invisibile sotto una finestra a tutto schermo. Qui sparisce
   davvero. Basta il CSS: nel body entrambi i pannelli precedono il
   pulsante, quindi il selettore di fratelli li vede. */
#detailPanel.is-open ~ .cta-contatti,
#videoOverlay.is-open ~ .cta-contatti {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
}

/* Al passaggio del mouse si ribalta: verde pieno, scritta nera */
.cta-contatti:hover,
.cta-contatti:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
}

@media (max-width: 768px) {
  .cta-contatti {
    right: 24px;
    bottom: 24px;
    padding: 13px 26px;
  }
}

/* Chi ha chiesto meno animazioni: compare e sparisce senza scivolare */
@media (prefers-reduced-motion: reduce) {
  .cta-contatti {
    transform: none;
    transition: opacity .2s, visibility .2s;
  }
  .cta-contatti.is-visible { transform: none; }
}