/* ===========================================================================
   Pop-up fotografi — design system Cobalto.
   I colori li prendo dalle variabili del tema quando ci sono, con il valore
   esatto come ripiego: così il giorno che il tema cambia il blu, cambia qui
   dentro da solo, ma il plugin funziona anche da solo.
   =========================================================================== */

.tfs-pf {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
  /* il velo scuro: il pop-up deve staccare dalla home, che è bianca */
  background: rgba(7, 15, 43, .62);
  opacity: 0;
  transition: opacity .22s ease;
  /* Qui c'era un backdrop-filter: blur(3px). Tolto: costringe il browser a
     risfocare tutta la pagina sotto a ogni fotogramma del diaframma, ed è
     la causa più comune degli sfarfallii. Il velo un po' più scuro fa lo
     stesso lavoro e non costa niente. */
}
.tfs-pf[hidden] { display: none !important; }
.tfs-pf.is-aperto { opacity: 1; }
/* In chiusura il velo resta finché le lamelle si muovono e se ne va alla
   fine: sparire subito farebbe sembrare l'animazione un residuo. */
.tfs-pf.is-chiude { transition: opacity .22s ease .04s; }
.tfs-pf.is-chiude:not(.is-aperto) { opacity: 0; }

.tfs-pf__box {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 34px 30px 28px;
  border-radius: 18px;
  background: var(--n-0, #FFFFFF);
  box-shadow: 0 28px 70px rgba(7, 15, 43, .34), 0 2px 8px rgba(7, 15, 43, .12);
}

/* ===========================================================================
   LE LAMELLE
   Stanno SOPRA il riquadro, opache, e si ritirano scoprendolo: il testo si
   scopre man mano, come guardando dentro un obiettivo che si apre.
   Niente clip-path, niente filtri: solo forme SVG di cui cambiano due
   coordinate per fotogramma. È quello che toglie gli sfarfallii.
   =========================================================================== */
.tfs-pf__iride {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* a diaframma fermo e spalancato le lamelle non servono più */
  display: none;
}
.tfs-pf.is-muove .tfs-pf__iride { display: block; }
.tfs-pf__iride svg { display: block; width: 100%; height: 100%; }

/* Il colore delle lamelle è il blu più scuro del design system — lo stesso
   delle fasce scure del sito — e il filo che le separa è l'azzurro degli
   accenti. Anche qui dentro si resta in famiglia. */
.tfs-pf__lamella {
  fill: var(--blu-950, #070F2B);
  stroke: rgba(111, 216, 255, .30);
  stroke-width: 1;
}

/* La riga di luce in alto: è l'unico blocco di colore del riquadro.
   Il resto è bianco, come su tutto il sito. */
.tfs-pf__box::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg,
    var(--blu-600, #1A3FCC), var(--azz-300, #6FD8FF));
}

.tfs-pf__occhiello {
  margin: 0 0 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* n-700 e non il grigio chiaro: su bianco il chiaro reggeva, ma questo
     riquadro può finire sopra qualunque fondo. Misurato a 8,6:1. */
  color: var(--n-700, #3A4354);
}

.tfs-pf__titolo {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(22px, 5.2vw, 27px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--n-950, #0A0D12);
}

.tfs-pf__testo {
  margin: 0 0 24px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--n-800, #232A34);
}

/* ---------------------------------------------------------------------------
   IL MODULO — un campo solo.
   Ogni campo in più, su un pop-up, è gente che se ne va: qui si chiede la
   mail e basta, il resto si chiede rispondendo.
   --------------------------------------------------------------------------- */
.tfs-pf__modulo { display: flex; flex-direction: column; }

.tfs-pf__etichetta {
  display: block;
  margin-bottom: 7px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--n-800, #232A34);
}

.tfs-pf__campo {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 13px 15px;
  margin-bottom: 12px;
  border: 1.5px solid var(--n-300, #C9D4E8);
  border-radius: 11px;
  background: var(--n-0, #FFFFFF);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;            /* 16 e non meno: sotto, iOS zooma da solo */
  line-height: 1.3;
  color: var(--n-950, #0A0D12);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tfs-pf__campo::placeholder { color: var(--n-500, #8A94A6); }
.tfs-pf__campo:focus {
  outline: none;
  border-color: var(--blu-600, #1A3FCC);
  box-shadow: 0 0 0 3px rgba(26, 63, 204, .16);
}
.tfs-pf__campo[aria-invalid="true"] { border-color: #C42B2B; }

.tfs-pf__errore {
  margin: -6px 0 12px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: #A81F1F;             /* 6,1:1 sul bianco: si legge davvero */
}

.tfs-pf__privacy {
  margin: 12px 0 4px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--n-700, #3A4354);
}
.tfs-pf__privacy a { color: inherit; text-underline-offset: 2px; }

.tfs-pf__spunta {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 14px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--n-700, #3A4354);
  cursor: pointer;
}
.tfs-pf__spunta input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--blu-600, #1A3FCC); }

/* Il widget del captcha resta invisibile finché Cloudflare non sospetta
   qualcosa: chi è in buona fede non lo vede mai. */
.tfs-pf__captcha:empty { display: none; }
.tfs-pf__captcha { margin: 4px 0 10px; }

/* A invio riuscito il riquadro diventa la conferma: niente campo, due vie. */
.tfs-pf__box.is-fatto .tfs-pf__modulo { gap: 10px; }

.tfs-pf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;           /* comodo col pollice, non solo col mouse */
  padding: 13px 22px;
  border: 0;
  border-radius: 11px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}
.tfs-pf__btn--primario {
  background: var(--blu-600, #1A3FCC);
  color: #FFFFFF;
}
.tfs-pf__btn--primario:hover { background: var(--blu-700, #1533A8); }
.tfs-pf__btn--primario:active { transform: translateY(1px); }

.tfs-pf__btn[disabled] { opacity: .62; cursor: default; }

.tfs-pf__btn--quieto {
  margin-top: 8px;
  background: transparent;
  color: var(--n-700, #3A4354);
  min-height: 42px;
  font-size: 14px;
}
.tfs-pf__btn--quieto:hover { background: var(--n-100, #F1F4FA); }

.tfs-pf__x {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--n-700, #3A4354);
  cursor: pointer;
  transition: background-color .16s ease;
}
.tfs-pf__x:hover { background: var(--n-100, #F1F4FA); }
.tfs-pf__x svg { width: 17px; height: 17px; display: block; }

/* Il contorno di messa a fuoco deve vedersi: chi gira con la tastiera
   deve sempre sapere dov'è. */
.tfs-pf :focus-visible {
  outline: 3px solid var(--blu-600, #1A3FCC);
  outline-offset: 2px;
}

/* Quando il pop-up è aperto la pagina sotto non deve scorrere. */
html.tfs-pf-bloccato, body.tfs-pf-bloccato { overflow: hidden; }

/* Schermi piccoli: il riquadro resta CENTRATO come sul desktop. Prima si
   appoggiava in basso come un cassetto, ma così il diaframma aveva il centro
   a due terzi dello schermo e si vedeva. Un diaframma decentrato non è un
   diaframma. */
@media (max-width: 480px) {
  .tfs-pf { padding: 16px; }
  .tfs-pf__box {
    width: 100%;
    padding: 30px 22px 24px;
    max-height: calc(100dvh - 32px);
  }
}

/* Chi ha chiesto meno animazioni non le riceve. */
@media (prefers-reduced-motion: reduce) {
  .tfs-pf, .tfs-pf__box, .tfs-pf__btn { transition: none; }
  /* Niente diaframma e nessuna attesa: il JavaScript salta l'animazione,
     qui mi assicuro che le lamelle non compaiano comunque. */
  .tfs-pf__iride { display: none !important; }
}