/* ══════════════════════════════════════════════════════════════
   PrestitoSì Finance — style.css  (file unificato)
   Unisce: style.css + style-nav.css + form.css
   ── Non modificare i selettori — aggiungere solo via var() ──
══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   ROOT VARIABLES
   Variabili globali di tutti i file CSS del progetto.
   Ogni variabile ha un commento descrittivo.
══════════════════════════════════════════════════════════════ */

:root {

  /* ── COLORI BRAND PRINCIPALI ───────────────────────────────── */
  --color-navy:        #002E5D;  /* blu navy principale */
  --color-blue:        #0056A4;  /* blu medio */
  --color-blue-dark:   #003970;  /* blu scuro (link, dropdown item) */
  --color-blue-active: #005DB6;  /* blu link attivo / focus */
  --color-accent:      #26C6DA;  /* teal accento (badge, icone PP) */
  --color-accent-cq:   #4FC3F7;  /* teal accento variante CQ/OPP */
  --color-teal-hover:  #AFFFF9;  /* teal chiaro su hover navbar */

  /* ── TESTI ─────────────────────────────────────────────────── */
  --color-text:        #00132D;  /* testo principale (body, p) */
  --color-text-dark:   #001F43;  /* testo heading secondario (h3–h6) */
  --color-muted:       #4a607a;  /* testo secondario / sfumato */
  --color-nav-text:    #383838;  /* testo voci di navigazione */

  /* ── BACKGROUND ─────────────────────────────────────────────── */
  --color-bg:          #F5F7FA;  /* sfondo generale pagina */
  --color-bg-light:    #EBF1FF;  /* sfondo blu chiaro (topbar, badge) */
  --color-bg-cta:      #E5F7FD;  /* sfondo CTA / bottoni negativi */
  --color-bg-card:     #F4F6F9;  /* sfondo sezioni card */
  --color-bg-step:     #ECF0FF;  /* sfondo card step */
  --color-bg-badge:    #DCE5FF;  /* sfondo badge personalizzati */
  --color-white:       #ffffff;  /* bianco puro */

  /* ── BORDI ──────────────────────────────────────────────────── */
  --color-border:      #dde4ee;  /* bordo standard */
  --color-border-card: #E2E6EA;  /* bordo card e modali */
  --color-border-light:#e8edf3;  /* bordo leggero (offcanvas) */

  /* ── FONT ───────────────────────────────────────────────────── */
  --font-primary: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; /* font principale */
  --font-mono:    'IBM Plex Mono', monospace;                                 /* font monospace (cookie table) */

  /* ── FONT-SIZE — scala 1.250 ────────────────────────────────── */
  --fs-base: 1rem;       /* base = 18px */
  --fs-sm:   0.875rem;   /* piccolo */
  --fs-xs:   0.75rem;    /* molto piccolo */
  --fs-h6:   1.25rem;
  --fs-h5:   1.563rem;
  --fs-h4:   1.953rem;
  --fs-h3:   2.441rem;
  --fs-h2:   3.052rem;
  --fs-h1:   3.815rem;

  /* ── BORDER RADIUS ──────────────────────────────────────────── */
  --radius-xs:   4px;    /* badge piccoli */
  --radius-sm:   6px;    /* bottoni, card piccole */
  --radius-md:   8px;   /* input, pannelli form */
  --radius-lg:   16px;   /* card principali */
  --radius-xl:   24px;   /* card grandi, CTA */
  --radius-pill: 999px;  /* elementi pill */

  /* ── SHADOWS ────────────────────────────────────────────────── */
  --shadow-btn:  0 2px 4px rgba(0,0,0,0.10);
  --shadow-sm:   0 4px 10px rgba(0,0,0,0.05);
  --shadow-card: 0 10px 28px rgba(0,0,0,0.18);
  --shadow-lg:   0 16px 48px rgba(0,19,45,0.12), 0 0 0 1px rgba(0,19,45,0.04);
  --shadow-xl:   0 20px 60px rgba(0,10,30,0.30);
  --shadow-pap:  0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.08);

  /* ── SPACING ────────────────────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;

  /* ── TRANSITIONS ────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.5s ease;

  /* ── Z-INDEX ────────────────────────────────────────────────── */
  --z-overlay:  1;
  --z-content:  2;
  --z-dropdown: 1050;
  --z-navbar:   1030;
  --z-fab:      9998;   /* FAB whatsapp/chat */
  --z-chat:     9999;   /* chat widget */

  /* ── LAYOUT ─────────────────────────────────────────────────── */
  --max-width: 1320px;   /* larghezza massima container */
  --navbar-h:  68px;     /* altezza navbar desktop */

  /* ── GRADIENTS ──────────────────────────────────────────────── */
  --gradient-hero:  linear-gradient(105deg, rgba(0,28,60,0.92) 0%, rgba(0,28,60,0.72) 48%, rgba(0,28,60,0.20) 100%);
  --gradient-navy:  linear-gradient(135deg, #002E5D 0%, #0056A4 100%);

  /* ── OPACITY ─────────────────────────────────────────────────── */
  --opacity-muted: 0.6;
  --opacity-faint: 0.1;

  /* ── CTA ─────────────────────────────────────────────────────── */
  --cta-radius-sm:  6px;
  --cta-radius-md:  8px;
  --cta-radius-lg:  16px;
  --cta-padding: 12px 28px;

  --cta-primary-bg: #002E5D;
  --cta-primary-color:#E5F7FD;
  --cta-primary-border:#002E5D;

  --cta-primary-hover-bg:#E5F7FD;
  --cta-primary-hover-border:#E5F7FD;
  --cta-primary-hover-color:#002E5D;

  --cta-primary-focus-bg:#002c57;

  --cta-secondary-bg: transparent;
  --cta-secondary-color:#002E5D;
  --cta-secondary-border:#002E5D;

  --cta-secondary-hover-bg:#002E5D;
  --cta-secondary-hover-color:#E5F7FD;
  --cta-secondary-hover-border:#002E5D;

  --cta-secondary-focus-bg:#002c57;

  --cta-primary-neg-bg:#E5F7FD;
  --cta-primary-neg-color:#002E5D;
  --cta-primary-neg-border:#E5F7FD;

  --cta-primary-neg-hover-bg:#0056a4;
  --cta-primary-neg-hover-color:#E5F7FD;
  --cta-primary-neg-hover-border:#0056a4;

  --cta-primary-focus-neg-bg:#002c57;

  --cta-secondary-neg-bg:#002E5D;
  --cta-secondary-neg-color:#E5F7FD;
  --cta-secondary-neg-border:#E5F7FD;

  --cta-secondary-neg-hover-bg:#002E5D;
  --cta-secondary-neg-hover-color:#E5F7FD;
  --cta-secondary-neg-hover-border:#002E5D;

  --cta-active-all:scale(0.98);
  --cta-disabled-bg:0.5;
  --cta-disabled-cursor:not-allowed;
  
  --cta-padding-sm:0 16px;
  --cta-height-sm:44px;
  --cta-radius-sm:6px;

  --cta-padding-sm:0 16px;
  --cta-height-sm:48px;
  --cta-radius-sm:6px;
  --cta-text-sm:0.85rem;

  --cta-padding-md:0 24px;
  --cta-height-md:56px;
  --cta-radius-md:8px;
  --cta-text-md:1rem;

  --cta-padding-lg:0 32px;
  --cta-height-lg:64px;
  --cta-radius-lg:12px;
  --cta-text-lg:1.25rem;


  /* ── VARIABILI MEGA-MENU / NAVBAR (--mn-) ────────────────────
     Usate in .psf-mega, .psf-dropdown, .mob-* (style-nav.css)
  ────────────────────────────────────────────────────────────── */
  --mn-navy:      #002E5D;  /* navy menu */
  --mn-blue:      #0056a4;  /* blue menu */
  --mn-blue-lt:   #E8F0FB;  /* sfondo azzurro chiaro menu */
  --mn-accent:    #0064af;  /* accento hover menu */
  --mn-border:    #eaeff6;  /* bordo separatori menu */
  --mn-text:      #1a2840;  /* testo voci menu */
  --mn-text-mid:  #4a607a;  /* testo secondario menu */
  --mn-text-lt:   #8098b4;  /* testo light menu */
  --mn-hover-bg:  #f0f5ff;  /* sfondo hover voce menu */
  --mn-tag-bg:    #EBF5FF;  /* sfondo tag/badge menu */
  --mn-tag-color: #0056a4;  /* colore testo tag menu */

  /* ── VARIABILI FORM (--psf-) ─────────────────────────────────
     Usate in .psf-card, .psf-stepper, .psf-offer-* (form.css)
  ────────────────────────────────────────────────────────────── */
  --psf-navy:      #002E5D;   /* navy form */
  --psf-blue:      #1a4f8a;   /* blue medio form */
  --psf-blue-mid:  #1e6db5;   /* blue link/focus form */
  --psf-blue-lt:   #e8f0fb;   /* sfondo chiaro form */
  --psf-border:    #dde4ee;   /* bordo campi form */
  --psf-bg:        #f5f7fb;   /* sfondo sezioni form */
  --psf-white:     #ffffff;   /* bianco form */
  --psf-text:      #1a2840;   /* testo form */
  --psf-text-mid:  #4a607a;   /* testo secondario form */
  --psf-text-lt:   #8098b4;   /* testo light form */
  --psf-error:     #c0392b;   /* colore errore form */
  --psf-green:     #00b894;   /* verde offerta migliore */
  --psf-radius:    12px;      /* border-radius campi form */
  --psf-radius-sm: 8px;       /* border-radius piccolo form */
  --psf-shadow-md: 0 4px 24px rgba(10,30,60,0.14); /* ombra card form */

  /* ── VARIABILI PAGINA PP — Prestiti Personali ─────────────── */
  --pp-navy:   #002E5D;
  --pp-blue:   #0056A4;
  --pp-teal:   #0056A4;
  --pp-accent: #26C6DA;
  --pp-light:  #E0F7FA;
  --pp-lightb: #EBF1FF;
  --pp-text:   #00132D;
  --pp-muted:  #4a607a;
  --pp-border: #dde4ee;
  --pp-bg:     #F5F7FA;

  /* ── VARIABILI PAGINA CQ — Cessione del Quinto ────────────── */
  --cq-navy:   #002E5D;
  --cq-blue:   #0056A4;
  --cq-accent: #4FC3F7;
  --cq-light:  #EBF1FF;
  --cq-text:   #00132D;
  --cq-muted:  #4a607a;
  --cq-border: #dde4ee;
  --cq-bg:     #F5F7FA;

  /* ── VARIABILI PAGINA PAP — Lavora con noi ────────────────── */
  --pap-navy:     #1a2e4a;
  --pap-navy-alt: #2e4a6e;
  --pap-teal:     #6b8fa3;
  --pap-card-bg:  #dce8ee;
  --pap-bg:       #f4f7f9;

   /* Altezza max dell'immagine su desktop: regola la fascia (e quindi
     quanto il form sporge). Più piccola → form sporge di più. */
  --phero-img-max: 300px;

  /* ── FONT-SIZE — scala fluida (base html = 18px ⇒ 1rem = 18px) ──
   Ogni misura: MIN a ~360px, MAX a ~1920px, interpolazione lineare.
   Su 14" (~1366px) i titoli restano sotto il massimo. */
--fs-base:  1rem;        /* riferimento body = 18px */
--fs-sm:    0.875rem;
--fs-xs:    0.75rem;

--fs-body:      clamp(0.95rem, 0.94rem + 0.06vw, 1rem);
--fs-subtitle:  1.1rem;
--fs-summary:   1.25rem;

--fs-h1:  clamp(2rem,    1.77rem + 1.14vw, 2.986rem);
--fs-h2:  clamp(1.75rem, 1.58rem + 0.85vw, 2.488rem);
--fs-h3:  clamp(1.55rem, 1.46rem + 0.46vw, 1.95rem);
--fs-h4:  clamp(1.35rem, 1.26rem + 0.44vw, 1.728rem);
--fs-h5:  clamp(1.2rem,  1.14rem + 0.28vw, 1.44rem);
--fs-h6:  clamp(1.05rem, 1.02rem + 0.17vw, 1.2rem);

--fs-hero-title:     clamp(2.2rem, 1.2rem  + 4vw,    4rem);
--fs-hero-overlay:   clamp(1.9rem, 1.46rem + 2.21vw, 3.815rem);
--fs-hero-subtitle:  clamp(1rem,   0.97rem + 0.14vw, 1.125rem);

/* ══════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   FONT-SIZE — scala fluida (base html = 16px ⇒ 1rem = 16px)
   MIN a ~360px · MAX a ~1920px · interpolazione lineare.
   Su 14" (~1366px) i titoli restano sotto il massimo.
══════════════════════════════════════════════════════════════ */

  --fs-base:  1rem;       /* body = 16px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-xs:    0.75rem;    /* 12px */

  --fs-body:      clamp(0.9375rem, 0.92rem + 0.06vw, 1rem);
  --fs-subtitle:  1.1rem;
  --fs-summary:   1.25rem;

  --fs-h1:  clamp(1.875rem,  1.62rem + 1.14vw, 2.986rem);
  --fs-h2:  clamp(1.625rem,  1.43rem + 0.89vw, 2.488rem);
  --fs-h3:  clamp(1.4375rem, 1.32rem + 0.53vw, 1.95rem);
  --fs-h4:  clamp(1.25rem,   1.14rem + 0.49vw, 1.728rem);
  --fs-h5:  clamp(1.125rem,  1.05rem + 0.32vw, 1.44rem);
  --fs-h6:  clamp(1.03rem,   0.99rem + 0.17vw, 1.2rem);

  --fs-hero-title:    clamp(2.2rem,   1.78rem + 1.85vw, 4rem);
  --fs-hero-overlay:  clamp(1.875rem, 1.43rem + 2vw,    3.815rem);
  --fs-hero-subtitle: clamp(1rem,     0.97rem + 0.13vw, 1.125rem);
}

/* ══════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════ */
html{
  font-size:16px;                 /* 1rem = 16px */
  font-family:var(--font-primary);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body{
  font-size:var(--fs-base);
  line-height:1.6;
  overflow-x:hidden;
}

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

.row{
  --bs-gutter-x:0;
  --bs-gutter-y:0;
}

.bg-light{
  --bs-bg-opacity:0.8;
  background-color:var(--color-bg-light)!important;
}

/* ══════════════════════════════════════════════════════════════
   HEADINGS
══════════════════════════════════════════════════════════════ */
h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.05; letter-spacing:-0.05em;  color:var(--color-text); }
h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.1;  letter-spacing:-0.025em; color:var(--color-text); }
h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.15; color:var(--color-text-dark); }
h4{ font-size:var(--fs-h4); font-weight:500; line-height:1.2;  color:var(--color-text-dark); }
h5{ font-size:var(--fs-h5); font-weight:500; line-height:1.25; color:var(--color-text-dark); }
h6{ font-size:var(--fs-h6); font-weight:500; line-height:1.4;  color:var(--color-text-dark); }

h1,h2,h3,h4,h5,h6{ margin-bottom:0.6em; }

/* ══════════════════════════════════════════════════════════════
   PARAGRAFI & TESTO
══════════════════════════════════════════════════════════════ */
p{
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  color:var(--color-text);
  font-family:var(--font-primary);
  text-align:justify;
}

.subtitle{
  font-size:var(--fs-subtitle);
  font-weight:500;
  line-height:1.52;
}

.summary{
  font-size:var(--fs-summary);
  font-weight:400;
  color:var(--color-text);
}

small{
  font-size:var(--fs-xs);
  font-weight:400;
  color:#2C3440;
}

.badge-custom{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:0.5px;
  color:var(--color-blue);
  background-color:var(--color-bg-badge);
  padding:6px 12px;
  border-radius:var(--radius-pill);
}

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero-title{
  font-size:var(--fs-hero-title);
  letter-spacing:-0.05em;
}

.hero-subtitle{
  font-size:var(--fs-hero-subtitle);
  font-weight:400;
  line-height:1.65;
  color:var(--color-text);
  max-width:48ch;
}

.hero-box{
  position:relative;
  border-radius:16px;
  overflow:hidden;
}

.hero-box img{
  display:block;   /* IMPORTANTISSIMO */
}

.hero-overlay{
  position:absolute;
  bottom:20px;
  left:30px;
  max-width:75%;
  z-index:2;
}

.hero-overlay h1{
  font-size:var(--fs-hero-overlay);
  font-weight:700;
  line-height:1.7;
  background:rgba(255,255,255,0.9);
  padding:12px 16px;
  border-radius:8px;
  display:inline;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ══════════════════════════════════════════════════════════════
   LINK
══════════════════════════════════════════════════════════════ */
a{
  text-decoration:none;
  color:var(--color-blue-dark);
}

/* ══════════════════════════════════════════════════════════════
   OFFCANVAS
══════════════════════════════════════════════════════════════ */
.offcanvas{
  width:100%!important;
  height:100dvh;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  border-radius:0;
  overflow:hidden;
}

.offcanvas-body{
  overflow-y:auto;
}

@media (max-width:768px){
  .offcanvas{
    width:100%;
    border-radius:6px;
  }
}

/* ── HERO SECTION ─────────────────────────────────── */

.hero-bg-section {
  position: relative;
  background: url('../images/hero-bg-couple.png') center center / cover no-repeat;
  min-height: 72vh;          /* meno alto di 100vh */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius:16px;
}

@media (max-width: 968px) {

.hero-bg-section {
  border-radius:0px;
}
}


.section-hero-bg {
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;          /* garantisce area visibile anche se il contenuto è corto */
  display: flex;
  align-items: center;        /* centra verticalmente la row */
}

.section-hero-bg { position: relative; }
.section-hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 100%);
}
.section-hero-bg > .container-lg { position: relative; z-index: 1; }



/* Overlay sfumato: scuro al centro/top, trasparente ai bordi */
.hero-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 20, 50, 0.65) 0%,
    rgba(0, 20, 50, 0.55) 60%,
    rgba(0, 20, 50, 0.45) 100%
  );
  z-index: 1;
}

/* Contenuto centrato sopra l'overlay */
.hero-content-wrapper {
  position: relative;
  z-index: 2;
  max-width: 968px;          /* centra il testo orizzontalmente */
  width: 100%;
  padding: 4rem 1.5rem 3rem;
  margin: 0 auto;
  text-align: center;
}

/* Il titolo ora è bianco (leggibile su overlay scuro) */
.hero-bg-section .hero-title {
  color: #ffffff !important;
  text-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}

/* Trust bar: testo bianco */
.hero-bg-section .hero-trust-item {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* CTA row: piccolo gap */
.hero-cta-row {
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ── RESPONSIVE ───────────────────────────────────── */

@media (max-width: 768px) {
  .hero-bg-section {
    min-height: 60vh;
    /* Su mobile: ancora cover, ma ancora più in alto nella foto */
    background-position: center top;
  }

  .hero-content-wrapper {
    padding: 3rem 1.25rem 2.5rem;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .hero-bg-section {
    min-height: 55vh;
  }
}

/* =========================
BUTTON SYSTEM
========================= */

.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  transition:background-color 0.25s ease-in-out,
            color 0.75s ease-in-out,
            border-color 0.25s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
  line-height:1.4; 
}

btn:active{
  transform:var(--cta-active-all);
}

.btn .bi:hover{
  color:#E5F7FD !important;
}

.btn-primary{ 
  background: var(--cta-primary-bg);
  color:var(--cta-primary-color);
  border:1px solid var(--cta-primary-border);
}

.btn-primary:hover{ 
  background:var(--cta-primary-hover-bg);
  border:1px solid var(--cta-primary-hover-border);
  color:var(--cta-primary-hover-color);
}

.btn-primary-neg{ 
  background:var(--cta-primary-neg-bg);
  color:var(--cta-primary-neg-color);
  border:1px solid var(--cta-primary-neg-border);
}

.btn-primary-neg:hover{ 
  background: var(--cta-primary-neg-hover-bg);
  color:var(--cta-primary-neg-hover-color);
  border:1px solid var(--cta-primary-neg-hover-border);
}

.btn-secondary{    
    background: var(--cta-secondary-bg);
    color:var(--cta-secondary-color);
    border:1px solid var(--cta-secondary-border);  
}

.btn-secondary:hover{    
    background: var(--cta-secondary-hover-bg);
    color:var(--cta-secondary-hover-color);
    border:1px solid var(--cta-secondary-hover-border);
}

.btn-secondary-neg{    
    background: var(--cta-secondary-neg-bg);
    color:var(--cta-secondary-neg-color);
    border:1px solid var(--cta-secondary-neg-border); 
}

.btn-secondary-neg:hover{    
    background:var(--cta-secondary-neg-hover-bg);
    color:var(--cta-secondary-neg-hover-color);
    border:1px solid var(--cta-secondary-neg-hover-border);
}

/* LARGE */
.btn-lg {
  font-size: var(--cta-text-lg);
  padding: var(--cta-padding-lg);  
  height: var(--cta-height-lg); 
  border-radius: var(--cta-radius-lg);
}

/* MEDIUM */
.btn-md {
  font-size: var(--cta-text-md);
  padding: var(--cta-padding-md);  
   height: var(--cta-height-md); 
  border-radius: var(--cta-radius-md);
}

/* SMALL */
.btn-sm {
  font-size: var(--cta-text-sm);
  padding: var(--cta-padding-md);  
  height: var(--cta-height-sm); 
  border-radius: var(--cta-radius-sm);
}

.btn-rounded {
  width: 5.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   DESKTOP OVERRIDE
========================= */

@media (max-width: 992px) {

  .btn-lg {
    width: 100%;
  }

  .btn-md {
    width: 100%;
  }

  .btn-sm {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    height: 2.5rem;
    width:100%;
  }
}

/* =============================================
   VARIE UI
   INVARIATO — tutto ciò che segue è invariato
============================================= */
.btn-sm.cq-btn-auto {
  width: auto;
  flex: 0 0 auto;
}

.btn-outline-secondary{
  border-radius:999px;
}

.btn-outline-secondary:hover{
  border-color:#E07A7A;
  background-color:#E07A7A;
}

.btn-info-pill {
    background:none;
    border:none;
  }
  .btn-info-pill:hover {
    opacity: 1;
    transform: scale(1.15);
  }

.btn-modal-cta {
    padding: 12px 36px;
    font-size: 0.97rem;
    border-radius: 50px;
    min-width: 200px;
  }

  @media (max-width: 575px) {
    .modal-prodotto-body {
      padding: 16px 18px 8px 18px;
    }
    .modal-prodotto-header {
      padding: 16px 18px 0 18px;
    }
    .modal-prodotto-footer {
      padding: 14px 18px 20px 18px;
    }
    .modal-prodotto-title {
      font-size: 1.2rem;
    }
    .btn-modal-cta {
      width: 100%;
    }
  }  

.pap-btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--pap-navy);
      color: #fff !important;
      border-radius: 50px;
      padding: 12px 28px;
      font-weight: 700;
      font-size: .9rem;
      letter-spacing: .5px;
      text-decoration: none !important;
      transition: background .2s;
    }

.pap-btn-cta:hover { background: var(--pap-navy-alt); }

/* Bottone freccia — classe propria, NON usa .btn-arrow del progetto */
.pap-arrow-btn {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 50%;
      background:#fff;
      color:#215966;
      border:2px solid #215966;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none !important;
      transition: background .2s, transform .15s;
      font-size: 1rem;
    }

.pap-arrow-btn:hover {
      background: var(--pap-navy-alt);
      transform: scale(1.1);
    }

  
.div-link-icon {
  display: inline-flex;       /* rende testo + icona flessibili */
  align-items: center;        /* allinea verticalmente al centro */
  gap: 6px;                   /* spazio tra testo e icona */
}

.div-link-icon .bi {
  font-size: 1.1rem;          /* dimensione icona */
  color: #fff;             /* prende il colore del testo se vuoi uniformità */
}





/* =============================================
   TOPBAR
   MODIFICATO rispetto all'originale:
   · .topbar-desktop: aggiunto font clamp() + background
     esplicito (era solo .bg-light inline in HTML)
   · .topbar-link / a: aggiunto white-space:nowrap e
     display:inline-flex per tenere icona+testo sulla
     stessa riga a qualsiasi larghezza
   · [NUOVO] .topbar-contacts: wrapper contatti sx,
     flex-shrink:0 + gap clamp()
   · [NUOVO] .topbar-right: wrapper destra, flex nowrap
     comprimibile con gap clamp()
   · .topbar-desktop .nav-link: font e padding con clamp()
   · [NUOVO] .topbar-social: cerchietti social
============================================= */

/* MODIFICATO: era font-size fisso 0.8rem, senza background
   esplicito. Ora clamp() per ridursi senza wrappare. */
.topbar-desktop {
  background-color: #EBF1FF;
  font-size: clamp(0.66rem, 0.52rem + 0.28vw, 0.8rem);
  letter-spacing: 0.01em;
  transition: transform 0.3s ease;
}

/* MODIFICATO: aggiunto white-space:nowrap.
   Era mancante → testo si staccava dall'icona su schermi stretti. */
.topbar-link,
.topbar-desktop a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

.topbar-desktop a:hover {
  color: #0056a4 !important;
}

.topbar-desktop .dropdown-menu {
  z-index: 1050; /* più alto di .topbar-desktop */
}

/* NUOVO: .topbar-contacts
   Mantiene email+telefono sulla stessa riga a sx.
   flex-shrink:0 = non si comprime. */
.topbar-contacts {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 1.2rem);
  flex-shrink: 0;
}

/* NUOVO: .topbar-right
   Wrapper destra (nav secondaria + social).
   flex-wrap:nowrap + gap clamp() = mai a capo. */
.topbar-right {
  display: flex;
  align-items: center;
  gap: clamp(0.1rem, 0.45vw, 0.6rem);
  flex-wrap: nowrap;
  overflow: visible;
}

/* MODIFICATO: era font-size:0.8rem e padding:4px 8px fissi.
   Ora clamp() su entrambi per scalare su desktop stretti.
   Aggiunto white-space:nowrap. */
.topbar-desktop .nav-link {
  font-size: clamp(0.85rem, 0.48rem + 0.26vw, 0.78rem);
  padding: 3px clamp(3px, 0.38vw, 8px);
  border-radius: 6px;
  white-space: nowrap;
  color: #383838;
}

.topbar-desktop .nav-link:hover {
  background: rgba(0,86,164,0.06);
  color: #0056a4 !important;
}

/* INVARIATO */
.topbar-desktop .bi-facebook,
.topbar-desktop .bi-linkedin,
.topbar-desktop .bi-instagram {
  font-size: 1rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.topbar-desktop a[aria-label]:hover .bi {
  transform: scale(1.15);
}

/* NUOVO: .topbar-social
   Cerchietti bianchi per i social nella topbar. */
.topbar-social {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  border-radius: 50%;
  color: #0056a4;
  font-size: 1.5rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.topbar-social .bi{
  font-size:1.25rem;
}

.topbar-social a:hover {
  background: #AFFFF9;
}




/* =============================================
   NAVBAR — Stile principale
   MODIFICATO rispetto all'originale:
   · .navbar: aggiunto height:68px fisso → allineamento
     logo/hamburger garantito su tutti i dispositivi
   · .navbar-brand svg: [NUOVO] width:190px esplicito
     (il logo era piccolo perché mancava la dimensione)
   · .nav-link: font-size e padding con clamp() +
     white-space:nowrap → no wrap su desktop stretti
   · [NUOVO] .navbar-toggler-custom: hamburger moderno
     con Bootstrap Icons al posto del toggler nativo
   · [NUOVO] .navbar-tel-pill: tel accanto all'hamburger
============================================= */

/* MODIFICATO: aggiunto height:68px.
   Garantisce che logo (sx) e hamburger (dx) restino
   sulla stessa linea orizzontale a qualsiasi larghezza. */
.navbar {
  font-weight: 500;
  background-color: #ffffff;
  height: 68px;
  transition: box-shadow 0.3s ease;
}

.navbar.sticky-top {
  z-index: 1030;
}

.navbar.shadow-sm {
  box-shadow: 0 2px 16px rgba(0,19,45,0.06) !important;
}

/* NUOVO: dimensione logo esplicita.
   Era assente → logo risultava piccolo.
   190px = dimensione visiva corretta per il viewBox SVG.
   Ridotta su tablet (155px) e mobile (130px) nei @media. */
.navbar-brand svg {
  max-width: 300px;
  width:100%;
  height: auto;
  display: block;
}

/* Tablet + laptop fino a 16" */
@media screen and (min-width: 769px) and (max-width: 1920px) {
    .navbar-brand svg {
        max-width: 300px;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 768px) {
  .navbar-brand svg  {
    max-width: 180px!important;
  }
}


/* MODIFICATO: era font-size clamp ma senza white-space:nowrap.
   Aggiunto nowrap + padding clamp() per scalare su desktop
   stretti senza mai andare a capo o scomparire. */
.nav-link {
  font-weight: 500;
  font-size: clamp(1rem, 0.58rem + 0.34vw, 1.2rem);
  color: #383838;
  padding: 6px clamp(4px, 0.48vw, 10px);
  border-radius: 8px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.5s ease;
}

.nav-link:hover {
  background: #AFFFF9;
  color: #383838;
  transform: translateY(-1px);
  border-radius:6px;
}

.navbar-nav .nav-link.active {
  color: #005DB6;
  font-weight: 700;
  background: rgba(0,93,182,0.06);
}

.nav-link:focus {
  color: #005DB6;
}

/* INVARIATO */
.nav-link.dropdown-toggle::after {
  margin-left: 4px;
  vertical-align: 0.15em;
  border-top-width: 0.28em;
  border-right-width: 0.28em;
  border-left-width: 0.28em;
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-item.dropdown:hover .nav-link.dropdown-toggle::after,
.nav-item.dropdown .nav-link.dropdown-toggle[aria-expanded="true"]::after {
  opacity: 1;
  transform: rotate(180deg);
}

/* INVARIATO */
.navbar-toggler {
  border: none !important;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.navbar-toggler:focus {
  box-shadow: none;
  background: rgba(0,0,0,0.04);
}

.navbar-toggler:hover {
  background: rgba(0,0,0,0.06);
}

.navbar-toggler-icon {
  width: 1.3em;
  height: 1.3em;
}

/* NUOVO: .navbar-toggler-custom
   Hamburger moderno (icona bi-list) che sostituisce il
   toggler nativo nell'header aggiornato.
   Allineamento garantito da:
     1. .navbar { height:68px }
     2. container d-flex justify-content-between align-items-center
     3. flex-shrink:0 su questo elemento */
.navbar-toggler-custom {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1.5px solid #dde4ed;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.navbar-toggler-custom:hover {
  background: #EBF1FF;
}

.navbar-toggler-custom .bi-list {
  font-size: 1.3rem;
  color: #383838 !important;
}

/* NUOVO: .navbar-tel-pill
   Mostra il numero di telefono accanto all'hamburger su mobile.
   Sparisce sotto 400px per non comprimere il logo. */
.navbar-tel-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: 600;
  color: #383838;
  text-decoration: none;
  background: #EBF1FF;
  border: 1px solid #c8d8f0;
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.navbar-tel-pill:hover {
  background: #0056a4;
  color: white !important;
}

.navbar-tel-pill .bi {
  font-size: 0.75rem !important;
  color: #0056a4 !important;
  transition: color 0.2s ease;
}

.navbar-tel-pill:hover .bi {
  color: white !important;
}

/* =============================================
   MEGA MENU — Desktop
   MODIFICATO: aggiunta animazione megaFadeIn,
   [NUOVO] .mega-divider per separatore verticale.
============================================= */

/* MODIFICATO: aggiunta animazione fade+slide */
.dropdown-menu.mega-menu {
  min-width: clamp(300px, 80%, 700px);
  max-width: 100%;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  border: none;
  box-shadow: 0 16px 48px rgba(0, 19, 45, 0.12), 0 0 0 1px rgba(0,19,45,0.04);
  overflow-x: hidden;
}

@keyframes megaFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mega-menu h6 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.mega-menu p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: #5a6878;
}

/* MODIFICATO: aggiunto transition su padding-left per slide */
.mega-menu .dropdown-item {
  padding: 6px 8px;
  color: #064635;
  border-radius: 6px;
  transition: background 0.2s ease, padding-left 0.2s ease;
}

.mega-menu .dropdown-item:hover {
  color: #198754;
  background: rgba(175,255,249,0.25);
  padding-left: 14px;
  text-decoration: none;
}

/* NUOVO: .mega-divider
   Linea verticale tra colonna descrittiva e link. */
.mega-divider {
  width: 1px;
  background: #e8edf3;
  align-self: stretch;
  flex-shrink: 0;
}

/* INVARIATO */
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    left: 0;
    right: auto;
    max-width: 75vw;
    border: none;
    box-shadow: 0 16px 48px rgba(0, 19, 45, 0.12), 0 0 0 1px rgba(0,19,45,0.04);
    background: #EBF1FF;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =============================================
   OFFCANVAS MOBILE
   NUOVO: sostituisce il vecchio .d-lg-none collapse
   con pannello laterale Bootstrap Offcanvas + accordion.
   Le classi seguenti sono tutte nuove.
============================================= */

/* NUOVO: pannello offcanvas 300px (100vw su xs) */
.navbar-offcanvas {
  width: 100% !important;
  background:#ffffff;
}

@media (max-width: 375px) {
  .navbar-offcanvas { width: 100vw !important; }
}

/* NUOVO: header offcanvas allineato con .navbar (68px) */
.navbar-offcanvas .offcanvas-header {
  background: white;
  border-bottom: 1px solid #e8edf3;
  min-height: 68px;
  align-items: center;
  padding: 1rem 1.25rem;
}

.navbar-offcanvas .offcanvas-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* NUOVO: accordion voci con dropdown nel mobile */
.navbar-offcanvas .accordion-button {
  font-size: 0.9rem;
  font-weight: 600;
  color: #383838;
  background: white;
  padding: 0.85rem 1.25rem;
  box-shadow: none !important;
}

.navbar-offcanvas .accordion-button:not(.collapsed) {
  color: #0056a4;
  background: #EBF1FF;
}

.navbar-offcanvas .accordion-item {
  border: none;
  border-bottom: 1px solid #f0f4f8;
  /* MODIFICATO: sovrascrive .accordion-item globale
     (margin-bottom:50px, box-shadow) per la navbar */
  margin-bottom: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* NUOVO: reset accordion-body per contesto navbar */
.navbar-offcanvas .accordion-body {
  padding: 0.25rem 1.25rem 0.75rem;
  background: #fff;
}

/* NUOVO: stile link figli nell'accordion mobile */
.navbar-offcanvas .accordion-body a {
  display: block;
  font-size: 0.9rem;
  color: #555;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.navbar-offcanvas .accordion-body a:hover {
  background: #fff;
  color: #0056a4;
}

/* NUOVO: link semplici (Home, Dove siamo, Blog) nel mobile */
.offcanvas-nav-link {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #383838;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid #f0f4f8;
  transition: color 0.2s ease;
}

.offcanvas-nav-link:hover { color: #0056a4; }

/* NUOVO: footer offcanvas (CTA + contatti + social) */
.offcanvas-footer {
  border-top: 1px solid #e8edf3;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  margin-top: auto;
}

/* NUOVO: cerchietti social nel footer offcanvas */
.offcanvas-social-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EBF1FF;
  color: #0056a4;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.offcanvas-social-pill:hover {
  background: #0056a4;
  color: white !important;
}

.offcanvas-social-pill .bi {
  font-size: 0.88rem !important;
  color: inherit !important;
}

/* =============================================
   RESPONSIVE — Tra Desktop e Mobile (1200-1400px)
   INVARIATO + aggiunta topbar nascosta
============================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav-link {
    font-size: 0.82rem;
    padding: 6px 7px;
  }
  
  .navbar-nav.gap-xl-1 {
    gap: 0 !important;
  }
  
  .topbar-desktop .nav-link {
    font-size: 0.75rem;
    padding: 3px 6px;
  }
}

/* =============================================
   RESPONSIVE — Desktop stretto (992-1199px)
   NUOVO: comprime menu PRIMA del breakpoint hamburger.
   Risolve "menu scompare al restringimento".
============================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Topbar nascosta: troppo stretta */
  .topbar-desktop { display: none !important; }

  /* Logo ridotto */
  .navbar-brand svg { width: 200px; }

  /* Nav link compressi */
  .nav-link {
    font-size: 0.72rem;
    padding: 5px 4px;
  }



  /* Mega menu leggermente più stretto */
  .dropdown-menu.mega-menu {
    min-width: 540px;
  }
}

/* =============================================
   RESPONSIVE — Mobile / Tablet (< 992px)
   MODIFICATO: topbar nascosta, navbar height fissa,
   logo ridotto. Il resto invariato.
============================================= */

@media (max-width: 991.98px) {
  .topbar-desktop { display: none !important; }
  .navbar { height: 100px; }
  .navbar-brand svg { width: 250px; }
}

@media (max-width: 1199.98px) {
  
  /* INVARIATO */
  .navbar-collapse {
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* INVARIATO */
  .navbar-nav .nav-link {
    padding: 12px 0;
    border-radius: 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }

  .navbar-nav .nav-link:hover {
    background: transparent;
    color: #005DB6;
    transform: none;
  }

  /* INVARIATO */
  .dropdown-menu.mega-menu {
    min-width: 100% !important;
    box-shadow: none;
    border-radius: 0;
    padding: 1rem;
    border-left: 3px solid #AFFFF9;
    animation: none;
  }

  .dropdown-menu.mega-menu .row {
    flex-direction: column;
  }

  .dropdown-menu.mega-menu .col-md-3,
  .dropdown-menu.mega-menu .col-md-4,
  .dropdown-menu.mega-menu .col-md-6 {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  
  
  /* INVARIATO */
  .topbar-mobile {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 1rem;
    margin-top: 0.5rem;
  }
  
  .topbar-mobile .nav-link {
    padding: 8px 0;
    font-size: 0.95rem;
    border-bottom: none;
  }
  
  .topbar-mobile a[aria-label] .bi {
    font-size: 1.2rem;
  }
}

/* NUOVO: sotto 400px nasconde tel pill e restringe logo */
@media (max-width: 399px) {
  .navbar-tel-pill { display: none; }
  .navbar-brand svg { width: 130px; }
}

/* =============================================
   RESPONSIVE — Solo Mobile piccolo (< 576px)
   INVARIATO
============================================= */

@media (max-width: 575.98px) {
  .navbar-nav .nav-link {
    font-size: 0.95rem;
    padding: 10px 0;
  }
  
  .mega-menu h6 {
    font-size: 1rem;
  }
  
  .mega-menu p {
    font-size: 0.85rem;
  }
}


/* ── Hero wrapper full-width ──────────────────────────── */
/* HERO BASE */
.hero-section {
  width: 100%;
  margin: 0;
  padding: 4rem 0;
  background: url('../images/hero-background.png') center/cover no-repeat;
}


/* ── Contenuto principale ─────────────────────────────── */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 max(1.5rem, (100% - 1320px) / 2);  /* quasi-container */
}

/* ── Colonna testo ────────────────────────────────────── */
.hero-text-col {
  padding: clamp(3rem, 7vw, 6rem) 0;
  max-width: 580px;
}

.hero-text-col h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.815rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: #ebf1ff;
  margin-bottom: 0;
}

.hero-text-col h1 .accent {
  color: #1e6db5;
  font-weight: 400;
}

.hero-text-col p.hero-lead {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.65;
  color: #2C3440;
  max-width: 44ch;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* ── Bottoni ──────────────────────────────────────────── */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Colonna immagine ─────────────────────────────────── */
.hero-img-col {
  position: absolute;
  right: 0px;
  bottom: 0;
  height: 100%;
  /* Larghezza occupata dall'area navy = 100-42% + un po' di overlap */
  width: clamp(52%, 58vw, 66%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
}

.hero-img-col img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  /* L'immagine PNG con trasparenza si sovrappone naturalmente */
  object-fit: contain;
  object-position: bottom center;
  /* Lieve rise dal basso */
  margin-bottom: -4px;
}

/* ── Trust badges sotto i bottoni ─────────────────────── */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin-top: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #00132D;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.hero-trust-item i {
  font-size: 0.8rem;
  color: #0064af;
}



/* =============================================
   ICONE
   MODIFICATO: rimosso !important da font-size
   per evitare conflitti con .navbar-toggler-custom
   e .offcanvas-social-pill che hanno font-size diversi.
============================================= */

.bi-service{
  color:#fff;
  font-size:1.2rem;
}

.feature-icon {
  width: 4rem;
  height: 4rem;
  border-radius: .75rem;
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
}

.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

.card{
  border-radius:6px;
  border:2px solid #E2E6EA;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
} 

#cessioni{
  background:#F4F6F9;
} 

#mutui{
  background:#F4F6F9;
} 

#prestiti{
  background:#F4F6F9;
} 

#imprese{
  background:#F4F6F9;
} 

.card-img-top{
  border-radius:0;
} 

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.feature-icon-small {
  width: 3rem;
  height: 3rem;
}

.text-bg-primary{
 background:#0056a4 !important;
}

.card-hover {
  aspect-ratio: 1080 / 1500;
  position: relative;
  overflow: hidden;
}

.card-image {
  position: absolute;
  background-size: cover;
  background-position: center;
  inset: 0;
  transition: transform 0.6s ease;
  transform: scale(1);
}

.card-hover:hover .card-image {
  transform: scale(1.5) rotateZ(1deg);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

svg {
 width:100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
  list-style-type: none; 
}

/* ================================
   Carousel loghi personalizzato
================================ */

.carousel-inner {
  display: flex;
}

.carousel-item {
  justify-content: space-evenly;
  flex-wrap: nowrap;
  width: 100%;
}

.carousel-inner .row {
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.carousel img {
  height: 50px;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel img:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

.carousel-indicators {
  bottom: -70px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  opacity: 1;
  transition: all 0.3s ease;
}

.carousel-indicators .active {
  background-color: #000;
  transform: scale(1.3);
}

.mobile-scroll-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 20px 16px;
  scrollbar-width: none;
}

.mobile-scroll-cards::-webkit-scrollbar {
  display: none;
}

.mobile-card-item {
  flex: 0 0 82%;
  scroll-snap-align: start;
}

.dropdown-menu.mega-menu {
  min-width: clamp(300px, 80%, 700px);
  max-width: 95vw;      /* evita overflow */
  padding: 1.5rem 2rem;
  border-radius: 16px;
  border: none;
  box-shadow: 0 16px 48px rgba(0, 19, 45, 0.12), 0 0 0 1px rgba(0,19,45,0.04);
  overflow-x: hidden;   /* taglia tutto fuori dal menu */
  animation: none;      /* disattiva slide/fade se presente */
  left: auto;           /* reset eventuale offset */
  right: 0;             /* aggancia al bordo destro */
}

.mega-menu .dropdown-item {
  padding: 6px 8px;
  color: #003970;
  border-radius: 6px;
  transition: background 0.2s ease, padding-left 0.2s ease;
  white-space: nowrap;        /* niente a capo */
  overflow: hidden;           /* taglio contenuto extra */
  text-overflow: ellipsis;    /* taglio elegante con ... */
  font-weight: 400;
  font-size: 0.90rem;
}

.mega-menu .dropdown-item:hover {
  color: #198754;
  text-decoration: none;
}

@media (max-width: 991px) {
  .dropdown-menu.mega-menu {
    min-width: 100% !important;
  }
}


.min-reviews-image{
  width: 38px;
  height: 38px;
  font-size: 13px;
  border-radius:99px
}

.card-reviews-feature {
  max-width: 480px;
  height: auto;
}

@media (min-width: 1200px) {
  .card-reviews-feature {
    height: 350px;
  }
}

/* ============================================
   CAROUSEL BISOGNI — CSS FUNZIONALE
============================================ */

.card-img-wrapper {
  width: 100%;
  overflow: hidden;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-indicators [data-bs-target] {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  opacity: 0.3;
}
.carousel-indicators .active {
  opacity: 1;
}

@media (min-width: 768px) {
  .carousel-control-prev { left: -20px; }
  .carousel-control-next { right: -20px; }
}

@media (max-width: 767.98px) {
  .carousel-inner-mobile { padding: 0 48px; }
}

.card-step{
  background-color:#ECF0FF;
  border-radius:20px;
}

.accordion-item {
  margin-bottom: 50px;
  border:none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.accordion-button {
  background-color: #DCE5FF;
  border-radius: 12px;
}

.accordion-button:not(.collapsed) {
  background-color: #e0e0e0;
  box-shadow: none;
}


  .modal-prodotto-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  }

  .modal-prodotto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0 24px;
  }

  .modal-prodotto-badge {
    display: inline-block;
    background: #f0f4ff;
    color: #3a5bcc;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 5px 14px;
  }

  .modal-prodotto-close {
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
  }
  .modal-prodotto-close:hover {
    background: #e0e0e0;
    color: #222;
  }

  .modal-prodotto-body {
    padding: 20px 28px 10px 28px;
  }

  .modal-prodotto-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .modal-prodotto-lead {
    font-size: 0.97rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .modal-prodotto-features {
    list-style: none;
    padding: 0;
    margin: 0 0 6px 0;
  }
  .modal-prodotto-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.93rem;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
  }
  .modal-prodotto-features li:last-child {
    border-bottom: none;
  }
  .feature-icon {
    color: #3a5bcc;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .modal-prodotto-footer {
    padding: 18px 28px 26px 28px;
    display: flex;
    justify-content: center;
  }

 

    .cookie-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: var(--clr-surface);
      border: 1px solid var(--clr-border);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }

    .cookie-table thead th {
      background: #f0f0ec;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--clr-muted);
      padding: 0.85rem 1rem;
      border-bottom: 1px solid var(--clr-border);
      white-space: nowrap;
    }

    .cookie-table tbody tr {
      border-bottom: 1px solid var(--clr-border);
      transition: background 0.15s;
    }

    .cookie-table tbody tr:last-child {
      border-bottom: none;
    }

    .cookie-table tbody tr:hover {
      background: #fafaf8;
    }

    .cookie-table td {
      padding: 1rem 1rem;
      vertical-align: top;
      font-size: 0.875rem;
      line-height: 1.6;
    }

    .badge-tipo {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.68rem;
      font-weight: 500;
      background: #e8effe;
      color: #1a56db;
      border-radius: 4px;
      padding: 2px 7px;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .badge-desc {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      border-radius: 20px;
      padding: 3px 9px;
      white-space: nowrap;
    }

    .badge-tecnico {
      background: #d1fae5;
      color: #065f46;
    }

    .badge-analitico {
      background: #fef3c7;
      color: #92400e;
    }

    .cookie-name {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--clr-text);
      word-break: break-all;
    }

    .cookie-purpose {
      color: #374151;
      font-size: 0.85rem;
    }

    .expiry {
      display: inline-block;
      margin-top: 0.3rem;
      font-size: 0.72rem;
      color: var(--clr-muted);
      font-style: italic;
    }

    @media (max-width: 767px) {
      .cookie-table,
      .cookie-table thead,
      .cookie-table tbody,
      .cookie-table th,
      .cookie-table td,
      .cookie-table tr {
        display: block;
        width: 100%;
      }

      .cookie-table thead {
        display: none;
      }

      .cookie-table tbody tr {
        border: 1px solid var(--clr-border);
        border-radius: 8px;
        margin-bottom: 0.75rem;
        padding: 0;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        background: var(--clr-surface);
      }

      .cookie-table td {
        display: grid;
        grid-template-columns: 90px 1fr;
        align-items: start;
        gap: 0.5rem;
        padding: 0.65rem 0.9rem;
        border-bottom: 1px solid var(--clr-border);
        font-size: 0.84rem;
      }

      .cookie-table td:last-child {
        border-bottom: none;
      }

      .cookie-table td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--clr-muted);
        padding-top: 2px;
      }
    }

    .footer-char{
       background-color: #DBDEE3;
       margin-bottom:-50px; 
       font-weight:500;   
       color:#0056a4;   
    }

    .pap-page {
      --pap-navy:      #1a2e4a;
      --pap-navy-alt:  #2e4a6e;
      --pap-teal:      #6b8fa3;
      --pap-card-bg:   #dce8ee;
      --pap-bg:        #f4f7f9;
      font-family: inherit;
    }

    /* ── Hero ── */
    .pap-hero {
      background: #fff;
      padding: 64px 0 48px;
      border-bottom: 1px solid #e0e8ed;
    }
    .pap-hero__title {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 700;
      color: var(--pap-navy);
      margin: 0;
    }
  

    /* ── Sezione posizioni ── */
    .pap-section {
      background: var(--pap-bg);
      padding-top: 48px;
      padding-bottom: 64px;
    }
    .pap-section__label {
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--pap-teal);
      font-weight: 700;
      margin-bottom: 8px;
    }
    .pap-section__title {
      font-size: clamp(1.1rem, 2.5vw, 1.45rem);
      font-weight: 700;
      color: var(--pap-navy);
      max-width: 700px;
      line-height: 1.5;
      margin: 0;
    }

    /* ── Filtri ── */
    .pap-filters {
      background: #fff;
      border-radius: 12px;
      padding: 14px 18px;
      box-shadow: 0 2px 10px rgba(0,0,0,.07);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }
    /* Classe select propria — NON sovrascrive .form-select Bootstrap */
    .pap-select {
      appearance: none;
      -webkit-appearance: none;
      background-color: #002e5d;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      border: none;
      border-radius: 6px;
      color: #fff;
      font-weight: 600;
      font-size: .88rem;
      padding: 9px 40px 9px 16px;
      cursor: pointer;
      transition: background-color .2s;
      min-width: 200px;
    }
    .pap-select:hover,
    .pap-select:focus {
      background-color: var(--pap-navy);
      outline: none;
    }
    .pap-select option {
      background: var(--pap-navy);
      color: #fff;
    }

    /* Contatore risultati */
    .pap-count {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .8rem;
      color: #666;
      margin-left: auto;
    }
    .pap-count__badge {
      background: var(--pap-navy);
      color: #fff;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 700;
      padding: 2px 12px;
    }

    /* ── Card lavoro ── */
    .pap-card {
      border-radius: 20px;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.08);
      border: 1px solid #E2E6EA;
      background: #fff;
      border-radius: 16px;
      padding: 28px 22px 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 220px;
      height: 100%;
      transition: box-shadow .2s, transform .15s;
    }
    .pap-card:hover {
      box-shadow: 0 8px 28px rgba(26,46,74,.16);
      transform: translateY(-3px);
    }
    .pap-card__role {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--pap-navy);
      font-weight: 700;
      margin-bottom: 6px;
    }
    .pap-card__title {
      font-size: .98rem;
      font-weight: 700;
      color: var(--pap-navy);
      line-height: 1.45;
      margin: 0 0 18px;
    }
    .pap-card__footer {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
    }
    .pap-card__location {
      display: flex;
      gap: 6px;
      font-size: .78rem;
      color: #445;
      line-height: 1.4;
    }
    .pap-card__location i {
      color: var(--pap-navy);
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* Messaggio nessun risultato */
    .pap-empty {
      display: none;
      text-align: center;
      padding: 48px 0;
    }
    .pap-empty i { font-size: 2.5rem; color: #aaa; }
    .pap-empty p { margin-top: 12px; color: #888; }

 .pap-job-item{
  margin:4px;
 }

 @media (min-width: 992px) {
  #pap-job-grid .col {
    flex: 0 0 auto;
    width: 33.3333%;
  }
}

  /* CSS Grid autonomo per la griglia PAP — immune da qualsiasi
       override Bootstrap (.row, gutter, col-*) del progetto */
    #pap-job-grid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      /* azzera eventuali margin negativi residui di Bootstrap .row */
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Su tablet: 2 colonne */
    @media (max-width: 991px) {
      #pap-job-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Su mobile: 1 colonna */
    @media (max-width: 575px) {
      #pap-job-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Le classi col-* di Bootstrap non devono Plus Jakarta Sansferire */
    #pap-job-grid > .pap-job-item {
      width: auto !important;
      max-width: none !important;
      flex: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

        /* ── Layout annuncio ─────────────────────────────── */
    .ann-wrap {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 2.5rem;
      align-items: start;
    }
    @media (max-width: 991px) {
      .ann-wrap { grid-template-columns: 1fr; }
    }

    /* ── Hero testata ────────────────────────────────── */
    .ann-hero {
      background: #fff;
      border-bottom: 1px solid #e0e8ed;
      padding: 48px 0 36px;
    }
    .ann-hero__breadcrumb {
      font-size: .78rem;
      color: #6c7a8a;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ann-hero__breadcrumb a { color: #2F7889; text-decoration: none; }
    .ann-hero__breadcrumb a:hover { text-decoration: underline; }
    .ann-hero__role {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      color: #2F7889;
      margin-bottom: 8px;
    }
    .ann-hero__title {
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 800;
      color: #1a2e4a;
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .ann-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .ann-meta__badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: .78rem;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 50px;
    }
    .ann-meta__badge--loc  { background: #DCE5FF; color: #1a2e4a; }
    .ann-meta__badge--role { background: #d1f5f0; color: #0b5e55; }
    .ann-meta__badge--reg  { background: #fff3cd; color: #7d5000; }
    .ann-meta__badge--xtra { background: #f0f0f0; color: #444; }

    /* ── Corpo contenuto ─────────────────────────────── */
    .ann-body {
      background: #fff;
      padding: 40px 0 64px;
    }
    .ann-section-title {
      font-size: 1rem;
      font-weight: 700;
      color: #1a2e4a;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 2px solid #DCE5FF;
    }
    .ann-intro {
      font-size: 1.05rem;
      line-height: 1.7;
      color: #2c3a4a;
      margin-bottom: 36px;
    }
    .ann-list {
      list-style: none;
      padding: 0;
      margin: 0 0 32px;
    }
    .ann-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: .95rem;
      color: #2c3a4a;
      line-height: 1.55;
      padding: 7px 0;
      border-bottom: 1px solid #f0f2f5;
    }
    .ann-list li:last-child { border-bottom: none; }
    .ann-list__icon {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      margin-top: 2px;
    }
    .ann-list__icon--green { background: #d1f5f0; color: #0b5e55; }
    .ann-list__icon--blue  { background: #DCE5FF; color: #1a2e4a; }

    .ann-contratto {
      background: #f4f7f9;
      border-left: 4px solid #2F7889;
      border-radius: 0 10px 10px 0;
      padding: 16px 20px;
      font-size: .9rem;
      color: #334;
      margin-bottom: 0;
    }

    /* ── Sticky form card ────────────────────────────── */
    .ann-form-card {
      background: #fff;
      border: 1px solid #e2e6ea;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(26,46,74,.10);
      padding: 32px 28px;
      position: sticky;
      top: 24px;
    }
    .ann-form-card__title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #1a2e4a;
      margin-bottom: 6px;
    }
    .ann-form-card__sub {
      font-size: .82rem;
      color: #6c7a8a;
      margin-bottom: 24px;
    }

    /* Campi form */
    .ann-field {
      margin-bottom: 14px;
    }
    .ann-field label {
      display: block;
      font-size: .78rem;
      font-weight: 600;
      color: #445;
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .ann-field input,
    .ann-field textarea,
    .ann-field select {
      width: 100%;
      padding: 10px 14px;
      border: 1.5px solid #d0d7e0;
      border-radius: 10px;
      font-size: .9rem;
      color: #1a2e4a;
      background: #f8fafc;
      transition: border-color .2s, box-shadow .2s;
      outline: none;
      font-family: inherit;
    }
    .ann-field input:focus,
    .ann-field textarea:focus {
      border-color: #2F7889;
      box-shadow: 0 0 0 3px rgba(47,120,137,.12);
      background: #fff;
    }
    .ann-field textarea { resize: vertical; min-height: 90px; }

    /* Upload CV */
    .ann-upload-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 2px dashed #b0c4d0;
      border-radius: 12px;
      padding: 22px 16px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      background: #f4f7f9;
      text-align: center;
    }
    .ann-upload-label:hover {
      border-color: #2F7889;
      background: #eaf4f7;
    }
    .ann-upload-label i { font-size: 1.8rem; color: #2F7889; }
    .ann-upload-label span { font-size: .82rem; color: #556; }
    .ann-upload-label strong { font-size: .85rem; color: #1a2e4a; }
    #cv-file-name {
      font-size: .78rem;
      color: #2F7889;
      margin-top: 6px;
      font-weight: 600;
      display: none;
    }
    input[type="file"] { display: none; }

    /* Privacy checkbox */
    .ann-privacy {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin: 14px 0 20px;
      font-size: .78rem;
      color: #556;
      line-height: 1.5;
    }
    .ann-privacy input[type="checkbox"] {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 2px;
      accent-color: #2F7889;
    }
    .ann-privacy a { color: #2F7889; }

    /* Submit */
    .ann-submit {
      width: 100%;
      height: 52px;
      background: #1a2e4a;
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s, transform .15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .ann-submit:hover {
      background: #2F7889;
      transform: translateY(-1px);
    }

    /* Alert messaggi */
    .ann-alert {
      border-radius: 10px;
      padding: 12px 16px;
      font-size: .88rem;
      margin-bottom: 16px;
    }
    .ann-alert--success { background: #d1f5f0; color: #0b5e55; border: 1px solid #a7ead9; }
    .ann-alert--error   { background: #fde8e8; color: #7b1c1c; border: 1px solid #f5b7b7; }

    /* Coppia campi nome/cognome */
    .ann-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 480px) {
      .ann-row-2 { grid-template-columns: 1fr; }
      .ann-form-card { padding: 24px 18px; }
    }

/* ── Hero ───────────────────────────────────────────────── */
.pp-hero { position:relative; min-height:auto; display:flex; align-items:center; overflow:hidden; background:var(--pp-navy); }
/* spostando il fuoco più in alto l'immagine resta ben inquadrata anche da bassa */
.pp-hero-bg { position:absolute; inset:0; background-image:url('../images/hero-pp.jpg'); background-size:cover; background-position:center 28%; transform:scale(1.02); }
.pp-hero-overlay { position:absolute; inset:0; background:linear-gradient(105deg,rgba(0,28,60,0.92) 0%,rgba(0,28,60,0.72) 48%,rgba(0,28,60,0.20) 100%); }
/* ── distanza testo bilanciata sopra/sotto ── */
.pp-hero-inner { position:relative; z-index:2; width:100%; padding:40px 0 40px; }
.pp-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22); border-radius:50px; padding:5px 16px 5px 10px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,0.82); margin-bottom:18px; }
.pp-eyebrow-dot { width:8px; height:8px; border-radius:50%; background:var(--pp-accent); display:inline-block; }
.pp-hero-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.9rem,4vw,3rem); font-weight:900; color:#fff; line-height:1.13; letter-spacing:-0.8px; margin-bottom:18px; }
.pp-hero-title em { font-style:normal; color:var(--pp-accent); }
.pp-hero-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(.92rem,1.6vw,1.05rem); color:rgba(255,255,255,0.78); line-height:1.65; max-width:480px; margin-bottom:28px; }
.pp-hero-badges { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px; }
.pp-hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:6px 13px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.76rem; font-weight:600; color:rgba(255,255,255,0.88); }
.pp-hero-badge i { color:var(--pp-accent); font-size:.88rem; }
.pp-hero-ctas { display:flex; flex-wrap:wrap; gap:12px; }
.pp-btn-primary { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--pp-navy); border:none; border-radius:12px; padding:14px 28px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; box-shadow:0 6px 24px rgba(0,0,0,0.20); text-decoration:none; white-space:nowrap; }
.pp-btn-primary:hover { background:#e0f7fa; color:var(--pp-navy); transform:translateY(-2px); }
.pp-btn-secondary { display:inline-flex; align-items:center; gap:7px; background:transparent; color:rgba(255,255,255,0.88); border:1.5px solid rgba(255,255,255,0.35); border-radius:12px; padding:13px 22px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; font-weight:600; cursor:poPlus Jakarta Sans; transition:all .15s; text-decoration:none; white-space:nowrap; }
.pp-btn-secondary:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.6); color:#fff; }
.pp-trust-bar { display:flex; flex-wrap:wrap; gap:20px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.14); }
.pp-trust-item { display:flex; align-items:center; gap:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.74rem; font-weight:600; color:rgba(255,255,255,0.60); }
.pp-trust-item i { color:var(--pp-accent); font-size:.84rem; }

/* ── Form card ──────────────────────────────────────────── */
.pp-form-col { display:flex; align-items:center; justify-content:flex-end; }
/* ── form più evidente: ombra più profonda + sottile anello + micro-stacco ── */
.pp-form-card {
  background:#fff;
  border-radius:18px;
  box-shadow:0 26px 70px rgba(0,8,28,0.42);
  outline:1px solid rgba(255,255,255,0.55);
  outline-offset:0;
  width:100%;
  max-width:392px;
  overflow:hidden;
}
.pp-form-head { background:var(--pp-navy); padding:18px 22px 16px; }
.pp-form-head-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.93rem; font-weight:800; color:#fff; margin:0 0 3px; }
.pp-form-head-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.70rem; color:rgba(255,255,255,0.60); margin:0 0 14px; }
.pp-steps { display:flex; align-items:flex-start; gap:0; }
.pp-step-wrap { display:flex; flex-direction:column; align-items:center; }
.pp-step-dot { width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.30); background:transparent; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:rgba(255,255,255,0.50); transition:all .22s; flex-shrink:0; }
.pp-step-dot.active { background:#fff; border-color:#fff; color:var(--pp-navy); }
.pp-step-dot.done { background:rgba(38,198,218,0.25); border-color:var(--pp-accent); color:var(--pp-accent); }
.pp-step-line { flex:1; height:2px; background:rgba(255,255,255,0.15); margin:12px 4px 0; }
.pp-step-lbl { font-family:'Plus Jakarta Sans',sans-serif; font-size:.54rem; font-weight:600; color:rgba(255,255,255,0.40); text-transform:uppercase; letter-spacing:.3px; margin-top:3px; white-space:nowrap; }
.pp-step-wrap.active .pp-step-lbl { color:rgba(255,255,255,0.88); }
.pp-step-wrap.done .pp-step-lbl { color:rgba(38,198,218,0.70); }
.pp-form-body { padding:18px 20px 14px; }
.pp-form-panel { display:none; }
.pp-form-panel.active { display:block; animation:ppFadeIn .22s ease; }
@keyframes ppFadeIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
.pp-field-label { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.67rem; font-weight:700; color:var(--pp-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.pp-field { width:100%; box-sizing:border-box; border:1.5px solid var(--pp-border); border-radius:10px; padding:10px 13px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; font-weight:500; color:#1a2840; background:#f5f7fb; outline:none; transition:border-color .15s,box-shadow .15s; -webkit-appearance:none; appearance:none; }
.pp-field:focus { border-color:var(--pp-teal); box-shadow:0 0 0 3px rgba(0,137,123,0.10); background:#fff; }
.pp-field::placeholder { color:#8098b4; }
.pp-field-group { margin-bottom:11px; }
.pp-range-display { text-align:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.45rem; font-weight:800; color:var(--pp-navy); letter-spacing:-0.5px; margin-bottom:4px; }
.pp-range { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px; background:linear-gradient(to right,var(--pp-navy) 0%,var(--pp-navy) var(--val,33%),var(--pp-border) var(--val,33%),var(--pp-border) 100%); outline:none; cursor:poPlus Jakarta Sans; }
.pp-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--pp-navy); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.22); cursor:poPlus Jakarta Sans; }
.pp-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--pp-navy); border:3px solid #fff; cursor:poPlus Jakarta Sans; }
.pp-range-labels { display:flex; justify-content:space-between; font-family:'Plus Jakarta Sans',sans-serif; font-size:.66rem; color:#8098b4; margin-top:3px; margin-bottom:10px; }
.pp-proj-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:4px; }
.pp-proj-pill { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 5px 7px; border-radius:10px; border:1.5px solid var(--pp-border); background:#f5f7fb; cursor:poPlus Jakarta Sans; transition:all .14s; font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:var(--pp-muted); text-align:center; }
.pp-proj-pill i { font-size:1rem; }
.pp-proj-pill.selected { background:var(--pp-light); border-color:var(--pp-teal); color:var(--pp-teal); }
.pp-proj-pill:hover:not(.selected) { border-color:#b0c4d8; background:#edf2f8; }
.pp-rich-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:4px; }
.pp-rich-pill { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 5px 7px; border-radius:10px; border:1.5px solid var(--pp-border); background:#f5f7fb; cursor:poPlus Jakarta Sans; transition:all .14s; font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:var(--pp-muted); text-align:center; }
.pp-rich-pill i { font-size:1rem; }
.pp-rich-pill.selected { background:var(--pp-light); border-color:var(--pp-teal); color:var(--pp-teal); }
.pp-rich-pill:hover:not(.selected) { border-color:#b0c4d8; background:#edf2f8; }
.pp-form-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.pp-btn-back { display:inline-flex; align-items:center; gap:5px; background:transparent; border:1.5px solid var(--pp-border); border-radius:10px; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; font-weight:600; color:var(--pp-muted); cursor:poPlus Jakarta Sans; transition:all .14s; }
.pp-btn-back:hover { border-color:var(--pp-teal); color:var(--pp-navy); }
.pp-btn-next { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--pp-navy); border:none; border-radius:10px; padding:12px 16px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.86rem; font-weight:700; color:#fff; cursor:poPlus Jakarta Sans; transition:all .14s; box-shadow:0 4px 14px rgba(0,46,93,0.25); }
.pp-btn-next:hover { background:var(--pp-teal); transform:translateY(-1px); }
.pp-btn-submit { background:linear-gradient(135deg,var(--pp-navy) 0%,var(--pp-teal) 100%); }
.pp-form-secure { text-align:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:.64rem; color:#8098b4; margin:8px 0 0; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.pp-breadcrumb-strip { background:#fff; border-bottom:1px solid var(--pp-border); padding:10px 0; }
.pp-breadcrumb { display:flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.74rem; color:var(--pp-muted); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.pp-breadcrumb li+li::before { content:'›'; margin-right:6px; color:#b0bec5; }
.pp-breadcrumb a { color:var(--pp-blue); text-decoration:none; font-weight:600; }
.pp-breadcrumb a:hover { text-decoration:underline; }
.pp-breadcrumb li:last-child { color:var(--pp-navy); font-weight:700; }

/* ── Utility sezioni ────────────────────────────────────── */
.pp-section-label { display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--pp-teal); background:var(--pp-light); border-radius:50px; padding:5px 14px; margin-bottom:16px; }
.pp-section-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:900; color:var(--pp-navy); line-height:1.15; letter-spacing:-0.5px; margin-bottom:20px; }
.pp-section-title em { font-style:normal; color:var(--pp-teal); }
.pp-section-intro { font-family:'Plus Jakarta Sans',sans-serif; font-size:.97rem; color:var(--pp-muted); max-width:580px; margin:0 auto 44px; line-height:1.65; text-align:center; }

/* ── Cos'è ──────────────────────────────────────────────── */
.pp-cosa-section { background:#fff; padding:72px 0 64px; }
.pp-cosa-lead { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.08rem; font-weight:500; color:var(--pp-text); line-height:1.72; margin-bottom:18px; }
.pp-cosa-body { font-family:'Plus Jakarta Sans',sans-serif; font-size:.96rem; color:#2c3a4a; line-height:1.76; margin-bottom:16px; }
.pp-highlight-box { background:linear-gradient(135deg,#E0F7FA 0%,#b2ebf2 100%); border-left:4px solid var(--pp-teal); border-radius:0 14px 14px 0; padding:20px 24px; margin:24px 0; }
.pp-highlight-box-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.80rem; font-weight:800; color:var(--pp-teal); letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.pp-highlight-box p { font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:var(--pp-navy); line-height:1.65; margin:0; }

/* ── Punti di forza ─────────────────────────────────────── */
.pp-forza-section { background:var(--pp-bg); padding:72px 0 64px; }
.pp-forza-card { background:#fff; border-radius:16px; padding:24px 20px 20px; border:1px solid var(--pp-border); height:100%; transition:box-shadow .22s,transform .18s; position:relative; overflow:hidden; }
.pp-forza-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--pp-navy),var(--pp-teal)); opacity:0; transition:opacity .22s; }
.pp-forza-card:hover { box-shadow:0 10px 32px rgba(0,46,93,0.12); transform:translateY(-4px); }
.pp-forza-card:hover::before { opacity:1; }
.pp-forza-icon { width:44px; height:44px; border-radius:11px; background:var(--pp-light); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--pp-teal); margin-bottom:14px; }
.pp-forza-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.94rem; font-weight:800; color:var(--pp-navy); margin-bottom:7px; line-height:1.3; }
.pp-forza-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--pp-muted); line-height:1.6; margin:0; }

/* ── Chi può richiedere ─────────────────────────────────── */
.pp-chi-section { background:#fff; padding:72px 0 64px; }
.pp-chi-card { background:var(--pp-bg); border-radius:16px; padding:26px 22px 20px; height:100%; border:1px solid var(--pp-border); transition:box-shadow .22s,transform .18s; }
.pp-chi-card:hover { box-shadow:0 10px 32px rgba(0,46,93,0.10); transform:translateY(-3px); }
.pp-chi-icon { width:44px; height:44px; border-radius:11px; background:var(--pp-light); display:flex; align-items:center; justify-content:center; color:var(--pp-teal); font-size:1.2rem; margin-bottom:14px; }
.pp-chi-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.94rem; font-weight:800; color:var(--pp-navy); margin-bottom:9px; }
.pp-chi-body { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--pp-muted); line-height:1.65; margin:0; }

/* ── Come funziona (steps orizzontali) ──────────────────── */
.pp-funziona-section { background:var(--pp-bg); padding:72px 0 64px; }
.pp-step-card { background:#fff; border-radius:16px; padding:28px 22px 22px; height:100%; border:1px solid var(--pp-border); text-align:center; }
.pp-step-num { width:44px; height:44px; border-radius:50%; background:var(--pp-navy); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.pp-step-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.94rem; font-weight:800; color:var(--pp-navy); margin-bottom:8px; }
.pp-step-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--pp-muted); line-height:1.6; margin:0; }
.pp-step-arrow { display:flex; align-items:center; justify-content:center; color:#b0bec5; font-size:1.5rem; padding-top:14px; }

/* ── Stats navy ─────────────────────────────────────────── */
.pp-stats-section { background:var(--pp-navy); padding:64px 0; position:relative; overflow:hidden; }
.pp-stats-section::before { content:''; position:absolute; top:-80px; right:-80px; width:360px; height:360px; border-radius:50%; background:rgba(38,198,218,0.06); }
.pp-stats-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:12px; }
.pp-stats-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:rgba(255,255,255,0.65); line-height:1.65; }
.pp-stat-block { display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px; border-left:1px solid rgba(255,255,255,0.10); }
.pp-stat-block:first-child { border-left:none; }
.pp-stat-icon { width:48px; height:48px; border-radius:13px; background:rgba(38,198,218,0.12); display:flex; align-items:center; justify-content:center; color:var(--pp-accent); font-size:1.35rem; margin-bottom:10px; }
.pp-stat-label { font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:rgba(255,255,255,0.48); text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.pp-stat-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; font-weight:800; color:#fff; }
.pp-stat-desc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.76rem; color:rgba(255,255,255,0.48); margin-top:3px; }

/* ── Requisiti ──────────────────────────────────────────── */
.pp-requisiti-section { background:#fff; padding:72px 0 64px; }
.pp-req-card { background:var(--pp-bg); border-radius:14px; padding:22px 20px; border:1px solid var(--pp-border); height:100%; }
.pp-req-icon { width:42px; height:42px; border-radius:10px; background:var(--pp-light); display:flex; align-items:center; justify-content:center; color:var(--pp-teal); font-size:1.15rem; margin-bottom:12px; }
.pp-req-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.86rem; font-weight:800; color:var(--pp-navy); margin-bottom:10px; }
.pp-req-list { list-style:none; padding:0; margin:0; }
.pp-req-list li { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--pp-muted); line-height:1.5; padding:5px 0; border-bottom:1px solid var(--pp-border); display:flex; align-items:flex-start; gap:8px; }
.pp-req-list li:last-child { border-bottom:none; }
.pp-req-list li i { color:var(--pp-accent); margin-top:2px; font-size:.76rem; flex-shrink:0; }

/* ── CTA ────────────────────────────────────────────────── */
.pp-cta-section { background:var(--pp-light); padding:60px 0; }
.pp-cta-card { background:var(--pp-teal); border-radius:20px; padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.pp-cta-card::before { content:''; position:absolute; top:-60px; right:80px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.04); }
.pp-cta-icon { width:50px; height:50px; border-radius:13px; background:rgba(38,198,218,0.18); display:flex; align-items:center; justify-content:center; color:var(--pp-accent); font-size:1.35rem; flex-shrink:0; }
.pp-cta-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1rem,2.5vw,1.5rem); font-weight:900; color:#fff; margin-bottom:5px; }
.pp-cta-desc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; color:rgba(255,255,255,0.68); line-height:1.6; margin:0; max-width:440px; }
.pp-cta-btn { display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--pp-navy); border:none; border-radius:12px; padding:14px 26px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.90rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; box-shadow:0 6px 24px rgba(0,0,0,0.20); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.pp-cta-btn:hover { background:#e0f7fa; color:var(--pp-navy); transform:translateY(-2px); }
.pp-final-section { background:var(--pp-bg); padding:52px 0; }
.pp-final-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; border-radius:16px; padding:26px 34px; border:1px solid var(--pp-border); flex-wrap:wrap; }
.pp-final-icon { width:48px; height:48px; border-radius:13px; background:var(--pp-light); display:flex; align-items:center; justify-content:center; color:var(--pp-teal); font-size:1.3rem; flex-shrink:0; }
.pp-final-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:800; color:var(--pp-navy); margin-bottom:3px; }
.pp-final-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.84rem; color:var(--pp-muted); margin:0; }
.pp-final-btn { display:inline-flex; align-items:center; gap:8px; background:var(--pp-navy); color:#fff; border:none; border-radius:12px; padding:13px 24px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.90rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.pp-final-btn:hover { background:var(--pp-teal); color:#fff; transform:translateY(-2px); }

/* ── Animazioni ─────────────────────────────────────────── */
.pp-fade-up { opacity:0; transform:translateY(22px); transition:opacity .52s ease,transform .52s ease; }
.pp-fade-up.pp-visible { opacity:1; transform:translateY(0); }
.pp-fade-up.d1{transition-delay:.08s} .pp-fade-up.d2{transition-delay:.16s} .pp-fade-up.d3{transition-delay:.24s}
.pp-fade-up.d4{transition-delay:.32s} .pp-fade-up.d5{transition-delay:.40s}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:991.98px) {
  .pp-hero{min-height:auto} .pp-hero-inner{padding:48px 0 48px}
  .pp-hero-overlay{background:linear-gradient(180deg,rgba(0,28,60,0.90) 0%,rgba(0,28,60,0.80) 100%)}
  .pp-form-col{justify-content:center;margin-top:32px} .pp-form-card{max-width:440px}
  .pp-stat-block{border-left:none;border-top:1px solid rgba(255,255,255,0.10);padding-top:20px;margin-top:8px}
  .pp-stat-block:first-child{border-top:none}
}
@media (max-width:767.98px) {
  .pp-hero-title{font-size:1.8rem} .pp-hero-ctas{flex-direction:column}
  .pp-btn-primary,.pp-btn-secondary,.pp-final-btn{width:100%;justify-content:center}
  .pp-cta-card{flex-direction:column;text-align:center} .pp-cta-desc{margin:0 auto}
  .pp-final-inner{flex-direction:column;text-align:center}
  .pp-step-arrow{display:none}
}

/* ── Hero ───────────────────────────────────────────────── */
.cq-hero { position:relative; min-height:72vh; display:flex; align-items:center; overflow:hidden; background:var(--cq-navy); }
.cq-hero-bg { position:absolute; inset:0; background-image:url('../images/hero-cq.jpg'); background-size:cover; background-position:center 35%; transform:scale(1.02); }
.mm-hero-bg { position:absolute; inset:0; background-image:url('../images/hero-mutui.jpg'); background-size:cover; background-position:center 35%; transform:scale(1.02); }
.cq-hero-overlay { position:absolute; inset:0; background:linear-gradient(105deg,rgba(0,28,60,0.92) 0%,rgba(0,28,60,0.72) 48%,rgba(0,28,60,0.20) 100%); }
.cq-hero-inner { position:relative; z-index:2; width:100%; padding:80px 0 72px; }
.cq-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22); border-radius:50px; padding:5px 16px 5px 10px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,0.82); margin-bottom:18px; }
.cq-eyebrow-dot { width:8px; height:8px; border-radius:50%; background:var(--cq-accent); display:inline-block; }
.cq-hero-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.9rem,4vw,3rem); font-weight:900; color:#fff; line-height:1.13; letter-spacing:-0.8px; margin-bottom:18px; }
.cq-hero-title em { font-style:normal; color:var(--cq-accent); }
.cq-hero-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(.92rem,1.6vw,1.05rem); color:rgba(255,255,255,0.78); line-height:1.65; max-width:480px; margin-bottom:28px; }
.cq-hero-badges { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px; }
.cq-hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:6px 13px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.76rem; font-weight:600; color:rgba(255,255,255,0.88); }
.cq-hero-badge i { color:var(--cq-accent); font-size:.88rem; }
.cq-hero-ctas { display:flex; flex-wrap:wrap; gap:12px; }
.cq-btn-primary { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--cq-navy); border:none; border-radius:12px; padding:14px 28px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; box-shadow:0 6px 24px rgba(0,0,0,0.20); text-decoration:none; white-space:nowrap; }
.cq-btn-primary:hover { background:#e8f0fb; color:var(--cq-navy); transform:translateY(-2px); }
.cq-btn-secondary { display:inline-flex; align-items:center; gap:7px; background:transparent; color:rgba(255,255,255,0.88); border:1.5px solid rgba(255,255,255,0.35); border-radius:12px; padding:13px 22px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; font-weight:600; cursor:poPlus Jakarta Sans; transition:all .15s; text-decoration:none; white-space:nowrap; }
.cq-btn-secondary:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.6); color:#fff; }
.cq-trust-bar { display:flex; flex-wrap:wrap; gap:20px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.14); }
.cq-trust-item { display:flex; align-items:center; gap:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.74rem; font-weight:600; color:rgba(255,255,255,0.60); }
.cq-trust-item i { color:var(--cq-accent); font-size:.84rem; }

/* ── Form card ──────────────────────────────────────────── */
.cq-form-col { display:flex; align-items:center; justify-content:flex-end; }
.cq-form-card { background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,10,30,0.30); width:100%; max-width:380px; overflow:hidden; }
.cq-form-head { background:var(--cq-navy); padding:18px 22px 16px; }
.cq-form-head-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.93rem; font-weight:800; color:#fff; margin:0 0 3px; }
.cq-form-head-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.70rem; color:rgba(255,255,255,0.60); margin:0 0 14px; }
.cq-steps { display:flex; align-items:flex-start; gap:0; }
.cq-step-wrap { display:flex; flex-direction:column; align-items:center; }
.cq-erogazione-section--light { background:var(--cq-bg); }
.cq-erogazione-section--light::before { background:rgba(0,46,93,0.05); }
.cq-erogazione-section--light h2 { color:var(--cq-navy); }
.cq-erogazione-section--light p { color:var(--cq-muted); }
.cq-erogazione-section--light .cq-stat-block { border-left-color:rgba(0,46,93,0.10); }
.cq-erogazione-section--light .cq-stat-icon {
  width:84px; height:84px; border-radius:20px;
  background:var(--cq-light); color:var(--cq-navy);
  font-size:2.2rem; margin-bottom:14px;
}
.cq-erogazione-section--light .cq-stat-label { color:var(--cq-muted); }
.cq-erogazione-section--light .cq-stat-value { color:var(--cq-navy); font-size:1.2rem; }
.cq-erogazione-section--light .cq-stat-desc { color:var(--cq-muted); }
@media (max-width:991.98px) {
  .cq-erogazione-section--light .cq-stat-block { border-top-color:rgba(0,46,93,0.10); }
}
.cq-step-dot { width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.30); background:transparent; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:rgba(255,255,255,0.50); transition:all .22s; flex-shrink:0; }
.cq-step-dot.active { background:#fff; border-color:#fff; color:var(--cq-navy); }
.cq-step-dot.done { background:rgba(79,195,247,0.25); border-color:var(--cq-accent); color:var(--cq-accent); }
.cq-step-line { flex:1; height:2px; background:rgba(255,255,255,0.15); margin:12px 4px 0; }
.cq-step-lbl { font-family:'Plus Jakarta Sans',sans-serif; font-size:.54rem; font-weight:600; color:rgba(255,255,255,0.40); text-transform:uppercase; letter-spacing:.3px; margin-top:3px; white-space:nowrap; }
.cq-step-wrap.active .cq-step-lbl { color:rgba(255,255,255,0.88); }
.cq-step-wrap.done .cq-step-lbl { color:rgba(79,195,247,0.70); }
.cq-form-body { padding:18px 20px 14px; }
.cq-form-panel { display:none; }
.cq-form-panel.active { display:block; animation:cqFadeIn .22s ease; }
@keyframes cqFadeIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
.cq-field-label { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.67rem; font-weight:700; color:var(--cq-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.cq-field { width:100%; box-sizing:border-box; border:1.5px solid var(--cq-border); border-radius:10px; padding:10px 13px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; font-weight:500; color:#1a2840; background:#f5f7fb; outline:none; transition:border-color .15s,box-shadow .15s; -webkit-appearance:none; appearance:none; }
.cq-field:focus { border-color:var(--cq-blue); box-shadow:0 0 0 3px rgba(0,86,164,0.10); background:#fff; }
.cq-field::placeholder { color:#8098b4; }
.cq-field-group { margin-bottom:11px; }
.cq-range-display { text-align:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.45rem; font-weight:800; color:var(--cq-navy); letter-spacing:-0.5px; margin-bottom:4px; }
.cq-range { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px; background:linear-gradient(to right,var(--cq-navy) 0%,var(--cq-navy) var(--val,33%),var(--cq-border) var(--val,33%),var(--cq-border) 100%); outline:none; cursor:poPlus Jakarta Sans; }
.cq-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--cq-navy); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.22); cursor:poPlus Jakarta Sans; }
.cq-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--cq-navy); border:3px solid #fff; cursor:poPlus Jakarta Sans; }
.cq-range-labels { display:flex; justify-content:space-between; font-family:'Plus Jakarta Sans',sans-serif; font-size:.66rem; color:#8098b4; margin-top:3px; margin-bottom:10px; }
.cq-tipo-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:4px; }
.cq-tipo-pill { display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 6px 8px; border-radius:10px; border:1.5px solid var(--cq-border); background:#f5f7fb; cursor:poPlus Jakarta Sans; transition:all .14s; font-family:'Plus Jakarta Sans',sans-serif; font-size:.70rem; font-weight:700; color:var(--cq-muted); text-align:center; }
.cq-tipo-pill i { font-size:1.05rem; }
.cq-tipo-pill.selected { background:var(--cq-light); border-color:var(--cq-blue); color:var(--cq-navy); }
.cq-tipo-pill:hover:not(.selected) { border-color:#b0c4d8; background:#edf2f8; }
.cq-form-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.cq-btn-back { display:inline-flex; align-items:center; gap:5px; background:transparent; border:1.5px solid var(--cq-border); border-radius:10px; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; font-weight:600; color:var(--cq-muted); cursor:poPlus Jakarta Sans; transition:all .14s; }
.cq-btn-back:hover { border-color:var(--cq-blue); color:var(--cq-navy); }
.cq-btn-next { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--cq-navy); border:none; border-radius:10px; padding:12px 16px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.86rem; font-weight:700; color:#fff; cursor:poPlus Jakarta Sans; transition:all .14s; box-shadow:0 4px 14px rgba(0,46,93,0.25); }
.cq-btn-next:hover { background:var(--cq-blue); transform:translateY(-1px); }
.cq-btn-submit { background:linear-gradient(135deg,var(--cq-navy) 0%,var(--cq-blue) 100%); }
.cq-form-secure { text-align:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:.64rem; color:#8098b4; margin:8px 0 0; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.cq-breadcrumb-strip { background:#fff; border-bottom:1px solid var(--cq-border); padding:10px 0; }
.cq-breadcrumb { display:flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.74rem; color:var(--cq-muted); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.cq-breadcrumb li+li::before { content:'›'; margin-right:6px; color:#b0bec5; }
.cq-breadcrumb a { color:var(--cq-blue); text-decoration:none; font-weight:600; }
.cq-breadcrumb a:hover { text-decoration:underline; }
.cq-breadcrumb li:last-child { color:var(--cq-navy); font-weight:700; }

/* ── Utility sezioni ────────────────────────────────────── */
.cq-section-label { display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--cq-blue); background:var(--cq-light); border-radius:50px; padding:5px 14px; margin-bottom:16px; }
.cq-section-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:900; color:var(--cq-navy); line-height:1.15; letter-spacing:-0.5px; margin-bottom:20px; }
.cq-section-title em { font-style:normal; color:var(--cq-blue); }
.cq-section-intro { font-family:'Plus Jakarta Sans',sans-serif; font-size:.97rem; color:var(--cq-muted); max-width:580px; margin:0 auto 44px; line-height:1.65; text-align:center; }

/* ── Cos'è ──────────────────────────────────────────────── */
.cq-cosa-section { background:#fff; padding:72px 0 64px; }
.cq-cosa-lead { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.08rem; font-weight:500; color:var(--cq-text); line-height:1.72; margin-bottom:18px; }
.cq-cosa-body { font-family:'Plus Jakarta Sans',sans-serif; font-size:.96rem; color:#2c3a4a; line-height:1.76; margin-bottom:16px; }
.cq-regola-box { background:linear-gradient(135deg,#EBF1FF 0%,#dceeff 100%); border-left:4px solid var(--cq-blue); border-radius:0 14px 14px 0; padding:20px 24px; margin:24px 0; }
.cq-regola-box-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.80rem; font-weight:800; color:var(--cq-blue); letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.cq-regola-box p { font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:var(--cq-navy); line-height:1.65; margin:0; }

/* ── Vantaggi ───────────────────────────────────────────── */
.cq-vantaggi-section { background:var(--cq-bg); padding:72px 0 64px; }
.cq-vantaggio-card { background:#fff; border-radius:16px; border:1px solid var(--cq-border); height:100%; transition:box-shadow .22s,transform .18s; position:relative; overflow:hidden; }
.cq-vantaggio-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cq-navy),var(--cq-blue)); opacity:0; transition:opacity .22s; }
.cq-vantaggio-card:hover { box-shadow:0 10px 32px rgba(0,46,93,0.12); transform:translateY(-4px); }
.cq-vantaggio-card:hover::before { opacity:1; }
.cq-vantaggio-icon { width:44px; height:44px; border-radius:11px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--cq-navy); margin-bottom:14px; }
.cq-vantaggio-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.85rem; font-weight:800; color:var(--cq-blue); letter-spacing:.8px; text-transform:uppercase; margin-bottom:5px; }
.cq-vantaggio-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.94rem; font-weight:800; color:var(--cq-navy); margin-bottom:7px; line-height:1.3; }
.cq-vantaggio-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--cq-muted); line-height:1.6; margin:0; }

/* ── Tipologie ──────────────────────────────────────────── */
.cq-tipologie-section { background:#fff; padding:72px 0 64px; }
.cq-tipo-card { border:1.5px solid var(--cq-border); border-radius:16px; padding:26px 22px 20px; height:100%; transition:box-shadow .22s,transform .18s,border-color .18s; background:#fff; position:relative; overflow:hidden; }
.cq-tipo-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cq-navy),var(--cq-blue)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.cq-tipo-card:hover { box-shadow:0 12px 36px rgba(0,46,93,0.11); transform:translateY(-4px); border-color:#c4d4ef; }
.cq-tipo-card:hover::after { transform:scaleX(1); }
.cq-tipo-icon { width:44px; height:44px; border-radius:11px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; color:var(--cq-navy); font-size:1.2rem; margin-bottom:14px; }
.cq-tipo-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.97rem; font-weight:800; color:var(--cq-navy); margin-bottom:9px; line-height:1.3; }
.cq-tipo-body { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--cq-muted); line-height:1.65; margin-bottom:16px; }
.cq-tipo-link { display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:700; color:var(--cq-blue); text-decoration:none; border-bottom:1.5px solid transparent; transition:border-color .15s,gap .15s; }
.cq-tipo-link:hover { border-bottom-color:var(--cq-blue); gap:10px; }

/* ── Requisiti ──────────────────────────────────────────── */
.cq-requisiti-section { background:var(--cq-bg); padding:72px 0 64px; }
.cq-req-card { background:#fff; border-radius:14px; padding:22px 20px; border:1px solid var(--cq-border); height:100%; }
.cq-req-icon { width:42px; height:42px; border-radius:10px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; color:var(--cq-navy); font-size:1.15rem; margin-bottom:12px; }
.cq-req-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.86rem; font-weight:800; color:var(--cq-navy); margin-bottom:10px; }
.cq-req-list { list-style:none; padding:0; margin:0; }
.cq-req-list li { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--cq-muted); line-height:1.5; padding:5px 0; border-bottom:1px solid var(--cq-border); display:flex; align-items:flex-start; gap:8px; }
.cq-req-list li:last-child { border-bottom:none; }
.cq-req-list li i { color:var(--cq-accent); margin-top:2px; font-size:.76rem; flex-shrink:0; }

/* ── Erogazione ─────────────────────────────────────────── */
.cq-erogazione-section { background:var(--cq-navy); padding:64px 0; position:relative; overflow:hidden; }
.cq-erogazione-section::before { content:''; position:absolute; top:-80px; right:-80px; width:360px; height:360px; border-radius:50%; background:rgba(79,195,247,0.06); }
.cq-erog-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:12px; }
.cq-erog-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:rgba(255,255,255,0.65); line-height:1.65; }
.cq-stat-block { display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px; border-left:1px solid rgba(255,255,255,0.10); }
.cq-stat-block:first-child { border-left:none; }
.cq-stat-icon { width:48px; height:48px; border-radius:13px; background:rgba(79,195,247,0.12); display:flex; align-items:center; justify-content:center; color:var(--cq-accent); font-size:1.35rem; margin-bottom:10px; }
.cq-stat-label { font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:rgba(255,255,255,0.48); text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.cq-stat-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; font-weight:800; color:#fff; }
.cq-stat-desc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.76rem; color:rgba(255,255,255,0.48); margin-top:3px; }

/* ── CTA ────────────────────────────────────────────────── */
.cq-cta-section { background:var(--cq-light); padding:60px 0; }
.cq-cta-card { background:var(--pp-navy); border-radius:20px; padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.cq-cta-card::before { content:''; position:absolute; top:-60px; right:80px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.04); }
/* ── Blog teaser (ultimi articoli in homepage) ─────────────
   Nuovo blocco, non tocca classi esistenti. ─────────────── */
.cq-blog-teaser-section { background:#fff; padding:72px 0 64px; }
.cq-blog-teaser-card {
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--cq-border); border-radius:16px;
  overflow:hidden; text-decoration:none; position:relative;
  transition:box-shadow .22s, transform .18s;
}
.cq-blog-teaser-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--cq-navy),var(--cq-blue)); opacity:0; transition:opacity .22s;
}
.cq-blog-teaser-card:hover { box-shadow:0 10px 32px rgba(0,46,93,0.12); transform:translateY(-4px); }
.cq-blog-teaser-card:hover::before { opacity:1; }
.cq-blog-teaser-cover { display:block; width:100%; height:190px; overflow:hidden; background:var(--cq-light); }
.cq-blog-teaser-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.cq-blog-teaser-cover--ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:var(--cq-navy); }
.cq-blog-teaser-body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1 1 auto; }
.cq-blog-teaser-date {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700;
  color:var(--cq-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px;
}
.cq-blog-teaser-title {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:800;
  color:var(--cq-navy); line-height:1.3; margin-bottom:8px;
}
.cq-blog-teaser-excerpt {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--cq-muted);
  line-height:1.6; margin:0 0 14px; flex:1 1 auto;
}
.cq-blog-teaser-link {
  display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.80rem; font-weight:700; color:var(--cq-blue); margin-top:auto;
}
.cq-blog-teaser-card:hover .cq-blog-teaser-link { gap:10px; }
.cq-cta-icon { width:50px; height:50px; border-radius:13px; background:rgba(79,195,247,0.18); display:flex; align-items:center; justify-content:center; color:var(--cq-accent); font-size:1.35rem; flex-shrink:0; }
.cq-cta-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1rem,2.5vw,1.5rem); font-weight:900; color:#fff; margin-bottom:5px; }
.cq-cta-desc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; color:rgba(255,255,255,0.68); line-height:1.6; margin:0; max-width:440px; }
.cq-cta-btn { display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--cq-navy); border:none; border-radius:12px; padding:14px 26px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.90rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; box-shadow:0 6px 24px rgba(0,0,0,0.20); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.cq-cta-btn:hover { background:#e8f0fb; color:var(--cq-navy); transform:translateY(-2px); }
.cq-final-section { background:var(--cq-bg); padding:52px 0; }
.cq-final-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; border-radius:16px; padding:26px 34px; border:1px solid var(--cq-border); flex-wrap:wrap; }
.cq-final-icon { width:48px; height:48px; border-radius:13px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; color:var(--cq-navy); font-size:1.3rem; flex-shrink:0; }
.cq-final-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:800; color:var(--cq-navy); margin-bottom:3px; }
.cq-final-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.84rem; color:var(--cq-muted); margin:0; }
.cq-final-btn { display:inline-flex; align-items:center; gap:8px; background:var(--cq-navy); color:#fff; border:none; border-radius:12px; padding:13px 24px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.90rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.cq-final-btn:hover { background:var(--cq-blue); color:#fff; transform:translateY(-2px); }

/* ── Animazioni ─────────────────────────────────────────── */
.cq-fade-up { opacity:0; transform:translateY(22px); transition:opacity .52s ease,transform .52s ease; }
.cq-fade-up.cq-visible { opacity:1; transform:translateY(0); }
.cq-fade-up.d1{transition-delay:.08s} .cq-fade-up.d2{transition-delay:.16s} .cq-fade-up.d3{transition-delay:.24s}
.cq-fade-up.d4{transition-delay:.32s} .cq-fade-up.d5{transition-delay:.40s} .cq-fade-up.d6{transition-delay:.48s}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:991.98px) {
  .cq-hero{min-height:auto} .cq-hero-inner{padding:60px 0 52px}
  .cq-hero-overlay{background:linear-gradient(180deg,rgba(0,28,60,0.90) 0%,rgba(0,28,60,0.80) 100%)}
  .cq-form-col{justify-content:center;margin-top:32px} .cq-form-card{max-width:440px}
  .cq-stat-block{border-left:none;border-top:1px solid rgba(255,255,255,0.10);padding-top:20px;margin-top:8px}
  .cq-stat-block:first-child{border-top:none}
}
@media (max-width:767.98px) {
  .cq-hero-title{font-size:1.8rem} .cq-hero-ctas{flex-direction:column}
  .cq-btn-primary,.cq-btn-secondary,.cq-final-btn{width:100%;justify-content:center}
  .cq-cta-card{flex-direction:column;text-align:center} .cq-cta-desc{margin:0 auto}
  .cq-final-inner{flex-direction:column;text-align:center}
}
    


/* ── Hero ───────────────────────────────────────────────── */
.opp-hero { position:relative; min-height:72vh; display:flex; align-items:center; overflow:hidden; background:var(--cq-navy); }
.opp-hero-bg { position:absolute; inset:0; background-image:url('../images/hero-opp.jpg'); background-size:cover; background-position:center 35%; transform:scale(1.02); }
.opp-hero-overlay { position:absolute; inset:0; background:linear-gradient(105deg,rgba(0,28,60,0.92) 0%,rgba(0,28,60,0.72) 48%,rgba(0,28,60,0.20) 100%); }
.opp-hero-inner { position:relative; z-index:2; width:100%; padding:80px 0 72px; }
.opp-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22); border-radius:50px; padding:5px 16px 5px 10px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,0.82); margin-bottom:18px; }
.opp-eyebrow-dot { width:8px; height:8px; border-radius:50%; background:var(--cq-accent); display:inline-block; }
.opp-hero-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.9rem,4vw,3rem); font-weight:900; color:#fff; line-height:1.13; letter-spacing:-0.8px; margin-bottom:18px; }
.opp-hero-title em { font-style:normal; color:var(--cq-accent); }
.opp-hero-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(.92rem,1.6vw,1.05rem); color:rgba(255,255,255,0.78); line-height:1.65; max-width:480px; margin-bottom:28px; }
.opp-hero-badges { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px; }
.opp-hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:6px 13px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.76rem; font-weight:600; color:rgba(255,255,255,0.88); }
.opp-hero-badge i { color:var(--cq-accent); font-size:.88rem; }
.opp-hero-ctas { display:flex; flex-wrap:wrap; gap:12px; }
.opp-btn-primary { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--cq-navy); border:none; border-radius:12px; padding:14px 28px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; box-shadow:0 6px 24px rgba(0,0,0,0.20); text-decoration:none; white-space:nowrap; }
.opp-btn-primary:hover { background:#e8f0fb; color:var(--cq-navy); transform:translateY(-2px); }
.opp-btn-secondary { display:inline-flex; align-items:center; gap:7px; background:transparent; color:rgba(255,255,255,0.88); border:1.5px solid rgba(255,255,255,0.35); border-radius:12px; padding:13px 22px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; font-weight:600; cursor:poPlus Jakarta Sans; transition:all .15s; text-decoration:none; white-space:nowrap; }
.opp-btn-secondary:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.6); color:#fff; }
.opp-trust-bar { display:flex; flex-wrap:wrap; gap:20px; margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.14); }
.opp-trust-item { display:flex; align-items:center; gap:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.74rem; font-weight:600; color:rgba(255,255,255,0.60); }
.opp-trust-item i { color:var(--cq-accent); font-size:.84rem; }

/* ── Form card ──────────────────────────────────────────── */
.opp-form-col { display:flex; align-items:center; justify-content:flex-end; }
.opp-form-card { background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,10,30,0.30); width:100%; max-width:380px; overflow:hidden; }
.opp-form-head { background:var(--cq-navy); padding:18px 22px 16px; }
.opp-form-head-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.93rem; font-weight:800; color:#fff; margin:0 0 3px; }
.opp-form-head-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.70rem; color:rgba(255,255,255,0.60); margin:0 0 14px; }
.opp-steps { display:flex; align-items:flex-start; gap:0; }
.opp-step-wrap { display:flex; flex-direction:column; align-items:center; }
.opp-step-dot { width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.30); background:transparent; display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:rgba(255,255,255,0.50); transition:all .22s; flex-shrink:0; }
.opp-step-dot.active { background:#fff; border-color:#fff; color:var(--cq-navy); }
.opp-step-dot.done { background:rgba(79,195,247,0.25); border-color:var(--cq-accent); color:var(--cq-accent); }
.opp-step-line { flex:1; height:2px; background:rgba(255,255,255,0.15); margin:12px 4px 0; }
.opp-step-lbl { font-family:'Plus Jakarta Sans',sans-serif; font-size:.54rem; font-weight:600; color:rgba(255,255,255,0.40); text-transform:uppercase; letter-spacing:.3px; margin-top:3px; white-space:nowrap; }
.opp-step-wrap.active .opp-step-lbl { color:rgba(255,255,255,0.88); }
.opp-step-wrap.done .opp-step-lbl { color:rgba(79,195,247,0.70); }
.opp-form-body { padding:18px 20px 14px; }
.opp-form-panel { display:none; }
.opp-form-panel.active { display:block; animation:cqFadeIn .22s ease; }
/* keyframes cqFadeIn riusato qui — già definito nella sezione CQ sopra */
.opp-field-label { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.67rem; font-weight:700; color:var(--cq-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.opp-field { width:100%; box-sizing:border-box; border:1.5px solid var(--cq-border); border-radius:10px; padding:10px 13px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; font-weight:500; color:#1a2840; background:#f5f7fb; outline:none; transition:border-color .15s,box-shadow .15s; -webkit-appearance:none; appearance:none; }
.opp-field:focus { border-color:var(--cq-blue); box-shadow:0 0 0 3px rgba(0,86,164,0.10); background:#fff; }
.opp-field::placeholder { color:#8098b4; }
.opp-field-group { margin-bottom:11px; }
.opp-range-display { text-align:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.45rem; font-weight:800; color:var(--cq-navy); letter-spacing:-0.5px; margin-bottom:4px; }
.opp-range { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px; background:linear-gradient(to right,var(--cq-navy) 0%,var(--cq-navy) var(--val,33%),var(--cq-border) var(--val,33%),var(--cq-border) 100%); outline:none; cursor:poPlus Jakarta Sans; }
.opp-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--cq-navy); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.22); cursor:poPlus Jakarta Sans; }
.opp-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--cq-navy); border:3px solid #fff; cursor:poPlus Jakarta Sans; }
.opp-range-labels { display:flex; justify-content:space-between; font-family:'Plus Jakarta Sans',sans-serif; font-size:.66rem; color:#8098b4; margin-top:3px; margin-bottom:10px; }
.opp-tipo-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:4px; }
.opp-tipo-pill { display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 6px 8px; border-radius:10px; border:1.5px solid var(--cq-border); background:#f5f7fb; cursor:poPlus Jakarta Sans; transition:all .14s; font-family:'Plus Jakarta Sans',sans-serif; font-size:.70rem; font-weight:700; color:var(--cq-muted); text-align:center; }
.opp-tipo-pill i { font-size:1.05rem; }
.opp-tipo-pill.selected { background:var(--cq-light); border-color:var(--cq-blue); color:var(--cq-navy); }
.opp-tipo-pill:hover:not(.selected) { border-color:#b0c4d8; background:#edf2f8; }
.opp-form-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.opp-btn-back { display:inline-flex; align-items:center; gap:5px; background:transparent; border:1.5px solid var(--cq-border); border-radius:10px; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; font-weight:600; color:var(--cq-muted); cursor:poPlus Jakarta Sans; transition:all .14s; }
.opp-btn-back:hover { border-color:var(--cq-blue); color:var(--cq-navy); }
.opp-btn-next { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--cq-navy); border:none; border-radius:10px; padding:12px 16px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.86rem; font-weight:700; color:#fff; cursor:poPlus Jakarta Sans; transition:all .14s; box-shadow:0 4px 14px rgba(0,46,93,0.25); }
.opp-btn-next:hover { background:var(--cq-blue); transform:translateY(-1px); }
.opp-btn-submit { background:linear-gradient(135deg,var(--cq-navy) 0%,var(--cq-blue) 100%); }
.opp-form-secure { text-align:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:.64rem; color:#8098b4; margin:8px 0 0; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.opp-breadcrumb-strip { background:#fff; border-bottom:1px solid var(--cq-border); padding:10px 0; }
.opp-breadcrumb { display:flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.74rem; color:var(--cq-muted); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.opp-breadcrumb li+li::before { content:'›'; margin-right:6px; color:#b0bec5; }
.opp-breadcrumb a { color:var(--cq-blue); text-decoration:none; font-weight:600; }
.opp-breadcrumb a:hover { text-decoration:underline; }
.opp-breadcrumb li:last-child { color:var(--cq-navy); font-weight:700; }

/* ── Utility sezioni ────────────────────────────────────── */
.opp-section-label { display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--cq-blue); background:var(--cq-light); border-radius:50px; padding:5px 14px; margin-bottom:16px; }
.opp-section-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:900; color:var(--cq-navy); line-height:1.15; letter-spacing:-0.5px; margin-bottom:20px; }
.opp-section-title em { font-style:normal; color:var(--cq-blue); }
.opp-section-intro { font-family:'Plus Jakarta Sans',sans-serif; font-size:.97rem; color:var(--cq-muted); max-width:580px; margin:0 auto 44px; line-height:1.65; text-align:center; }

/* ── Cos'è ──────────────────────────────────────────────── */
.opp-cosa-section { background:#fff; padding:72px 0 64px; }
.opp-cosa-lead { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.08rem; font-weight:500; color:var(--cq-text); line-height:1.72; margin-bottom:18px; }
.opp-cosa-body { font-family:'Plus Jakarta Sans',sans-serif; font-size:.96rem; color:#2c3a4a; line-height:1.76; margin-bottom:16px; }
.opp-regola-box { background:linear-gradient(135deg,#EBF1FF 0%,#dceeff 100%); border-left:4px solid var(--cq-blue); border-radius:0 14px 14px 0; padding:20px 24px; margin:24px 0; }
.opp-regola-box-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.80rem; font-weight:800; color:var(--cq-blue); letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.opp-regola-box p { font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:var(--cq-navy); line-height:1.65; margin:0; }

/* ── Vantaggi ───────────────────────────────────────────── */
.opp-vantaggi-section { background:var(--cq-bg); padding:72px 0 64px; }
.opp-vantaggio-card { background:#fff; border-radius:16px; border:1px solid var(--cq-border); height:100%; transition:box-shadow .22s,transform .18s; position:relative; overflow:hidden; }
.opp-vantaggio-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cq-navy),var(--cq-blue)); opacity:0; transition:opacity .22s; }
.opp-vantaggio-card:hover { box-shadow:0 10px 32px rgba(0,46,93,0.12); transform:translateY(-4px); }
.opp-vantaggio-card:hover::before { opacity:1; }
.opp-vantaggio-icon { width:44px; height:44px; border-radius:11px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--cq-navy); margin-bottom:14px; }
.opp-vantaggio-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:.63rem; font-weight:800; color:var(--cq-blue); letter-spacing:.8px; text-transform:uppercase; margin-bottom:5px; }
.opp-vantaggio-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.94rem; font-weight:800; color:var(--cq-navy); margin-bottom:7px; line-height:1.3; }
.opp-vantaggio-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--cq-muted); line-height:1.6; margin:0; }

/* ── Tipologie ──────────────────────────────────────────── */
.opp-tipologie-section { background:#fff; padding:72px 0 64px; }
.opp-tipo-card { border:1.5px solid var(--cq-border); border-radius:16px; padding:26px 22px 20px; height:100%; transition:box-shadow .22s,transform .18s,border-color .18s; background:#fff; position:relative; overflow:hidden; }
.opp-tipo-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cq-navy),var(--cq-blue)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.opp-tipo-card:hover { box-shadow:0 12px 36px rgba(0,46,93,0.11); transform:translateY(-4px); border-color:#c4d4ef; }
.opp-tipo-card:hover::after { transform:scaleX(1); }
.opp-tipo-icon { width:44px; height:44px; border-radius:11px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; color:var(--cq-navy); font-size:1.2rem; margin-bottom:14px; }
.opp-tipo-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.97rem; font-weight:800; color:var(--cq-navy); margin-bottom:9px; line-height:1.3; }
.opp-tipo-body { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--cq-muted); line-height:1.65; margin-bottom:16px; }
.opp-tipo-link { display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.80rem; font-weight:700; color:var(--cq-blue); text-decoration:none; border-bottom:1.5px solid transparent; transition:border-color .15s,gap .15s; }
.opp-tipo-link:hover { border-bottom-color:var(--cq-blue); gap:10px; }

/* ── Requisiti ──────────────────────────────────────────── */
.opp-requisiti-section { background:var(--cq-bg); padding:72px 0 64px; }
.opp-req-card { background:#fff; border-radius:14px; padding:22px 20px; border:1px solid var(--cq-border); height:100%; }
.opp-req-icon { width:42px; height:42px; border-radius:10px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; color:var(--cq-navy); font-size:1.15rem; margin-bottom:12px; }
.opp-req-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:.86rem; font-weight:800; color:var(--cq-navy); margin-bottom:10px; }
.opp-req-list { list-style:none; padding:0; margin:0; }
.opp-req-list li { font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; color:var(--cq-muted); line-height:1.5; padding:5px 0; border-bottom:1px solid var(--cq-border); display:flex; align-items:flex-start; gap:8px; }
.opp-req-list li:last-child { border-bottom:none; }
.opp-req-list li i { color:var(--cq-accent); margin-top:2px; font-size:.76rem; flex-shrink:0; }

/* ── Erogazione ─────────────────────────────────────────── */
.opp-erogazione-section { background:var(--cq-navy); padding:64px 0; position:relative; overflow:hidden; }
.opp-erogazione-section::before { content:''; position:absolute; top:-80px; right:-80px; width:360px; height:360px; border-radius:50%; background:rgba(79,195,247,0.06); }
.opp-erog-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:12px; }
.opp-erog-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; color:rgba(255,255,255,0.65); line-height:1.65; }
.opp-stat-block { display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px; border-left:1px solid rgba(255,255,255,0.10); }
.opp-stat-block:first-child { border-left:none; }
.opp-stat-icon { width:48px; height:48px; border-radius:13px; background:rgba(79,195,247,0.12); display:flex; align-items:center; justify-content:center; color:var(--cq-accent); font-size:1.35rem; margin-bottom:10px; }
.opp-stat-label { font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700; color:rgba(255,255,255,0.48); text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.opp-stat-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; font-weight:800; color:#fff; }
.opp-stat-desc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.76rem; color:rgba(255,255,255,0.48); margin-top:3px; }

/* ── CTA ────────────────────────────────────────────────── */
.opp-cta-section { background:var(--cq-light); padding:60px 0; }
.opp-cta-card { background:linear-gradient(135deg,var(--cq-navy) 0%,#0b4b8a 60%,var(--cq-blue) 100%); border-radius:20px; padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.opp-cta-card::before { content:''; position:absolute; top:-60px; right:80px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.04); }
.opp-cta-icon { width:50px; height:50px; border-radius:13px; background:rgba(79,195,247,0.18); display:flex; align-items:center; justify-content:center; color:var(--cq-accent); font-size:1.35rem; flex-shrink:0; }
.opp-cta-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1rem,2.5vw,1.5rem); font-weight:900; color:#fff; margin-bottom:5px; }
.opp-cta-desc { font-family:'Plus Jakarta Sans',sans-serif; font-size:.88rem; color:rgba(255,255,255,0.68); line-height:1.6; margin:0; max-width:440px; }
.opp-cta-btn { display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--cq-navy); border:none; border-radius:12px; padding:14px 26px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.90rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; box-shadow:0 6px 24px rgba(0,0,0,0.20); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.opp-cta-btn:hover { background:#e8f0fb; color:var(--cq-navy); transform:translateY(-2px); }
.opp-final-section { background:var(--cq-bg); padding:52px 0; }
.opp-final-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; border-radius:16px; padding:26px 34px; border:1px solid var(--cq-border); flex-wrap:wrap; }
.opp-final-icon { width:48px; height:48px; border-radius:13px; background:var(--cq-light); display:flex; align-items:center; justify-content:center; color:var(--cq-navy); font-size:1.3rem; flex-shrink:0; }
.opp-final-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:800; color:var(--cq-navy); margin-bottom:3px; }
.opp-final-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:.84rem; color:var(--cq-muted); margin:0; }
.opp-final-btn { display:inline-flex; align-items:center; gap:8px; background:var(--cq-navy); color:#fff; border:none; border-radius:12px; padding:13px 24px; font-family:'Plus Jakarta Sans',sans-serif; font-size:.90rem; font-weight:800; cursor:poPlus Jakarta Sans; transition:all .15s; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.opp-final-btn:hover { background:var(--cq-blue); color:#fff; transform:translateY(-2px); }

/* ── Animazioni ─────────────────────────────────────────── */
.opp-fade-up { opacity:0; transform:translateY(22px); transition:opacity .52s ease,transform .52s ease; }
.opp-fade-up.opp-visible { opacity:1; transform:translateY(0); }
.opp-fade-up.d1{transition-delay:.08s} .opp-fade-up.d2{transition-delay:.16s} .opp-fade-up.d3{transition-delay:.24s}
.opp-fade-up.d4{transition-delay:.32s} .opp-fade-up.d5{transition-delay:.40s} .opp-fade-up.d6{transition-delay:.48s}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:991.98px) {
  .opp-hero{min-height:auto} .opp-hero-inner{padding:60px 0 52px}
  .opp-hero-overlay{background:linear-gradient(180deg,rgba(0,28,60,0.90) 0%,rgba(0,28,60,0.80) 100%)}
  .opp-form-col{justify-content:center;margin-top:32px} .opp-form-card{max-width:440px}
  .opp-stat-block{border-left:none;border-top:1px solid rgba(255,255,255,0.10);padding-top:20px;margin-top:8px}
  .opp-stat-block:first-child{border-top:none}
}
@media (max-width:767.98px) {
  .opp-hero-title{font-size:1.8rem} .opp-hero-ctas{flex-direction:column}
  .opp-btn-primary,.opp-btn-secondary,.opp-final-btn{width:100%;justify-content:center}
  .opp-cta-card{flex-direction:column;text-align:center} .opp-cta-desc{margin:0 auto}
  .opp-final-inner{flex-direction:column;text-align:center}
}



/* ══════════════════════════════════════════════════════════════
   MEGA MENU DESKTOP — OFFCANVAS MOBILE — FAB — CHAT WIDGET
   (da style-nav.css)
══════════════════════════════════════════════════════════════ */

/* ── Reset variabili di colore ──────────────────────────── */


/* ════════════════════════════════════════════════════════
   NAVBAR — override per mega menu full-width
════════════════════════════════════════════════════════ */

/* Il <nav> deve essere il contenitore di riferimento
   per il posizionamento assoluto del mega menu */
nav.navbar {
  position: relative;
}

/* ════════════════════════════════════════════════════════
   MEGA MENU WRAPPER
════════════════════════════════════════════════════════ */
.psf-mega {
  position: fixed !important;   /* stacca dal flow, si ancora alla navbar */
  left: 0 !important;
  right: 0 !important;
  top: auto !important;         /* si posiziona subito sotto la navbar */
  width: 100vw !important;
  max-width: 100vw !important;
  transform: none !important;
  border: none !important;
  border-radius: 0 0 16px 16px !important;
  background: #fff !important;
  box-shadow: 0 16px 48px rgba(0,20,60,0.13), 0 0 0 1px rgba(0,20,60,0.06) !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1050 !important;
  overflow: hidden;
}

/* ── Inner: allineato al max-width della navbar ─────────── */
.psf-mega__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 40px 0;
}

/* ════════════════════════════════════════════════════════
   GRIGLIA COLONNE PRODOTTO
════════════════════════════════════════════════════════ */
.psf-mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}

/* ── Colonna singola ────────────────────────────────────── */
.psf-mega__col {
  padding: 0 24px 28px;
  border-right: 1px solid var(--mn-border);
}
.psf-mega__col:first-child { padding-left: 0; }
.psf-mega__col:last-child  { border-right: none; padding-right: 0; }

/* ── Intestazione colonna (icona + titolo + link) ───────── */
.psf-mega__col-head {
  display: flex;
  align-items: center;
  gap:8px;
  margin-bottom: 16px;
  background:var(--mn-blue-lt);
  border-radius:var(--radius-sm);
}

.psf-mega__col-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--mn-blue-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.psf-mega__col-icon i {
  font-size: 1rem;
  color: var(--mn-blue);
}

.psf-mega__col-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mn-navy);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.2;
  text-decoration: none !important;
  display: block;
  flex: 1;
}
.psf-mega__col-title:hover { color: var(--mn-accent); }

/* ════════════════════════════════════════════════════════
   VOCE DI 2° LIVELLO (categoria con sotto-voci)
   Espande inline — niente flyout
════════════════════════════════════════════════════════ */
.psf-mega__group {
  margin-bottom: 4px;
}

/* Label della categoria — il trigger */
.psf-mega__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--mn-text);
  padding: 6px 8px;
  border-radius: 7px;
  cursor: default;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1.3;
}
.psf-mega__cat:hover {
  background: var(--mn-hover-bg);
  color: var(--mn-accent);
}
.psf-mega__cat i.expand-icon {
  font-size: 0.62rem;
  opacity: 0.45;
  transition: transform 0.2s, opacity 0.2s;
  flex-shrink: 0;
}

/* ── Sotto-voci (3° livello) — accordion: chiuse di default ── */
.psf-mega__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--mn-border);
  margin-left: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin-bottom 0.25s ease;
}
.psf-mega__group.is-open > .psf-mega__sub {
  max-height: 400px;
  margin-bottom: 6px;
}
.psf-mega__group.is-open > .psf-mega__cat > i.expand-icon {
  transform: rotate(90deg);
  opacity: 0.75;
}
.psf-mega__cat { cursor: pointer; }

.psf-mega__sub li a {
  display: block;
  font-size: 0.79rem;
  font-weight: 400;
  color: var(--mn-text-mid);
  padding: 4px 8px;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, padding-left 0.12s;
  line-height: 1.35;
}
.psf-mega__sub li a:hover {
  background: var(--mn-hover-bg);
  color: var(--mn-accent);
  padding-left: 12px;
}

/* ── Voce semplice (nessuna sotto-voce) ─────────────────── */
.psf-mega__item {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--mn-text);
  padding: 6px 8px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  line-height: 1.3;
}
.psf-mega__item:hover {
  background: var(--mn-hover-bg);
  color: var(--mn-accent);
}

/* ════════════════════════════════════════════════════════
   BARRA PROMO IN FONDO (footer del mega menu)
   Sfondo colorato chiaro, CTA per ogni prodotto
════════════════════════════════════════════════════════ */
.psf-mega__footer {
  background: var(--mn-blue-lt);
  border-top: 1px solid var(--mn-border);
  padding: 14px 40px;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.psf-mega__footer-text {
  font-size: 0.8rem;
  color: var(--mn-text-mid);
  display: flex;
  align-items: center;
  gap: 6px;
}
.psf-mega__footer-text i {
  color: var(--mn-blue);
  font-size: 0.9rem;
}

.psf-mega__footer-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Pill CTA footer */
.psf-mega__footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mn-navy);
  color: #fff !important;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.12s;
  white-space: nowrap;
}
.psf-mega__footer-cta:hover {
  background: var(--mn-accent);
  transform: translateY(-1px);
}
.psf-mega__footer-cta i { font-size: 0.75rem; }

/* ════════════════════════════════════════════════════════
   ALTRI DROPDOWN (non-Prodotti): stile standard migliorato
════════════════════════════════════════════════════════ */
.psf-dropdown {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,20,60,0.12), 0 0 0 1px rgba(0,20,60,0.05) !important;
  padding: 6px 0 !important;
  min-width: 200px;
}
.psf-dropdown .dropdown-item {
  font-size: 0.86rem;
  padding: 8px 18px;
  color: var(--mn-text);
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
}
.psf-dropdown .dropdown-item:hover {
  background: var(--mn-hover-bg);
  color: var(--mn-accent);
}
.psf-dropdown .dropdown-item:first-child { border-radius: 12px 12px 0 0; }
.psf-dropdown .dropdown-item:last-child  { border-radius: 0 0 12px 12px; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE DESKTOP
   Il mega menu si mantiene visibile finché non si passa
   alla versione mobile (< 1200px con navbar hamburger)
════════════════════════════════════════════════════════ */

/* Notebook 14" — 1200–1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
  .psf-mega__inner {
    padding: 24px 28px 0;
  }
  .psf-mega__col {
    padding: 0 16px 22px;
  }
  .psf-mega__col-title {
    font-size: 0.72rem;
  }
  .psf-mega__cat {
    font-size: 0.8rem;
    padding: 5px 6px;
  }
  .psf-mega__sub li a {
    font-size: 0.75rem;
    padding: 3px 6px;
  }
  .psf-mega__item {
    font-size: 0.8rem;
    padding: 5px 6px;
  }
  .psf-mega__footer {
    padding: 12px 28px;
  }
  .psf-mega__footer-cta {
    font-size: 0.72rem;
    padding: 6px 12px;
  }
}

/* Tablet orizzontale — 992–1199px:
   La navbar mostra già l'hamburger sotto xl,
   il mega menu desktop è nascosto dal Bootstrap collapse */
@media (max-width: 1199px) {
  .psf-mega,
  .psf-mega__footer { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   HAMBURGER — bottone custom stile mega menu
════════════════════════════════════════════════════════ */
.navbar-toggler {
  width: 42px;
  height: 42px;
  border-radius: 10px !important;
  background: var(--mn-blue-lt) !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: background 0.18s;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
  background: #d0e4f8 !important;
  box-shadow: none !important;
}
.navbar-toggler-icon {
  background-image: none !important;
  width: 20px;
  height: 12px;
  background:
    linear-gradient(var(--mn-navy), var(--mn-navy)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--mn-navy), var(--mn-navy)) 0 50%/100% 2px no-repeat,
    linear-gradient(var(--mn-navy), var(--mn-navy)) 0 100%/100% 2px no-repeat !important;
  border-radius: 2px;
}

/* ════════════════════════════════════════════════════════
   OFFCANVAS — shell e header
════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   OFFCANVAS MOBILE — material "vetro stile OS" (iOS / macOS)
   Pannello molto translucido + blur forte + vibrancy (saturate).
   Vetro SOLO sullo sfondo: le card voci (.mob-acc-item) restano piene.
════════════════════════════════════════════════════════ */
#navOffcanvas {
  width: 100% !important;
  border-right: none !important;
  background: #000000;            /* fallback senza backdrop-filter: pannello pieno leggibile */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.45),  /* hairline "bordo di vetro" */
              4px 0 40px rgba(0, 20, 60, 0.14);
}

/* Header — regola GLOBALE navy (#offcanvasMenu resta invariato) */
.offcanvas-header {
  background: var(--mn-navy);
  padding: 18px 20px 16px !important;
  border-bottom: none !important;
}
.mob-offcanvas-brand {
  color: #fff !important;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.3px;
}
.mob-offcanvas-brand span { color: #5aabff; }

/* Header SOLO hamburger — base/fallback: chiaro, vince su .bg-light di Bootstrap */
#navOffcanvas .offcanvas-header {
  background: rgba(255, 255, 255, 0.85) !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(0, 46, 93, 0.10) !important;
}

/* X di chiusura SCURA (navy), ben visibile sul vetro chiaro */
#navOffcanvas .btn-close {
  filter: none;                  /* rimuove l'inversione che la rendeva bianca */
  opacity: 1;
  width: 1.15em;
  height: 1.15em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23002E5D' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
#navOffcanvas .btn-close:hover { opacity: 0.7; }

/* Body */
#navOffcanvas .offcanvas-body {
  padding: 0 !important;
  overflow-y: auto;
  /* niente background pieno: lo sfondo è il material del pannello */
}

/* ── MATERIAL VETRO — attivo solo se backdrop-filter è supportato.
   Posto DOPO le regole base così, dove supportato, vince e applica il glass. ── */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #navOffcanvas {
    background: rgba(255, 255, 255, 0.42);               /* più translucido = più vetro */
    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.05);
            backdrop-filter: blur(30px) saturate(180%) brightness(1.05);
  }
  /* il body lascia passare il material del pannello */
  #navOffcanvas .offcanvas-body { background: transparent !important; }
  /* header: material un filo più denso → logo e X sempre leggibili */
  #navOffcanvas .offcanvas-header {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%);
            backdrop-filter: blur(30px) saturate(180%);
  }
}

/* ── Backdrop schiarito → si intravede la pagina sfocata dietro (look OS).
   Sicuro: qui tutti gli offcanvas sono width:100%, lo scrim non si vede mai
   lateralmente; agisce solo come leggera velatura dietro al vetro. ── */
.offcanvas-backdrop.show {
  background-color: rgba(8, 22, 50, 0.12);
}

/* ── X di chiusura SCURA (navy) e ben visibile sul vetro chiaro ── */
#navOffcanvas .btn-close {
  filter: none;                  /* rimuove l'inversione che la rendeva bianca */
  opacity: 1;
  width: 1.15em;
  height: 1.15em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23002E5D' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
#navOffcanvas .btn-close:hover { opacity: 0.7; }



/* ════════════════════════════════════════════════════════
   OFFCANVAS BODY
════════════════════════════════════════════════════════ */
#navOffcanvas .offcanvas-body {
  padding: 0 !important;
  overflow-y: auto;
  /* niente background pieno qui: lo gestisce il pannello (#navOffcanvas) */
}
.mob-section-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--mn-text-lt);
  padding: 16px 20px 6px;
}

/* ════════════════════════════════════════════════════════
   NAVBAR MOBILE — azioni rapide accanto all'hamburger (< xl)
   Telefono = primaria (navy pieno) · Email = secondaria (ghost)
════════════════════════════════════════════════════════ */
.nav-quick { gap: 8px; }

.nav-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.02rem;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.nav-quick-btn:active { transform: scale(0.93); }

/* Telefono — azione primaria (numero verde) */
.nav-quick-btn--primary {
  background: var(--mn-navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 46, 93, 0.28);
}
.nav-quick-btn--primary:hover { background: var(--mn-accent); color: #fff; }

/* Email — azione secondaria */
.nav-quick-btn--ghost {
  background: rgba(0, 46, 93, 0.07);
  color: var(--mn-navy);
  border: 1px solid rgba(0, 46, 93, 0.14);
}
.nav-quick-btn--ghost:hover { background: rgba(0, 46, 93, 0.12); color: var(--mn-navy); }

/* Hamburger — un filo di respiro dalle icone */
.nav-quick-burger { padding: 4px 0 4px 4px; margin-left: 2px; }

/* ════════════════════════════════════════════════════════
   ACCORDION MOBILE — 1° livello
════════════════════════════════════════════════════════ */
#navAccordion {
  background: transparent;
  border: none;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mob-acc-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--mn-border);
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.mob-acc-item.is-open {
  box-shadow: 0 4px 16px rgba(0,20,60,0.08);
  border-color: #c8daef;
}
.mob-acc-btn {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.mob-acc-btn:hover { background: var(--mn-blue-lt); }
.mob-acc-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--mn-blue-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.mob-acc-icon i { font-size: 0.9rem; color: var(--mn-blue); }
.mob-acc-item.is-open .mob-acc-icon { background: var(--mn-navy); }
.mob-acc-item.is-open .mob-acc-icon i { color: #fff; }
.mob-acc-label {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mn-text);
  line-height: 1.25;
}
.mob-acc-item.is-open .mob-acc-label { color: var(--mn-navy); }
.mob-acc-chevron {
  font-size: 0.7rem;
  color: var(--mn-text-lt);
  transition: transform 0.22s;
  flex-shrink: 0;
}
.mob-acc-item.is-open .mob-acc-chevron {
  transform: rotate(180deg);
  color: var(--mn-blue);
}
.mob-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  background: #fafcff;
  border-top: 1px solid transparent;
}
.mob-acc-item.is-open > .mob-acc-panel {
  max-height: 700px;
  border-top-color: var(--mn-border);
}
.mob-acc-panel-inner { padding: 8px 10px 10px; }

/* ════════════════════════════════════════════════════════
   VOCI 2° LIVELLO
════════════════════════════════════════════════════════ */
.mob-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--mn-text-mid);
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.mob-link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mn-blue-lt);
  border: 1.5px solid var(--mn-blue);
  flex-shrink: 0;
  transition: background 0.12s;
}
.mob-link:hover { background: var(--mn-blue-lt); color: var(--mn-accent); }
.mob-link:hover::before { background: var(--mn-accent); border-color: var(--mn-accent); }

/* ════════════════════════════════════════════════════════
   SOTTO-GRUPPO 3° LIVELLO
════════════════════════════════════════════════════════ */
.mob-sub-group { margin-bottom: 2px; }
.mob-sub-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--mn-text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  user-select: none;
  border-left: 2px solid transparent;
}
.mob-sub-trigger:hover { background: var(--mn-hover-bg); color: var(--mn-accent); }
.mob-sub-group.is-open > .mob-sub-trigger {
  color: var(--mn-navy);
  background: var(--mn-blue-lt);
  border-left-color: var(--mn-blue);
}
.mob-sub-chevron {
  font-size: 0.62rem;
  color: var(--mn-text-lt);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.mob-sub-group.is-open > .mob-sub-trigger .mob-sub-chevron {
  transform: rotate(90deg);
  color: var(--mn-blue);
}
.mob-sub-list {
  list-style: none;
  margin: 0 0 4px 14px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--mn-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}
.mob-sub-group.is-open > .mob-sub-list { max-height: 400px; }
.mob-sub-list li a {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--mn-text-mid);
  padding: 5px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.mob-sub-list li a:hover { background: var(--mn-hover-bg); color: var(--mn-accent); }

/* ════════════════════════════════════════════════════════
   LINK FLAT (fuori accordion)
════════════════════════════════════════════════════════ */
.mob-flat-links {
  padding: 4px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mob-flat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mn-text);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--mn-border);
  transition: background 0.12s, color 0.12s;
}
.mob-flat-link i { font-size: 1rem; color: var(--mn-blue); width: 20px; text-align: center; }
.mob-flat-link:hover { background: var(--mn-blue-lt); color: var(--mn-accent); }

/* ════════════════════════════════════════════════════════
   FOOTER OFFCANVAS
════════════════════════════════════════════════════════ */
.mob-offcanvas-footer {
  margin: 8px 12px 20px;
  background: var(--mn-blue-lt);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #c8daef;
}
.mob-footer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mn-navy);
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 50px;
  text-decoration: none !important;
  transition: background 0.15s;
  width: 100%;
  margin-bottom: 12px;
}
.mob-footer-cta:hover { background: var(--mn-accent); }
.mob-footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.mob-footer-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--mn-text-mid);
  text-decoration: none;
}
.mob-footer-contact-link i { color: var(--mn-blue); font-size: 0.85rem; }
.mob-footer-contact-link:hover { color: var(--mn-accent); }
.mob-footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.mob-social-pill {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--mn-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mn-blue);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.mob-social-pill:hover { background: var(--mn-navy); color: #fff; border-color: var(--mn-navy); }

/* ════════════════════════════════════════════════════════
   ACCESSIBILITA
════════════════════════════════════════════════════════ */
.psf-mega__cat:focus-visible,
.psf-mega__item:focus-visible,
.psf-mega__sub li a:focus-visible,
.mob-acc-btn:focus-visible,
.mob-link:focus-visible,
.mob-sub-trigger:focus-visible {
  outline: 2px solid var(--mn-blue);
  outline-offset: 2px;
}

/* Preferisce movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .psf-mega__footer-cta,
  .psf-mega__cat,
  .psf-mega__item,
  .psf-mega__sub li a,
  .mob-acc-panel,
  .mob-sub-list,
  .mob-acc-chevron,
  .mob-sub-chevron { transition: none; }
}

/* MisterSì di fianco chat e whatsapp */

#psf-fab-wrap{position:fixed;bottom:24px;right:24px;z-index:9998;display:flex;align-items:flex-end;gap:14px; overflow-x:hidden;}
#psf-mistersi{width:220px;margin-bottom:-6px;filter:drop-shadow(2px 6px 10px rgba(0,20,60,.2));animation:msi-bob 3s ease-in-out infinite;pointer-events:none;user-select:none;flex-shrink:0}
@keyframes msi-bob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-7px)}}
#psf-fab-stack{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.psf-fab{display:flex;align-items:center;gap:0;height:50px;border-radius:25px;border:none;cursor:pointer;font-size:.875rem;font-weight:600;color:#fff;white-space:nowrap;transition:box-shadow .2s,transform .2s;text-decoration:none;overflow:hidden;padding-right:16px}
.psf-fab:hover{box-shadow:0 8px 26px rgba(0,0,0,.26);transform:translateY(-2px);color:#fff; border-radius:999px}
.psf-fab__icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.psf-fab--wa{background:#25D366}.psf-fab--wa .psf-fab__icon{background:#1ebe5d}
.psf-fab--chat{background:#0056a4}.psf-fab--chat .psf-fab__icon{background:none}

/* Chat widget */
#psf-chat-widget{touch-action: pan-y; overscroll-behavior: contain; position:fixed;bottom:96px;right:24px;width:380px;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,20,60,.18);z-index:9999;display:flex;flex-direction:column;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .22s,transform .22s}
#psf-chat-widget.psf-chat--open{opacity:1;pointer-events:all;transform:translateY(0)}
.psf-chat__head{background:#0056a4;color:#fff;padding:13px 16px;display:flex;align-items:center;gap:10px}
.psf-chat__avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.psf-chat__info{flex:1}
.psf-chat__name{font-weight:700;font-size:.88rem;line-height:1.2}
.psf-chat__status{font-size:.72rem;opacity:.85;display:flex;align-items:center;gap:4px}
.psf-chat__status::before{content:'';width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block}
#psf-chat-close{background:none;border:none;color:#fff;font-size:1.1rem;cursor:pointer;padding:4px;opacity:.8;line-height:1}
#psf-chat-close:hover{opacity:1}
#psf-chat-msgs{flex:1 1 auto;min-height:200px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; padding:12px;display:flex;flex-direction:column;gap:8px;background:#f5f7fb}
.psf-bubble{max-width:82%;padding:8px 12px;border-radius:14px;font-size:.82rem;line-height:1.45;word-break:break-word}
.psf-bubble--agent{background:#fff;border:1px solid #e0e6f0;align-self:flex-start;border-bottom-left-radius:4px}
.psf-bubble--user{background:#0056a4;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.psf-chat__foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #e8edf5;background:#fff}
#psf-chat-input{flex:1;border:1px solid #d0d8e8;border-radius:20px;padding:7px 13px;font-size:16px;outline:none}
#psf-chat-input:focus{border-color:#0056a4}
#psf-chat-send{width:34px;height:34px;border-radius:50%;background:#0056a4;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
#psf-chat-send:hover{background:#004080}

@media(max-width:575px){
  #psf-fab-wrap{bottom:16px;right:16px;gap:10px}
  #psf-mistersi{width:150px}
  .psf-fab__label{display:none}
  .psf-fab{padding-right:0;width:50px;justify-content:center}
  .psf-fab__icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  #psf-chat-widget{bottom:0;right:0;left:0;width:100%;max-width:100%;max-height:calc(100dvh - 70px);border-radius:16px 16px 0 0}
}

/* ── Quick-reply chips ───────────────────────────────────── */
.psf-chat-chips {
  display: flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
  padding:0 12px 12px;
}

.psf-chip {
  display: inline-block;
  background: #e8f0fb;
  border: 1.5px solid rgba(30,109,181,0.22);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a4f8a;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.psf-chip:hover  { background: #1a4f8a; color: #fff; border-color: #1a4f8a; }
.psf-chip:active { transform: scale(0.96); }
.psf-chip.psf-chip--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Typing indicator ────────────────────────────────────── */
.psf-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #f0f4fa;
  border-radius: 16px 16px 16px 4px;
  width: fit-content;
  margin: 4px 12px;
}
.psf-typing span {
  width: 6px;
  height: 6px;
  background: #8098b4;
  border-radius: 50%;
  display: inline-block;
  animation: psfDot 1.2s infinite ease-in-out;
}
.psf-typing span:nth-child(2) { animation-delay: 0.2s; }
.psf-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes psfDot {
  0%,80%,100% { transform: scale(0.7); opacity: 0.5; }
  40%         { transform: scale(1);   opacity: 1;   }
}

/* ── Input inline nella chat ─────────────────────────────── */
.psf-chat-inline-input {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px;
}
.psf-chat-inline-input input,
.psf-chat-inline-input select {
  flex: 1;
  border: 1.5px solid #dde4ee;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1a2840;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.psf-chat-inline-input input:focus,
.psf-chat-inline-input select:focus {
  border-color: #1e6db5;
  box-shadow: 0 0 0 3px rgba(30,109,181,0.10);
}
.psf-chat-inline-input button {
  background: #002E5D;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  color: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background 0.15s;
  white-space: nowrap;
}
.psf-chat-inline-input button:hover { background: #1a4f8a; }
.psf-chat-inline-input button:disabled {
  background: #b0bdd0;
  cursor: not-allowed;
}

/* ── Bolla "riepilogo prodotto" ──────────────────────────── */
.psf-bubble-product {
  background: linear-gradient(135deg, #002E5D 0%, #1a4f8a 100%);
  color: #fff !important;
  border-radius: 16px !important;
}

/* ── Privacy mini-form nella chat ────────────────────────── */
.psf-chat-privacy {
  background: #f5f7fb;
  border: 1px solid #dde4ee;
  border-radius: 12px;
  padding: 14px;
  margin: 4px 12px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.psf-chat-privacy p {
  font-size: 0.74rem;
  color: #4a607a;
  line-height: 1.55;
  margin: 0 0 10px;
}
.psf-chat-privacy p a { color: #1e6db5; font-weight: 700; }
.psf-priv-row { margin-bottom: 10px; }
.psf-priv-row:last-child { margin-bottom: 0; }
.psf-priv-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #002E5D;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}
.psf-priv-desc {
  font-size: 0.72rem;
  color: #8098b4;
  margin-bottom: 6px;
}
.psf-priv-toggle {
  display: flex;
  gap: 6px;
}
.psf-priv-toggle label {
  flex: 1;
  text-align: center;
  border: 1.5px solid #dde4ee;
  border-radius: 8px;
  padding: 7px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4a607a;
  cursor: pointer;
  background: #fff;
  transition: all 0.15s;
}
.psf-priv-toggle input[type="radio"] { display: none; }
.psf-priv-toggle input[type="radio"]:checked + label {
  border-color: #1e6db5;
  background: #e8f0fb;
  color: #1a4f8a;
}

/* ── Progress dots nella chat head ──────────────────────── */
.psf-chat-progress {
  display: flex;
  gap: 5px;
  align-items: center;
}
.psf-chat-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.3s;
}
.psf-chat-progress-dot.active { background: #fff; }
.psf-chat-progress-dot.done   { background: rgba(255,255,255,0.65); }



/* ══════════════════════════════════════════════════════════════
   FORM — Wizard multi-step (da form.css)
   Namespace: .psf-card, .psf-wrap
   Isola dal reset globale di style.css
══════════════════════════════════════════════════════════════ */

/* ============================================================
   PrestitoSì Finance — Form CSS  (v2 — integrato + isolato)
   
   STRATEGIA CONFLITTI:
   · style.css dichiara h1–h6, p, a, button, .btn con regole
     globali molto aggressive (font-size, color, line-height).
   · Tutto ciò che riguarda il form è chiuso dentro
     .psf-card  o  .psf-wrap  per creare un namespace CSS
     che batte qualsiasi regola globale senza !important.
   · Le variabili :root rimangono globali (basso rischio).
   · Nessuna classe duplicata rispetto al form.css originale.

   Font: Plus Jakarta Sans (caricato nell'<head> del template)
   ============================================================ */


/* ── 1. VARIABILI GLOBALI ────────────────────────────────── */
/* Stesse variabili del form.css originale — non duplicate  */



/* ── 2. WRAP / LAYOUT PAGINA ─────────────────────────────── */

/* Header della pagina form (titolo sopra la card) */
/* Namespace .psf-page-header per non toccare h1 globale */
.psf-page-header {
  text-align: center;
  margin-bottom: 32px;
}
.psf-page-header .psf-page-title {
  /* Override del h1 globale di style.css (3.815rem, letter-spacing -0.05em) */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: var(--psf-navy) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}
.psf-page-header .psf-page-subtitle {
  /* Override del p globale di style.css */
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem !important;
  color: var(--psf-text-mid) !important;
  margin-top: 6px;
  line-height: 1.5 !important;
}

.psf-wrap {
  justify-content: center;
  align-items: flex-start;
  min-height: auto;
}

/* Shell a larghezza piena attorno alla card (usata da form-needs.php).
   Unica classe di form-needs.css che mancava: il resto è già integrato. */
.psf-shell {
  width: 100%;
  margin: 0 auto;
}


/* ── 3. CARD CONTAINER ───────────────────────────────────── */

.psf-card {
  background: var(--psf-white);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 30px;
  /* Isola il font dall'Inter globale di style.css */
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.psf-card-top {
  background: var(--psf-white);
  padding: 28px 28px 22px;
  border-bottom: 1px solid var(--psf-border);
}

.psf-body {
  padding: 32px 28px 28px;
}


/* ── 4. STEPPER ──────────────────────────────────────────── */

.psf-stepper {
  display: flex;
  align-items: center;
}

.psf-step {
  display: flex;
  align-items: center;
}

.psf-step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.psf-step-line {
  flex: 1;
  height: 2px;
  background: var(--psf-border);
  border-radius: 2px;
  margin: 0 10px 22px;
  transition: background 0.4s;
}
.psf-step-line.psf-done {
  background: var(--psf-navy);
}

.psf-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--psf-border);
  background: var(--psf-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}

/* Namespace span dentro step-dot per battere style.css */
.psf-step-dot span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem !important;
  font-weight: 700;
  color: var(--psf-text-lt);
  line-height: 1 !important;
  margin: 0 !important;
}

.psf-step.psf-active .psf-step-dot {
  background: var(--psf-navy);
  border-color: var(--psf-navy);
}
.psf-step.psf-active .psf-step-dot span { color: var(--psf-white); }

.psf-step.psf-done .psf-step-dot {
  background: var(--psf-navy);
  border-color: var(--psf-navy);
}
.psf-step.psf-done .psf-step-dot span { font-size: 0 !important; }
.psf-step.psf-done .psf-step-dot span::before {
  content: '✓';
  font-size: 0.85rem;
  color: #fff;
}

.psf-step-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--psf-text-lt);
  white-space: nowrap;
}
.psf-step.psf-active .psf-step-lbl { color: var(--psf-navy); }
.psf-step.psf-done   .psf-step-lbl { color: var(--psf-navy); }


/* ── 5. PANEL ────────────────────────────────────────────── */

.psf-panel { display: none; }
.psf-panel.psf-active {
  display: block;
  animation: psfFadeIn 0.25s ease;
}
@keyframes psfFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.psf-panel-header { margin-bottom: 26px; }

/* Override h2 globale (3.052rem di style.css) */
.psf-card .psf-panel-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--psf-navy) !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
}

/* Override p globale di style.css */
.psf-card .psf-panel-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.87rem !important;
  color: var(--psf-text-mid) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  font-weight: 400;
}


/* ── 6. CAMPI FORM ───────────────────────────────────────── */

.psf-field-group { margin-bottom: 20px; }

.psf-card .psf-label {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--psf-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

/* Input base — override globale Bootstrap/style.css */
.psf-card .psf-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 14px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--psf-text);
  background: var(--psf-white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}
.psf-card .psf-input:focus {
  border-color: var(--psf-blue-mid);
  box-shadow: 0 0 0 3px rgba(30,109,181,0.12);
}
.psf-card .psf-input::placeholder { color: var(--psf-text-lt); }
.psf-card .psf-input:disabled,
.psf-card .psf-input[readonly] {
  background: var(--psf-bg);
  color: var(--psf-text-mid);
  cursor: not-allowed;
  border-color: var(--psf-border);
}

/* Input importo grande */
.psf-amount-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.psf-currency-symbol {
  position: absolute;
  left: 18px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--psf-navy);
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}
.psf-card .psf-input-amount {
  padding-left: 44px;
  font-size: 1rem;
  color: var(--psf-navy);
  height: 70px;
  letter-spacing: -0.5px;
  background: var(--psf-bg);
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  width: 100%;
  box-sizing: border-box;
}
.psf-card .psf-input-amount:focus {
  background: var(--psf-white);
  border-color: var(--psf-blue-mid);
  box-shadow: 0 0 0 3px rgba(30,109,181,0.12);
}
.psf-card .psf-input-amount::-webkit-outer-spin-button,
.psf-card .psf-input-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.psf-card .psf-input-amount[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Feedback importo */
.psf-amount-feedback {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--psf-text-mid);
  margin-top: 7px;
  min-height: 18px;
}
.psf-amount-error {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--psf-error);
  margin-top: 5px;
  min-height: 18px;
  font-weight: 500;
}

/* Badge prodotti */
.psf-product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.psf-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--psf-blue-lt);
  border: 1.5px solid rgba(30,109,181,0.18);
  border-radius: 50px;
  padding: 6px 14px 6px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--psf-blue);
}
.psf-product-badge i { font-size: 0.82rem; }

/* Select */
.psf-select-wrap { position: relative; }
.psf-card .psf-select {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--psf-text);
  background: var(--psf-white);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  padding: 14px 16px;
}
.psf-card .psf-select:focus {
  border-color: var(--psf-blue-mid);
  box-shadow: 0 0 0 3px rgba(30,109,181,0.12);
}
.psf-select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--psf-text-lt);
  pointer-events: none;
  font-size: 0.8rem;
}
.psf-card .psf-select optgroup { font-weight: 700; color: var(--psf-navy); }
.psf-card .psf-select option   { font-weight: 400; }

/* Griglia due colonne */
.psf-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


/* ── 7. PULSANTI NAVIGAZIONE ─────────────────────────────── */
/*
   CONFLITTI RISOLTI:
   · style.css ha .btn con display:flex, border-radius:6px,
     box-shadow, e .btn-primary con background:#002E5D che
     potrebbe schiacciare i nostri pulsanti se Bootstrap
     aggiunge la classe .btn a loro.
   · I nostri pulsanti usano solo classi PSF (.psf-btn-*),
     quindi non entrano in conflitto CON .btn di Bootstrap.
   · Aggiungiamo comunque il namespace .psf-card per sicurezza.
*/

.psf-nav {
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
}
.psf-nav-right   { justify-content: flex-end; }
.psf-nav-between { justify-content: space-between; }

.psf-card .psf-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 13px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--psf-text-mid);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  box-shadow: none;
}
.psf-card .psf-btn-back:hover {
  border-color: var(--psf-blue-mid);
  color: var(--psf-blue);
  background: var(--psf-blue-lt);
}

/* js-btn-prev alias (form-bisogno.js) */
.psf-card .js-btn-prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 13px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--psf-text-mid);
  cursor: pointer;
  visibility: hidden;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}
.psf-card .js-btn-prev:hover {
  border-color: var(--psf-blue-mid);
  color: var(--psf-blue);
  background: var(--psf-blue-lt);
}

.psf-card .psf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--psf-navy);
  border: none;
  border-radius: var(--psf-radius);
  padding: 15px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff !important;        /* override a globale di style.css */
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(15,42,74,0.22);
  letter-spacing: 0.1px;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  line-height: 1.4;
}
.psf-card .psf-btn-primary:hover:not(:disabled) {
  background: var(--psf-blue) !important; /* override .btn-primary:hover di style.css */
  box-shadow: 0 6px 20px rgba(15,42,74,0.32);
  transform: translateY(-1px);
  color: #fff !important;
}
.psf-card .psf-btn-primary:active:not(:disabled) { transform: scale(0.98); }
.psf-card .psf-btn-primary:disabled {
  background: #b0bdd0;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.75;
}

.psf-card .psf-btn-submit {
  background: linear-gradient(135deg, var(--psf-navy) 0%, var(--psf-blue-mid) 100%);
}
.psf-card .psf-btn-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--psf-blue) 0%, var(--psf-blue-mid) 100%) !important;
}

/* Bottone "Scegli" nelle card offerta */
.psf-card .psf-btn-scegli {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--psf-navy);
  border: none;
  border-radius: var(--psf-radius);
  padding: 12px 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 3px 12px rgba(15,42,74,0.2);
  text-decoration: none;
  line-height: 1.4;
}
.psf-card .psf-btn-scegli:hover {
  background: var(--psf-blue) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(15,42,74,0.3);
  color: #fff !important;
}
.psf-card .psf-offer-card.psf-best .psf-btn-scegli {
  background: var(--psf-green);
  box-shadow: 0 3px 12px rgba(0,184,148,0.3);
}
.psf-card .psf-offer-card.psf-best .psf-btn-scegli:hover {
  background: #00a07f !important;
}

/* Legacy: nasconde vecchi btn-next di form-bisogno.js */
.psf-btn-next,
.js-btn-next { display: none !important; }


/* ── 8. RISULTATI OFFERTE ────────────────────────────────── */

.psf-results-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.psf-offer-card {
  border: 1.5px solid var(--psf-border);
  border-radius: 14px;
  padding: 22px 24px;
  background: var(--psf-white);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.18s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}
.psf-offer-card:hover {
  border-color: var(--psf-blue-mid);
  box-shadow: 0 4px 20px rgba(30,109,181,0.12);
  transform: translateY(-2px);
}
.psf-offer-card.psf-best {
  border-color: var(--psf-green);
  border-width: 2px;
  box-shadow: 0 4px 20px rgba(0,184,148,0.15);
}

.psf-best-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  background: var(--psf-green);
  color: #fff;
  padding: 4px 14px;
  border-radius: 30px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.psf-offer-logo {
  flex-shrink: 0;
  width: 80px;
  text-align: center;
}
/* Override img globale di style.css (max-width:100%, height:auto) — qui ok */
.psf-offer-logo img {
  width: 70px;
  height: auto;
  object-fit: contain;
  max-width: 100%;
}

.psf-offer-info { flex: 1; min-width: 0; }

/* Override h* globale di style.css */
.psf-card .psf-offer-istituto {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--psf-navy) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}
.psf-card .psf-offer-prodotto {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem !important;
  color: var(--psf-text-lt) !important;
  margin-top: 2px;
  font-weight: 400;
}

.psf-offer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.psf-meta-chip {
  background: var(--psf-bg);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
}
/* Override strong/p globale */
.psf-meta-chip strong {
  display: block;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--psf-text-lt);
  margin-bottom: 2px;
  font-weight: 700;
}
.psf-meta-chip span {
  font-weight: 700;
  color: var(--psf-text);
  font-size: 0.78rem;
}

.psf-offer-rata {
  flex-shrink: 0;
  text-align: center;
}
.psf-card .psf-offer-rata-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--psf-blue-mid) !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
}
.psf-card .psf-offer-rata-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem !important;
  color: var(--psf-text-lt) !important;
  margin-top: 4px;
  font-weight: 400;
}

.psf-offer-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ── 9. RIEPILOGO OFFERTA SCELTA (step 3) ────────────────── */

.psf-summary-box {
  background: var(--psf-blue-lt);
  border: 1.5px solid rgba(30,109,181,0.2);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.psf-summary-logo img {
  width: 60px;
  height: auto;
  object-fit: contain;
  max-width: 100%;
}
.psf-summary-info { flex: 1; }

.psf-card .psf-summary-bank {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--psf-navy) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.psf-card .psf-summary-product {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem !important;
  color: var(--psf-blue-mid) !important;
  margin-top: 2px;
  font-weight: 600;
}
.psf-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.psf-summary-chip {
  background: var(--psf-white);
  border: 1px solid rgba(30,109,181,0.2);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
}
.psf-summary-chip strong {
  display: block;
  font-size: 0.64rem !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--psf-blue-mid);
  margin-bottom: 1px;
}
.psf-summary-chip span {
  font-weight: 700;
  color: var(--psf-navy);
  font-size: 0.78rem;
}


/* ── 10. LOADING / ERROR ─────────────────────────────────── */

.psf-loading {
  text-align: center;
  padding: 40px 0;
  color: var(--psf-text-mid);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
}
.psf-loading i {
  font-size: 2rem;
  color: var(--psf-blue-mid);
  display: block;
  margin-bottom: 12px;
  animation: psfSpin 1s linear infinite;
}
@keyframes psfSpin { to { transform: rotate(360deg); } }

.psf-error-msg {
  background: #fdf0ef;
  border: 1px solid #f5c6c6;
  border-radius: var(--psf-radius);
  padding: 16px 20px;
  color: var(--psf-error);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 16px;
}


/* ── 11. PRIVACY ─────────────────────────────────────────── */

.psf-privacy {
  border: 1px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 18px;
  margin-bottom: 4px;
}

/* Override p globale di style.css */
.psf-card .psf-privacy-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.77rem !important;
  color: var(--psf-text-mid) !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
  font-weight: 400;
}
/* Override a globale di style.css */
.psf-card .psf-privacy-text a {
  color: var(--psf-blue-mid) !important;
  font-weight: 700;
  text-decoration: underline !important;
}

.psf-privacy-group { margin-bottom: 12px; }
.psf-privacy-group:last-child { margin-bottom: 0; }

.psf-card .psf-privacy-group-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--psf-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.psf-card .psf-privacy-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem !important;
  color: var(--psf-text-lt) !important;
  margin-bottom: 7px;
  line-height: 1.45 !important;
  font-weight: 400;
}

.psf-priv-radios { display: flex; gap: 8px; }
.psf-priv-btn { position: relative; flex: 1; }
.psf-priv-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.psf-card .psf-priv-btn label {
  display: block;
  text-align: center;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius-sm);
  padding: 9px 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--psf-text-mid);
  cursor: pointer;
  background: var(--psf-white);
  transition: all 0.15s;
  margin-bottom: 0;   /* neutralizza margin Bootstrap su label */
}
.psf-card .psf-priv-btn input[type="radio"]:checked + label {
  border-color: var(--psf-blue-mid);
  background: var(--psf-blue-lt);
  color: var(--psf-blue);
}


/* ── 12. TRUST BAR ───────────────────────────────────────── */

.psf-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--psf-border);
  margin-top: 24px;
}
.psf-card .psf-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem !important;
  font-weight: 600;
  color: var(--psf-text-lt) !important;
  text-decoration: none !important;
}
.psf-card .psf-trust-item i {
  font-size: 0.78rem;
  color: var(--psf-blue-mid);
}


/* ── 13. DISCLAIMER (step 3) ─────────────────────────────── */

.psf-card .psf-disclaimer {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.73rem !important;
  color: var(--psf-text-lt) !important;
  line-height: 1.6 !important;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--psf-border);
  text-align: justify;
  font-weight: 400;
}


/* ── 14. RESPONSIVE ──────────────────────────────────────── */

@media (max-width: 680px) {
  .psf-card-top { padding: 18px 16px 16px; }
  .psf-body     { padding: 24px 18px 20px; }

  .psf-card .psf-panel-title { font-size: 1.15rem !important; }

  .psf-fields-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .psf-step-lbl  { display: none; }
  .psf-step-line { margin: 0 6px 0; }

  .psf-card .psf-input-amount { font-size: 1.35rem; height: 60px; }
  .psf-currency-symbol        { font-size: 1.2rem; left: 16px; }

  .psf-card .psf-btn-primary { padding: 13px 20px; font-size: 0.88rem; }
  .psf-card .psf-btn-back,
  .psf-card .js-btn-prev     { padding: 12px 16px; font-size: 0.83rem; }

  /* Card offerte: impilate verticalmente */
  .psf-offer-card {
    flex-wrap: wrap;
    gap: 16px;
  }
  .psf-offer-logo        { width: 56px; }
  .psf-card .psf-offer-rata-num { font-size: 1.6rem !important; }
  .psf-offer-action      { width: 100%; }
  .psf-card .psf-btn-scegli { width: 100%; justify-content: center; }

  /* Riepilogo verticale */
  .psf-summary-box {
    flex-direction: column;
    text-align: center;
  }
  .psf-summary-chips { justify-content: center; }
}

@media (max-width: 400px) {
  .psf-product-badge { font-size: 0.72rem; padding: 5px 10px; }
  .psf-card .psf-trust-item { font-size: 0.66rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   HERO V2 — Layout due colonne + card form orizzontale
   Classi scoped (.hero-v2-*, .hero-form-card*) per evitare
   conflitti con header/menu/altre sezioni esistenti.
   Nessun override globale. Usa le var() già definite in :root.
   ══════════════════════════════════════════════════════════════ */

/* ── Sezione hero ────────────────────────────────────────────── */
.hero-v2 {
  position: relative;
  background:url('../images/hero-bg.png') center center / cover no-repeat;
  overflow: visible;

  /* spazio extra in basso per accogliere la card sovrapposta */
}

.hero-v2-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 60px) 48px clamp(16px, 2vh, 40px);
}

.hero-v2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ── Colonna sinistra: testo ─────────────────────────────────── */
.hero-v2-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-v2-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy, #002E5D);
  margin: 0;
  letter-spacing: -0.02em;
}

.hero-v2-accent {
  color: var(--color-blue-active, #005DB6);
}

.hero-v2-subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-muted, #4a607a);
  max-width: 520px;
  margin: 0;
}

.hero-v2-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

/* Trust micro-bar */
.hero-v2-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 8px;
}

.hero-v2-trust-item {
  font-size: 0.875rem;
  color: var(--color-muted, #4a607a);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-v2-trust-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #26C6DA);
  display: inline-block;
}

/* ── Colonna destra: immagine ────────────────────────────────── */
.hero-v2-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-v2-image {
  width: 100%;
  object-fit: cover;

}

/* ══════════════════════════════════════════════════════════════
   CARD FORM — orizzontale, centrata, sovrapposta all'hero
   ══════════════════════════════════════════════════════════════ */
.hero-form-card-wrapper {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  z-index: 5;
}

.hero-form-card {
  background: var(--color-white, #ffffff);
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow:
    0 30px 60px -20px rgba(0, 46, 93, 0.18),
    0 10px 25px -10px rgba(0, 46, 93, 0.20);
  border: 1px solid rgba(0, 46, 93, 0.06);
}

/* Hint per il form interno: layout orizzontale dove possibile.
   Non tocca la logica JS, solo presentazione del wrapper. */
.hero-form-card form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero-form-card form > * {
  flex: 1 1 200px;
  min-width: 0;
}

/* La sezione successiva ha bisogno di un po' di respiro
   per via della card sovrapposta */
.hero-v2-next-section {
  margin-top: -140px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — tablet
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .hero-v2 {
    border-radius: 20px;
    padding-bottom: 140px;
  }

  .hero-v2-inner {
    padding: 56px 32px 32px;
  }

  .hero-v2-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-v2-text {
    align-items: center;
    order: 1;
  }

  .hero-v2-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-v2-cta,
  .hero-v2-trust {
    justify-content: center;
  }

  .hero-v2-media {
    order: 2;
  }

  .hero-v2-image {
    max-height: auto;
  }

  .hero-form-card-wrapper {
    margin-top: -90px;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .hero-v2 {
    border-radius: 16px;
    padding-bottom: 32px;
  }

  .hero-v2-inner {
    padding: 40px 20px 24px;
  }

  .hero-v2-grid {
    gap: 28px;
  }

  .hero-v2-title {
    font-size: 1.875rem;
  }

  .hero-v2-subtitle {
    font-size: 1rem;
  }

  .hero-v2-cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-v2-cta > * {
    width: 100%;
  }

  .hero-v2-trust {
    gap: 12px;
    font-size: 0.8125rem;
  }

  .hero-v2-image {
    max-height: auto;
    border-radius: 16px;
  }

  /* Su mobile la card NON è più sovrapposta:
     scorre naturalmente sotto l'hero per migliore UX. */
  .hero-form-card-wrapper {
    margin-top: 24px;
    padding: 0 16px;
  }

  .hero-form-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  .hero-form-card form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-form-card form > * {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO V2 — ADD-ON: sotto-colonne (testo + immagine) nella colonna
   sinistra + affinamenti responsive.
   ▸ INCOLLA QUESTO BLOCCO IN FONDO al tuo style.css (dopo la riga 5180).
   ▸ Usa le var() del tuo :root. Non modifica nulla di esistente:
     essendo dopo nel file, sovrascrive per cascata dove serve.
   ══════════════════════════════════════════════════════════════ */

/* La row interna alla colonna sinistra: testo + immagine allineati
   verticalmente al centro per un blocco visivo equilibrato. */
.hero-v2-left-row {
  align-items: center;
}

/* Colonna testo: il contenuto resta a sinistra su desktop. */
.hero-v2-text-col .hero-v2-text {
  gap: 22px;
}

/* ── Colonna immagine ──────────────────────────────────────────── */
.hero-v2-img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-v2-inline-figure {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Immagine PNG fluida: scala con la colonna, mai oltre i limiti.
   drop-shadow morbida pensata per PNG ritagliati/illustrazioni. */
.hero-v2-inline-img {
  width: 100%;
  height: auto;
  max-width: 460px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 22px 45px rgba(0, 46, 93, 0.18));
}

/* Link CTA scroll-to-form: niente sottolineatura, larghezza piena su mobile. */
.hero-v2-cta-link { text-decoration: none; display: inline-block; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — affinamenti (override mirati, classi realmente usate)
   ══════════════════════════════════════════════════════════════ */

/* ▸ DESKTOP GRANDE (≥1200px): un filo più di respiro all'immagine. */
@media (min-width: 1200px) {
  .hero-v2-inline-img { max-width: 500px; }
}

/* ▸ DESKTOP/LAPTOP (992–1199px): l'immagine non deve "spingere" il testo;
   la teniamo compatta perché lo spazio è conteso col form a destra. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-v2-inline-img { max-width: 360px; }
  .hero-v2-subtitle   { font-size: 1.05rem; }
}

/* ▸ TABLET (768–991px): la colonna sinistra è a piena larghezza (Bootstrap
   collassa col-lg-8/col-lg-4). Testo + immagine restano AFFIANCATI:
   c'è spazio e l'accostamento funziona bene. Il form va sotto. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-v2 { padding-bottom: 40px; }
  .hero-v2-inline-img { max-width: 320px; }
  .hero-v2-media { margin-top: 24px; }
  /* Allineamento testo a sinistra mantenuto: leggibilità di un blocco lungo. */
  .hero-v2-text { text-align: left; align-items: flex-start; }
}

/* ▸ MOBILE (<768px): tutto IMPILATO e CENTRATO.
   Ordine naturale dal markup: TESTO → IMMAGINE → (sotto) FORM. */
@media (max-width: 767.98px) {
  .hero-v2 { padding-bottom: 24px; }

  .hero-v2-left-row { row-gap: 24px; }

  /* Testo centrato per equilibrio su schermo stretto. */
  .hero-v2-text {
    text-align: center;
    align-items: center;
    gap: 18px;
  }
  .hero-v2-subtitle { margin-left: auto; margin-right: auto; }

  /* CTA full-width: target ampio e pollice-friendly. */
  .hero-v2-cta { width: 100%; justify-content: center; }
  .hero-v2-cta-link,
  .hero-v2-cta-link > * { width: 100%; }

  /* Immagine: contenuta, mai gigante; centrata sotto al testo. */
  .hero-v2-inline-img { max-width: 300px; }

  /* Card form: respiro sopra e leggibilità. */
  .hero-v2-media { margin-top: 28px; }
}

/* ▸ MOBILE PICCOLO (<400px): riduzioni di sicurezza. */
@media (max-width: 399.98px) {
  .hero-v2-title    { font-size: 1.7rem; }
  .hero-v2-subtitle { font-size: 0.95rem; }
  .hero-v2-inline-img { max-width: 240px; }
}

/* ════════════════════════════════════════════════════════════
   HERO ripristinata (più bassa) + FORM navy a cavallo del bordo.
   BLOCCO UNICO: sostituisce qualsiasi blocco hl- precedente.
   Layout su Bootstrap; non modifico i selettori .hero-v2 / .psf-,
   li estendo soltanto. La pelle navy del form è scoped a .hl-formskin.
   ════════════════════════════════════════════════════════════ */

:root { --hl-overlap: clamp(40px, 6vw, 64px); }  /* quanto la barra entra nell'hero */

/* Hero un filo più bassa + spazio sotto per la barra che scavalca */
.hero-v2 { padding-bottom: var(--hl-overlap); padding-top: clamp(16px, 3vh, 48px); }
.hero-v2-row { min-height: unset; }  /* meno alta dello screen */

.hl-cta-link { text-decoration: none; }
.hl-cta-link > * { width: 100%; }  /* CTA full-width: è solo mobile */

/* ── Posizionamento: metà fuori / metà dentro ────────────────── */
.hl-form-section {
  position: relative;
  z-index: 3;
  padding-top: 0;
  padding-bottom: clamp(28px, 5vw, 48px);
}

.hl-form-box {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--hl-overlap) * -1);   /* sale dentro l'hero */
}

/* Desktop ≥992px: form sale dentro l'hero */
.hl-form-box {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--hl-overlap) * -1);
}



@media (max-width: 991.98px) {
.hl-form-box {
   margin-top: 0;   /* sale dentro l'hero */
}
}

/* ════════════════════════════════════════════════════════════
   PELLE NAVY DEL FORM (.hl-formskin) — v2: bug cifra + allineamento
   + form più compatto. Re-stila gli elementi psf- senza toccarne
   i selettori originali. id/name/classi funzionali invariati.
   ════════════════════════════════════════════════════════════ */

/* Card navy, più compatta */
.hl-formskin .psf-card {
  background: var(--color-navy, #002E5D);
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-xl);
  margin-bottom: 0;
}
.hl-formskin .psf-body { padding: clamp(18px,2.4vw,26px) clamp(18px,3vw,30px); }

/* Testi su navy + header più stretto (meno alto) */
.hl-formskin .psf-panel-title { color:#fff !important; margin-bottom:2px; }
.hl-formskin .psf-panel-sub   { color:rgba(255,255,255,.72) !important; margin-bottom:16px; }
.hl-formskin .psf-label       { color:rgba(255,255,255,.9) !important; }

/* Campi generici = pill traslucida, testo bianco */
.hl-formskin .psf-input,
.hl-formskin .psf-select {
  background: rgba(255, 255, 255, .08) !important;
   
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .45);
    height: 44px;
    font-size: 1rem;
    padding:8px 16px;
    opacity:0.7;
}
.hl-formskin .psf-input::placeholder {
  color:rgba(255,255,255,.6); -webkit-text-fill-color:rgba(255,255,255,.6);
}
.hl-formskin .psf-input:focus,
.hl-formskin .psf-select:focus {
  border-color: var(--color-accent, #26C6DA);
  box-shadow: 0 0 0 3px rgba(38,198,218,.25); outline:none;
}
/* Anti-autofill bianco di Chrome (nome/email) */
.hl-formskin .psf-input:-webkit-autofill,
.hl-formskin .psf-input:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff; caret-color:#fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(0,46,93,.6) inset;
  transition: background-color 9999s;
}

/* ▼ FIX cifra bianca su bianco: sfondo traslucido + testo bianco
   ANCHE in focus (la regola originale metteva il fondo bianco).
   height ridotta 70→60 per un form meno alto. */
.hl-formskin .psf-input-amount {
  background: rgba(255,255,255,.08) !important;
  color:#fff !important; -webkit-text-fill-color:#fff; caret-color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
  height:44px;
  font-size:1.5rem;
  padding:8px 16px;
}
.hl-formskin .psf-input-amount:focus {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--color-accent, #26C6DA);
  box-shadow: 0 0 0 3px rgba(38,198,218,.25);
}
.hl-formskin .psf-currency-symbol { color:#fff; }
.hl-formskin .psf-select-arrow    { color:rgba(255,255,255,.8); }
/* La tendina nativa resta leggibile: testo scuro su bianco */
.hl-formskin .psf-select option,
.hl-formskin .psf-select optgroup { color:var(--color-text, #00132D); background:#fff; }

/* ▼ FIX allineamento: il select "esigenza" stessa altezza dell'importo */
.hl-formskin #psf-bisogno-select { height:60px; }

/* Primari (step 2-3) = pill accento */
.hl-formskin .psf-btn-primary {
  background:var(--color-accent, #26C6DA); border:none;
  color:var(--color-navy, #002E5D);
  border-radius:var(--radius-pill, 999px); font-weight:700;
}
.hl-formskin .psf-btn-primary:hover    { filter:brightness(1.06); }
.hl-formskin .psf-btn-primary:disabled { opacity:.45; cursor:not-allowed; }
.hl-formskin .psf-btn-back {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius-pill, 999px);
}

/* Continua step 1 = cerchio accento allineato agli input (dopo .psf-btn-primary
   così vince su border-radius/larghezza) */
.hl-formskin .js-btn-next-0 {
  width:60px; height:60px; min-width:60px; padding:0;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.hl-formskin .js-btn-next-0 i { font-size:1.25rem; }
.hl-formskin .hl-next-label   { display:none; }   /* testo nascosto: c'è la freccia */

/* Badge prodotto leggibili su navy */
.hl-formskin .psf-product-badges {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;}
.hl-formskin .psf-product-badge {
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.30);
  color:#fff;
}
.hl-formskin .psf-product-badge i { color:var(--color-accent, #26C6DA); }

/* Feedback / legale / privacy su navy */
.hl-formskin .psf-amount-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}
.hl-formskin .psf-amount-error    { color:#ffb4a8; }
.hl-formskin .psf-legal-trigger   { color:rgba(255,255,255,.6); margin-top:14px; }
.hl-formskin .psf-privacy-text,
.hl-formskin .psf-privacy-group-title { color:rgba(255,255,255,.85) !important; }
.hl-formskin .psf-privacy a,
.hl-formskin .psf-legal-link          { color:var(--color-accent, #26C6DA); background:none; border:none; }
.hl-formskin .psf-priv-btn label {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.4); color:#fff;
}
.hl-formskin .psf-priv-btn input:checked + label {
  background:var(--color-accent, #26C6DA);
  border-color:var(--color-accent, #26C6DA);
  color:var(--color-navy, #002E5D);
}

/* Mobile: il "Continua" torna pill piena con testo (la freccia sola non basta) */
@media (max-width: 991.98px) {
  .hl-formskin .js-btn-next-0 {
    width:100%; height:52px; border-radius:var(--radius-pill, 999px);
  }
  .hl-formskin .hl-next-label { display:inline; }
}


/* ════════════════════════════════════════════════════════════
   FORM/HERO v3 — ADD-ON
   ▸ INCOLLA QUESTO BLOCCO IN FONDO al tuo style.css.
   ▸ Solo AGGIUNTE, scoped a .hl-formskin / .psf- / .hero-v2-.
     Nessuna regola esistente viene modificata: vincendo per
     cascata dove serve. Niente conflitti con il resto del sito.
   ════════════════════════════════════════════════════════════ */

/* ── STEPPER visibile sulla card navy ───────────────────────────
   I dot di default usano --psf-navy (scuro): su sfondo navy
   sarebbero invisibili. Qui li portiamo a accento/bianco. */
.hl-formskin .psf-stepper { margin-bottom: clamp(16px, 2.4vw, 24px); }

.hl-formskin .psf-step-dot {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .32);
}
.hl-formskin .psf-step-dot span { color: rgba(255, 255, 255, .7); }

.hl-formskin .psf-step.psf-active .psf-step-dot,
.hl-formskin .psf-step.psf-done   .psf-step-dot {
  background: var(--color-accent, #26C6DA);
  border-color: var(--color-accent, #26C6DA);
}
.hl-formskin .psf-step.psf-active .psf-step-dot span { color: var(--color-navy, #002E5D); }
.hl-formskin .psf-step.psf-done   .psf-step-dot span::before { color: var(--color-navy, #002E5D); }

.hl-formskin .psf-step-lbl { color: rgba(255, 255, 255, .55); }
.hl-formskin .psf-step.psf-active .psf-step-lbl,
.hl-formskin .psf-step.psf-done   .psf-step-lbl { color: #fff; }

.hl-formskin .psf-step-line          { background: rgba(255, 255, 255, .22); }
.hl-formskin .psf-step-line.psf-done { background: var(--color-accent, #26C6DA); }

/* ── SOFT-DISABLED ──────────────────────────────────────────────
   I "Continua" non pronti NON usano l'attributo disabled nativo:
   restano toccabili (su mobile danno feedback) e comunicano lo
   stato con opacità ridotta. La logica di guida è nel JS. */
.hl-formskin .psf-btn-primary[aria-disabled="true"] {
  opacity: .5;
  filter: none;
}
.hl-formskin .psf-btn-primary[aria-disabled="true"]:hover { filter: none; }

/* ── HINT importo (non è un errore) ─────────────────────────────
   Messaggio gentile quando si tocca "Continua" senza dati. */
.psf-amount-hint {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.4;
}
.hl-formskin .psf-amount-hint { color: rgba(255, 255, 255, .78); }

/* ── HERO: trust bar + immagine contenuta su mobile ─────────────
   .hero-v2-trust / -item esistono già nel CSS: qui solo affinamenti. */
@media (max-width: 767.98px) {
  .hl-formskin .psf-stepper { margin-bottom: 16px; }

  /* L'immagine famiglia non deve dominare lo schermo né spingere
     giù il form: la conteniamo e centriamo. */
  .hero-v2-image {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Trust bar centrata insieme al resto del testo hero su mobile. */
  .hero-v2-trust { justify-content: center; }
}


/* ════════════════════════════════════════════════════════════
   POPUP — Informativa legale (portato da form-needs.css)
   Unico pezzo che mancava in style.css. Ora form-needs.css NON
   serve più: rimuovi il file e il suo <link>. Il form resta NAVY.
   ════════════════════════════════════════════════════════════ */
.psf-legal-modal {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.psf-legal-modal.is-open { display: flex; }
.psf-legal-backdrop {
  position: absolute; inset: 0; background: rgba(0,19,45,.6); backdrop-filter: blur(2px);
}
.psf-legal-dialog {
  position: relative; background: #fff; border-radius: 16px; max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 28px 28px 24px;
  box-shadow: 0 24px 60px -20px rgba(0,19,45,.45);
  animation: psfLegalPop .2s cubic-bezier(.4,0,.2,1);
}
@keyframes psfLegalPop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.psf-legal-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: none;
  background: #eef2f7; color: #475569; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; transition: 200ms;
}
.psf-legal-close:hover { background: #e2e8f0; color: #0f172a; }
.psf-legal-title {
  margin: 0 0 14px; font-size: 18px; font-weight: 700;
  color: var(--color-navy, #002E5D); padding-right: 36px;
}
.psf-legal-content { font-size: 13.5px; line-height: 1.6; color: #475569; }
.psf-legal-content p { margin: 0 0 12px; }
.psf-legal-content ul { padding-left: 18px; margin: 0 0 12px; }
.psf-legal-content li { margin-bottom: 4px; }
.psf-legal-content strong { color: var(--color-navy, #002E5D); }

/* ══════════════════════════════════════════════════════════════
   SEZIONE FAQ — PrestitoSì Finance
   ── DA AGGIUNGERE IN CODA a style.css (nessun selettore esistente
      viene modificato). Tutte le classi usano il prefisso .faq-
      per non entrare in conflitto con pp-/cq-/pap-/ann-/navbar.
══════════════════════════════════════════════════════════════ */

:root {
  /* ── VARIABILI SEZIONE FAQ ─────────────────────────────────── */
  --faq-navy:   #002E5D;
  --faq-blue:   #0056A4;
  --faq-accent: #26C6DA;
  --faq-light:  #E0F7FA;
  --faq-lightb: #EBF1FF;
  --faq-text:   #00132D;
  --faq-muted:  #4a607a;
  --faq-border: #dde4ee;
  --faq-bg:     #F5F7FA;
}

/* ── Contenitore sezione ─────────────────────────────────────── */
.faq-section { background: var(--faq-bg); padding: 72px 0 80px; }
.faq-section .container { max-width: 980px; }

/* ── Intestazione ────────────────────────────────────────────── */
.faq-head { text-align: center; margin-bottom: 44px; }
.faq-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--faq-blue); background: var(--faq-lightb);
  border-radius: var(--radius-pill); padding: 6px 14px; margin-bottom: 16px;
}
.faq-title {
  font-family: var(--font-primary);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800;
  color: var(--faq-navy); line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 14px;
}
.faq-title em { font-style: normal; color: var(--faq-blue); }
.faq-intro {
  font-family: var(--font-primary);
  font-size: 1.02rem; color: var(--faq-muted);
  max-width: 620px; margin: 0 auto; line-height: 1.65;
}

/* ── Step "come richiedere la consulenza" ────────────────────── */
.faq-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin: 0 0 56px;
}
.faq-step {
  position: relative; background: var(--color-white);
  border: 1px solid var(--faq-border); border-radius: var(--radius-lg);
  padding: 26px 22px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.faq-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.faq-step__num {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; color: #fff;
  background: var(--gradient-navy); margin-bottom: 14px;
}
.faq-step__title { font-size: 1.02rem; font-weight: 800; color: var(--faq-navy); margin-bottom: 6px; }
.faq-step__text  { font-size: .89rem; color: var(--faq-muted); line-height: 1.55; margin: 0; }

/* ── Gruppi di domande ───────────────────────────────────────── */
.faq-group { margin-bottom: 34px; }
.faq-group:last-of-type { margin-bottom: 0; }
.faq-group__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800; color: var(--faq-navy); margin-bottom: 16px;
}
.faq-group__title i { color: var(--faq-blue); font-size: 1.25rem; }

/* ── Accordion (scoped: non tocca .navbar-offcanvas .accordion-*) ── */
.faq-accordion .accordion-item {
  background: var(--color-white); border: 1px solid var(--faq-border);
  border-radius: 14px !important; margin-bottom: 12px; overflow: hidden;
}
.faq-accordion .accordion-header { margin: 0; }
.faq-accordion .accordion-button {
  font-family: var(--font-primary); font-size: 1rem; font-weight: 700;
  color: var(--faq-navy); background: var(--color-white);
  padding: 18px 20px; box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--faq-blue); background: var(--faq-lightb); box-shadow: none;
}
.faq-accordion .accordion-button:focus {
  border-color: transparent; box-shadow: 0 0 0 3px rgba(0, 86, 164, 0.15);
}
.faq-accordion .accordion-button::after { width: 1.1rem; height: 1.1rem; background-size: 1.1rem; }
.faq-accordion .accordion-body {
  font-family: var(--font-primary); padding: 2px 20px 20px;
  font-size: .94rem; color: var(--pap-bg); line-height: 1.7; background-color:var(--color-navy);
}
.faq-accordion .accordion-body a { color: var(--color-accent); font-weight: 600; }

/* ── CTA finale ──────────────────────────────────────────────── */
.faq-cta {
  margin-top: 56px; background: var(--color-navy);
  border-radius: var(--radius-xl); padding: 46px 40px; text-align: center;
  color: #fff; box-shadow: var(--shadow-lg);
}
.faq-cta__title { font-family: var(--font-primary); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: #fff; margin-bottom: 10px; }
.faq-cta__text  { font-size: 1rem; color: #cfe0f2; max-width: 560px; margin: 0 auto 26px; line-height: 1.6; }
.faq-cta__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.faq-cta__actions .btn { min-width: 250px; }
.faq-cta__phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; text-decoration: none; font-size: .98rem;
}
.faq-cta__phone i { font-size: 1.1rem; }
.faq-cta__phone:hover { color: var(--faq-light); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-steps { grid-template-columns: 1fr; }
  .faq-cta { padding: 36px 22px; }
  .faq-cta__actions .btn { min-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   PAGINE SEO TESTUALI  —  da appendere in fondo a style.css
   Articolo lineare: solo testo giustificato + 3 CTA neutre
══════════════════════════════════════════════════════════════ */

/* ── Ritmo verticale dell'articolo ───────────────────────────── */
.seo-article {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

/* ── H1 / TITOLO HERO ────────────────────────────────────────── */
h1.entry-title {
  font-size: 2.5rem;        /* Dimensione del titolo */
  line-height: 1.2;         /* Evita righe troppo distanti */
  margin-top: 2rem;         /* Spazio pulito sopra il titolo */
  margin-bottom: 1.25rem;   /* Distanza ideale dal contenuto sottostante */
  letter-spacing: -0.02em;  /* Stringe leggermente le lettere nei titoli grandi */
}

/* ── H2 di sezione — gerarchia e respiro ─────────────────────── */
.seo-article h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

/* Eventuali H3 di sotto-sezione (gerarchia pronta all'uso) */
.seo-article h3 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

/* ── PARAGRAFI E LISTE — testo giustificato e leggibile ──────── */
.seo-article p,
.seo-article li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;            /* sillabazione: niente "buchi" nelle righe */
  -webkit-hyphens: auto;
  line-height: 1.7;
}

.seo-article p {
  margin-bottom: 1.15rem;
}

.seo-article ul {
  margin: 0 0 1.5rem;
}

.seo-article li {
  margin-bottom: 0.6rem;
}

/* ── CTA — 3 pulsanti neutri (nessun colore, nessun bg) ──────── */
.cta-seo-wrap {
  text-align: center;
  margin: 2.5rem 0;
  max-width:500px;
}

.cta-seo-final {
  margin: 3rem 0 0.5rem;
}

.btn-cta-seo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.85rem 1.75rem;
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-text);
  border-radius: var(--radius-pill);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: none;
  transition: opacity var(--transition-base), border-color var(--transition-base);
}

.btn-cta-seo:hover {
  background: transparent;          /* nessun fondo */
  color: var(--color-text);         /* nessun testo in negativo */
  border-color: var(--color-text);
  opacity: 0.75;                    /* feedback neutro */
}

.btn-cta-seo:hover .bi {
  transform: translateX(3px);
}

.btn-cta-seo .bi {
  font-size: 1rem;
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}

/* ── MOBILE ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  h1.entry-title {
    font-size: 2rem;        /* Il titolo si rimpicciolisce su smartphone */
    margin-top: 1.5rem;
    margin-bottom: 1rem;    /* Spazio ridotto proporzionalmente */
  }

  .seo-article h2 {
    font-size: 1.5rem;
    margin-top: 2.25rem;
  }

  .btn-cta-seo {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════
   HLV3 — HERO + FORM nella stessa sezione
   Il form è sempre visibile: sta fisicamente dentro l'hero,
   incollato in basso. Scala con il viewport senza overflow.
   Classi scoped hlv3- per zero conflitti col resto del sito.
   ════════════════════════════════════════════════════════════ */

/* ── Sezione contenitore ────────────────────────────────────
   Flex colonna: testo sopra, form sempre in fondo.
   min-height basato su viewport ma mai inferiore al contenuto.  */
.hlv3-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-bg-light, #EBF1FF);
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  /* Occupa tutta la viewport meno la navbar (~68px) */
 min-height: auto;
  padding-top: clamp(32px, 5vh, 64px);
}

/* ── Testo ──────────────────────────────────────────────────── */
.hlv3-body {
  flex: 1;                   /* si espande, spinge il form in fondo */
}

.hlv3-title {
  font-size: clamp(1.75rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy, #002E5D);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.hlv3-accent {
  color: var(--color-blue-active, #005DB6);
}

.hlv3-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-muted, #4a607a);
  max-width: 520px;
  margin: 0;
}

.hlv3-image {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
}

/* ── Form — sempre incollato in fondo ───────────────────────── */
.hlv3-form-wrap {
  margin-top: clamp(24px, 4vh, 48px);
  padding-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 991.98px) {
  .hlv3-hero {
    min-height: calc(100dvh - 68px);
    border-radius: var(--radius-lg, 16px);
    padding-top: clamp(24px, 4vh, 48px);
  }
  .hlv3-subtitle {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .hlv3-hero {
    min-height: calc(100dvh - 60px);
    border-radius: 0;              /* edge-to-edge su mobile */
    padding-top: 24px;
  }
  .hlv3-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    text-align: center;
  }
  .hlv3-subtitle {
    font-size: 0.95rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hlv3-form-wrap {
    margin-top: 20px;
  }
}

/* Mobile piccolo */
@media (max-width: 399.98px) {
  .hlv3-title { font-size: 1.45rem; }
  .hlv3-subtitle { font-size: 0.9rem; }
}

/* ── 14"/13" (lg: 992–1199px): nascondi immagine, compatta testo ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hlv3-hero {
    min-height: auto;
    padding-top: 32px;
  }
  .hlv3-image {
    display: none !important;
  }
  .hlv3-title {
    font-size: 2rem;
  }
  .hlv3-subtitle {
    font-size: 0.95rem;
  }
  .hlv3-body .col-lg-7 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .hlv3-form-wrap {
    margin-top: 16px;
  }
}

/* ============================================================
   PrestitoSì Finance — form.css  (versione completa)
   Contiene:
   · Variabili PSF (:root)
   · Componenti form psf-* (card, stepper, input, select,
     privacy, nav, trust bar)
   · Hero hl-* (sezione hero della home)
   · Stili pagina richiesta rq-* (già inline in richiesta.php,
     qui per eventuale estrazione futura)

   Font: Plus Jakarta Sans (caricato dall'header del sito)
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   1. VARIABILI GLOBALI
═══════════════════════════════════════════════════════════ */
:root {
  --psf-navy:      #002E5D;
  --psf-blue:      #1a4f8a;
  --psf-blue-mid:  #1e6db5;
  --psf-blue-lt:   #e8f0fb;
  --psf-border:    #dde4ee;
  --psf-bg:        #f5f7fb;
  --psf-white:     #ffffff;
  --psf-text:      #1a2840;
  --psf-text-mid:  #4a607a;
  --psf-text-lt:   #8098b4;
  --psf-error:     #c0392b;
  --psf-green:     #00b894;
  --psf-radius:    12px;
  --psf-radius-sm: 8px;
  --psf-shadow-md: 0 4px 24px rgba(10,30,60,0.14);
}


/* ═══════════════════════════════════════════════════════════
   2. FORM PSF — COMPONENTI
   Namespace: .psf-*
═══════════════════════════════════════════════════════════ */

/* ── Wrap ────────────────────────────────────────────────── */
.psf-wrap {
  justify-content: center;
  align-items: flex-start;
  min-height: auto;
}

/* ── Card ────────────────────────────────────────────────── */
.psf-card {
  background: var(--psf-white);
  overflow: hidden;
  margin-top: 20px;
}
.psf-card-top {
  background: var(--psf-white);
  padding: 28px 28px 22px;
}

/* ── Stepper ─────────────────────────────────────────────── */
.psf-stepper { display: flex; align-items: center; }
.psf-step    { display: flex; align-items: center; }
.psf-step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.psf-step-line {
  flex: 1;
  height: 2px;
  background: var(--psf-border);
  border-radius: 2px;
  margin: 0 10px 22px;
  transition: background 0.3s;
}
.psf-step-line.psf-done { background: var(--psf-navy); }

.psf-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--psf-border);
  background: var(--psf-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.psf-step-dot span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--psf-text-lt);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.psf-step.psf-active .psf-step-dot { background: var(--psf-navy); border-color: var(--psf-navy); }
.psf-step.psf-active .psf-step-dot span { color: var(--psf-white); }
.psf-step.psf-done   .psf-step-dot { background: var(--psf-navy); border-color: var(--psf-navy); }
.psf-step.psf-done   .psf-step-dot span { font-size: 0; }
.psf-step.psf-done   .psf-step-dot span::before { content: '✓'; font-size: 0.85rem; color: #fff; }

.psf-step-lbl {
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--psf-text-lt);
  white-space: nowrap;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.psf-step.psf-active .psf-step-lbl { color: var(--psf-navy); }
.psf-step.psf-done   .psf-step-lbl { color: var(--psf-navy); }

/* ── Body ────────────────────────────────────────────────── */
.psf-body { padding: 32px 28px 28px; }

/* ── Panel ───────────────────────────────────────────────── */
.psf-panel { display: none; }
.psf-panel.psf-active {
  display: block;
  animation: psfFadeIn 0.25s ease;
}
@keyframes psfFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel header ────────────────────────────────────────── */
.psf-panel-header { margin-bottom: 26px; }
.psf-panel-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--psf-navy);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  line-height: 1.2;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.psf-panel-sub {
  font-size: 0.87rem;
  color: var(--psf-text-mid);
  margin: 0;
  line-height: 1.5;
}

/* ── Field group ─────────────────────────────────────────── */
.psf-field-group { margin-bottom: 20px; }

/* ── Label ───────────────────────────────────────────────── */
.psf-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--psf-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── Input base ──────────────────────────────────────────── */
.psf-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 14px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--psf-text);
  background: var(--psf-white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.psf-input:focus {
  border-color: var(--psf-blue-mid);
  box-shadow: 0 0 0 3px rgba(30,109,181,0.12);
}
.psf-input::placeholder { color: var(--psf-text-lt); }
.psf-input:disabled,
.psf-input[readonly] {
  background: var(--psf-bg);
  color: var(--psf-text-mid);
  cursor: not-allowed;
}

/* ── Input importo grande ────────────────────────────────── */
.psf-amount-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.psf-currency-symbol {
  position: absolute;
  left: 18px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--psf-navy);
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}
.psf-input-amount {
  padding-left: 44px;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--psf-navy);
  height: 70px;
  letter-spacing: -0.5px;
  background: var(--psf-bg);
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  width: 100%;
  box-sizing: border-box;
}
.psf-input-amount:focus {
  background: var(--psf-white);
  border-color: var(--psf-blue-mid);
  box-shadow: 0 0 0 3px rgba(30,109,181,0.12);
}
.psf-input-amount::-webkit-outer-spin-button,
.psf-input-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.psf-input-amount[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
.psf-input-amount[type="number"]::-webkit-outer-spin-button,
.psf-input-amount[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Feedback importo ────────────────────────────────────── */
.psf-amount-feedback {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--psf-text-mid);
  margin-top: 7px;
  min-height: 18px;
}
.psf-amount-error {
  font-size: 0.8rem;
  color: var(--psf-error);
  margin-top: 5px;
  min-height: 18px;
  font-weight: 500;
}

/* ── Badge prodotti ──────────────────────────────────────── */
.psf-product-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.psf-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--psf-blue-lt);
  border: 1.5px solid rgba(30,109,181,0.18);
  border-radius: 50px;
  padding: 6px 14px 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--psf-blue);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.psf-product-badge i { font-size: 0.82rem; }

/* ── Select ──────────────────────────────────────────────── */
.psf-select-wrap { position: relative; }
.psf-select {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 14px 44px 14px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--psf-text);
  background: var(--psf-white);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.psf-select:focus {
  border-color: var(--psf-blue-mid);
  box-shadow: 0 0 0 3px rgba(30,109,181,0.12);
}
.psf-select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--psf-text-lt);
  pointer-events: none;
  font-size: 0.8rem;
}
.psf-select optgroup { font-weight: 700; color: var(--psf-navy); }
.psf-select option   { font-weight: 400; }

/* ── Griglia 2 colonne ───────────────────────────────────── */
.psf-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Privacy ─────────────────────────────────────────────── */
.psf-privacy {
  background: var(--psf-bg);
  border: 1px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 18px;
  margin-bottom: 4px;
}
.psf-privacy-text {
  font-size: 0.77rem;
  color: var(--psf-text-mid);
  line-height: 1.6;
  margin: 0 0 12px;
}
.psf-privacy-text a {
  color: var(--psf-blue-mid);
  font-weight: 700;
  text-decoration: underline;
}
.psf-privacy-group        { margin-bottom: 12px; }
.psf-privacy-group:last-child { margin-bottom: 0; }
.psf-privacy-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--psf-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.psf-privacy-desc {
  font-size: 0.76rem;
  color: var(--psf-text-lt);
  margin-bottom: 7px;
  line-height: 1.45;
}
.psf-priv-radios { display: flex; gap: 8px; }
.psf-priv-btn    { position: relative; flex: 1; }
.psf-priv-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.psf-priv-btn label {
  display: block;
  text-align: center;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius-sm);
  padding: 9px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--psf-text-mid);
  cursor: pointer;
  background: var(--psf-white);
  transition: all 0.15s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
}
.psf-priv-btn input[type="radio"]:checked + label {
  border-color: var(--psf-blue-mid);
  background: var(--psf-blue-lt);
  color: var(--psf-blue);
}

/* ── Navigazione pulsanti ────────────────────────────────── */
.psf-nav {
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
}
.psf-nav-right   { justify-content: flex-end; }
.psf-nav-between { justify-content: space-between; }

.psf-btn-back,
.js-btn-prev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--psf-border);
  border-radius: var(--psf-radius);
  padding: 13px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--psf-text-mid);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  box-shadow: none;
}
.psf-btn-back:hover,
.js-btn-prev:hover {
  border-color: var(--psf-blue-mid);
  color: var(--psf-blue);
  background: var(--psf-blue-lt);
}

.psf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--psf-navy);
  border: none;
  border-radius: var(--psf-radius);
  padding: 15px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(15,42,74,0.22);
  letter-spacing: 0.1px;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  line-height: 1.4;
}
.psf-btn-primary:hover:not(:disabled) {
  background: var(--psf-blue) !important;
  box-shadow: 0 6px 20px rgba(15,42,74,0.32);
  transform: translateY(-1px);
  color: #fff !important;
}
.psf-btn-primary:active:not(:disabled) { transform: scale(0.98); }
.psf-btn-primary:disabled {
  background: #b0bdd0;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.75;
}

.psf-btn-submit {
  background: linear-gradient(135deg, var(--psf-navy) 0%, var(--psf-blue-mid) 100%);
}
.psf-btn-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--psf-blue) 0%, var(--psf-blue-mid) 100%) !important;
}

.psf-btn-next,
.js-btn-next { display: none !important; }

/* ── Trust bar ───────────────────────────────────────────── */
.psf-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--psf-border);
  margin-top: 24px;
}
.psf-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--psf-text-lt);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-decoration: none;
}
.psf-trust-item i { font-size: 0.78rem; color: var(--psf-blue-mid); }

/* ── Legal modal ─────────────────────────────────────────── */
.psf-legal-trigger {
  font-size: 0.72rem;
  color: var(--psf-text-lt);
  margin-top: 14px;
  text-align: center;
}
.psf-legal-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--psf-blue-mid);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.psf-legal-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.psf-legal-modal.is-open { display: block; }
.psf-legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.psf-legal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.psf-legal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--psf-text-lt);
}
.psf-legal-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--psf-navy);
  margin: 0 0 16px;
}
.psf-legal-content p,
.psf-legal-content li {
  font-size: 0.82rem;
  color: var(--psf-text-mid);
  line-height: 1.65;
  margin-bottom: 10px;
}
.psf-legal-content ul { padding-left: 16px; }

/* ── Responsive form ─────────────────────────────────────── */
@media (max-width: 600px) {
  .psf-card-top   { padding: 20px 18px 18px; }
  .psf-body       { padding: 24px 18px 22px; }
  .psf-panel-title { font-size: 1.15rem; }
  .psf-fields-row { grid-template-columns: 1fr; gap: 0; }
  .psf-step-lbl   { display: none; }
  .psf-step-line  { margin: 0 6px 0; }
  .psf-input-amount { font-size: 1.35rem; height: 60px; }
  .psf-currency-symbol { font-size: 1.2rem; left: 16px; }
  .psf-btn-primary { padding: 13px 20px; font-size: 0.88rem; }
  .psf-btn-back,
  .js-btn-prev     { padding: 12px 16px; font-size: 0.83rem; }
}
@media (max-width: 400px) {
  .psf-product-badge { font-size: 0.72rem; padding: 5px 10px; }
  .psf-trust-item    { font-size: 0.66rem; }
}


/* ═══════════════════════════════════════════════════════════
   3. HERO HOME — sezione principale
   Namespace: .hl-hero  .hl-circle  .hl-*
   Inclusa da hero.php
═══════════════════════════════════════════════════════════ */

.hl-hero {
  background: url('../images/hero-bg.png');
  position: relative;
  overflow: hidden;
  padding-top: 28px;
  padding-bottom: 0;
  border-radius: 0 0 20px 20px;
}


/* Grid testo | immagine */
.hl-hero__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  z-index: 1;
  min-height: 320px;
}

/* Colonna testo */
.hl-hero__text-col { padding: 24px 0 40px; }

.hl-hero__pill {
  display: inline-block;
  background: #1a3d00;
  color: #c0dd97;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}

/* Bubble testo */
.hl-hero__bubble {
  background: #fff;
  border-radius: 20px 20px 20px 0;
  padding: 22px 26px;
  display: inline-block;
  max-width: 480px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.hl-hero__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem) !important;
  font-weight: 700 !important;
  color: #1a2840 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;
}
.hl-hero__title strong { font-weight: 800; }

.hl-hero__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-hero__bullets li {
  font-size: 0.85rem;
  color: #4a607a;
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}
.hl-hero__bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #6abf3c;
}

/* Immagine persona */
.hl-hero__img-col {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
}
.hl-hero__img {
  height: 360px;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(-8px 0 16px rgba(0,0,0,0.12));
}

/* Strip bianca — 3 colonne */
.hl-hero__strip {
  background: #001f43;
  border-radius: 16px 16px 0 0;
  padding: 18px 28px;
  position: relative;
  z-index: 3;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}

.hl-hero__strip-form {
  display: grid;
  grid-template-columns: auto minmax(0, 360px) auto;
  align-items: center;
  gap: 32px;
  width:100%;
  margin: 0 auto;
}

/* Col 1: label — una riga sola */
.hl-hero__strip-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 50px;
  white-space: nowrap;
  cursor: default;
  flex-shrink: 0;
}

/* Col 2: input */
.hl-hero__strip-input-wrap {
  position: relative;
  flex: 1;
}

.hl-hero__currency {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  font-weight: 800;
  color: #002E5D;
  pointer-events: none;
  z-index: 1;
}

.hl-hero__amount-input {
  width: 100%;
  height: 50px;
  border: 2px solid #dde4ee;
  border-radius: 10px;
  padding: 0 14px 0 36px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #002E5D;
  background: #f5f7fb;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.hl-hero__amount-input:focus {
  border-color: #1e6db5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30,109,181,0.1);
}
.hl-hero__amount-input::placeholder { color: #8098b4; font-weight: 500; font-size: 1rem; }
.hl-hero__amount-input::-webkit-outer-spin-button,
.hl-hero__amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.hl-hero__error {
  font-size: 0.7rem;
  color: #c0392b;
  font-weight: 500;
  min-height: 16px;
  margin-top: 3px;
}

/* Col 3: CTA */
.hl-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a3d00;
  border: none;
  border-radius: 50px;
  padding: 0 32px;
  height: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(26,61,0,0.3);
  flex-shrink: 0;
}
.hl-hero__cta:hover  { background: #2a5c00; transform: translateY(-1px); }
.hl-hero__cta:active { transform: scale(0.98); }
.hl-hero__cta i      { font-size: 0.9rem; }

/* Responsive hero */
@media (max-width: 991px) {
  .hl-hero__main { grid-template-columns: 1fr; min-height: auto; }
  .hl-hero__img-col { justify-content: center; max-height: 260px; overflow: hidden; }
  .hl-hero__img { height: 260px; }
  .hl-hero__strip { padding: 18px 20px; }
  .hl-hero__strip-form { gap: 14px; }
  .hl-hero__strip-label { font-size: 0.9rem; }
}
@media (max-width: 575px) {
  .hl-hero { padding-top: 20px; border-radius: 0 0 12px 12px; }
  .hl-hero__bubble { padding: 16px 18px; border-radius: 14px 14px 14px 0; }
  .hl-hero__title  { font-size: 1.3rem !important; }
  .hl-hero__strip  { padding: 14px 16px; }
  .hl-hero__strip-form { grid-template-columns: 1fr; gap: 10px; }
  .hl-hero__strip-label { white-space: normal; font-size: 0.88rem; }
  .hl-hero__amount-input { height: 46px; font-size: 1.2rem; }
  .hl-hero__cta { height: 46px; font-size: 0.82rem; padding: 0 16px; width: 100%; justify-content: center; }
  .hl-hero__img { height: 220px; }
}

/* ════════════════════════════════════════════════════════════
   HERO v3 — layout "Credipass" (immagine sx · form dx)
   + EFFETTO SOVRAPPOSIZIONE (rev2):
     · La FASCIA di sfondo prende l'altezza della COLONNA SINISTRA
       (titolo + testo + immagine), che resta quindi INTERAMENTE
       dentro la fascia.
     · Solo il FORM (tolto dal flusso) sporge sopra e sotto.
     · Il padding verticale della sezione assorbe la sporgenza →
       la sezione successiva NON viene coperta.
   ▸ INCOLLA QUESTO BLOCCO IN FONDO a style.css. Solo aggiunte.
   ════════════════════════════════════════════════════════════ */

/* La sezione non ha sfondo proprio su desktop: lo porta la fascia (::before
   della riga). Il padding verticale ospita la sporgenza del form. */
.hero-v2.phero{
  position: relative;
  background: none;
  overflow: visible;
  display: flex;
  align-items: center;
  padding-top:    clamp(56px, 8vh, 104px);
  padding-bottom: clamp(56px, 8vh, 104px);
}

/* ── Colonna sinistra ─────────────────────────────────────── */
.phero-title{ margin-bottom: 1rem; }
.phero-sub{
  font-size: 1.05rem; line-height: 1.6;
  color: var(--color-muted, #4a607a);
  max-width: 480px; margin: 0 0 1.5rem;
}
.phero-cta{
  align-items:center; gap:8px;
  background: var(--color-accent, #26C6DA);
  color: var(--color-navy, #002E5D);
  border:none; border-radius: var(--radius-pill, 999px);
  font-weight:700; padding:12px 26px; margin-bottom:1.5rem;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,46,93,.18);
  transition: filter .15s, transform .12s;
}
.phero-cta:hover{ filter:brightness(1.05); color:var(--color-navy,#002E5D); transform:translateY(-1px); }
.phero-img{ display:block; width:100%; max-width:400px; height:auto; margin:0 auto; }

/* ════════════════════════════════════════════════════════════
   DESKTOP ≥992px — fascia = altezza colonna sx, form sovrapposto
   ════════════════════════════════════════════════════════════ */
@media (min-width:992px){
  .phero .phero-row{ position:relative; }

  /* FASCIA: full-bleed, alta quanto la riga. La riga è alta quanto la
     colonna sinistra perché il form è fuori dal flusso (assoluto). */
  .phero .phero-row::before{
    content:"";
    position:absolute; z-index:0;
    top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:url('../images/hero-bg.png') center center / cover no-repeat;
  }
  .phero .phero-row > *{ position:relative; z-index:1; }

  /* Immagine contenuta così la colonna sx resta più bassa del form */
  .phero-img{ margin-left:0; margin-right:auto; width:auto; max-height:var(--phero-img-max,400px); }

  /* FORM fuori dal flusso: non allunga la riga → la fascia resta = colonna sx.
     Centrato in verticale sulla fascia, sporge sopra e sotto. */
  .phero-form{
    position:absolute; z-index:2;
    top:50%; right:0; transform:translateY(-50%);
    width: clamp(380px, 40vw, 480px);
  }
}

/* ── Form skin: card piena, allineamenti compatti, submit, consensi ── */
.phero-form .psf-card{ margin-bottom:0; }
.hl-formskin #psf-bisogno-select{ height:44px; }
.hl-formskin .psf-onecard .psf-input-amount{ height:44px; font-size:1rem;  }
.hl-formskin .psf-card .psf-btn-submit,
.hl-formskin .psf-card .psf-btn-submit:hover:not(:disabled){
  background: var(--color-accent, #26C6DA) !important;
  color: var(--color-navy, #002E5D) !important;
}
.hl-formskin .psf-card .psf-btn-submit:hover:not(:disabled){ filter:brightness(1.06); }
.hl-formskin .psf-onecard .psf-legal-trigger{ color: rgba(255,255,255,.6); }
.hl-formskin .psf-onecard .psf-consents-radio   { color: rgba(255,255,255,.88); }
.hl-formskin .psf-onecard .psf-consent-desc      { opacity: .72; color:var(--psf-white); font-size:0.6rem}
.hl-formskin .psf-onecard .psf-consents-radio a  { color: var(--color-accent, #26C6DA); }
.hl-formskin .psf-onecard .psf-consent-head      { color: var(--color-accent, #26C6DA); opacity: 1; margin-bottom: -.80rem; }
.hl-formskin .psf-onecard .psf-consent-opt input[type="radio"]{ accent-color: var(--color-accent, #26C6DA); }

/* ════════════════════════════════════════════════════════════
   TABLET/MOBILE ≤991px — niente sovrapposizione: sfondo pieno,
   tutto in colonna, form nel flusso normale.
   ════════════════════════════════════════════════════════════ */
@media (max-width:991.98px){
  .hero-v2.phero{
    background:url('../images/hero-bg.png') center center / cover no-repeat;
    padding-top: clamp(32px,5vh,48px); padding-bottom: clamp(32px,5vh,48px);
  }
  .phero .phero-row::before{ display:none; }
  .phero-form{ position:static; width:auto; transform:none; max-width:560px; margin:0 auto; }
  .phero-img{ max-width:360px; max-height:none; width:100%; margin:.5rem auto 0; }
}
@media (max-width:575.98px){
  .phero-title{ font-size:1.8rem; }
  .phero-img{ max-width:240px; }
}

 /* Header card compatto */
  .psf-onecard .psf-onecard-header { margin-bottom: .85rem; }
  .psf-onecard .psf-panel-sub      { margin-bottom: 0; }

  /* Campi serrati: label piccola, niente margini extra dei field-group */
  .psf-onecard .psf-field-group { margin-bottom: 0; }
  .psf-onecard .psf-label       { margin-bottom: .2rem; font-size: .78rem; line-height: 1.1; }

  /* Feedback importo: zero spazio quando vuoto */
  .psf-onecard #psf-amount-feedback:empty,
  .psf-onecard #psf-amount-error:empty,
  .psf-onecard #psf-amount-hint:empty { display: none; }
  .psf-onecard #psf-amount-error:not(:empty),
  .psf-onecard #psf-amount-hint:not(:empty) { margin-top: .35rem; font-size: .8rem; }
  .psf-onecard #psf-product-badges { margin-top: .4rem; }
  .psf-onecard .psf-select:disabled { opacity: .6; cursor: not-allowed; }

  /* Consensi compatti a radio: testo piccolo, righe serrate */
  .psf-onecard .psf-consents-radio { display: flex; flex-direction: column; gap: .5rem; }
  .psf-onecard .psf-consent-block  { margin: 0; }
  .psf-onecard .psf-consent-head {
    margin:0; font-size: .72rem; font-weight: 700;
    letter-spacing: .03em; opacity: .9;
  }
  .psf-onecard .psf-consent-desc {
    margin: .12rem 0 0; font-size: .72rem; line-height: 1.3; opacity: .8;
  }
  .psf-onecard .psf-consent-radios {
    display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .28rem;
  }
  .psf-onecard .psf-consent-opt {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: 0; font-size: .8rem; line-height: 1.2; cursor: pointer;
  }
  .psf-onecard .psf-consent-opt input[type="radio"] {
    width: .95rem; height: .95rem; margin: 0; flex: 0 0 auto;
    accent-color: var(--color-accent, #26C6DA); cursor: pointer;
  }
  .psf-onecard .psf-consent-strong { font-weight: 600; color:var(--psf-white)}
  /* Colori di default (card chiara). Su card navy li sovrascrive l'add-on .phero */
  .psf-onecard .psf-consents-radio      { color: var(--psf-text, #1a2840); }
  .psf-onecard .psf-consents-radio a    { color: var(--psf-blue-mid, #1e6db5); text-decoration: underline; }
  .psf-onecard .psf-consent-desc em     { font-style: normal; }

  /* Piede: informativa a sx, pulsante a dx (full-width su mobile) */
  .psf-onecard .psf-onecard-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
  }
  .psf-onecard .psf-legal-trigger { font-size: .75rem; }
  @media (max-width: 575.98px) {
    .psf-onecard .psf-onecard-foot { flex-direction: column-reverse; align-items: stretch; }
    .psf-onecard .psf-btn-submit   { width: 100%; }
  }

/* === Recensioni a scorrimento (rec-) === */
.rec-marquee{
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.rec-track{
  display:flex;
  width:max-content;
  padding:1rem 0;
  animation:rec-scroll 45s linear infinite;
}
.rec-marquee:hover .rec-track{ animation-play-state:paused; }

.rec-item{
  flex:0 0 320px;
  max-width:320px;
  margin-right:1.5rem;   /* lo spazio ora è "dentro" ogni card, non un gap del track */
  text-decoration:none;
  color:inherit;
}

.rec-stars{ display:flex; gap:2px; }
.rec-stars span{
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  background:#fcaf05;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 8.9H23l-7.5 5.4 2.9 8.9L12 20l-8.4 5.2 2.9-8.9L1 9.9h8.1z'/></svg>") center/16px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 8.9H23l-7.5 5.4 2.9 8.9L12 20l-8.4 5.2 2.9-8.9L1 9.9h8.1z'/></svg>") center/16px no-repeat;
}

@keyframes rec-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .rec-track{ animation:none; }
  .rec-marquee{ overflow-x:auto; }
}

@media (max-width: 991.98px) {
  .phero-form {
    margin-top: -24px;     /* alza questo valore (più negativo = sale di più) */
    position: relative;
    z-index: 2;
  }
}
/* ════════════════════════════════════════════════════════════════════
   HERO FORM · RIPROPORZIONAMENTO DESKTOP (13"–15"+ e tablet ≥992px)
   ─── VERSIONE CORRETTA (v2) ──────────────────────────────────────────
   • Scope: SOLO il form della hero (.phero-form) e SOLO da ≥992px.
     → Il layout mobile/tablet (≤991.98px) resta IDENTICO. Non si tocca.
   • Cosa cambia rispetto alla v1:
       - POSIZIONE: ripristinata la CENTRATURA sulla fascia
         (top:50% + translateY(-50%)). La v1 la ancorava in alto, ma il
         riferimento è la colonna (collassata al centro): senza il
         translateY la card scendeva troppo. Ora torna centrata e UGUALE
         su tutti i dispositivi.
       - Resta TUTTO il ridimensionamento fluido (rem + clamp): è questo
         che rende il form abbastanza compatto da non toccare la navbar.
   • Solo AGGIUNTE/override: vincono per cascata (più specifiche + in fondo).
     Nessuna classe pp-/funzionale toccata. id/name invariati.

   ▸ Sostituire la v1 con questo blocco (in fondo a style.css).
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {

  /* ── 1 · POSIZIONE: centrata sulla fascia (come da design), larghezza
     ridotta e fluida 340 → 420px. La centratura tiene la card SEMPRE a
     metà fascia, identica su 13"/14"/tablet/desktop; il form compatto
     evita la sovrapposizione con la navbar. ─────────────────────────── */
  .phero .phero-form {
    top: 50%;
    right: 0;
    transform: translateY(-50%);              /* ← ripristina la centratura */
    width: clamp(21.25rem, 31vw, 26.25rem);   /* 340 → 420px */
  }

  /* ── 2 · CARD: padding interno ridotto e fluido ─────────────────────── */
  .phero-form .hl-formskin .psf-body {
    padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
  }
  .phero-form .hl-formskin .psf-card { border-radius: clamp(1rem, 1.4vw, 1.25rem); }

  /* ── 3 · HEADER: titolo e sottotitolo proporzionati ─────────────────── */
  .phero-form .hl-formskin .psf-onecard-header { margin-bottom: clamp(0.6rem, 1vw, 0.9rem); }
  .phero-form .hl-formskin .psf-panel-title {
    font-size: clamp(1.05rem, 1.3vw, 1.3rem) !important;
    line-height: 1.2 !important;
  }
  .phero-form .hl-formskin .psf-panel-sub {
    font-size: clamp(0.78rem, 0.9vw, 0.85rem) !important;
    margin-bottom: 0 !important;
  }

  /* ── 4 · GRIGLIA CAMPI: gutter e padding dei gruppi serrati e da un punto solo ── */
  .phero-form .psf-onecard .row { --bs-gutter-x: 0.6rem; --bs-gutter-y: 0.55rem; }
  .phero-form .psf-onecard .psf-field-group { padding: 0; }

  /* ── 5 · INPUT / SELECT: altezza, font e padding in rem + clamp ───────── */
  .phero-form .hl-formskin .psf-input,
  .phero-form .hl-formskin .psf-select,
  .phero-form .hl-formskin .psf-input-amount,
  .phero-form .hl-formskin #psf-bisogno-select {
    height: clamp(2.5rem, 2.8vw, 2.75rem);   /* 40 → 44px */
    font-size: clamp(0.9rem, 0.95vw, 1rem);
    padding: 0.5rem 0.85rem;
    border-radius: clamp(0.55rem, 0.8vw, 0.75rem);
  }
  /* L'importo allinea l'altezza agli altri ma resta evidenziato. */
  .phero-form .hl-formskin .psf-onecard .psf-input-amount {
    height: clamp(2.5rem, 2.8vw, 2.75rem);
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    padding-left: 1rem;
  }
  .phero-form .hl-formskin .psf-amount-input-wrap { height: clamp(2.5rem, 2.8vw, 2.75rem); }
  .phero-form .hl-formskin .psf-currency-symbol { font-size: 1.1rem; left: 0.85rem; }
  .phero-form .hl-formskin .psf-select { padding-right: 2.2rem; }
  .phero-form .hl-formskin .psf-select-arrow { right: 0.85rem; font-size: 0.72rem; }

  /* ── 6 · CONSENSI: testo e ritmi compatti ───────────────────────────── */
  .phero-form .hl-formskin .psf-consents-radio {
    margin-top: clamp(0.6rem, 1.2vw, 1rem) !important;   /* batte mt-3 (!important) */
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
  }
  .phero-form .hl-formskin .psf-onecard .psf-consent-head {
    font-size: clamp(0.64rem, 0.72vw, 0.7rem);
    margin-bottom: -0.6rem;
  }
  .phero-form .hl-formskin .psf-onecard .psf-consent-desc {
    font-size: clamp(0.58rem, 0.66vw, 0.64rem);
    line-height: 1.32;
  }
  .phero-form .hl-formskin .psf-consent-opt {
    font-size: clamp(0.72rem, 0.85vw, 0.8rem);
    gap: 0.4rem;
  }
  .phero-form .hl-formskin .psf-consent-opt input[type="radio"] {
    width: 0.9rem; height: 0.9rem;
  }
  .phero-form .hl-formskin .psf-consent-radios { gap: 0.25rem 0.9rem; margin-top: 0.25rem; }
  .phero-form .hl-formskin .psf-consent-strong { font-size: clamp(0.74rem, 0.88vw, 0.82rem); }

  /* ── 7 · SUBMIT: piede compatto, pulsante proporzionato ─────────────── */
  .phero-form .hl-formskin .psf-onecard-foot {
    margin-top: clamp(0.8rem, 1.4vw, 1.1rem) !important;   /* batte mt-3 (!important) */
  }
  .phero-form .hl-formskin .psf-onecard-foot .btn {
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
  }
}

/* Più distacco hero ↔ header su laptop/desktop (≥992px) 
@media (min-width: 992px){
  .hero-v2.phero{
    margin-top: clamp(1rem, 12vh, 1.5rem) !important; 
  }
}
*/
/* ════════════════════════════════════════════════════════════════════
   HERO · FORM · NAVBAR — BLOCCO UNIFICATO  (riproporzionamento + fix 14/15")
   ▸ INCOLLARE IN FONDO a style.css. È l'UNICO blocco da aggiungere:
     sostituisce sia il vecchio "riproporzionamento-form-hero" sia il
     "fix-14-15-pollici". Nessuna classe ripetuta inutilmente.
   ▸ Mobile (≤991.98px) NON toccato.

   COME È ORGANIZZATO (4 fasce che NON si sovrappongono):
     1) ≥992px ........ posizione del form + proprietà INVARIANTI (1 sola volta)
     2) ≥1536px ....... taglia "COME PRIMA" (form più grande, sporge sotto = overlap)
     3) ≤1535px ....... taglia COMPATTA 13/14/15" + altezza hero con respiro
     4) 1200–1535px ... navbar compatta (logo + voci) per non tagliare "Contattaci"

   ⚙ UNICO NUMERO DA TARARE: il confine "1535.98 / 1536" (vedi fasce 2/3/4).
     - Logo ancora piccolo sullo schermo grande → il tuo grande è <1536:
       abbassa il confine (es. 1439.98 / 1440) in tutte e tre le fasce.
     - Menu in overflow sul 14" → alza il confine.
   ════════════════════════════════════════════════════════════════════ */


/* ── 1 · BASE COMUNE (≥992px) ─────────────────────────────────────────
   Posizione (form centrato sulla fascia) + tutto ciò che resta UGUALE
   in entrambe le taglie. Dichiarato una sola volta.                     */
@media (min-width: 992px){

  /* Form centrato sulla fascia (la posizione assoluta arriva già da .phero-form) */
  .phero .phero-form{ top: 50%; right: 0; transform: translateY(-50%); }

  /* Invarianti del form */
  .phero-form .hl-formskin .psf-card{ border-radius: clamp(1rem, 1.4vw, 1.25rem); }
  .phero-form .hl-formskin .psf-panel-title{ line-height: 1.2 !important; }
  .phero-form .hl-formskin .psf-panel-sub{ margin-bottom: 0 !important; }

  .phero-form .psf-onecard .row{ --bs-gutter-x: 0.6rem; }
  .phero-form .psf-onecard .psf-field-group{ padding: 0; }

  .phero-form .hl-formskin .psf-input,
  .phero-form .hl-formskin .psf-select,
  .phero-form .hl-formskin .psf-input-amount,
  .phero-form .hl-formskin #psf-bisogno-select{ border-radius: clamp(0.55rem, 0.8vw, 0.75rem); }

  .phero-form .hl-formskin .psf-select{ padding-right: 2.2rem; }
  .phero-form .hl-formskin .psf-select-arrow{ right: 0.85rem; font-size: 0.72rem; }

  .phero-form .hl-formskin .psf-consents-radio{ gap: clamp(0.4rem, 0.8vw, 0.6rem); }
  .phero-form .hl-formskin .psf-onecard .psf-consent-head{ margin-bottom: -0.6rem; }
  .phero-form .hl-formskin .psf-onecard .psf-consent-desc{ line-height: 1.32; }
  .phero-form .hl-formskin .psf-consent-opt{ gap: 0.4rem; }
  .phero-form .hl-formskin .psf-consent-opt input[type="radio"]{ width: 0.9rem; height: 0.9rem; }
  .phero-form .hl-formskin .psf-consent-radios{ gap: 0.25rem 0.9rem; margin-top: 0.25rem; }
  .phero-form .hl-formskin .psf-consent-strong{ font-size: clamp(0.74rem, 0.88vw, 0.82rem); }

  .phero-form .hl-formskin .psf-onecard-foot .btn{ border-radius: 999px; }
}


/* ── 2 · ≥1536px · TAGLIA "COME PRIMA" (con effetto sovrapposizione) ──
   Nessuna min-height qui: la fascia resta alta quanto la colonna sx, il
   form (più alto) sporge sotto. Logo/menu restano l'originale (fascia 4
   non si applica).                                                       */
@media (min-width: 1536px){

  .phero .phero-form{ width: clamp(26rem, 31vw, 36rem); }   /* 340 → 420px */

  .phero-form .hl-formskin .psf-body{
    padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
  }
  .phero-form .hl-formskin .psf-onecard-header{ margin-bottom: clamp(0.6rem, 1vw, 0.9rem); }
  .phero-form .hl-formskin .psf-panel-title{ font-size: clamp(1.05rem, 1.3vw, 1.3rem) !important; }
  .phero-form .hl-formskin .psf-panel-sub{ font-size: clamp(0.78rem, 0.9vw, 0.85rem) !important; }

  .phero-form .psf-onecard .row{ --bs-gutter-y: 0.55rem; }

  .phero-form .hl-formskin .psf-input,
  .phero-form .hl-formskin .psf-select,
  .phero-form .hl-formskin .psf-input-amount,
  .phero-form .hl-formskin #psf-bisogno-select{
    height: clamp(2.5rem, 2.8vw, 2.75rem);
    font-size: clamp(0.9rem, 0.95vw, 1rem);
    padding: 0.5rem 0.85rem;
  }
  .phero-form .hl-formskin .psf-onecard .psf-input-amount{ font-size: clamp(1rem, 1.1vw, 1.15rem); padding-left: 1rem; }
  .phero-form .hl-formskin .psf-amount-input-wrap{ height: clamp(2.5rem, 2.8vw, 2.75rem); }
  .phero-form .hl-formskin .psf-currency-symbol{ font-size: 1.1rem; left: 0.85rem; }

  .phero-form .hl-formskin .psf-consents-radio{ margin-top: clamp(0.6rem, 1.2vw, 1rem) !important; }
  .phero-form .hl-formskin .psf-onecard .psf-consent-head{ font-size: clamp(0.64rem, 0.72vw, 0.7rem); }
  .phero-form .hl-formskin .psf-onecard .psf-consent-desc{ font-size: clamp(0.58rem, 0.66vw, 0.64rem); }
  .phero-form .hl-formskin .psf-consent-opt{ font-size: clamp(0.72rem, 0.85vw, 0.8rem); }

  .phero-form .hl-formskin .psf-onecard-foot{ margin-top: clamp(0.8rem, 1.4vw, 1.1rem) !important; }
  .phero-form .hl-formskin .psf-onecard-foot .btn{ font-size: clamp(0.85rem, 0.95vw, 0.95rem); padding: 0.55rem 1.4rem; }
}


/* ── 3 · ≤1535px · TAGLIA COMPATTA (13"/14"/15") + altezza hero ──────
   Form più piccolo. La min-height tiene la fascia alta → form centrato
   con aria sopra/sotto e staccato dalla navbar (qui NON serve l'overlap). */
@media (min-width: 992px) and (max-width: 1535.98px){

  /* Hero con respiro (se avevi una min-height su .phero-row altrove, RIMUOVILA) */
  .phero .phero-row{ min-height: clamp(30rem, 54vh, 40rem); }   /* ~480–640px */

  .phero .phero-form{ width: clamp(32rem, 29vw, 36rem); }     /* 320 → 376px */

  .phero-form .hl-formskin .psf-body{
    padding: clamp(0.85rem, 1.4vw, 1.1rem) clamp(0.95rem, 1.6vw, 1.2rem);
  }
  .phero-form .hl-formskin .psf-onecard-header{ margin-bottom: clamp(0.45rem, 0.8vw, 0.7rem); }
  .phero-form .hl-formskin .psf-panel-title{ font-size: clamp(1rem, 1.05vw, 1.12rem) !important; }
  .phero-form .hl-formskin .psf-panel-sub{ font-size: clamp(0.72rem, 0.82vw, 0.78rem) !important; }

  .phero-form .psf-onecard .row{ --bs-gutter-y: 0.45rem; }

  .phero-form .hl-formskin .psf-input,
  .phero-form .hl-formskin .psf-select,
  .phero-form .hl-formskin .psf-input-amount,
  .phero-form .hl-formskin #psf-bisogno-select{
    height: clamp(2.25rem, 2.5vw, 2.5rem);
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    padding: 0.4rem 0.8rem;
  }
  .phero-form .hl-formskin .psf-onecard .psf-input-amount{ font-size: clamp(0.95rem, 1vw, 1.05rem); padding-left: 0.9rem; }
  .phero-form .hl-formskin .psf-amount-input-wrap{ height: clamp(2.25rem, 2.5vw, 2.5rem); }
  .phero-form .hl-formskin .psf-currency-symbol{ font-size: 1rem; left: 0.8rem; }

  .phero-form .hl-formskin .psf-consents-radio{ margin-top: clamp(0.5rem, 1vw, 0.8rem) !important; }
  .phero-form .hl-formskin .psf-onecard .psf-consent-head{ font-size: clamp(0.6rem, 0.7vw, 0.66rem); }
  .phero-form .hl-formskin .psf-onecard .psf-consent-desc{ font-size: clamp(0.55rem, 0.62vw, 0.6rem); }
  .phero-form .hl-formskin .psf-consent-opt{ font-size: clamp(0.68rem, 0.8vw, 0.76rem); }

  .phero-form .hl-formskin .psf-onecard-foot{ margin-top: clamp(0.6rem, 1.2vw, 0.9rem) !important; }
  .phero-form .hl-formskin .psf-onecard-foot .btn{ font-size: clamp(0.8rem, 0.9vw, 0.88rem); padding: 0.5rem 1.2rem; }
}


/* ── 4 · 1200–1535px · NAVBAR compatta ───────────────────────────────
   Da 1536px in su logo (300px) e menu tornano l'originale.              */
@media (min-width: 1200px) and (max-width: 1535.98px){
  #mainNavbar .navbar-brand svg{ width: clamp(240px, 22vw, 300px);}
  #mainNavbar .nav-link{
    font-size: clamp(0.78rem, 0.35rem + 0.55vw, 0.92rem);
    padding: 6px clamp(3px, 0.35vw, 7px);
  }
  #mainNavbar .navbar-nav{ gap: clamp(0.05rem, 0.3vw, 0.5rem) !important; }
  #mainNavbar .nav-link .bi-house-door-fill{ font-size: 1.15rem !important; }
  #mainNavbar .btn-sm{ padding: 0.4rem 0.8rem; font-size: 0.82rem; white-space: nowrap; }
}

  /* ── FIX STICKY ──────────────────────────────────────────
     html/body hanno overflow-x:hidden nel foglio globale: questo
     trasforma la pagina in un contenitore di scroll e disattiva
     position:sticky. overflow-x:clip taglia comunque l'eccesso
     orizzontale ma NON rompe lo sticky. */
  html, body { overflow-x: clip; }

  /* Riattiva i gutter solo su questa row (il .row globale li azzera) */
  .pp-article-row { --bs-gutter-x: 2.5rem; --bs-gutter-y: 2rem; }

  /* Form sticky + scroll interno SOLO quando è davvero la sidebar 1/3 (xxl+).
     Qui il cap d'altezza ha senso: colonna stretta, lo scroll resta interno. */
  @media (min-width: 1400px) {
    .pp-form-sticky {
      position: sticky;
      top: calc(var(--navbar-h, 68px) + 20px);
      /* limite d'altezza + scroll interno se il form è più alto del viewport */
      max-height: calc(100vh - var(--navbar-h, 68px) - 40px);
      overflow-y: auto;
    }
  }

  /* Sotto xxl il form passa in col-12 (impilato sotto al testo): niente cap
     legato a 100vh — così con schermo basso NON si crea l'overflow interno —
     e larghezza contenuta e centrata, così il form non occupa tutto il container. */
  @media (max-width: 1399.98px) {
    .pp-form-sticky {
      position: static;
      max-height: none;
      overflow: visible;
      max-width: 720px;
      margin-inline: auto;
    }
  }

  /* Lo scroll all'ancora del form non finisce sotto la navbar fissa */
  #pp-form-anchor { scroll-margin-top: calc(var(--navbar-h, 68px) + 16px); }
  html { scroll-behavior: smooth; }

  /* Card form: compatta e graziata per il poco spazio in colonna */
  .pp-form-sticky .psf-wrap { display: block; }
  .pp-form-sticky .psf-card { margin-bottom: 0; border: 1px solid var(--psf-border); box-shadow: var(--psf-shadow-md); }
  .pp-form-sticky .psf-body { padding: 18px 16px; }

  /* Distanza delle sezioni card dentro la colonna 2/3 */
  .seo-article .pp-requisiti-section,
  .seo-article .pp-final-section { margin-top: 2.5rem; }
  
 /* Mobile / tablet — barra in alto.
   1) la riga NON va mai a capo (logo + icone + hamburger su una riga)
   2) azzera i margini nascosti (m-3 sull'SVG + margin-right del brand)
      che rubavano ~48px e mandavano le icone fuori schermo
   3) tetto rigido = larghezza schermo meno lo spazio del cluster (~190px) */
@media (max-width: 1199.98px) {
  #mainNavbar .container-fluid { flex-wrap: nowrap !important; }
  #mainNavbar .navbar-brand { margin: 0 !important; min-width: 0; }
  #mainNavbar .navbar-brand svg {
    margin: 0 !important;                          /* annulla il m-3 sull'SVG */
    width: clamp(120px, 50vw, 230px) !important;   /* un filo più piccolo */
    max-width: calc(100vw - 190px) !important;     /* riserva SEMPRE spazio a icone+burger */
  }
}

/* === Premi e riconoscimenti (awd-) === */
.awd-img-wrap{
  height:130px;                       /* KNOB: altezza area logo premio */
  display:flex;
  align-items:center;
  justify-content:center;
}
.awd-img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
}
/* Solo loghi, sempre 4 colonne: card e area immagine si riducono con lo schermo */
@media (max-width: 991.98px){
  .awd-row{
    --bs-gutter-x:1rem;                 /* KNOB: distanza tra le card tablet */
    --bs-gutter-y:1rem;
  }
  .awd-card{ padding:.5rem !important; }
  .awd-img-wrap{ height:95px; }         /* KNOB: altezza logo tablet */
}
@media (max-width: 575.98px){
  .awd-row{
    --bs-gutter-x:.5rem;                /* KNOB: distanza tra le card mobile */
    --bs-gutter-y:.5rem;
  }
  .awd-card{
    padding:.3rem .25rem !important;
    border-radius:10px;
  }
  .awd-img-wrap{
    height:clamp(54px, 17vw, 78px);     /* KNOB: altezza logo mobile */
  }
}

/* === Recensioni a scorrimento (rec-) === */
.rec-marquee{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;      /* scroll fluido su iOS */
  scrollbar-width:none;                  /* nasconde scrollbar Firefox */
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.rec-marquee::-webkit-scrollbar{ display:none; } /* nasconde scrollbar WebKit */
.rec-marquee:active{ cursor:grabbing; }

.rec-track{
  display:flex;
  width:max-content;
  padding:1rem 0;
}

.rec-item{
  flex:0 0 320px;
  max-width:320px;
  margin-right:1.5rem;
  text-decoration:none;
  color:inherit;
}

.rec-stars{ display:flex; gap:2px; }
.rec-stars span{
  width:24px;height:24px;display:inline-flex;
  background:#fcaf05;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 8.9H23l-7.5 5.4 2.9 8.9L12 20l-8.4 5.2 2.9-8.9L1 9.9h8.1z'/></svg>") center/16px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 8.9H23l-7.5 5.4 2.9 8.9L12 20l-8.4 5.2 2.9-8.9L1 9.9h8.1z'/></svg>") center/16px no-repeat;
}

 /* ── Card più larga su desktop: meno "container", stessa gabbia su mobile ──
     Override scoped: se la larghezza non basta o eccede, agire solo su questi
     due valori senza toccare il CSS globale di .fbc-form-card. */
  #fbc-app .fbc-form-page { max-width: none; }
  #fbc-app .fbc-form-card { width: 100%; max-width: 820px; margin-inline: auto; }
  @media (min-width: 992px) {
    #fbc-app .fbc-form-card { padding-left: 40px; padding-right: 40px; }
    /* Nome+Cognome e Email+Telefono affiancati: la larghezza in più serve a questo */
    #fbc-app .fbc-form-row { display: flex; gap: 18px; }
    #fbc-app .fbc-form-row > .fbc-form-group { flex: 1 1 0; min-width: 0; }
  }

  /* Messaggio d'errore sotto il campo, coerente con il rosso già usato dal JS */
  #fbc-app .fbc-form-err {
    display: block;
    min-height: 15px;
    margin-top: 4px;
    font-size: .75rem;
    font-weight: 600;
    color: #EF4444;
  }

  /* ── Consensi privacy: stessi testi e stessa resa degli altri form ── */
  #fbc-app .fbc-privacy        { margin: 18px 0 20px; }
  #fbc-app .fbc-privacy-group  { margin-bottom: 6px; }
  #fbc-app .fbc-privacy-text   { font-size: .75rem; line-height: 1.4; margin: 0; color: #4a607a; }
  #fbc-app .fbc-privacy-text a { color: inherit; }
  #fbc-app .fbc-priv-radios    { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 3px 0; }
  #fbc-app .fbc-priv-radios label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .76rem; font-weight: 600; margin: 0; cursor: pointer;
    padding: 0; border: none; background: none;
  }
  #fbc-app .fbc-priv-radios input[type="radio"] {
    -webkit-appearance: auto; appearance: auto;
    display: inline-block; opacity: 1; position: static; pointer-events: auto;
    width: 15px; height: 15px; margin: 0; flex: 0 0 auto;
    accent-color: #002E5D;
  }


/* ═══════════════════════════════════════════════════════════════
   CARD PRODOTTI — 4 colonne anche su mobile  (.psf-prodcards)
   A capo controllato via <br class="d-lg-none"> nei titoli:
   MAI sillabazione automatica, si spezza solo tra le parole.
   ═══════════════════════════════════════════════════════════════ */

.psf-prodcards .psf-prodcard-cta .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  width:40px;              /* KNOB: dimensione pulsante desktop */
  height:40px;
}

/* ── Tablet e mobile (< 992px): 4 colonne compatte, contenuto centrato ── */
@media (max-width: 991.98px){
  .psf-prodcards .psf-prodcard .card-body{
    padding:.85rem .5rem .5rem;
    text-align:center;
  }
  .psf-prodcards .psf-prodcard-icon{
    font-size:1.5rem;                          /* KNOB: icona tablet */
    margin-bottom:.35rem;
  }
  .psf-prodcards .psf-prodcard-title{
    font-size:clamp(.72rem, 1.5vw, .95rem);    /* KNOB: titolo tablet */
    line-height:1.25;
    margin-bottom:0;
    min-height:2.5em;        /* 2 righe fisse: tutti i titoli hanno la stessa altezza */
    hyphens:none;            /* niente "pers-onali": si va a capo solo tra parole */
    -webkit-hyphens:none;
    overflow-wrap:normal;
    word-break:keep-all;
  }
  .psf-prodcards .psf-prodcard-cta{
    justify-content:center !important;
    padding-bottom:.65rem;
  }
  .psf-prodcards .psf-prodcard-cta .btn{
    width:32px;                                /* KNOB: pulsante tablet */
    height:32px;
    font-size:.85rem;
  }
}

/* ── Smartphone stretti (< 576px): tutto ultra-compatto ── */
@media (max-width: 575.98px){
  .psf-prodcards{
    --bs-gutter-x:.5rem;                       /* KNOB: spazio tra card */
    --bs-gutter-y:.5rem;
  }
  .psf-prodcards .psf-prodcard{
    padding:0 !important;                      /* annulla il p-2 della card */
    border-width:1px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.10);
    transform:none;
  }
  .psf-prodcards .psf-prodcard .card-body{
    padding:.6rem .2rem .35rem;
  }
  .psf-prodcards .psf-prodcard-icon{
    font-size:clamp(1.05rem, 5.5vw, 1.35rem);  /* KNOB: icona mobile */
    margin-bottom:.25rem;
  }
  .psf-prodcards .psf-prodcard-title{
    /* dimensionato perché "Finanziamenti" (parola più lunga) entri
       su UNA riga anche a 320px senza spezzarsi */
    font-size:clamp(.52rem, 2.6vw, .78rem);    /* KNOB: titolo mobile */
    line-height:1.2;
    letter-spacing:-.015em;
    min-height:2.4em;        /* 2 righe fisse anche qui */
  }
  .psf-prodcards .psf-prodcard-cta{
    padding-bottom:.5rem;
  }
  .psf-prodcards .psf-prodcard-cta .btn{
    width:26px;                                /* KNOB: pulsante mobile */
    height:26px;
    font-size:.7rem;
  }
}