/* Pagina iniziale (nuovo-flusso.html, pubblicata il 15/10): 3 schede compatte sopra il campo.
   Il link nella pagina ha la versione a mano (?v=AAAAMMGGx): aggiornarla a ogni modifica di questo file. */
/* ===== pagina iniziale: testo breve + 3 schede compatte sopra il campo ===== */
.fn-rassicura { margin: 12px 0 0; font-size: .8125rem; line-height: 1.5; color: rgba(255, 255, 255, .7); }
/* 3 schede "fluttuanti": gradiente pieno del loro colore (chiaro in alto a sinistra, profondo in basso a destra).
   Il tono chiaro è il più acceso che regge il testo bianco (contrasto ≥ 4,6:1); il tono profondo è molto più scuro. */
.fn-schede { list-style: none; margin: clamp(22px, 3vw, 32px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 32px; text-align: left; }
.fn-scheda.pa-azzurro { --s1: #0C77C6; --s2: #0A2F7A; }
.fn-scheda.pa-verde { --s1: #0F844E; --s2: #0A4630; }
.fn-scheda.pa-ambra { --s1: #C05208; --s2: #7A1F0A; }
.fn-scheda {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; padding: 16px 14px 18px; border-radius: 18px;
  background: linear-gradient(135deg, var(--s1), var(--s2)); color: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 50%, #fff); border-top-color: rgba(255, 255, 255, .8);
  /* luce sul bordo superiore + ombra ampia e morbida sotto + alone del colore ai lati */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 36px -6px rgba(0, 0, 0, .6), -14px 0 34px -12px var(--c), 14px 0 34px -12px var(--c);
  transition: transform .35s var(--swift), box-shadow .35s var(--swift);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fn-scheda:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 20px 40px -6px rgba(0, 0, 0, .65), -16px 0 38px -12px var(--c), 16px 0 38px -12px var(--c); }
}
/* icona grande in un riquadro di vetro chiaro, icona bianca (uguale per tutte) */
.fn-icona { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); }
.fn-icona svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* computer: icona e titolo sulla stessa riga, descrizione sotto a tutta larghezza */
.fn-scheda-testo { display: contents; }
.fn-scheda-testo strong { align-self: center; font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: #fff; }
.fn-scheda-testo span { grid-column: 1 / -1; margin-top: 12px; font-size: .875rem; line-height: 1.45; color: #fff; }
/* computer e tablet: le schede possono uscire un po' dalla colonna del testo (760 px), sempre centrate */
@media (min-width: 641px) { .fn-schede { width: min(960px, calc(100vw - 48px)); max-width: none; margin-left: 50%; translate: -50% 0; } }
/* telefono: una sotto l'altra, icona a sinistra e testo a destra, compatte */
@media (max-width: 640px) {
  .pa-inizio { padding-left: 2px; padding-right: 2px; }
  .pa-inizio .eyebrow { margin-bottom: .6rem; }
  .pa-inizio h1 { margin: .2em 0 .35em; }
  .fn-lede { margin-bottom: 0; }
  .fn-schede { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 18px; margin-top: 12px; }
  .fn-scheda { padding: 8px 10px; column-gap: 12px; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 30px -6px rgba(0, 0, 0, .6), -10px 0 26px -10px var(--c), 10px 0 26px -10px var(--c); }
  .fn-icona { width: 46px; height: 46px; border-radius: 12px; } .fn-icona svg { width: 24px; height: 24px; }
  .fn-scheda-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .fn-scheda-testo strong { align-self: auto; }
  .fn-scheda-testo span { grid-column: auto; margin-top: 0; font-size: .9375rem; line-height: 1.35; }
  .fn-form-sito { margin-top: 10px; }
  .fn-form-sito label { margin-bottom: 8px; }
}
/* barra copiata dal sito: tra 1021 e 1180 px le voci non ci stavano (il pulsante "Contattami" sbordava a 1024).
   Solo in questa pagina: voci un po' più vicine. Sotto 1020 px resta l'hamburger del sito. */
@media (min-width: 1021px) and (max-width: 1180px) {
  body.con-sito .nav { gap: 8px; }
  body.con-sito .nav-links > a, body.con-sito .nav-drop > a, body.con-sito .nav-drop > button { padding-inline: 5px; font-size: 12.5px; }
}

/* verifica anti-bot non riuscita dopo due tentativi: messaggio gentile + "Riprova" */
.fn-verifica { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #FFF6E5; border: 1px solid #F0C67A; color: #4A3200; text-align: left; }
.fn-verifica[hidden] { display: none; }
.fn-verifica p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.fn-verifica .bottone { min-height: 44px; }