/* RESET & BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  background: #fbfbfb;
  font-family: Georgia, serif;
  color: #1a1a1a;
  letter-spacing: 0.15px;
  margin:7px;
  box-shadow: 0 0 20px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* LAYOUT GENERALE */
.sezione{padding:0rem 0;}


/* Box stile “oggetto speciale” */
.highlight-box {
  background: #fff;
  border: 1px solid #c9b27c;
  color: #333;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,.05);
}
/* Larghezza massima del contenuto */
.contenuto {
  max-width: 800px;
  margin: 0 auto;
  width:90%;
  font-size:1.1rem;
}
.contenuto p {
  font-size: 1.15rem;
  line-height: 1.58;
}

  #pagina {
  background: #ffffff;
  border: 1px solid #d8d0c0;
  box-shadow: 0 0 20px rgba(0,0,0,0.08);
  max-width: 1000px;  /* larghezza della pagina */
  margin: 0 auto;
  padding: 4px 10px; /* spazio sopra e dx-sx la pagina */
  background: url('immagini/sfondo-chiaro.png') repeat;
  background-size: 20px 20px;
  border-radius: 10px;

}

.bg-chiaro{background:#EAFFF4}
.bg-scuro{background:#D5FFEA}
.bg-bianco{background:#fff}

strong {
color:#0858c3;
font-weight:normal;
}

h1 {
  font-size: 2.0rem;
  color: #1e4f91;
  border-bottom: 1px solid #8b0000;
  padding-bottom: .4rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  font-family: Georgia, serif;
  text-align:center;
}

h2 {
  font-size: 1.5rem;
  color: #333;
  margin-top: 1.8rem;
}

h3 {
  font-size: 1.45rem;
  color: #0858c3;
}

/* TIPOGRAFIA */
h1,h2,h3{
  line-height:1.2;
  margin:1.2rem 0 .5rem;
  font-weight:400;
}

h3.home{text-align:center}
.highlight{color:#008000}
p.centra{text-align:center}
p.nota{font-size:.55rem;color:#555}
p.note{font-size: 8pt;color:#000}


/* Contenitore generale dell’header */
.header-viasetti {
  padding-top: 0;          /* Nessuno spazio sopra l’header (aderisce al bordo superiore della sezione) */
}

/* Spazio sotto l’header per separarlo dal contenuto successivo */
header.header-viasetti {
  margin-bottom: .6rem;   /* Distacco visivo tra box header e testo della pagina */
}

/* Box bianco che contiene logo + titolo + sottotitolo */
.header-wrap {
  max-width: 1000px;       /* Larghezza massima del box (così non si allarga troppo su schermi grandi) */
  margin: 0 auto;          /* Centra il box orizzontalmente */
  padding: .3rem 1.25rem;   /* Spazio interno: top/bottom 1rem, left/right 1.25rem */
  display: flex;           /* Dispone logo e testo affiancati */
  gap: .75rem;             /* Spazio orizzontale tra logo e blocco testo */
  align-items: center;     /* Allinea verticalmente logo e testo al centro */
  background: #fff;        /* Sfondo bianco del box */
  border: 1px solid #ddd;  /* Bordo grigio chiaro */
  border-radius: 12px;     /* Angoli arrotondati del box  */
}

/* Logo */
.logo-viasetti {
  width: 80px;             /* Larghezza fissa del logo */
  height: 80px;            /* Altezza fissa del logo */
  object-fit: contain;     /* Mantiene le proporzioni del logo senza tagliarlo */
  background: #fff;        /* Sfondo bianco per evitare artefatti */
  padding: 2px;            /* Micro-spazio interno per evitare che tocchi il bordo */
}

/* Contenitore del testo (titolo + sottotitolo) */
.header-text { 
  flex: 1;					 /* Occupa tutto lo spazio disponibile a destra del logo */            
}

/* Titolo dell’header */
.titolo-header {
  font-size: 1.7rem;       /* Dimensione del titolo */
  font-weight: 400;  	   /* Peso del font (medio) */      
  color: #1e4f91;          /* Colore blu del brand */
  margin: 0;               /* Nessun margine esterno */
  line-height: .9;         /* Altezza della linea molto compatta (avvicina il sottotitolo) */
}

/* Sottotitolo dell’header */
.sottotitolo-header {
  font-size: .9rem;        /* Dimensione del sottotitolo */
  color: #555;             /* Grigio scuro */
  line-height: 1.2;        /* Altezza della linea compatta */
  margin-top: .1rem;       /* Avvicina il sottotitolo al titolo (scelta estetica precisa) */
  font-family: Arial;      /* Font del sottotitolo */
}

/* ACCESSIBILITÃ */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.visually-hidden:focus,
.visually-hidden:active{
  position:static;
  width:auto;height:auto;
  margin:0;
  clip:auto;
  overflow:visible;
  padding:.5rem 1rem;
  background:#fff;
  border:2px solid #000;
  z-index:1000;
}

/* FOOTER */
.footer-viasetti-min{
  background:#234e70;
  color:#fff;
  padding:1.5rem 0 1rem;
  margin-top:2rem;
  font-size:.8rem;
}

.footer-viasetti-min p{
  color:#ffdd57;
  text-decoration:none;
  font-weight:normal;
  font-size:.8rem;
  text-align: center;
}

.footer-viasetti-min a{
  color:#ffffff;
  text-decoration:underline;
  font-weight:normal;
}
.footer-viasetti-min a:hover{
  margin-top:.8rem;
  font-size:.8rem;
  opacity:.9;
  color: #65a4f9;
  text-decoration: underline;
}
/* ARROTONDA LE IMMAGINI */
.foto-tonda {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #1e4f91;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); /* FACOLTATIVO */
    object-fit: cover;
    float: left;
    margin: 0 20px 10px 0;}
        
    /* non arrotonda il logo */
.foto-logo {  
    max-lengh 700px;
    width: 100px;
    height: 100px;
    object-fit: cover;
    float: left;
    margin: 0 20px 10px 0;}

    
/* ANNULLA IL FLOAT:LEFT */    
.clear {
    clear: both;
}

/* TESTIMONIANZE */
.testimonial{
  display:flex;
  gap:15px;
  background:#f3f7fa;
  border:1px solid #ddd;
  padding:15px;
  margin:15px auto;
  border-radius:6px;
  max-width:800px;
}
.testimonial-photo{
  width:80px;height:80px;
  border-radius:50%;
  object-fit:cover;
}
.testimonial-author{font-size:1.1em;color:#234e70}
.testimonial-excerpt{font-style:italic;color:#555}
details summary{
  color:#234e70;
  cursor:pointer;
  font-weight:bold;
}
details summary::after {
  content: "\25BC";
  float: right;
}

details[open] summary::after {
  content: "\25B2";
}
/* ELENCHI PERSONALIZZATI */
ul[class^="elenco-"]{
  list-style:none;
  margin:1.8rem 0 1rem;
  padding:0;
}
ul[class^="elenco-"] li{
  position:relative;
  padding-left:1.8em;
  margin:.7em 0;
  padding-bottom:.35rem;
  line-height:1.45; /* aumenta lo spazio tra le righe */
}
ul[class^="elenco-"] li::before{
  position:absolute;
  left:0;top:0em;
  font-weight:400;
}
ul.elenco-check li::before{content:"\2705"}
ul.elenco-rombo li::before{content:"\1F539"}
ul.elenco-dito li::before{content:"\1F449"}
ul.elenco-desideri li::before{content:"\2605"}
ul.elenco-no li::before{content:"\274C"}

/* ELENCHI NORMALI */
ul:not([class^="elenco-"]) li {
  line-height: 1.45;
  margin-bottom: 1rem;
}
/* CTA */
.cta-gruppo{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin:1.25rem 0;
}
.cta-bottone{
  display:inline-block;
  padding:.625rem 1.125rem;
  background:#1e4f91;
  color:#fff;
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  border-radius:.6rem;
  transition:.25s;
}
.cta-bottone:hover{
  background:#163a6b;
  transform:translateY(-2px);
}

/* RIQUADRO BIANCO */
.highlight-box {
  background: #fff;
  color: #234e70;
  padding: 0px 10px;
  border-radius: 14px;
  font-weight: normal;
  border: 1px solid #ccc;
  text-align: left;
}

/* BOX INFO */
.box-info{
  border:1px solid #0858c3;
  border-left-width:6px;
  border-radius:12px;
  padding:.9rem 1.2rem;
  margin:1.5rem 0;
  background:#FFF7C4;
}
.box-info h3{
  margin:0 0 .4rem;
  font-size:1.2rem;
  font-weight:bold;
  color:#1B5E20;
}

.box-info p{margin:0;font-size:1rem;line-height:1.5}


/* ==========================================
   TABELLA 2 colonne
   ========================================== */

.team-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.team-table td {
  vertical-align: top;
  padding: 3px 4px;
}

/* Lista approfondimenti (spazio extra tra i link) */
.lista-approfondimenti li {
  margin-bottom: 1rem;
}


/* ICON BAR */
.icon-bar{
  position:fixed;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.3rem;
  padding:.625rem 1.25rem;
  width:85%;
  max-width:800px;
  background:rgba(255,255,255,.7);
  border:1px solid #6ba3f6;
  border-radius:20px;
  z-index:999999;
}

.icon-bar img{
  width:52px;
  height:52px;
  flex-shrink:1; /* permette alle icone di ridursi se lo spazio è minimo */
  transition:opacity .2s;
}

.icon-bar a:hover img{
  opacity:.6;
}

/* RESPONSIVE */
@media(max-width:700px){
  .header-wrap img{width:90px;height:90px}
  .cta-gruppo{flex-direction:column;gap:.625rem}
  .cta-bottone{
    text-align:center;
    padding:.75rem;
    font-size:1.3rem;
  }
  .psi-badges .ring{
    width:55px;height:55px;
    font-size:18px;
  }
  .icon-bar img{
    width:40px;
    height:40px;
  }
}

/* iPhone 5 / schermi molto piccoli */
@media(max-width:350px){
  .icon-bar{
    padding:.4rem .6rem;
    gap:.25rem;
    width:90%; /* più spazio utile */
  }
  .icon-bar img{
    width:30px;
    height:30px;
  }
}

/* sicurezza totale sotto i 320px */
@media(max-width:320px){
  .icon-bar img{
    width:28px;
    height:28px;
  }
}


/* Link stile “oggetto proibito” */
a {
  color: #8b0000;
  text-decoration: underline;
  font-weight: 500;
  transition: .2s;
}

a:hover {
  color: #07489f;
  text-decoration: underline;
}