/* ==========================================================================
   Pezzanera Office — foglio di stile

   ORGANIZZAZIONE
   1. Variabili      <- se devi cambiare qualcosa, quasi sempre e' qui
   2. Reset
   3. Layout
   4. Componenti
   5. Animazioni
   6. Widget assistenza
   7. Responsive
   8. Stampa
   ========================================================================== */


/* ==========================================================================
   1. VARIABILI
   ========================================================================== */

:root {
  /* ---- Colori del marchio, campionati dal logo ---- */
  --blu:          #004799;
  --blu-scuro:    #003469;
  --blu-chiaro:   #1565c9;
  --oro:          #e0c176;
  --oro-scuro:    #c9a555;
  --azzurro:      #d3e2f4;

  /* ---- Neutri ---- */
  --testo:        #111a27;
  --testo-soft:   #56637a;
  --bordo:        #e4e8ee;
  --bordo-forte:  #cfd7e2;
  --fondo:        #ffffff;
  --fondo-alt:    #f6f8fb;

  /* ---- Misure ----
     Il sito e' tarato per stare bene al 100% di zoom.
     Se ti serve tutto piu' grande o piu' piccolo, tocca solo questi due
     numeri: comandano l'intera pagina. */
  --testo-base:   15px;
  --larghezza:    1320px;

  /* ---- Scala tipografica: UNA sola, per tutte le pagine ---- */
  --fs-h1:      clamp(24px, 1.4rem + 1.2vw, 34px);
  --fs-h2:      clamp(20px, 1.15rem + .7vw, 26px);
  --fs-intro:   15.5px;

  --raggio:       14px;
  --raggio-p:     9px;
  --spazio-sez:   56px;

  --ombra:        0 1px 2px rgba(17, 26, 39, .05), 0 6px 20px rgba(17, 26, 39, .045);
  --ombra-alta:   0 4px 10px rgba(0, 71, 153, .10), 0 18px 42px rgba(0, 71, 153, .10);
  --transizione:  .25s cubic-bezier(.22, .61, .36, 1);
  --morbida:      cubic-bezier(.22, .61, .36, 1);
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--fondo);
  scroll-padding-top: 76px;
  /* Riserva sempre lo spazio della barra di scorrimento: evita il
     saltello orizzontale passando tra pagine lunghe e corte */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Caratteri di sistema: si caricano all'istante e non chiamano server
     esterni, quindi nessun problema di privacy come con Google Fonts. */
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--testo-base);
  line-height: 1.62;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blu); text-decoration: none; transition: color var(--transizione); }
a:hover { color: var(--blu-chiaro); text-decoration: underline; }

h1, h2, h3, h4 {
  line-height: 1.16;
  margin: 0 0 .55em;
  font-weight: 700;
  letter-spacing: -.02em;
}

p  { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 3px; border-radius: 3px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--blu); color: #fff; padding: 10px 18px; z-index: 999; }
.skip-link:focus { left: 0; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: 28px;
}

.sezione          { padding-block: var(--spazio-sez); }
.sezione--alt     { background: var(--fondo-alt); }
.sezione--stretta { padding-block: 36px; }

.testo-centro { text-align: center; }

.occhiello {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  margin-bottom: 10px;
}

.intestazione-sezione { max-width: 620px; margin: 0 auto 36px; text-align: center; }
.intestazione-sezione h2 { font-size: var(--fs-h2); }
.intestazione-sezione p  { color: var(--testo-soft); margin-bottom: 0; }


/* ==========================================================================
   4. COMPONENTI
   ========================================================================== */

/* ---- Bottoni ---- */

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione), transform var(--transizione),
              box-shadow var(--transizione);
}
.btn:hover  { text-decoration: none; transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }

.btn--primario { background: var(--blu); color: #fff; box-shadow: 0 2px 8px rgba(0,71,153,.22); }
.btn--primario:hover { background: var(--blu-scuro); color: #fff; box-shadow: 0 4px 14px rgba(0,71,153,.3); }

.btn--contorno { background: transparent; color: var(--blu); border-color: var(--bordo-forte); }
.btn--contorno:hover { background: var(--blu); color: #fff; border-color: var(--blu); }

.btn--chiaro { background: #fff; color: var(--blu); }
.btn--chiaro:hover { background: var(--azzurro); color: var(--blu-scuro); }

.btn--oro { background: var(--oro); color: #3d2f10; }
.btn--oro:hover { background: var(--oro-scuro); color: #3d2f10; }


/* ---- Barra superiore ---- */

.topbar { background: var(--blu-scuro); color: #b9cde6; font-size: 12.5px; }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 4px 20px; min-height: 34px;
}
.topbar a { color: #fff; }
.topbar a:hover { color: var(--oro); text-decoration: none; }
.topbar .sep { opacity: .3; }


/* ---- Header ---- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 1px 10px rgba(17, 26, 39, .05);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 60px;
}

.logo img { max-height: 38px; width: auto; }
.logo:hover { text-decoration: none; }

.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  position: relative; display: block;
  padding: 8px 12px;
  border-radius: var(--raggio-p);
  color: var(--testo);
  font-weight: 500; font-size: 14px;
  transition: color var(--transizione), background var(--transizione);
}
.nav a:hover { background: var(--fondo-alt); color: var(--blu); text-decoration: none; }

/* Filo dorato sotto la voce della pagina corrente */
.nav a.attivo { color: var(--blu); font-weight: 600; }
.nav a.attivo::after {
  content: ""; position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--oro);
}

.nav-toggle {
  display: none; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-p); padding: 8px 11px;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--testo);
}
.nav-toggle__barre { display: block; width: 17px; height: 2px; background: var(--testo); position: relative; border-radius: 2px; }
.nav-toggle__barre::before,
.nav-toggle__barre::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px;
  background: var(--testo); border-radius: 2px;
  transition: transform var(--transizione), top var(--transizione);
}
.nav-toggle__barre::before { top: -5.5px; }
.nav-toggle__barre::after  { top: 5.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barre { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__barre::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__barre::after  { top: 0; transform: rotate(-45deg); }


/* ---- Hero della home ---- */

.hero {
  position: relative; display: flex; align-items: center;
  min-height: 420px; padding: 56px 0;
  background-color: var(--blu);
  background-image: url("../img/hero-sfondo.jpg");
  background-size: cover; background-position: center;
  color: #fff; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,52,105,.93) 0%, rgba(0,71,153,.82) 100%);
}
.hero > .container { position: relative; z-index: 1; }

.hero__griglia { display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 44px; }

.hero h1 { color: #fff; font-size: var(--fs-h1); margin-bottom: .45em; }
.hero__sottotitolo {
  color: var(--azzurro);
  font-size: var(--fs-intro);
  margin-bottom: 1.6em; max-width: 56ch;
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: 11px; }

.hero__badge {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero__badge img {
  width: 290px; max-width: 100%;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .25));
}
.hero__badge p {
  margin: 14px 0 0;
  color: var(--oro);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
}


/* ---- Hero delle pagine interne ---- */

.hero-pagina {
  background: linear-gradient(120deg, var(--blu-scuro) 0%, var(--blu) 100%);
  color: #fff; padding: 56px 0;
}
.hero-pagina h1 { color: #fff; font-size: var(--fs-h1); }
.hero-pagina p  { color: var(--azzurro); font-size: var(--fs-intro); max-width: 60ch; margin-bottom: 0; }
.hero-pagina .occhiello { color: var(--oro); }

.breadcrumb { font-size: 12.5px; color: #9dbbdd; margin-bottom: 14px; }
.breadcrumb a { color: #fff; }
.breadcrumb a:hover { color: var(--oro); }
.breadcrumb span { opacity: .5; margin-inline: 7px; }


/* ---- Card ---- */

.griglia-servizi { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 18px; }

.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 24px;
  box-shadow: var(--ombra);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); border-color: #c9d9ef; }

.card__icona { width: 38px; height: 38px; margin-bottom: 14px; color: var(--blu); }
.card__icona svg { width: 100%; height: 100%; }

.card h2, .card h3 { color: var(--blu); font-size: clamp(16.5px, 1rem + .25vw, 19px); margin-bottom: .45em; }
.card p { color: var(--testo-soft); font-size: 14px; }
.card .btn { margin-top: auto; align-self: flex-start; }


/* ---- Colonne e liste ---- */

.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }

.elenco-check { list-style: none; padding: 0; margin: 0; }
.elenco-check li {
  position: relative; padding-left: 29px; margin-bottom: 12px;
  color: var(--testo-soft); font-size: 14px;
}
.elenco-check li strong { color: var(--testo); display: block; font-size: 14.5px; }
.elenco-check li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.riquadro {
  background: var(--fondo-alt);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  padding: 22px;
}
.riquadro h3 { font-size: 16px; margin-bottom: .5em; }
.riquadro p  { font-size: 14px; color: var(--testo-soft); }
.riquadro p:last-child { margin-bottom: 0; }


/* ---- Fascia di richiamo ---- */

.cta {
  background: linear-gradient(120deg, var(--blu-scuro) 0%, var(--blu) 100%);
  color: #fff; border-radius: var(--raggio);
  padding: 38px 32px; text-align: center;
  position: relative; overflow: hidden;
}
.cta::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--oro); }
.cta h2 { color: #fff; font-size: var(--fs-h2); }
.cta p  { color: var(--azzurro); max-width: 54ch; margin-inline: auto; font-size: 14.5px; }
.cta__azioni { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 6px; }


/* ---- Footer ---- */

.site-footer { background: #0a1826; color: #93a7bf; padding: 44px 0 0; font-size: 13.5px; }
.site-footer__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; padding-bottom: 32px; }
.site-footer h3 {
  color: #fff; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 1.1em;
}
.site-footer a { color: #c2d3e6; }
.site-footer a:hover { color: var(--oro); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55em; }
.site-footer p { line-height: 1.65; }
.site-footer__logo img { max-height: 38px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }

.site-footer__fesr {
  margin: 0 0 6px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11.5px;
  color: #6f8098;
  text-align: center;
  line-height: 1.5;
}
.site-footer__fesr a { color: #8fa3bd; }
.site-footer__fesr a:hover { color: var(--oro); }

/* La riga finale respira di piu' e sta alla larga dalla bolla della chat:
   i link stanno a sinistra, dove nessun elemento fisso li copre. */
.site-footer__basso {
  margin-top: 14px;
  padding-block: 18px 26px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: space-between; align-items: center;
  font-size: 12.5px;
}
.site-footer__legale {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  margin-left: auto;               /* sempre a destra, anche quando va a capo */
}
.site-footer__legale a {
  color: #9fb2cb;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: 4px;            /* area di tocco piu' comoda */
}
.site-footer__legale a:hover { color: var(--oro); }
.site-footer__legale .sep { opacity: .4; }
.site-footer__luogo { color: #6f8098; }


/* ==========================================================================
   5. ANIMAZIONI
   ========================================================================== */

/* Passaggio tra pagine: dissolvenza manuale identica su TUTTI i
   browser (uscita morbida al click, entrata morbida al caricamento).
   Gestita da main.js. Niente transizioni native: si comportavano in
   modo diverso da browser a browser. */

@keyframes pzn-entrata { from { opacity: 0; } to { opacity: 1; } }
@keyframes pzn-sale    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Comparsa morbida all'apertura della pagina */
/* Dissolvenza di tutta la pagina all'apertura.
   Per toglierla: cancella questa riga. */
body { animation: pzn-entra-morbido .9s cubic-bezier(.22, .61, .36, 1) both; }

/* Il "velo": al cambio pagina, la pagina vecchia resta visibile sopra
   quella nuova e le sfuma sopra. Dissolvenza incrociata vera, senza
   mai passare dal bianco. Gestito da main.js. */
.pzn-velo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--fondo);
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .85s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.pzn-velo--via { opacity: 0; }

/* Entrata della pagina nuova.
   ATTENZIONE: l'animazione del BODY non deve MAI contenere un
   transform. Un transform sul body lo rende "contenitore di
   riferimento" e gli elementi con position:fixed (chat, torna su)
   smettono di seguire lo scorrimento. Il movimento va messo su
   <main>, che non contiene elementi fissi. */
@keyframes pzn-entra-morbido {
  from { opacity: .5; }
  to   { opacity: 1; }
}
@keyframes pzn-main-sale {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
main { animation: pzn-main-sale .75s cubic-bezier(.22, .61, .36, 1) both; }

.hero__griglia > * { animation: pzn-sale .8s var(--morbida) both; }
.hero__griglia > *:nth-child(2) { animation-delay: .1s; }

/* Nessun effetto legato allo scorrimento: durante lo scroll
   non si muove e non compare niente. La pagina e' ferma, scivola solo. */


/* ==========================================================================
   6. WIDGET ASSISTENZA
   ========================================================================== */

/* La bolla e il pannello condividono lo stesso asse verticale:
   il pannello si apre esattamente sopra la bolla, non spostato. */
.pzn-chat {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 200;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ---- Bollicina ---- */

.pzn-chat__bolla {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 27px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--blu-chiaro) 0%, var(--blu) 55%);
  color: #fff;
  font: inherit; font-size: 16px; font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0, 71, 153, .35), 0 0 0 0 rgba(0, 71, 153, .25);
  transition: background var(--transizione), transform var(--transizione), box-shadow var(--transizione);
  /* Un richiamo gentile poco dopo il caricamento, una volta sola */
  animation: pzn-richiamo 2.4s 1.4s 1 var(--morbida);
}
.pzn-chat__bolla:hover { background: var(--blu-scuro); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 26px rgba(0, 71, 153, .42); }
.pzn-chat__bolla svg { width: 23px; height: 23px; flex: none; }
@keyframes pzn-richiamo {
  0%, 100% { transform: none; }
  12%      { transform: scale(1.05); }
  24%      { transform: none; }
  36%      { transform: scale(1.03); }
  48%      { transform: none; }
}
.pzn-chat--aperta .pzn-chat__bolla { display: none; }

/* ---- Pannello ---- */

/* Riga indispensabile: senza, "display: flex" qui sotto vince
   sull'attributo hidden e il pannello non si chiude piu'. */
.pzn-chat__pannello[hidden] { display: none; }

.pzn-chat__pannello {
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 90px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: 0 14px 54px rgba(17, 26, 39, .2);
  overflow: hidden;
  animation: pzn-apri .34s var(--morbida) both;
  transform-origin: bottom right;
}
@keyframes pzn-apri { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.pzn-chat__testata {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 20px; background: var(--blu); color: #fff; flex: none;
  border-bottom: 2px solid var(--oro);
}
.pzn-chat__titolo      { margin: 0; font-size: 16px; font-weight: 700; }
.pzn-chat__sottotitolo { margin: 4px 0 0; font-size: 13px; color: var(--azzurro); line-height: 1.45; }

.pzn-chat__chiudi {
  background: none; border: 0; color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 2px; opacity: .75; flex: none;
  transition: opacity var(--transizione);
}
.pzn-chat__chiudi:hover { opacity: 1; }

.pzn-chat__corpo { padding: 20px; font-size: 14px; overflow-y: auto; }

/* ---- Menu a pulsanti ---- */

.pzn-chat__scelte { display: flex; flex-direction: column; gap: 10px; }

.pzn-chat__scelta {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--bordo); border-radius: var(--raggio-p);
  background: #fff; font: inherit; font-size: 14px; color: var(--testo);
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione),
              color var(--transizione), transform var(--transizione);
}
.pzn-chat__scelta:hover { border-color: var(--blu); background: var(--fondo-alt); color: var(--blu); transform: translateX(2px); }
.pzn-chat__scelta svg { width: 17px; height: 17px; flex: none; color: var(--blu); }

.pzn-chat__indietro {
  margin-top: 14px; background: none; border: 0; padding: 3px 0;
  font: inherit; font-size: 13px; color: var(--testo-soft);
  cursor: pointer; transition: color var(--transizione);
}
.pzn-chat__indietro:hover { color: var(--blu); }

/* ---- Recapiti ---- */

.pzn-chat__recapiti p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; }
.pzn-chat__recapiti strong {
  display: block; color: var(--oro-scuro); font-size: 11px;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 3px;
}

.pzn-chat__minore {
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--testo-soft);
}
.pzn-chat__minore:hover { color: var(--blu); }

/* ---- Modulo: progettato per stare tutto in vista, senza scorrere ---- */

.pzn-chat__intro { margin: 0 0 16px; color: var(--testo-soft); font-size: 13.5px; line-height: 1.55; }

.pzn-chat__modulo label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--testo); }

.pzn-chat__modulo input,
.pzn-chat__modulo textarea {
  width: 100%; padding: 11px 13px; margin-bottom: 14px;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-p);
  font: inherit; font-size: 14px; color: var(--testo); background: #fff;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.pzn-chat__modulo textarea { resize: vertical; min-height: 92px; }
.pzn-chat__modulo input:focus,
.pzn-chat__modulo textarea:focus {
  outline: 0; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(0, 71, 153, .1);
}

.pzn-chat__invia {
  width: 100%; padding: 11px; border: 0; border-radius: 999px;
  background: var(--blu); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background var(--transizione);
}
.pzn-chat__invia:hover:not(:disabled) { background: var(--blu-scuro); }
.pzn-chat__invia:disabled { opacity: .6; cursor: default; }

.pzn-chat__alternativa { margin: 9px 0 0; text-align: center; font-size: 12px; color: var(--testo-soft); }
.pzn-chat__privacy     { margin: 9px 0 0; font-size: 11px; color: var(--testo-soft); line-height: 1.4; }
.pzn-chat__esito       { margin: 9px 0 0; font-size: 13px; }
.pzn-chat__esito--errore { color: #a32d2d; }

.pzn-chat__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Conferma ---- */

.pzn-chat__fatto { text-align: center; padding: 16px 0; }
.pzn-chat__spunta {
  width: 46px; height: 46px; margin: 0 auto 13px; border-radius: 50%;
  background: #e1f5ee; color: #0f6e56; font-size: 23px;
  display: flex; align-items: center; justify-content: center;
  animation: pzn-spunta .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes pzn-spunta { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.pzn-chat__fatto p { margin: 0; color: var(--testo-soft); font-size: 14px; }

/* ---- Conversazione ---- */

.pzn-chat__corpo--ai { display: flex; flex-direction: column; padding: 16px 18px 18px; }

.pzn-chat__messaggi {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 3px 16px; height: 330px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.pzn-msg {
  /* Le bolle sono centrate nel pannello, con margini uguali ai due
     lati: e' il colore a distinguere chi parla, non la posizione. */
  align-self: center;
  width: 100%;
  max-width: 94%;
  padding: 13px 16px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
  animation: pzn-msg-in .38s var(--morbida) both;
}
@keyframes pzn-msg-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.pzn-msg--bot    { background: var(--fondo-alt); color: var(--testo); border: 1px solid var(--bordo); }
.pzn-msg--utente { background: var(--blu); color: #fff; border: 1px solid var(--blu); }
.pzn-msg--errore { background: #fcebeb; color: #a32d2d; }

/* Puntini animati durante l'attesa */
.pzn-msg--attesa { display: flex; gap: 5px; align-items: center; justify-content: center; padding: 14px; }
.pzn-msg--attesa i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--testo-soft);
  animation: pzn-punti 1.2s infinite ease-in-out both;
}
.pzn-msg--attesa i:nth-child(2) { animation-delay: .16s; }
.pzn-msg--attesa i:nth-child(3) { animation-delay: .32s; }
@keyframes pzn-punti {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* Pastiglie di scorciatoia */
.pzn-chip-riga { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.pzn-chip {
  padding: 8px 14px; border: 1px solid var(--bordo-forte); border-radius: 999px;
  background: #fff; font: inherit; font-size: 13px; color: var(--blu);
  cursor: pointer;
  transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}
.pzn-chip:hover { background: var(--blu); border-color: var(--blu); color: #fff; }
.pzn-chip--oro { border-color: var(--oro); color: var(--oro-scuro); font-weight: 600; }
/* Il pulsante proposto dall'assistente segue le bolle: centrato */
.pzn-chat__messaggi .pzn-chip { align-self: center !important; }
.pzn-chip--oro:hover { background: var(--oro); border-color: var(--oro); color: #3d2f10; }

.pzn-chat__avviso { margin: 0 0 12px; font-size: 11px; line-height: 1.4; color: var(--testo-soft); text-align: center; }

.pzn-chat__riga { display: flex; gap: 9px; }
.pzn-chat__riga input {
  flex: 1; min-width: 0; padding: 12px 16px;
  border: 1px solid var(--bordo-forte); border-radius: 999px;
  font: inherit; font-size: 14px; color: var(--testo);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.pzn-chat__riga input:focus { outline: 0; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(0, 71, 153, .1); }
.pzn-chat__riga button {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--blu); color: #fff; font-size: 15px; cursor: pointer;
  transition: background var(--transizione), transform var(--transizione);
}
.pzn-chat__riga button:hover { background: var(--blu-scuro); transform: scale(1.05); }

.pzn-chat__nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --spazio-sez: 48px; }
  .due-colonne { gap: 30px; }
}

@media (max-width: 900px) {
  .hero__griglia { grid-template-columns: 1fr; text-align: center; }
  .hero__sottotitolo { margin-inline: auto; }
  .hero__azioni { justify-content: center; }
  .hero__badge { order: -1; }
  .hero__badge img { width: 190px; }
  .due-colonne { grid-template-columns: 1fr; gap: 26px; }
  .site-footer__griglia { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* Con sei voci il menu si comprime presto: hamburger gia' dai tablet */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra); padding: 6px 22px 14px;
    max-height: calc(100vh - 120px); overflow-y: auto;
    animation: pzn-sale .3s var(--morbida) both;
  }
  .nav.aperto { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a {
    padding: 13px 4px; border-bottom: 1px solid var(--bordo);
    border-radius: 0; font-size: 15px;
    min-height: 46px; display: flex; align-items: center;
  }
  .nav li:last-child a { border-bottom: 0; }
  .nav a.attivo::after { left: 4px; right: auto; width: 22px; bottom: 8px; }

  .site-header__inner { position: relative; min-height: 56px; }
}

@media (max-width: 780px) {
  :root { --spazio-sez: 40px; }
  .hero { min-height: 0; padding: 36px 0; }
  .hero-pagina { padding: 40px 0 34px; }
  .card { padding: 20px; }
  .cta { padding: 30px 20px; }
}

@media (max-width: 640px) {
  .due-colonne { gap: 22px; }
  .fascia-partner { gap: 18px; padding: 20px 22px; }
}

@media (max-width: 560px) {
  :root { --spazio-sez: 34px; --testo-base: 15.5px; --raggio: 12px; }

  /* iPhone: sotto i 16px il campo attiva lo zoom automatico all'apertura
     della tastiera. Tutti i campi della chat vanno a 16px. */
  .pzn-chat__modulo input,
  .pzn-chat__modulo textarea,
  .pzn-chat__riga input { font-size: 16px; }

  /* Rispetta la zona sicura di iPhone con notch */
  .pzn-chat { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  .container { padding-inline: 18px; }

  .topbar { font-size: 11.5px; }
  .topbar__inner { justify-content: center; gap: 4px 12px; min-height: 32px; padding-block: 5px; }
  .topbar .sep { display: none; }

  .hero { padding: 30px 0; }
  .hero h1 { font-size: 24px; }
  .hero__sottotitolo { font-size: 14.5px; }
  /* Gli a capo forzati spezzano male le frasi su schermo stretto */
  .hero h1 br, .hero__sottotitolo br { display: none; }
  .hero__badge img { width: 150px; }
  .hero__azioni { flex-direction: column; align-items: stretch; }
  .hero__azioni .btn { width: 100%; text-align: center; }

  .hero-pagina h1 { font-size: 23px; }
  .hero-pagina p  { font-size: 15px; }

  .griglia-servizi { grid-template-columns: 1fr; gap: 14px; }
  .card .btn { width: 100%; text-align: center; }

  .cta { padding: 26px 17px; }
  .cta__azioni { flex-direction: column; }
  .cta__azioni .btn { width: 100%; }

  .site-footer__griglia { grid-template-columns: 1fr; gap: 26px; padding-bottom: 24px; }
  .site-footer__basso { flex-direction: column; gap: 5px; }

  .btn { padding: 12px 20px; }

  /* Chat su smartphone: pannello a tutta larghezza, bolla a destra */
  .pzn-chat { right: 14px; bottom: 14px; left: 14px; align-items: flex-end; }
  .pzn-chat__pannello { width: 100%; max-width: none; }
  .pzn-chat__bolla { padding: 15px 22px; font-size: 15px; }
  .pzn-chat__messaggi { height: 42vh; }
  .pzn-msg { max-width: 88%; font-size: 14.5px; }
  .pzn-chat__modulo textarea { min-height: 76px; }
  .pzn-chat__testata { padding: 16px 18px; }
  .pzn-chat__corpo { padding: 18px; }
  .pzn-chat__corpo--ai { padding: 14px 16px 16px; }
}

@media (max-width: 400px) {
  .pzn-chat__bolla span { display: none; }        /* solo icona: non copre il testo */
  .pzn-chat__bolla { padding: 15px; border-radius: 50%; }
  .pzn-chat__bolla svg { width: 24px; height: 24px; }
}

@media (max-width: 360px) {
  .container { padding-inline: 14px; }
  .hero h1 { font-size: 22px; }
  .logo img { max-height: 30px; }
  .topbar__inner { gap: 3px 10px; }
  .fascia-partner { padding: 18px; }
  .blocco-recapiti { padding: 20px; }
}

/* Schermi bassi in orizzontale (telefono ruotato) */
@media (max-height: 520px) and (orientation: landscape) {
  .pzn-chat__pannello { max-height: calc(100dvh - 40px); }
  .pzn-chat__messaggi { height: 30vh; }
  .hero { min-height: 0; padding: 26px 0; }
}

/* Chi ha chiesto meno animazioni al sistema operativo non ne vede nessuna */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   8. STAMPA
   ========================================================================== */

@media print {
  .topbar, .site-header, .cta, .nav-toggle, .pzn-chat { display: none !important; }
  .hero, .hero-pagina { background: none !important; color: #000; }
  .hero::before { display: none; }
  body { animation: none; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Titoletto delle sezioni secondarie (es. "Altri servizi") */
.titolo-piccolo { font-size: 18px; margin-bottom: 18px; }

/* ---- Pagina contatti ---- */

.scheda-contatti { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; }

.blocco-recapiti {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 26px 28px;
  box-shadow: var(--ombra);
}
.blocco-recapiti p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; }
.blocco-recapiti p:last-child { margin-bottom: 0; }
.blocco-recapiti strong {
  display: block;
  color: var(--oro-scuro);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 3px;
}
.blocco-recapiti .minore { font-size: 12.5px; color: var(--testo-soft); }
.blocco-recapiti .minore:hover { color: var(--blu); }

.mappa {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra);
  min-height: 380px;
  display: flex;
}
.mappa { flex-direction: column; }
.mappa iframe { width: 100%; border: 0; min-height: 380px; flex: 1; }

/* Avviso sotto la mappa: presente ma discreto, non ruba la scena */
.mappa-nota {
  margin: 0;
  padding: 9px 14px;
  background: #f6f8fb;
  border-top: 1px solid var(--bordo);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--testo-soft);
  text-align: center;
}
.mappa-nota a { color: var(--blu-chiaro); text-decoration: underline; }

@media (max-width: 900px) {
  .scheda-contatti { grid-template-columns: 1fr; }
  .mappa, .mappa iframe { min-height: 300px; }
}

/* ---- Fascia partner (es. Zucchetti) ---- */

.fascia-partner {
  display: flex;
  align-items: center;
  gap: 26px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 22px 28px;
  box-shadow: var(--ombra);
}
.fascia-partner__marchio { flex: none; }
.fascia-partner__marchio img { max-height: 44px; width: auto; }
.fascia-partner__nome {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--blu);
  white-space: nowrap;
}
.fascia-partner p { margin: 0; color: var(--testo-soft); font-size: 14px; }
.fascia-partner strong { color: var(--testo); }

@media (max-width: 560px) {
  .fascia-partner { flex-direction: column; text-align: center; gap: 12px; padding: 20px; }
}




/* ==========================================================================
   9. PAGINA BRIDGE TO DIGITAL
   ========================================================================== */

.manifesto-sezione { padding-block: 44px; }

.manifesto {
  margin: 0 auto;
  max-width: 780px;
  text-align: center;
}
.manifesto img {
  width: 100%;
  height: auto;
  border-radius: var(--raggio);
  box-shadow: 0 4px 18px rgba(17, 26, 39, .10), 0 20px 50px rgba(17, 26, 39, .08);
  background: #fff;
}
.manifesto figcaption {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--testo-soft);
  line-height: 1.6;
}
.manifesto figcaption a { font-weight: 600; }

/* Titolo per i motori di ricerca e i lettori vocali, non a schermo */
.pzn-nascosto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .manifesto-sezione { padding-block: 26px; }
  .manifesto figcaption { font-size: 13px; }
}


/* ==========================================================================
   10. PAGINA "LA NOSTRA STORIA"
   ========================================================================== */

.hero-storia__incipit {
  font-size: clamp(17px, 1rem + .5vw, 21px);
  font-style: italic;
  color: #fff;
  margin-top: 6px;
}

/* Racconto disteso: largo, arioso, senza l'effetto "colonna stretta" */
.racconto {
  max-width: 880px;
  margin-inline: auto;
}
.racconto p {
  font-size: 17.5px;
  line-height: 1.85;
  color: #29354a;
  margin-bottom: 1.15em;
}

/* Prima frase: apre il racconto con un tono diverso */
/* La frase che apre il racconto: e' il vero titolo della pagina */
.racconto__apertura {
  font-size: clamp(23px, 1.3rem + 1vw, 32px) !important;
  font-weight: 700;
  color: var(--blu) !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
  margin-bottom: 1em !important;
}

/* Segnatempo discreti: danno il ritmo senza spezzare la lettura */
.racconto__epoca {
  margin: 52px 0 18px !important;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-scuro) !important;
  position: relative;
  padding-left: 46px;
}
.racconto__epoca::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 2px;
  background: var(--oro);
}
.racconto__epoca:first-child { margin-top: 0 !important; }

.racconto h2 {
  font-size: clamp(20px, 1.15rem + .6vw, 25px);
  color: var(--blu);
  margin: 0 0 .7em;
  line-height: 1.3;
}

/* Le frasi che pesano: staccate, in blu, con il filo dorato */
/* Le frasi che pesano: al centro, con due fili d'oro. Distendono la
   pagina invece di stringerla come farebbe un rientro laterale. */
.citazione {
  margin: 52px 0;
  padding: 26px 0;
  border-top: 2px solid var(--oro);
  border-bottom: 2px solid var(--oro);
  text-align: center;
  font-size: clamp(23px, 1.3rem + 1vw, 31px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--blu);
}

.racconto__rilievo {
  font-size: 19px !important;
  font-weight: 600;
  color: var(--blu) !important;
  line-height: 1.65 !important;
}

/* Chiusura: il respiro finale del racconto */
.chiusura-storia { text-align: center; }
.chiusura-storia__frase {
  margin: 0 0 14px;
  font-size: clamp(24px, 1.4rem + 1.2vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--blu);
}
.chiusura-storia__firma {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  color: var(--oro-scuro);
  letter-spacing: .03em;
}

@media (max-width: 560px) {
  .racconto p { font-size: 16.5px; line-height: 1.78; }
  .racconto__epoca { margin-top: 40px !important; padding-left: 34px; }
  .racconto__epoca::before { width: 24px; }
  .citazione { margin: 38px 0; padding: 20px 0; }
}


/* =========================================================
   11. PAGINE LEGALI, AVVISI, CONSENSO MAPPA
   ========================================================= */

.site-footer__legale { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.site-footer__legale .sep { opacity: .45; }

/* ---- Privacy e cookie: testo lungo, fatto per essere letto ---- */

.legale { max-width: 820px; margin-inline: auto; }
.legale h2 {
  margin: 42px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--bordo);
  font-size: clamp(18px, 1.05rem + .5vw, 22px);
  line-height: 1.25;
  color: var(--blu);
}
.legale h2:first-of-type { margin-top: 30px; }
.legale p  { font-size: 16px; line-height: 1.75; color: #29354a; margin-bottom: 1.05em; }
.legale ul { margin: 0 0 1.3em; padding-left: 22px; }
.legale li { font-size: 16px; line-height: 1.7; color: #29354a; margin-bottom: .5em; }
.legale strong { color: var(--blu); font-weight: 600; }
.legale a { color: var(--blu-chiaro); text-decoration: underline; text-underline-offset: 2px; }
.legale a:hover { color: var(--blu); }

.legale__agg {
  font-size: 12.5px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--testo-soft) !important;
}
.legale__rimando {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--bordo);
  font-size: 15px !important;
  color: var(--testo-soft) !important;
}

/* ---- Riquadri di richiamo dentro il testo ---- */

.avviso {
  margin: 26px 0;
  padding: 18px 22px;
  background: #fdf8ec;
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--raggio-p) var(--raggio-p) 0;
}
.avviso p:last-child { margin-bottom: 0; }
.avviso--buono { background: #eef4fc; border-left-color: var(--blu-chiaro); }

/* ---- Nota sulla riservatezza nel modulo della chat ---- */

.pzn-chat__privacy { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--testo-soft); }
.pzn-chat__privacy a { color: var(--blu-chiaro); text-decoration: underline; }


/* =========================================================
   12. CHAT: FLUSSO DI SCRITTURA E BOLLA CHE NON COPRE NULLA
   ========================================================= */

/* La bolla si sposta in su quando la riga finale del footer entra in
   schermo, cosi' Privacy e Cookie restano sempre cliccabili. */
.pzn-chat {
  transition: bottom .45s var(--morbida);
}
.pzn-fondo .pzn-chat { bottom: 96px; }
.pzn-fondo .pzn-chat--aperta { bottom: 22px; }   /* a pannello aperto resta ferma */

@media (prefers-reduced-motion: reduce) {
  .pzn-chat { transition: none; }
}

/* Mentre la risposta arriva, un trattino lampeggia in coda al testo:
   si vede che sta scrivendo, senza puntini che saltano. */
.pzn-msg--scrive::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -.14em;
  background: var(--blu-chiaro);
  animation: pzn-cursore .9s steps(2, start) infinite;
}
@keyframes pzn-cursore { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- Il pannello deve stare in una schermata sola ---- */

.pzn-chat__pannello { max-height: calc(100dvh - 76px); }
.pzn-chat__corpo    { padding: 16px 18px; }
.pzn-chat__intro    { margin: 0 0 12px !important; font-size: 13px !important; }
.pzn-chat__modulo label { margin-bottom: 4px; font-size: 12px; }
.pzn-chat__modulo input,
.pzn-chat__modulo textarea { padding: 9px 12px; margin-bottom: 10px; font-size: 13.5px; }
.pzn-chat__modulo textarea { min-height: 74px; }
.pzn-chat__privacy  { margin-top: 8px; font-size: 11px; }

@media (max-width: 560px) {
  /* Su telefono i campi restano a 16px: sotto, iOS fa lo zoom da solo */
  .pzn-chat__modulo input,
  .pzn-chat__modulo textarea { font-size: 16px; }
  .pzn-chat__modulo textarea { min-height: 68px; }
  .pzn-fondo .pzn-chat { bottom: 108px; }
}