:root {
     --inkmenu: #fff;
    --ink: #0b1020;
    --muted: #475569;
    --bg: #ffffff;
    --soft: #f8fafc;
    --line: #e5e7eb;
    --cta: #0b1020;
    --ok: #16a34a;
    --warn: #f59e0b
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color: var(--ink);
    background: var(--bg)
}
.preheader {
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content: flex-end;
    max-width: 1600px;
    margin:auto
}
 
.linkutili {margin:0 20px;height:auto;display: flex;}
.linkutili a {border-left:1px solid #ddd;transition:all 0.5s linear;color:#0f172a;text-decoration:none;padding: 10px 15px;display: flex;margin: auto;justify-content: center;align-items: flex-start;align-content: center;}
.linkutili a:hover { background:#0f172a; color:#fff; }
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    max-width: 1580px;
}
.hero { max-width:initial !important}
/* MOBILE ONLY */
@media (max-width: 992px) {
.hero { margin:30px 0 }
    .grid-3 { margin: 0 15px}
    .hero>h1 {  font-size:1.4em !important; text-align:center; margin:20px 0 !important }
    .row h1 { padding: 0 16px; font-size:1.4em !important}
     .row>div:first-child div { padding: 0 16px; }
    .muted { padding: 0 16px;}
    header.header-mobile {
        background: #fff;
        padding: 10px 16px;
        border-bottom: 1px solid #eee;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
      display:block !important
    }

    .mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-logo img {
        height: 38px;
    }

    /* HAMBURGER */
    .hamburger {
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        padding: 4px;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #000;
        border-radius: 3px;
        transition: .3s;
    }

    /* MENU MOBILE */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden */
        width: 100%;
        height: 100vh;
        background: #ffffff;
        box-shadow: -2px 0 8px rgba(0,0,0,0.15);
        transition: right .3s ease;
        z-index: 9998;
        padding-top: 70px;
        display:block !important
    }

    .mobile-menu.open {
        right: 0;
    }
.mobile-area {
      justify-content: center !important;
    gap:10px;
    background:rgb(48, 94, 178) !important;
    color:#fff !important;
}
    .mobile-menu-inner a {
        display: flex;
        padding: 14px 20px;
        font-size: 17px;
        color: #000;
        border-bottom: 1px solid #f1f1f1;
        text-decoration: none;
        align-content: center;
        align-items: center;
        font-weight:600;
        justify-content: flex-start;
    }

    .mobile-menu-inner a:hover {
        background: #f7f7f7;
    }

    .mobile-area {
        font-weight: bold;
        background: #f4f4f4;
    }
}

/* HIDE DESKTOP HEADER ON MOBILE */
@media (max-width: 992px) {
    header:not(.header-mobile),
    .menuportal,
    .topbar {
        display: none !important;
    }
}
  header.header-mobile,.mobile-menu { display:none }
.header-desktop {
  display:block
}
header {
    position: sticky;
    top: 0;
    background: rgb(232 233 239 / 96%);
    backdrop-filter: saturate(180%) blur(8px);
    /* border-bottom: 1px solid var(--line); */
    z-index: 10
}
.area-riservata {transition:all 0.3s linear;width:100%;background:rgb(48, 94, 178);color:#fff;font-weight:bold;text-decoration:none;height: 100%;display: flex;position: relative;align-content: flex-start;align-items: center;padding: 10px 20px;flex-direction: row;margin: auto;justify-content: center;}
/* Link area riservata */
 
.area-riservata:hover {
    border-top:2px solid #d1750a;
  background: #e9ecef;
  color: #0a0f1a;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Replica di .fs-5 e .align-middle sull’icona */
.area-riservata i {
  font-size: 1.25rem;                   /* fs-5 */
  vertical-align: middle;               /* align-middle */
  margin-inline-end: 0;                 /* me-0 (di default) */
}

/* Replica di .me-lg-2: margine a destra dell’icona >= 992px */
@media (min-width: 992px) {
  .area-riservata i {
    margin-inline-end: .5rem;           /* ~ .me-2 */
  }
}

/* (Opzionale) nascondi la label su schermi piccoli, mostra da lg in su */
.area-riservata span {
  text-align: center;
  font-size:20px;
  width: 100%;
   white-space: nowrap; 
  align-content: center;
}
@media (min-width: 992px) {
  .area-riservata span {
    display: inline;
  }
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
}
.menuportal {
    display: block;
    justify-content: space-between;
    padding: 0px;
    background:#0f172a;
    width: 100%;
}
.centerm  {
    display: flex;
    padding: 0px;
    background:#0f172a;
    margin:0 auto;
    max-width:1580px;
    justify-content: space-between;
}
.brand,.search_element {
    display: flex;
    align-items: center;
    gap: 10px
}
#search-f24 { border:none; background:#0f172a; padding:0 30px; }
#search-element-f24:focus {  border:1px solid #e68d0b; outline:none  }
#search-element-f24 {background:#fff;padding:0 15px;width:300px;height: 44px;line-height:40px;border:1px solid #ccc;}
.search-input form {/* background:#fff; *//* border:1px solid #ccc; */display:flex;flex-direction:row}
.brand img {
    /* width: 32px; */
    height: 80px;
    border-radius: 8px
}

.nav {
    display: flex;
    
    flex-wrap: wrap;
    margin: 0 15px 0 0;
}

.nav a {
    color: var(--inkmenu);
    text-decoration: none;
    font-size: 18px;
    display:flex; margin:auto 0;
    padding:20px 20px;
    transition:all 0.3s linear;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent
}

 
.nav a:hover { border-top:2px solid #ea910b; background:#fff; color:#ea910b }
.hero h1 {
    font-size: 36px;
    line-height: 1.1;
    margin: 0 0 10px
}

.muted {
    color: var(--muted)
}

.btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none
}

.btn-primary {
    background: var(--cta);
    color: #fff
}

.btn-ghost {
    border: 1px solid var(--line);
    color: var(--ink)
}

.row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin:0 auto;
    max-width: 1580px;
}

@media(min-width: 920px) {
    .row {
        grid-template-columns:1fr 1fr
    }
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

@media(min-width: 920px) {
    .grid-3 {
        grid-template-columns:repeat(3,1fr)
    }
}

.card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 16px
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.kpi .label {
    font-size: 12px;
    color: var(--muted)
}

.kpi .value {
    font-weight: 800;
    font-size: 24px
}

.pill {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    margin-right: 6px;
    margin-top: 6px
}

section {
    scroll-margin-top: 80px
}

blockquote {
    border-left: 4px solid var(--line);
    padding-left: 12px;
    color: var(--muted)
}

table {
    width: 100%;
    border-collapse: collapse
}

th,td {
    border: 1px solid var(--line);
    padding: 8px;
    text-align: left
}
.footer {
  background-color: #2b3439;
  color: #cfeef0;
  font-family: "Segoe UI", Roboto, sans-serif;
  padding: 3rem 2rem 1.5rem;
}

/* Layout superiore */
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  border-bottom: 1px solid #3e4a50;
  padding-bottom: 2rem;
  margin-bottom: 1rem;
  max-width:1580px;
  margin:20px auto
}

/* Titoli */
.footer-column h3 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: .8rem;
  font-weight: 600;
  border-bottom: 1px solid #3e4a50;
  padding-bottom: .4rem;
}

/* Link */
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-column ul li {
  margin-bottom: .5rem;
}
.footer-column a {
  color: #54d0e0;
  text-decoration: none;
  transition: color .2s;
}
.footer-column a:hover {
  color: #87f2ff;
}

/* Social */
.social-icons {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.social-icons a {
  background: #54d0e0;
  color: #2b3439;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}
.social-icons a:hover {
  background: #87f2ff;
  transform: scale(1.1);
}

/* Parte inferiore */
.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  border-top: 1px solid #3e4a50;
  padding-top: 1rem;
  text-align: center;
  font-size: .9rem;
  color: #d0d0d0;
    max-width:1580px;
  margin:20px auto
}

.footer-bottom .footer-links a {
  color: #54d0e0;
  margin: 0 .5rem;
  text-decoration: none;
}
.footer-bottom .footer-links a:hover {
  text-decoration: underline;
}

/* Responsive: allinea orizzontalmente su schermi larghi */
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    text-align: left;
  }
}

.badge {
    display: inline-block;
    background: var(--soft);
    border: 1px solid var(--line);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-right: 6px
}
  .footer-legal {
    background: rgba(255, 210, 77, 0.1);
    border: 1px solid rgba(255, 210, 77, 0.4);
    border-radius: 8px;
    padding: 15px;
    margin: 0 auto 30px;
    max-width: 1100px;
    color: #ffd24d;
    font-size: 14px;
    line-height: 1.5;
  }
.trust {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px
}
 .consent-box {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px 16px;
    color: #e8ecf1;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
  }

  .checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }

  .checkbox-wrapper input[type="checkbox"] {
    position: relative;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    cursor: pointer;
    accent-color: #ffd24d; /* colore giallo F24Pilot */
  }

  .consent-text {
    flex: 1;
    font-size: 14px;
    color: #dce2ea;
  }

  .consent-text strong {
    color: #fff;
  }

  .legal-note {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #ffd24d;
  }
.user-info {display:flex;flex-direction: column;gap: 10px;}
.user-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: "Segoe UI", Roboto, sans-serif;
  max-width: 360px;
}
.user-info p {
  margin: 0;
  line-height: 1.3;
  font-size: 16px;
  color: #1a1a1a;
}
.user-info strong {font-weight: 700;color: #000;text-transform: uppercase;}
.cf {
  display: flex;
  color: #2a2b32;
  font-size: 18px !important;
  font-weight: bold;
  gap: 20px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.btn-logout {
  background: #0065e3;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.btn-logout:hover { background: #004bb3; }
  .consent-box:focus-within {
    border-color: #ffd24d;
  }
.small {
    font-size: 12px
}