/* =========================================================
   stile1.css – VERSIONE DEFINITIVA SAFE (ERMES)
   - Desktop invariato
   - Menu 3 colonne legacy (.terzo / .terzoLeft)
   - HERO a 2 colonne (desktop) / 1 colonna (mobile): .two-cols
   - Dropdown accessibile (hover + focus-within)
   - Fix immagini legacy float + immagini con width HTML
   - Patch mobile unica (768px) “safe” per classi legacy
   ========================================================= */

/* RESET BASE (CONSERVATIVO) */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* BASE */
body{
  font-family:verdana, arial, sans-serif;
  color:#000f90;
  background:#ffffff;
}

/* WRAPPER + PAGE */
.wrapper{
  max-width:1050px;
  margin:0 auto;
  padding:0 12px;
}

.page{
  width:100%;
}

/* =========================================================
   TESTO UNIFICATO: <p> e <li>
   ========================================================= */
p,
li{
  font-family:verdana, arial, sans-serif;
  font-size:1em;
  line-height:1.6;
  letter-spacing:0;
  word-spacing:0;
  text-align:justify;
  color:#000f90;
}

/* paragrafi speciali */
p.center{
  text-align:center;
}

p.FINE_1{
  text-align:center;
  font-size:0.7em;
  font-weight:bold;
}

/* payoff (in HTML: class="payoff") */
.payoff{
  margin-top:6px;
}

/* =========================================================
   ELENCHI
   ========================================================= */
ul,
ol{
  margin:0 0 1.6em 0;
  padding-left:24px;
}

li{
  margin:0;
}

ul li:last-child,
ol li:last-child{
  margin-bottom:0;
}

li::marker{
  color:#000f90;
}

/* =========================================================
   TITOLI
   ========================================================= */
h1,h2,h3{
  text-align:center;
  font-family:verdana, arial, sans-serif;
}

h1{
  font-size:1.6em;
  font-weight:bold;
  color:#00ac4d;
}

h2{
  font-size:1.1em;
}

h3{
  font-size:1.1em;
  font-weight:bold;
  color:#00ac4d;
}

/* HR */
hr{
  border:0;
  height:5px;
  background:#00ac4d;
  width:100%;
}

/* LINK */
a{
  color:#00ac4d;
  text-decoration:none;
}
a:hover{
  color:#ff0000;
}

/* =========================================================
   ACCESSIBILITÀ
   ========================================================= */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* =========================================================
   IMMAGINI GENERICHE
   ========================================================= */
img{
  max-width:100%;
  height:auto;
  border:0;
}

/* =========================================================
   CENTER (legacy + immagini)
   ========================================================= */
.center{
  text-align:center;
}

.center img{
  display:block;
  margin:0 auto;
}

/* =========================================================
   ICONA MENU
   ========================================================= */
.menu-ico{
  display:block;
  margin:0 auto 12px auto;
  height:auto;
  width:auto;
  max-height:50px;   /* desktop: icone compatte */
  max-width:100%;
}

/* =========================================================
   HERO: 2 colonne desktop / 1 colonna mobile
   (usato dal tuo blocco <section class="two-cols">)
   ========================================================= */
/* HERO: allineamento verticale colonne */
.two-cols{
  display:flex;
  gap:24px;
  align-items:center;   /* ? CHIAVE: centra verticalmente le colonne */
}

   
.col-left{
  flex:0 0 300px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.col-left > *{
  width:100%;
  max-width:280px;
}

.col-right{
  flex:1;
  min-width:0;
}

/* =========================================================
   DROPDOWN MENU
   ========================================================= */
.dropdown2{
  position:relative;
  width:100%;
}

.dropbtn2{
  width:100%;
  padding:12px 14px;
  background:#EDFFFF;
  border:2px solid #00ac4d;
  border-radius:8px;
  color:#000f90;
  font-weight:bold;
  cursor:pointer;
}

.dropdown2-content{
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  width:100%;
  background:#ffffff;
  border:2px solid #00ac4d;
  border-radius:8px;
  z-index:9999;
}

.dropdown2-content a{
  display:block;
  padding:10px 12px;
  color:#000f90;
}

.dropdown2-content a:hover{
  background:#EDFFFF;
}

/* desktop: apre al passaggio del mouse */
.dropdown2:hover .dropdown2-content{
  display:block;
}

/* mobile/tastiera: apre quando bottone/link hanno focus */
.dropdown2:focus-within .dropdown2-content{
  display:block;
}

/* =========================================================
   BOTTONI
   ========================================================= */
a.button1,
a.button2{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 14px;
  border-radius:8px;
  font-weight:bold;
  margin-top:10px;
}

a.button1{
  background:#EDFFFF;
  border:2px solid #00ac4d;
  color:#000f90;
}

a.button2{
  background:#00ac4d;
  border:2px solid #00ac4d;
  color:#ffffff;
}

/* =========================================================
   IMMAGINI FLOAT (LEGACY)
   ========================================================= */
.Immagini_SX{
  float:left;
  margin:10px 20px 10px 0;
}
.Immagini_DX{
  float:right;
  margin:10px 0 10px 20px;
}
.Immagini_SX_M{
  float:left;
  margin:10px 40px 10px 0;
}
.Immagini_DX_M{
  float:right;
  margin:10px 0 10px 20px;
}

/* shrink-to-fit + limite */
.Immagini_DX_M,
.Immagini_DX,
.Immagini_SX_M,
.Immagini_SX{
  display:inline-block;
  max-width:50%;
}

/* Dentro al float: evita elementi a 100% che allargano il box */
.Immagini_DX_M p,
.Immagini_DX p,
.Immagini_SX_M p,
.Immagini_SX p{
  margin:0.4em 0 0 0;
  width:auto;
}

/* =========================================================
   BOX / CELLE
   ========================================================= */
.BOX{
  width:100%;
}

.bordo_cella{
  border:1px solid #00ac4d;
  border-radius:8px;
  padding:12px;
}

/* =========================================================
   COLONNE FOOTER/MENU (LEGACY)
   ========================================================= */
.terzo{
  float:left;
  width:31%;
  margin-left:2%;
}

.terzo:first-child{
  margin-left:0;
}

.terzoLeft{
  float:left;
  width:31%;
  margin-left:2%;
}

/* =========================================================
   RIPRISTINO COLONNE 50/50 (LEGACY .HALF_SX / .HALF_DX)
   ========================================================= */
.HALF_SX{
  float:left;
  width:48%;
}

.HALF_DX{
  float:right;
  width:48%;
  margin-bottom:1.6em;
}

/* Dopo HALF_DX la pagina torna sempre a piena larghezza */
.HALF_DX ~ *{
  clear:both;
}

/* =========================================================
   CLEAR FLOAT (in HTML: <div class="clear"></div>)
   ========================================================= */
.clear{
  clear:both;
}

/* =========================================================
   SPAZIO FISSO DOPO BLOCCO DATI AZIENDALI (BOX + FINE_1)
   ========================================================= */
.BOX > p.FINE_1{
  margin-bottom:3.2em;
}

/* =========================================================
   PATCH MOBILE SAFE UNIFICATA (768px)
   - stack colonne legacy (incluse classi “eventuali”)
   - HERO 2->1 colonna
   - fix immagini legacy float
   - fix immagini con width HTML
   ========================================================= */
@media (max-width:768px){

  /* HERO: da flex a colonna */
  .two-cols{
    display:block !important;
  }
  .col-left,
  .col-right{
    width:100% !important;
  }
  .col-right{
    margin-top:14px;
  }

  /* Colonne legacy -> stack (safe) */
  .terzo,
  .terzoLeft,
  .terzo_D,
  .dueterzi,
  .dueterzi_D,
  .HALF,
  .HALF_SX,
  .HALF_DX{
    float:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    display:block !important;
  }

  /* Spazio tra blocchi menu/colonne */
  .terzo,
  .terzoLeft,
  .terzo_D{
    margin-top:10px !important;
  }

  /* Tap area più comoda sulle icone menu */
  .terzo .center a,
  .terzoLeft .center a{
    display:inline-block;
    padding:8px;
    line-height:0;
  }

  /* Icone menu più grandi */
  .menu-ico{
    height:44px !important;
    width:auto !important;
    max-height:none !important;
  }

  /* FIX: elimina shrink-to-fit dei box immagini legacy */
  .Immagini_SX,
  .Immagini_SX_M,
  .Immagini_M_SX_M,
  .Immagini_DX,
  .Immagini_DX_M{
    float:none !important;
    display:block !important;
    max-width:100% !important;
    width:auto !important;
    margin:12px auto !important;
    text-align:center !important;
    clear:none !important;
  }

  /* Centra l’immagine interna */
  .Immagini_SX img,
  .Immagini_SX_M img,
  .Immagini_M_SX_M img,
  .Immagini_DX img,
  .Immagini_DX_M img{
    display:block;
    margin:0 auto;
  }

  /* Evita overflow orizzontale da immagini grandi con width HTML */
  img[width]{
    max-width:100% !important;
    height:auto !important;
  }

  /* Un po' di respiro nei box */
  .bordo_cella{
    padding:12px !important;
  }

  /* Cintura di sicurezza */
  html, body{
    overflow-x:hidden;
  }
}

/* =========================================================
   SPAZIATORI (se usati)
   ========================================================= */
.sp-14{ display:block; height:14px; }
.sp-28{ display:block; height:28px; }

/* HERO: icona colonna sinistra - dimensione equilibrata */
.col-left .menu-ico{
  height:auto !important;
  width:auto !important;
  max-height:48px !important;   /* ? dimensione consigliata */
  max-width:100% !important;
  object-fit:contain;
}