:root {
    --blu:#0b2f6b;
    --blu2:#071f49;
    --verde:#009845;
    --rosso:#e30613;
    --soft:#eef4fb;
    --line:#d7e3f3;
    --txt:#092657;
    --muted:#607089;
    --shadow:0 18px 45px rgba(11,47,107,.13)
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    font-family:Montserrat,Arial,sans-serif;
    color:var(--txt);
    background:linear-gradient(#fff,#f5f9ff)
}
button,input,select,textarea {
    font-family:inherit
}
button {
    cursor:pointer
}
.wrap {
    width:min(1180px,92vw);
    margin:auto
}
.screen {
    display:none
}
.screen.active {
    display:block
}
.top {
    height:92px;
    background:white;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    position:sticky;
    top:0;
    z-index:20
}
.topin {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.logo {
    height:76px;
    max-width:400px;
    object-fit:contain;
    display:block
}
.homebtn {
    border:1px solid var(--line);
    background:#fff;
    color:var(--blu);
    border-radius:999px;
    padding:11px 18px;
    font-weight:900
}
.page {
    padding:28px 0 58px
}
.home {
    padding:0px 0 20px;
    width:100%;
}
.hero {
    background:linear-gradient(135deg,#fff,#f8fbff);
    border:1px solid var(--line);
    /*border-radius:34px;*/
    box-shadow:var(--shadow);
    padding:38px 44px;
    text-align:center;
    position:relative;
    overflow:hidden
}
.hero:before {
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:250px;
    height:250px;
    border-radius:50%;
    border:34px solid rgba(11,47,107,.07)
}
.hero-logo {
    height:124px;
    max-width:700px;
    width:92%;
    object-fit:contain;
    display:block;
    margin:0 auto 22px
}

.herohome {
    background:linear-gradient(135deg,#fff,#f8fbff);
    border:1px solid var(--line);
    /*border-radius:34px;*/
    box-shadow:var(--shadow);
    padding:18px 20px;
    text-align:center;
    position:relative;
    overflow:hidden
}
.herohome:before {
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:150px;
    height:150px;
    border-radius:50%;
    border:34px solid rgba(11,47,107,.07)
}
.hero-logohome {
    height:124px;
    max-width:700px;
    width:92%;
    object-fit:contain;
    display:block;
    margin:0 auto 22px
}
.titpagina h1 {
    margin:0;
    color:var(--blu);
    font-size:clamp(24px,5vw,40px);
    line-height:1.06;
    letter-spacing:-1.2px;
    font-weight:900
}
.titpagina h1:after {
    content:"";
    display:block;
    width:84px;
    height:4px;
    background:var(--verde);
    margin:20px auto 0;
    border-radius:4px
}
h11 {
    margin:0;
    color:var(--blu);
    font-size:clamp(34px,5vw,45px);
    line-height:1.06;
    letter-spacing:-1.2px;
    font-weight:900
}
h11:after {
    content:"";
    display:block;
    width:84px;
    height:4px;
    background:var(--verde);
    margin:20px auto 0;
    border-radius:4px
}
h12 {
    margin:0;
    color:var(--blu);
    font-size:clamp(20px,5vw,30px);
    line-height:1.06;
    letter-spacing:-1.2px;
    font-weight:900
}
h12:after {
    content:"";
    display:block;
    width:34px;
    height:4px;
    background:var(--verde);
    margin:5px auto 0;
    border-radius:4px
}
.claim {
    margin:16px 0 0;
    color:var(--blu2);
    font-size:clamp(16px,2vw,23px);
    font-weight:900;
    text-transform:uppercase
}
.intro {
    max-width:760px;
    margin:20px auto 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.55
}
.actions {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin:32px auto 0;
    max-width:100%;
}

   .action {
    border:1px solid #aac1df;
    background:#fff;
    color:var(--blu);
    border-radius:20px;
    padding:24px 18px;
    text-align:left;
    min-height:152px;
    box-shadow:0 12px 28px rgba(11,47,107,.08);
    transition:.2s
}

   
   .action:hover {
    transform:translateY(-4px);
    box-shadow:0 22px 42px rgba(11,47,107,.16);
    border-color:var(--blu)
}
.action.primary {
    background:var(--blu);
    color:#fff
}


   .action strong {
    font-size:18px;
    line-height:1.15;
    display:block
}

   .action span:last-child {
    display:block;
    margin-top:9px;
    font-size:13px;
    line-height:1.35;
    opacity:.78
}

 .actionsmall {
    border:1px solid #aac1df;
    background:#fff;
    color:var(--blu);
    border-radius:20px;
    padding:10px;
    text-align:left;
    min-height:60px;
    max-height:60px;
    box-shadow:0 12px 28px rgba(11,47,107,.08);
    transition:.2s
}

   
   .actionsmall:hover {
    transform:translateY(-4px);
    box-shadow:0 22px 42px rgba(11,47,107,.16);
    border-color:var(--blu)
}
.actionsmall.primary {
    background:var(--blu);
    color:#fff
}

   .actionsmall strong {
    font-size:18px;
    display:block
}

   .actionsmall span:last-child {
    display:block;
    margin-top:5px;
    font-size:13px;
    opacity:.78
}
.icon {
    font-size:28px;
    display:block;
    margin-bottom:12px
}


   .back {
    border:0;
    background:transparent;
    color:var(--blu);
    font-weight:900;
    margin-bottom:16px
}
.head {
    display:flex;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px
}
.head h2 {
    margin:0;
    color:var(--blu);
    font-size:32px
}
.head p {
    margin:8px 0 0;
    color:var(--muted);
    line-height:1.5
}
.panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow)
}
.search {
    padding:22px;
    margin-bottom:22px
}
.searchgrid {
    display:grid;
    grid-template-columns:1.4fr .8fr .8fr auto;
    gap:12px
}
input,select,textarea {
    border:1px solid var(--li
ne);
    border-radius:14px;
    padding:14px 15px;
    outline:none;
    color:var(--txt);
    background:#fff
}
.btn {
    border:0;
    border-radius:14px;
    padding:14px 18px;
    font-weight:900;
    background:var(--blu);
    color:white
}
.btn.alt {
    background:#fff;
    color:var(--blu);
    border:1px solid var(--line)
}
.taxonomy {
    display:grid;
    grid-template-columns:310px 1fr;
    gap:22px
}
.side {
    padding:18px;
    height:max-content;
    position:sticky;
    top:112px
}
.side h3 {
    margin:0 0 14px;
    color:var(--blu)
}
.macro {
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--blu);
    border-radius:14px;
    padding:13px 14px;
    text-align:left;
    font-weight:900;
    margin-bottom:10px;
    display:flex;
    justify-content:space-between
}
.macro.active {
    background:var(--blu);
    color:white
}
.chips {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px
}
.chip {
    border:1px solid var(--line);
    background:#fff;
    color:var(--blu);
    border-radius:999px;
    padding:8px 11px;
    font-weight:800;
    font-size:12px
}
.chip.active {
    background:var(--verde);
    color:white
}
.reshead {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}
.reshead strong {
    color:var(--blu);
    font-size:18px
}
.reshead span {
    color:var(--muted);
    font-size:14px
}
.dealgrid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px
}

.deal {
        position:relative;
    
    border:1px solid var(--line);
    
    border-radius:18px;
    
    padding:18px;
    
    background:#fff;
    
    box-shadow:0 8px 22px rgba(11,47,107,.05);
    
    min-height:142px;
    
    overflow:hidden;
    
}

    .deal-logo {
    
    position:absolute;
    
    top:15px;
    
    right:15px;
    
    max-width:110px;
    
    max-height:75px;
    
    object-fit:contain;
    

    opacity:.18;
              /* molto leggero */
    transition:.25s;
    
    pointer-events:none;
      /* non interferisce col click */

}


.deal:hover .deal-logo {
    
    opacity:.45;
    

}

.deal h3 {
    margin:0;
    color:var(--blu);
    font-size:18px
}
.deal p {
    margin:10px 0 0;
    color:#43536c;
    font-size:14px;
    line-height:1.45
}
.tags {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:14px
}
.tag {
    background:var(--soft);
    color:var(--blu);
    border-radius:999px;
    padding:6px 9px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase
}
.empty {
    border:1px dashed #9fb6d4;
    background:#fbfdff;
    border-radius:18px;
    padding:22px;
    color:var(--muted)
}
.book {
    display:grid;
    grid-template-columns:250px 1fr;
    min-height:620px;
    overflow:hidden;
    background:linear-gradient(90deg,#eef4fb,#fff 48%,#f7fbff);
    position:relative
}
.book:before {
    content:"";
    position:absolute;
    top:26px;
    bottom:26px;
    left:250px;
    width:36px;
    background:linear-gradient(90deg,rgba(11,47,107,.22),rgba(11,47,107,.04),transparent);
    z-index:2
}
.index {
    background:linear-gradient(180deg,var(--blu),var(--blu2));
    padding:24px 18px;
    color:white;
    z-index:3
}
.index h3 {
    margin:0 0 18px;
    color:white;
    text-transform:uppercase;
    letter-spacing:.8px;
    font-size:14px
}
.index button {
    width:100%;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:white;
    text-align:left;
    padding:13px 12px;
    border-radius:12px;
    margin-bottom:9px;
    font-weight:800
}
.index button.active {
    background:#fff;
    color:var(--blu)
}
.bookpage {
    padding:38px 46px 34px 60px;
    background:linear-gradient(90deg,rgba(11,47,107,.06),transparent 5%,transparent 95%,rgba(11,47,107,.05)),repeating-linear-gradient(0deg,#fff 0,#fff 42px,#f7faff 43px);
    box-shadow:inset 18px 0 34px rgba(11,47,107,.08)
}
.bookpage h2 {
    margin:0 0 6px;
    color:var(--blu);
    font-size:30px;
    text-transform:uppercase
}
.booksub {
    margin:0 0 22px;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px
}
.bookitems {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px
}
.bookitem {
    border:1px solid rgba(11,47,107,.12);
    border-radius:14px;
    padding:14px;
    background:rgba(255,255,255,.94);
    font-weight:800;
    color:var(--blu);
    box-shadow:0 8px 18px rgba(11,47,107,.04)
}
.bookitem small {
    display:block;
    color:var(--muted);
    font-weight:700;
    margin-top:6px
}
.bookctrl {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:24px;
    border-top:1px solid var(--line);
    padding-top:18px
}
.formintro {
    padding:24px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
    align-items:center;
    margin-bottom:20px
}
.formintro h3 {
    margin:0;
    color:var(--blu);
    font-size:24px
}
.formintro p {
    margin:8px 0 0;
    color:var(--muted);
    line-height:1.5
}
.regbox {
    display:none;
    max-height:340px;
    overflow:auto;
    margin-top:16px;
    padding:20px;
    background:#f7fbff;
    border:1px solid var(--line);
    border-radius:18px;
    line-height:1.55
}
.regbox.open {
    display:block
}
.regbox h4 {
    color:var(--blu);
    margin:18px 0 6px
}
.timeline {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    margin:0 0 20px
}
.step {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:13px 10px;
    text-align:center;
    color:var(--blu);
    font-size:12px;
    font-weight:900
}
.step b {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    margin:0 auto 7px;
    border-radius:50%;
    background:var(--blu);
    color:#fff
}
.formcard {
    padding:24px
}
.sectitle {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--blu);
    margin:0 0 16px;
    font-size:19px
}
.sectitle span {
    background:var(--blu);
    color:#fff;
    border-radius:999px;
    padding:6px 10px;
    font-size:13px
}
.formgrid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}
.field {
    display:flex;
    flex-direction:column;
    gap:7px
}
.field.full {
    grid-column:1/-1
}
.field label {
    font-size:13px;
    color:var(--blu);
    font-weight:900
}
textarea {
    min-height:96px;
    resize:vertical
}
.checks {
    display:grid;
    gap:10px;
    margin:20px 0;
    color:#2f4059;
    line-height:1.45
}
.checks label {
    display:flex;
    gap:10px;
    align-items:flex-start
}
.tessera {
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:22px;
    align-items:stretch
}
.copy {
    padding:32px
}
.copy h2 {
    margin:0;
    color:var(--blu);
    font-size:34px;
    line-height:1.08
}
.copy p {
    margin:16px 0 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.55
}
.phone {
    margin-top:26px;
    background:var(--blu);
    color:#fff;
    border-radius:20px;
    padding:22px
}
.phone span {
    display:block;
    opacity:.82;
    font-weight:700
}
.phone strong {
    display:block;
    font-size:36px;
    margin-top:6px;
    letter-spacing:.5px
}
.cardprev {
    display:grid;
    place-items:center;
    padding:32px;
    background:linear-gradient(135deg,#f7fbff,#fff)
}
.digital {
    width:min(520px,100%);
    min-height:300px;
    border-radius:28px;
    background:linear-gradient(135deg,var(--blu),#004289);
    color:#fff;
    padding:28px;
    box-shadow:0 22px 50px rgba(11,47,107,.25);
    position:relative;
    overflow:hidden
}
.digital:before {
    content:"";
    position:absolute;
    right:-70px;
    top:-70px;
    width:190px;
    height:190px;
    border:24px solid rgba(255,255,255,.16);
    border-radius:50%
}
.cardlogo {
    height:60px;
    max-width:280px;
    object-fit:contain;
    filter:brightness(0) invert(1)
}
.cardrow {
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-end;
    margin-top:44px
}
.cardrow small {
    opacity:.8
}
.cardrow h3 {
    margin:8px 0 4px;
    font-size:24px
}
.qr {
    width:100px;
    height:100px;
    background:#fff;
    border-radius:12px;
    padding:8px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:5px;
    flex:0 0 auto
}
.qr span:nth-child(odd) {
    background:var(--blu)
}
.qr span:nth-child(even) {
    background:#d9e7f7
}
footer {
    background:var(--blu);
    color:#fff;
    padding:18px 0;
    margin-top:18px
}
footer .wrap {
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    font-size:14px
}
@media(max-width:980px) {
    .actions,.taxonomy,.book,.tessera {
        grid-template-columns:1fr
    }
    .searchgrid,.formgrid {
        grid-template-columns:1fr
    }
    .dealgrid,.bookitems {
        grid-template-columns:1fr
    }
    .timeline {
        grid-template-columns:repeat(2,1fr)
    }
    .side {
        position:static
    }
    .top {
        height:auto;
        padding:12px 0
    }
    .topin {
        display:block;
        text-align:center
    }
    .logo {
        margin:0 auto 10px
    }
    .hero {
        padding:30px 20px
    }
    
}

  .sublist {
    
      margin:0 0 12px 18px;
    
  
}

  
  .sublist button {
    
      display:block;
    
      text-align:left;
    
      border:1px solid gray;
    
      background:none;
    
      color:#5c6d86;
    
      padding:5px ;
    
      cursor:pointer;
    
      font-size:13px;
    
      font-weight:600;
    
      margin-bottom:3px;
    
  
}

  
  .sublist button:hover {
    
      color:var(--blu);
    
  
}

  
  .sublist button.active {
    
      color:var(--verde);
    
      font-weight:900;
    
  
}

  .hast {
    
  border:1px solid gray;
    
  border-radius:10px;
    
  
}

  
  .modal-conv {
    
      display:none;
    
      position:fixed;
    
      z-index:9999;
    
      left:0;
    
      top:0;
    
      width:100%;
    
      height:100%;
    
      background:rgba(0,0,0,.55);
    
      padding:30px;
    
  
}

  
  .modal-conv-box {
    
      background:#fff;
    
      max-width:760px;
    
      max-height:85vh;
    
      overflow:auto;
    
      margin:40px auto;
    
      border-radius:22px;
    
      padding:30px;
    
      position:relative;
    
      box-shadow:0 20px 50px rgba(0,0,0,.25);
    
  
}

  
  .modal-conv-close {
    
      position:absolute;
    
      right:18px;
    
      top:14px;
    
      border:0;
    
      background:none;
    
      font-size:34px;
    
      color:#0b2f6b;
    
      cursor:pointer;
    
  
}

  
  .modal-conv-box h2 {
    
      margin:0 40px 18px 0;
    
      color:#0b2f6b;
    
  
}

  
  .modal-conv-box p {
    
      line-height:1.55;
    
  
}

  
  .destinatari {
    
      display:flex;
    
      flex-wrap:wrap;
    
      gap:6px;
    
      margin-top:15px;
    
      margin-bottom:10px;
    
  
}

  
  .dest {
    
      background:#f2f6fb;
    
      border:1px solid #d6e3f2;
    
      color:var(--blu);
    
      padding:4px 10px;
    
      border-radius:999px;
    
      font-size:11px;
    
      font-weight:800;
    
  
}

  
  .dest.titolari {
    
      background:#e8f5e9;
    
      border-color:#b7dfbd;
    
      color:#1b5e20;
    
  
}

  
  .dest.familiari {
    
      background:#fff8e1;
    
      border-color:#f3de9b;
    
      color:#8d6e00;
    
  
}

  
  .dest.dipendenti {
    
      background:#e3f2fd;
    
      border-color:#b8d9f5;
    
      color:#0d47a1;
    
  
}

.destinatario-click {
    border:2px solid var(--blu);
    background:var(--blu);
    color:#fff;
    border-radius:12px;
    padding:9px 14px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:7px;
    box-shadow:0 6px 15px rgba(11,47,107,.22);
    transition:all .2s ease;
}

.destinatario-click:hover {
    transform:translateY(-2px);
    background:var(--verde);
    border-color:var(--verde);
    box-shadow:0 9px 20px rgba(0,152,69,.25);
}

.destinatario-click:before {
    content:"✉";
    font-size:15px;
}

.destinatario-static {
    border:2px solid #b7dfbd;
    background:#e8f5e9;
    color:#1b5e20;
    border-radius:12px;
    padding:9px 14px;
    font-size:13px;
    font-weight:900;
    display:inline-block;
}

/* Popup richiesta */

.modal-richiesta {
    display:none;
    position:fixed;
    z-index:10000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.60);
    padding:20px;
    overflow:auto;
}

.modal-richiesta.aperto {
    display:block;
}

.modal-richiesta-box {
    width:100%;
    max-width:650px;
    margin:35px auto;
    background:#fff;
    border-radius:22px;
    padding:30px;
    position:relative;
    box-shadow:0 22px 60px rgba(0,0,0,.30);
}

.modal-richiesta-close {
    position:absolute;
    right:18px;
    top:12px;
    border:0;
    background:transparent;
    color:var(--blu);
    font-size:34px;
    line-height:1;
    cursor:pointer;
}

.modal-richiesta-box h2 {
    margin:0 40px 14px 0;
    color:var(--blu);
    font-size:26px;
}

.modal-richiesta-intro {
    margin:0 0 22px;
    padding:15px;
    background:var(--soft);
    border-left:5px solid var(--blu);
    border-radius:10px;
    color:#43536c;
    line-height:1.55;
}

.modal-richiesta-convenzione {
    margin-bottom:18px;
    padding:12px 15px;
    border-radius:10px;
    background:#f7f9fc;
    color:var(--blu);
    font-weight:800;
}

.richiesta-field {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:15px;
}

.richiesta-field label {
    color:var(--blu);
    font-size:13px;
    font-weight:900;
}

.richiesta-field input {
    width:100%;
}

.btn-invia-richiesta {
    width:100%;
    margin-top:5px;
    padding:15px;
    font-size:15px;
}

.messaggio-richiesta-ok {
    max-width:1180px;
    margin:20px auto;
    padding:16px 20px;
    border:1px solid #9fd7af;
    border-radius:12px;
    background:#e8f5e9;
    color:#1b5e20;
    font-weight:800;
}

.messaggio-richiesta-errore {
    max-width:1180px;
    margin:20px auto;
    padding:16px 20px;
    border:1px solid #efb1b1;
    border-radius:12px;
    background:#fff1f1;
    color:#a50000;
    font-weight:800;
}

@media(max-width:600px) {

    .modal-richiesta {
        padding:10px;
    }

    .modal-richiesta-box {
        padding:25px 18px;
        margin:15px auto;
    }

    .destinatario-click,
    .destinatario-static {
        width:100%;
        justify-content:center;
        text-align:center;
    }
}