html { scroll-behavior: smooth;}
:root {
  --bg: #fdfcfb;           /* crema calda, molto chiaro */
  --panel: #ffffffdd;       /* bianco con trasparenza */
  --text: #1e3a8a;           /* blu “giovane”, non troppo scuro */
  --muted: #375aaf;          /* blu tenue per testi secondari, link */
  --brand: #1e3a8a;          /* blu “giovane”, non troppo scuro */
  --accent: #ffd54f;         /* giallo sole per pulsanti / dettagli */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* ombra morbida, neutra */
}

	
	
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    
	body{
		margin: 0; padding: 0;
		background-color: var(--bg);
		color: var(--text);  
		font-family: 'Quicksand', sans-serif; /* font moderno, arioso */ 
		overflow-x: hidden; /* previene scrollbar orizzontali */
	/*	background-image: url("../images/fondo-cani.avif");  */ 
		background-repeat: repeat;
		background-size: auto;
		}
		
		/* Overlay semitrasparente sopra al pattern */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/fondo-cani.avif");
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.04;     /* 🔥 livello di trasparenza: + alto = più visibile */
    pointer-events: none;
    z-index: -1;
}

    a{color:inherit;text-decoration:none}
	a, .brand-text {  color: var(--brand);}
    img{max-width:100%;display:block}
    .container{width:min(1100px,92%);margin:auto}

    /* Header */
    header{position:sticky;top:0;background: var(--bg); backdrop-filter:saturate(160%) blur(8px);z-index:40;border-bottom:1px solid var(--accent)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:10px}
    /*.brand .logo{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700}*/
	.brand .logo img {  width: 50px;  height: 50px;  object-fit: contain;      /* mantiene proporzioni */  display: block;}
	.brand h1 {  line-height: 1;   display: flex;  align-items: center;}
 /*   .brand h1{font:600 16px/1; font-family: 'Quicksand', sans-serif;  letter-spacing: 0.1px;margin:0} */
	nav a {  font-family: 'Cinzel Decorative', sans-serif;    font-weight: 600;  letter-spacing: 0.5px; font-size: 14px;}
    nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
	
	/* Il menu mobile è nascosto di default */
	#mobile { display: none; }
	
    nav a{padding:8px 12px;border-radius:999px}
    nav a:hover{background:var(--shadow);}
    .cta{background:var(--accent);color:#003380;padding:10px 16px;border-radius:999px;font-weight:600;box-shadow:var(--shadow)}
	
	/* Menù a tendina nav */
	
	/* Il contenitore del li deve essere relativo */
	#menu li {
	  position: relative;
	}

	#menu .submenu {
	  display: none;
	  position: absolute;
	  top: 100%;
	  left: 0;
	  background: #fff;
	  border-radius: 12px;
	  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	  padding: 10px 0;
	  min-width: 160px;
	  z-index: 1000;
	  opacity: 0;
	  transform: translateY(10px);
	  transition: all 0.25s ease;
	}

	/* Mostra con transizione */
	#menu li:hover > .submenu {
	  display: block;
	  opacity: 1;
	  transform: translateY(0);
	}

	/* Stile voci submenu */
	#menu .submenu li a {
	  display: block;
	  padding: 10px 18px;
	  color: #003380;
	  text-decoration: none;
	  border-radius: 8px;
	  margin: 3px 8px;
	  transition: background 0.2s ease, color 0.2s ease;
	  font-size: 11px;
	}

	#menu .submenu li a:hover {
	  background: var(--brand);
	  color: #fff;
	}


    /* Mobile nav */
    .burger{display:none;flex-direction:column;gap:4px;}
    .burger span{width:26px;height:2px;background:var(--text)}
	.burger:hover { transform: scale(1.2); }
	
    @media (max-width:840px){
	  /* Nasconde il menu desktop e mostra quello mobile */
      nav ul{display:none;}
	  
	  #mobile { 
		display: flex;
		flex-direction: column;
		position:absolute;
		left:0;
		right:0;
		top:64px;
		background:var(--bg);
		border-bottom:1px solid #e7e0d1;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transform: translateY(-20px);
        opacity: 0;
		font-size:12px;
		
	  }
	  #mobile[hidden] { 
        display: block !important; /* Temporaneamente per la transizione */
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none; /* Disabilita i clic quando è nascosto */
      }
      #mobile:not([hidden]) {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
	    /* Aggiungo bordi arrotondati al contenitore del menu mobile */
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        overflow: hidden;
		font-family: 'Cinzel Decorative', sans-serif;
		font-size:12px;
      }
	  
	  /* Aggiungi questa regola per rimuovere i puntini sul menu principale mobile */
	  #mobile ul {
		list-style: none;
		margin: 0;
		padding: 0;
	  }

      .burger{display:flex;}
      .mobile a{
        display:block;
        padding:14px 22px;
        border-top:1px solid var(--muted);
        transition: background-color 0.2s ease;
		font-size: 12px;
      }
      .mobile a:hover {
        background-color: rgba(0, 51, 128, 0.05);
      }
	  
	  /* Sottomenù mobile */
	  #mobile .submenu {
		display: none; /* Nascosto di default */
		position: static; /* Si adatta al flusso del documento */
		background: rgba(0, 51, 128, 0.05); /* Sfondo leggermente scuro */
		box-shadow: none;
        padding-left: 15px; /* Indentazione per i sottomenu */
        border-radius: 10px; /* Bordi arrotondati al contenitore del sottomenu */
        margin: 5px 15px;
		
	  }
	  /* Mostra il sottomenu quando ha la classe `is-active` */
	  #mobile li.is-active > .submenu {
		display: block;
	  }
	  
	  /* Stile per il pulsante del sottomenu */
      .mobile-submenu-toggle {
        background: none;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        color: var(--brand);
        padding: 14px 22px;
        width: 100%;
        text-align: left;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: color 0.2s ease;
		font-family: 'Cinzel Decorative', sans-serif;
		font-size:12px;
      }
      .mobile-submenu-toggle:hover {
        color: var(--text);
      }
      .mobile-submenu-toggle::after {
        content: "▾";
        font-size: 1.2rem;
        transform: rotate(0deg);
        transition: transform 0.3s ease;
      }
      li.is-active > .mobile-submenu-toggle::after {
        transform: rotate(180deg);
      }

      /* Stile specifico per i link all'interno del sottomenu mobile */
      #mobile .submenu a {
        padding: 10px 18px; /* Riduci il padding */
        border-radius: 8px; /* Rendi i link arrotondati */
        margin: 5px 0;
        border-top: none; /* Rimuovi il bordo superiore */
      }
	}
	
	/* ==============================================
   MENU DESKTOP – effetto underline + sollevamento
================================================= */
nav a {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  transition: all 0.25s ease;
  
}

/* linea animata */
nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background-color: var(--brand);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

/* hover: colore + underline + sollevamento */
nav a:hover {
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

nav a:hover::after {
  width: 60%;
}

/* attiva lo stesso effetto per i link del menu principale */
#menu > li > a {
  font-weight: 600;
}

/* ==============================================
   SOTTOMENU – fade morbido + slide verso il basso
================================================= */
#menu .submenu {
  display: block;              /* sempre block per usare solo opacity */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#menu li:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* voci del submenu */
#menu .submenu li a {
  display: block;
  padding: 10px 18px;
  color: var(--brand);
  border-radius: 8px;
  margin: 3px 8px;
  transition: background 0.25s ease, color 0.25s ease;
}

#menu .submenu li a:hover {
  background: var(--brand);
  color: #fff;
  transform: translateX(4px);
}

/* ==============================================
   MOBILE MENU – effetto touch coerente
================================================= */

/* transizione morbida per apertura/chiusura */
#mobile {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* link principali del menu mobile */
#mobile a {
  position: relative;
  display: block;
  padding: 14px 22px;
  border-top: 1px solid var(--muted);
  transition: background-color 0.25s ease, transform 0.2s ease;
  font-family: 'Cinzel Decorative', sans-serif;
}

/* hover o tocco (non esagerato, compatibile con dispositivi touch) */
#mobile a:hover {
  background-color: rgba(0, 51, 128, 0.05);
  transform: translateX(3px);
}

/* sottomenù mobile – fade/slide */
#mobile .submenu {
  display: none;
  position: static;
  background: rgba(0, 51, 128, 0.05);
  border-radius: 10px;
  margin: 5px 15px;
  padding-left: 15px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* quando è attivo */
#mobile li.is-active > .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

	    /* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 36px;
  align-items: center;
  padding: 64px 20px;
  color: white;
  border-radius: 0px;
  position: relative;
}

.hero-home {
  position: relative; /* serve per ancorare il testo */
  width: 100%;
  height: 60vh; /*  o una misura minore, tipo 80vh se vuoi meno spazio */
  margin: 0;
  border-radius: 0; /* rimuove gli angoli arrotondati per farla aderire ai bordi */
  background-color: #fffee9; /* colore di sfondo sotto all’immagine */
  background-repeat: no-repeat;
  color: #fff;
  padding: 100px 50px; /* più spazio verticale */
  background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: center;  /*  mantiene centrata l'immagine */
  border:1px solid
}

@media (min-width: 769px) {
  .hero-home {
    background-image: url("../images/optimized/hero/homepage2.webp");
  }
}

.hero-home .hero-content {
 
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
  padding: 0 16px;
  
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  

}


.hero-chisiamo {
  position: relative;
  width: 100%;
  height: 60vh;
  margin: 0;
  border-radius: 0;
  /* Consolidiamo e manteniamo lo sfondo */
  background: url("../images/optimized/hero/chi_siamo.webp") center/cover no-repeat;
  background-color: #fffee9; 
  
  /* --- Nuovi stili per il centraggio con Flexbox --- */
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;     /* Centra il contenuto verticalmente */
  padding: 20px;           /* Aggiunge spazio ai bordi su schermi piccoli */
  text-align: center;      /* Centra il testo all'interno del pannello */
  background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: bottom;  /*  mantiene centrata l'immagine */
  
}

.hero-chisiamo .hero-content {
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;

}
.hero-chisiamo .panel {
  max-width: 750px; /* Imposta una larghezza massima per una migliore leggibilità */
  
}

.hero-educazione {
  position: relative;
  width: 100%;
  height: 60vh;
  margin: 0;
  border-radius: 0;
  /* Consolidiamo e manteniamo lo sfondo */
  background: url("../images/optimized/hero/educazione.webp") bottom/cover no-repeat;
  background-color: #fffee9; 
  
  /* --- Nuovi stili per il centraggio con Flexbox --- */
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;     /* Centra il contenuto verticalmente */
  padding: 20px;           /* Aggiunge spazio ai bordi su schermi piccoli */
  text-align: center;      /* Centra il testo all'interno del pannello */
  
  background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: center;  /*  mantiene centrata l'immagine */
  
}

.hero-educazione .hero-content {
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;

}
.hero-educazione .panel {
  max-width: 750px; /* Imposta una larghezza massima per una migliore leggibilità */
  
}

.hero-sport {
  
 position: relative;
  width: 100%;
  height: 60vh;
  margin: 0;
  border-radius: 0;
  /* Consolidiamo e manteniamo lo sfondo */
  background: url("../images/optimized/hero/sport1.webp") center/cover no-repeat;
  background-color: #fffee9; 
  
  /* --- Nuovi stili per il centraggio con Flexbox --- */
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;     /* Centra il contenuto verticalmente */
  padding: 20px;           /* Aggiunge spazio ai bordi su schermi piccoli */
  text-align: center;      /* Centra il testo all'interno del pannello */
  
    background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: center;  /*  mantiene centrata l'immagine */
}

.hero-sport .hero-content {
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: justify-content;
  color: #fff;

}
.hero-sport .panel {
  max-width: 750px; /* Imposta una larghezza massima per una migliore leggibilità */
}

.hero-iaa {
  
 position: relative;
  width: 100%;
  height: 60vh;
  margin: 0;
  border-radius: 0;
  /* Consolidiamo e manteniamo lo sfondo */
  background: url("../images/optimized/hero/sport1.webp") center/cover no-repeat;
  background-color: #fffee9; 
  
  /* --- Nuovi stili per il centraggio con Flexbox --- */
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;     /* Centra il contenuto verticalmente */
  padding: 20px;           /* Aggiunge spazio ai bordi su schermi piccoli */
  text-align: center;      /* Centra il testo all'interno del pannello */
  
    background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: center;  /*  mantiene centrata l'immagine */
}

.hero-iaa .hero-content {
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: justify-content;
  color: #fff;

}
.hero-iaa .panel {
  max-width: 750px; /* Imposta una larghezza massima per una migliore leggibilità */
}

.hero-doc {
  
 position: relative;
  width: 100%;
  height: 60vh;
  margin: 0;
  border-radius: 0;
  /* Consolidiamo e manteniamo lo sfondo */
  background: url("../images/optimized/hero/documenti.webp") center/cover no-repeat;
  background-color: #fffee9; 
  
  /* --- Nuovi stili per il centraggio con Flexbox --- */
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;     /* Centra il contenuto verticalmente */
  padding: 20px;           /* Aggiunge spazio ai bordi su schermi piccoli */
  text-align: center;      /* Centra il testo all'interno del pannello */
  
    background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: center;  /*  mantiene centrata l'immagine */
}

.hero-doc .hero-content {
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: justify-content;
  color: #fff;

}
.hero-doc .panel {
  max-width: 750px; /* Imposta una larghezza massima per una migliore leggibilità */
}

.hero-asilo {
position: relative;
  width: 100%;
  height: 60vh;
  margin: 0;
  border-radius: 0;
  /* Consolidiamo e manteniamo lo sfondo */
  background: url("../images/optimized/hero/cane.webp") center/cover no-repeat;
  background-color: #fffee9; 
  
  /* --- Nuovi stili per il centraggio con Flexbox --- */
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;     /* Centra il contenuto verticalmente */
  padding: 20px;           /* Aggiunge spazio ai bordi su schermi piccoli */
  text-align: center;      /* Centra il testo all'interno del pannello */
  background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: top;  /*  mantiene centrata l'immagine */
}

.hero-asilo .hero-content {
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: justify-content;
  color: #fff;

}

.hero-asilo .panel {
  max-width: 750px; /* Imposta una larghezza massima per una migliore leggibilità */
}

.hero-eventi {
  position: relative;
  width: 100%;
  height: 60vh;
  margin: 0;
  border-radius: 0;
  background: url("../images/optimized/hero/eventi_2.webp") center/cover no-repeat;
  background-color: #fffee9; 
  display: flex;
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center;     /* Centra il contenuto verticalmente */
  padding: 20px;           /* Aggiunge spazio ai bordi su schermi piccoli */
  text-align: center;      /* Centra il testo all'interno del pannello */
  background-attachment: scroll; /* evita problemi su iOS */
  background-size: cover;        /* riempie sempre lo schermo */
  background-position: bottom;  /*  mantiene centrata l'immagine */

}

.hero-eventi .hero-content {
  position: absolute;
  top: -3%;              /* distanza dal bordo superiore → regola questo valore */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
}

.hero-eventi .panel {
  max-width: 750px; /* Imposta una larghezza massima per una migliore leggibilità */
}

/* Mantieni il contenuto sopra */
.hero > * {
  position: relative;
  z-index: 1;
}

/* Titolo e testo */
.hero h2 {
  font: 900 54px/1.1 Quicksand, sans-serif;
  margin: 0 0 20px;
  color: var(--brand);
  }
.hero p {
  font-size: 18px;
  margin: 0 0 22px;
  color: #fff;
  
}


/* =====================================================
   HERO KEYWORDS – zoom ampio, fluido e contrastato
===================================================== */
.hero-keywords {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 2.9rem;               /* <-- più grande */
  color: #ffffff;                  /* testo bianco puro */
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);  /* ombra più forte per contrasto */
  overflow: hidden;
  line-height: 1.2;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
 
 
}

.hero-keywords span {
  opacity: 0;
  transform: scale(1.8) translateY(40px);
  animation: smoothZoomBig 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  white-space: nowrap;

}

/* Ritmi morbidi e continui */
.hero-keywords span:nth-child(1) { animation-delay: 0.3s; }  /* EDUCAZIONE */
.hero-keywords span:nth-child(2) { animation-delay: 1.8s; }  /* EMOZIONE */
.hero-keywords span:nth-child(3) { animation-delay: 3.2s; }  /* SPORT */
.hero-keywords span:nth-child(4) { animation-delay: 4.7s; }  /* DIVERTIMENTO */
.hero-keywords span:nth-child(5) { animation-delay: 6.2s; }  /* BENESSERE */



/* Animazione morbida e ampia */
@keyframes smoothZoomBig {
  0% {
    opacity: 0;
    transform: scale(1.8) translateY(40px);
    filter: blur(8px);
  }
  40% {
    opacity: 1;
    transform: scale(1.1) translateY(0);
    filter: blur(1px);
  }
  70% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

/* Mobile: proporzioni più morbide ma sempre leggibili */
@media (max-width: 600px) {
  .hero-keywords {
    font-size: clamp(1.6rem, 5vw, 2rem);
    gap: 10px;
    text-align: center;
    line-height: 1.3;
  }
  .hero-keywords span {
    animation-duration: 1.7s;
  }
}

/* Mobile: colonna unica */

@media (max-width: 768px) {
  .hero-home {
	  height: 80vh;
  max-height: 100svh; /* fix iOS */
  overflow: hidden;
    background-image: url("../images/optimized/homepage2-mobile.webp");
    background-position: center top; /* mostra la parte alta dell'immagine */
    background-size: cover;
    padding: 80px 20px; /* meno spazio verticale per adattarsi meglio */
  }
}


@media (max-width: 940px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center; /* centro contenuto */
  }
  .hero .buttons {
    justify-content: center;
  }
  .hero .card {
    margin-top: 20px;
  }
}

/* Media Query Unificata per Mobile (se presente) */
@media (max-width:768px){
  /* ... le tue altre regole per mobile ... */

  /* Ottimizzazione Hero Panel */
  .hero-chisiamo {
    height: 450px; /* Imposta un'altezza fissa e più contenuta per mobile */
    padding: 10px; /* Riduci il padding, se necessario */
  }

  /* Ottimizzazione del Pannello stesso */
  .hero-chisiamo .panel {
    padding: 20px; /* Riduci il padding interno del pannello se necessario */
  }
  
  /* Se il titolo è troppo grande */
  .hero-chisiamo .panel h2 {
    font-size: 2em; /* Riduci la dimensione del font del titolo */
  }
}



    .hero .buttons{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid #cfd8cc;background:#fff;box-shadow:var(--shadow);font-weight:600}
    .btn.primary{background:#003380;color:#fff;border-color:transparent;background: linear-gradient(to bottom, var(--bg), rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, var(--bg)),linear-gradient(to right, var(--bg), rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, var(--bg))}
	.btn.primary:hover {  background: #003380;  transform: scale(1.05);}
	.hero .panel{background:var(--panel);padding:20px;border-radius:18px;box-shadow:var(--shadow)}
	.hero .panel p{margin:0 0 10px}

    @media (max-width:940px){      .hero{grid-template-columns:1fr}  } 
	
	
    /* Section */
    section{padding:56px 0}
    .sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
    .sec-head h3{font:800 24px/1.2 'Cinzel Decorative',sans-serif;margin:0}
    .sec-head p{color:var(--muted);margin:0}

    /* Chi siamo */
    .about{display:grid;grid-template-columns:1fr 1fr;gap:26px; align-items: start;}
	
    .about .panel{background:var(--panel);padding:20px;border-radius:18px;box-shadow:var(--shadow); text-align: justify;border:0.3px solid var(--accent); width: 100%;box-sizing: border-box;}
    .about .panel p{margin:0 0 10px}
	.about .panel2 {background:var(--panel); width: 250px; height: 250px;  border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;}

    .about2{display:grid;grid-template-columns:1.3fr .8fr;gap:20px; }
	.about2 .lightbox-trigger {
    display: inline-block; /* Permette di centrarlo con text-align: center sul genitore */
    max-width: 90%;        /* La locandina occupa al massimo il 90% della larghezza del pannello */
    margin-top: 15px;      /* Spazio tra il testo e l'immagine */
	}
    .about2 .panel{background:var(--panel);padding:20px;border-radius:18px;box-shadow:var(--shadow);text-align: justify;border:0.3px solid var(--accent); }
    .about2 .panel p{margin:0 0 10px}
	.about2 .panel2 {background:var(--panel); width: 250px; height: 250px;  border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;}
	
	.panel.photo2 { width: 100%; height: 100%; border-radius: 50%;  overflow: hidden; display: flex;  align-items: center; justify-content: center;padding:0px}
	.panel.photo2 img {  width: 100%;  height: 100%;  object-fit: cover ; border-radius: 50%; }
	
	.panel.photo3 { width: 250px; height: 250px; border-radius: 50%;  overflow: hidden; display: flex;  align-items: center; justify-content: center;padding:0px}
	.panel.photo3 img {  width: 100%;  height: 100%;  object-fit: cover ; border-radius: 50%;}

    /* Servizi */
    .grid{display:grid;grid-template-columns:repeat(3,2fr);gap:16px}
    .card{background:#fffe;border:0.3px solid var(--accent);border-radius:18px;padding:30px;box-shadow:var(--shadow); width: 350px; height: 300px}
    .card h4{font:700 18px/1.2 Montserrat,sans-serif;margin:10px 0 6px}
    .pill{display:inline-block;background:var(--panel);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}
    .card .actions{display:flex;gap:10px;margin-top:10px}
	/* --- Centra i pulsanti nella sezione Servizi --- */
.card .actions {
  display: flex;
  justify-content: center;   /* centra orizzontalmente */
  align-items: center;       /* centra verticalmente se necessario */
  margin-top: 10px;          /* piccolo spazio sopra */

}

/* opzionale: per uniformità visiva */
.card .btn2 {
  text-align: center;
  display: inline-block;
  min-width: 150px;           /* larghezza minima coerente */
}


/* Animazione pulsante Newsletter */
@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 10px rgba(255, 0, 0, 1);
    }
}



/* Centra le card su mobile */
@media (max-width: 720px) {
  .grid {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .grid {
    justify-content: center;
  }
  .card {
    margin-left: auto;
    margin-right: auto;
  }
}



    @media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:480px){.grid{grid-template-columns:1fr}}
	
	

    /* Galleria */
    .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .thumb{position:relative;border-radius:14px;overflow:hidden;cursor:pointer}
    .thumb img{width:100%;height:180px;object-fit:cover;transition:transform .3s}
    .thumb:hover img{transform:scale(1.05)}
    @media (max-width:800px){.gallery{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:520px){.gallery{grid-template-columns:1fr}}
	.carousel-wrapper { display: flex; align-items: center; justify-content: center; gap: 14px; }

.media-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
}

.media-tab {
  border: 1px solid var(--accent);
  background: #f1f0dd;
  color: var(--text);
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Cinzel Decorative', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.media-tab:hover,
.media-tab.is-active {
  background: var(--muted);
  color: var(--accent);
  transform: scale(1.03);
}

.media-panel[hidden] {
  display: none;
}

.video-carousel {
  display: flex;
  min-width: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  scroll-behavior: smooth;
  max-width: 900px;
  padding-bottom: 20px;
}

.video-card {
  background: #fffe;
  border: 0.3px solid var(--accent);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  flex-shrink: 0;
  width: 190px;
  padding: 0;
  font: inherit;
}

.video-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-card__body {
  padding: 12px;
}

.video-card__body p {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
}

.media-empty {
  max-width: 620px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: center;
}

button.gallery-control {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  padding: 0;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 50%;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

button.gallery-control:hover,
button.gallery-control:focus-visible {
  color: var(--brand);
  background: var(--accent);
  transform: scale(1.06);
}

button.gallery-control:focus-visible {
  outline: 3px solid rgba(30, 58, 138, 0.3);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .video-card {
    width: 160px;
  }
}

@media (max-width: 480px) {
  .video-card {
    width: 140px;
  }
}


/* Container del carosello */
.carousel {
  display: flex;
  min-width: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch; /* Migliora lo scrolling su iOS */
  gap: 12px;
  padding-bottom: 20px;
}

/* Stile per le singole immagini */
.carousel img {
  flex-shrink: 0;
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.4s ease, filter 0.4s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  border: 2px solid #e9e6dd; /* come le card */
  background: var(--panel);  /* sfondo bianco traslucido, coerente col resto */
}

.carousel img:hover {
  transform: scale(1.05);
  filter: brightness(0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  
}


/* --- Responsive --- */
@media (max-width: 768px) {
  .carousel img {
    width: 160px;
    height: 160px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .carousel img {
    width: 70px;
    height: 70px;
  }
  .carousel-wrapper {
    gap: 8px;
  }

  button.gallery-control {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 1.7rem;
  }
}


/* Lightbox background scuro + transizione immagine */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  z-index: 1000;
  overflow: hidden;
  cursor: grab;
}

/* effetto fade */
#lightbox img {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.5s ease;
  transform-origin: center center;
  user-select: none;
}

/* classe per mostrare l'immagine (fade in) */
#lightbox img.show {
  opacity: 1;
}

#lightbox [hidden] {
  display: none !important;
}

#lightbox video {
  display: block;
  width: min(92vw, 960px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  box-sizing: border-box;
  margin: auto;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
  background: #000;
  object-fit: contain;
}

#lightbox.zooming {
  cursor: grabbing;
}

/* Pulsanti navigazione lightbox */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.lb-nav:hover {
  background: rgba(255,255,255,0.5);
}

#lb-prev { left: 30px; }
#lb-next { right: 30px; }

/* Chiudi */
#close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 50px;
  color: white;
  cursor: pointer;
}

/* ============================
   RECENSIONI
============================ */

:root {
  --brand-warm: #735b3a;
}

.reviews-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.reviews-carousel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
}

.reviews-viewport {
  --review-gap: 18px;
  --reviews-visible: 3;
  --review-position: 0;
  overflow: hidden;
  padding: 6px 2px 10px;
  outline: none;
}

.reviews-viewport:focus-visible {
  outline: 3px solid rgba(30, 58, 138, 0.35);
  outline-offset: 5px;
  border-radius: 12px;
}

.reviews-track {
  display: flex;
  align-items: stretch;
  gap: var(--review-gap);
  transform: translateX(calc(-1 * var(--review-position) * (100% + var(--review-gap)) / var(--reviews-visible)));
  transition: transform 500ms ease;
}

.review {
  flex: 0 0 calc((100% - (var(--review-gap) * (var(--reviews-visible) - 1))) / var(--reviews-visible));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 242px;
  padding: 26px 24px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.review:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.stars {
  margin-bottom: 12px;
  color: #d49700;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
}

.review-text {
  flex: 1;
  margin: 0;
  color: var(--brand-warm);
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}

.author {
  margin-top: 18px;
  color: var(--brand);
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
}

.reviews-control {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 50%;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.reviews-control:hover:not(:disabled),
.reviews-control:focus-visible {
  color: var(--brand);
  background: var(--accent);
  transform: scale(1.06);
}

.reviews-control:focus-visible {
  outline: 3px solid rgba(30, 58, 138, 0.3);
  outline-offset: 3px;
}

.reviews-control:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.reviews-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.reviews-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: #c8cfdf;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.reviews-dot[aria-selected="true"] {
  background: var(--brand);
  transform: scale(1.35);
}

.reviews-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .reviews-viewport {
    --reviews-visible: 2;
  }
}

@media (max-width: 600px) {
  .reviews-carousel {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .reviews-viewport {
    --review-gap: 12px;
    --reviews-visible: 1;
  }

  .review {
    min-height: 238px;
    padding: 24px 18px 20px;
  }

  .review-text {
    font-size: 0.96rem;
  }

  .reviews-control {
    width: 38px;
    height: 38px;
    font-size: 1.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track,
  .review,
  .reviews-control,
  .reviews-dot {
    transition: none;
  }
}



 /* ==============================
   CONTATTI - LAYOUT ORIZZONTALE E RESPONSIVE FIX
============================== */

.about {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 20px;
  
}

.about .panel {
  flex: 1 1 400px;
  max-width: 750px;
  background: var(--panel);
  padding: 20px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border:0.3px solid var(--accent);
  text-align: left;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  
}

.about .panel .map {
  width: 100%;
  height: 330px;
  border-radius: 12px;
}

/* Ogni contatto su una singola riga orizzontale */
.panel .contatto {
  display: flex;
  align-items: left;
  flex-wrap: wrap; /* su mobile va a capo */
  gap: 10px;
  text-align: left;
  padding: 8px 0;
  margin: 6px auto;
  max-width: 480px;
  
  
}

.panel .contatto strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.panel .contatto .social img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.panel .contatto .social img:hover {
  transform: scale(1.1);
}

.panel .contatto .telefono {
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
}

.panel .contatto .btn-small {
  background: var(--brand);
  color: #fff;
  padding: 5px 12px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.2s ease;
}

.panel .contatto .btn-small:hover {
  background: var(--accent);
}

.panel h4 {
  margin-top: 25px;
  margin-bottom: 10px;
  color: var(--brand);
}

/* Responsive */
@media (max-width: 800px) {
  .about {
    flex-direction: column;
    align-items: center;
  }
  .about .panel {
    max-width: 90%;
    width: 100%;
    padding: 16px;
  }
  .about .panel .map {
    height: 100%;
  }
  .panel .contatto {
    flex-direction: column;
    gap: 8px;
  }
}

    .contact{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
    form{background:#fff;border:1px solid #e9e6dd;padding:18px;border-radius:16px;box-shadow:var(--shadow)}
    label{display:block;font-size:14px;color:var(--muted);margin:10px 0 6px}
    input,textarea{width:100%;padding:12px 14px;border:1px solid #d7d2c4;border-radius:12px;background:#fff}
    textarea{min-height:120px;resize:vertical}
    .form-actions{display:flex;gap:10px;align-items:center;margin-top:12px}
	.btn-small {  display: inline-block;  font-size: 0.8rem;  padding: 3px 8px;  background: #003380;   /* puoi cambiare colore */ color: white;  border-radius: 5px;  text-decoration: none;}
	.btn-small:hover {  background: #fffae9; color: #003380; /* colore più scuro al passaggio del mouse */  transform: scale(1.10);}
	.contatto {  display: flex;  align-items: center;  gap: 12px;           /* spazio tra elementi */  margin-bottom: 10px;  /* separazione tra contatti */}
	.contatto strong {  min-width: 70px;     /* larghezza fissa per i nomi */}
	.contatto .telefono {  min-width: 80px;    /* larghezza fissa per numeri */  font-family: monospace;}
	
	 
    /* Footer */
 
    footer .foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items: center;}
    .social {  display: flex;  flex-direction: column; /* ogni social va a capo */  gap: 8px; /* spazio tra le righe */}
	.social a {  display: flex;  align-items: center;  text-decoration: none;  color: #333; /* puoi cambiare colore */  font-size: 1rem;  font-weight: 500;}
	.social a:hover {  color: var(--brand); /* colore al passaggio del mouse */}
	.social img {  width: 20px;  /* dimensione icona */  height: 20px;  margin-right: 8px;}
	
	/* bottoni */
	.btn2 {display: inline-block;  padding: 10px 20px;  border-radius: 8px;  text-decoration: none;  font-weight: 500;  background: #f1f0dd;  /* colore tipo WhatsApp */  color: var(--text);  transition: background 0.3s ease, transform 0.2s ease;}
	.btn-newsletter {display: inline-block;  padding: 10px 20px;  border-radius: 8px;  text-decoration: none;  font-weight: 700;  transition: background 0.3s ease, transform 0.2s ease;}
	.btn-newsletter:hover {  transform: scale(1.05);}
	.btn-newsletter:hover span {  color: inherit;}
	.btn2:hover {  background: var(--muted);  color: var(--accent);  transform: scale(1.05);}
	.btn2:hover span {  color: var(--accent);}
	.social-icon {  width: 24px;  height: 24px; object-fit: contain;  vertical-align: middle;  transition: transform 0.2s ease;}
	.social-icon:hover {  transform: scale(1.2); }

	/* titoletti sezioni (Educazione, Asilo, Altri contatti) */
	.panel h4 {  font-family: "Georgia", serif; color: #444;  border-left: 4px solid var(--brand);  padding-left: 8px;  margin: 20px 0 10px;  font-size: 1.1rem;  font-weight: 600;}

	/* opzionale: se vuoi un tocco cromatico in linea con il brand */
	.panel h4 span {  color: var(--brand);}


/* ============================
   FOOTER MODERNO A GRIGLIA
============================ */
footer {
  background: var(--panel);
  border-top: 0.5px solid var(--accent);
  box-shadow: var(--shadow);
  padding: 30px 20px;
  color: var(--text);
  font-size: 0.80rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: start;
  justify-items: center;
  text-align: center;
}

.foot-col {
  max-width: 300px;
}

.foot-col h4 {
  color: var(--brand);
  font-size: 1rem;
  margin-bottom: 10px;
}

.foot-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.foot-col ul li {
  margin: 6px 0;
}

.foot-col ul li a {
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s ease;
}

.foot-col ul li a:hover {
  color: var(--brand);
}

.foot-col.info p {
  margin: 4px 0;
}

/* --- Logo e testo sulla stessa riga --- */
footer .brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* spazio tra logo e testo */
}

footer .brand-row img {
  width: 60px;           /* regola la dimensione del logo */
  height: auto;
}

footer .brand-row strong {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;   /* evita che la scritta vada a capo */
}

/* Su schermi piccoli: logo sopra la scritta per non schiacciare troppo */
@media (max-width: 480px) {
  footer .brand-row {
    flex-direction: column;
    gap: 6px;
  }
}


/* MOBILE: centra tutto e riduci spazi */
@media (max-width: 600px) {
  footer {
    text-align: center;
  }
  .foot-grid {
    grid-template-columns: 1fr;
  }
}


.container.foot {  display:grid; grid-template-columns:2fr 1fr; display: flex;  justify-content: center; align-items: center;  flex-direction: column;  text-align: center;}
.container.foot .brand {  display: flex;  align-items: center;  gap: 10px;               /* spazio tra logo e testo */}
.container.foot .brand img {  height: 50px;            /* dimensione logo */  width: auto;}

/* 	 Sezioni principali a griglia su singola colonna */
	.about, .about2, .contact {
		grid-template-columns: 1fr;
	}
	
	/* Forza l'ordine dei pannelli nella sezione "Chi siamo" e "Contatti" */
	.about .panel:first-child, .contact .panel:first-child {
		order: 1;
	}
	.about .panel:last-child, .contact .panel:last-child {
		order: 2;
	}
	
	/* Nuove regole per invertire l'ordine nella sezione con la foto */
	.about .panel2, .about2 .panel2 {
		order: 1; /* Il pannello con la foto va in alto */
	}
	.about .panel:not(.panel2), .about2 .panel:not(.panel2) {
		order: 2; /* Il pannello con il testo va sotto */
	}

	/* Regole per ridimensionare le foto in tutte le sezioni */
	.about .panel2,
	.about2 .panel2,
	.panel.photo3 {
		width: 100%;
		max-width: 250px;
		height: auto;
		margin: 20px auto;
	}

/* ===================
   EVENTI - Pannello con Locandina Singola
=================== */

.chisono {
    text-align: center; /* Centra il testo e il link (locandina) all'interno del pannello */
    width: auto;
	max-width: 750px;   /* Limita la larghezza del pannello per non farlo diventare enorme */
    margin-left: auto;  /* Centra il pannello orizzontalmente */
    margin-right: auto;
}


/* Applica uno stile specifico ai pannelli degli eventi per centrare la locandina */
.evento-locandina {
    text-align: center; /* Centra il testo e il link (locandina) all'interno del pannello */
    width: auto;
	max-width: 500px;   /* Limita la larghezza del pannello per non farlo diventare enorme */
    margin-left: auto;  /* Centra il pannello orizzontalmente */
    margin-right: auto;
	
}

/* Contenitore della locandina (il tag <a>) */
.evento-locandina .lightbox-trigger {
    display: inline-block; /* Permette di centrarlo con text-align: center sul genitore */
    max-width: 90%;        /* La locandina occupa al massimo il 90% della larghezza del pannello */
    margin-top: 15px;      /* Spazio tra il testo e l'immagine */
}

/* Immagine della Locandina (forza l'adattamento al contenitore) */
.locandina-img {
    width: 100%;        /* L'immagine occupa il 100% dello spazio disponibile nel .lightbox-trigger */
    height: auto;
    display: block;
    border-radius: 0px; /* Angoli leggermente arrotondati */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.locandina-img:hover {
    transform: scale(1.01); /* Effetto al passaggio del mouse */
}

/* --- Fix icone social nella sezione Contatti (mobile e desktop) --- */
.social img,
.contatto .social img,
.social-icon {
  width: 24px !important;   /* dimensione fissa */
  height: 24px !important;  /* quadrata, evita deformazioni */
  object-fit: contain;      /* mantiene proporzioni */
  aspect-ratio: 1 / 1;      /* forza il quadrato */
  flex-shrink: 0;           /* impedisce che si schiacci nei flexbox */
  display: inline-block;
  vertical-align: middle;
}

/* Optional: spazio e centraggio migliore */
.contatto .social {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .social img,
  .contatto .social img,
  .social-icon {
    width: 20px !important;  /* leggermente più grande su mobile se vuoi */
    height: 20px !important;
  }
}

/* =========================
   PANNELLO ESPANDIBILE (Bio)
========================= */

.expand-panel {
  position: relative;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.expand-panel__content {
  overflow: hidden;
  transition: max-height 0.4s ease;
  max-height: 120px; /* default */
}

/* Bottone (freccia) */
.expand-panel__toggle {
  background: none;
  border: none;
  display: block;
  margin: 0 auto;
  font-size: 22px;
  color: var(--brand);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.expand-panel__toggle .chev {
  display: inline-block;
  transition: transform 0.3s ease;
}

.expand-panel__toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* Spazio extra sotto */
.expand-panel__content p:last-child {
  margin-bottom: 12px;
}



#whatsapp-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  display: none; /* inizialmente nascosto */
  z-index: 9999;
  animation: slideIn 0.5s forwards;
  font-family: Arial, sans-serif;
}

#whatsapp-popup p {
  margin: 0 0 10px 0;
}

#whatsapp-popup a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

#whatsapp-popup img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

#whatsapp-close {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
}

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

/* ============================
   POPUP BUONE VACANZE
============================ */
.holiday-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 24, 76, 0.58);
  backdrop-filter: blur(4px);
  z-index: 10000;
}

.holiday-popup.is-visible {
  display: flex;
}

.holiday-popup-open {
  overflow: hidden;
}

.holiday-popup__dialog {
  position: relative;
  width: auto;
  max-width: min(86vw, 560px);
  max-height: 82vh;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 18px 60px rgba(0,0,0,0.32);
  animation: holidayPopupIn 0.25s ease-out;
}

.holiday-popup__dialog img {
  width: auto;
  max-width: min(82vw, 540px);
  max-height: calc(82vh - 20px);
  object-fit: contain;
  border-radius: 12px;
}

.holiday-popup__close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.holiday-popup__close:hover {
  background: var(--accent);
}

@keyframes holidayPopupIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 600px) {
  .holiday-popup {
    padding: 14px;
  }

  .holiday-popup__dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 86vw;
    max-height: 72vh;
    padding: 8px;
    border-radius: 14px;
  }

  .holiday-popup__dialog img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(86vw - 16px);
    max-height: calc(72vh - 16px);
  }

  .holiday-popup__close {
    top: -12px;
    right: -10px;
    width: 38px;
    height: 38px;
    font-size: 28px;
  }
}

/* ============================
   HOME - RIORDINO PROFESSIONALE
============================ */
#home .section-kicker {
  margin: 0 0 8px;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#home .sec-head-stacked {
  display: block;
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

#home .sec-head-stacked h3 {
  color: var(--brand);
  font-size: clamp(1.45rem, 2vw, 2rem);
}

#home .sec-head-stacked p:last-child {
  max-width: 680px;
  margin: 10px auto 0;
  line-height: 1.6;
}

.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 31, 84, 0.12), rgba(0, 31, 84, 0.52)),
    radial-gradient(circle at center, rgba(255, 213, 79, 0.16), transparent 42%);
  z-index: 0;
}

.home-hero-content {
  width: min(900px, 92vw);
  gap: 12px;
}

.hero-home {
  border: 0;
}

.home-hero-content h1 {
  margin: 0;
  color: var(--accent);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(2.7rem, 7vw, 5.7rem);
  line-height: 1;
  text-shadow: 0 0 14px rgba(0,0,0,0.65);
}

.hero-eyebrow {
  margin: 0;
  color: #fff;
  font-family: "Cinzel Decorative", sans-serif;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
}

.hero-subtitle {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 0 12px rgba(0,0,0,0.72);
}

.home-hero-actions,
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.home-event-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(760px, 100%);
  margin-top: 4px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: var(--accent);
  color: #003380;
  font-size: clamp(0.8rem, 1.45vw, 0.96rem);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transition: background 180ms ease, transform 180ms ease;
}

.home-event-notice:hover,
.home-event-notice:focus-visible {
  background: #fff0a8;
  transform: translateY(-2px);
}

.home-event-notice:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.home-event-notice__label {
  flex: 0 0 auto;
  padding-right: 10px;
  border-right: 1px solid rgba(0, 51, 128, 0.35);
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 0.78em;
}

.home-event-notice__arrow {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 1.25em;
}

.btn-primary-home {
  background: var(--accent);
  color: #003380;
  font-weight: 700;
}

.btn-primary-home:hover {
  background: #003380;
  color: #fff;
}

.hero-keywords {
  margin-top: 10px;
}

.home-hero-content .hero-keywords {
  font-size: clamp(0.88rem, 1.45vw, 1.05rem);
  gap: 8px;
}

.hero-keywords span {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 999px;
  background: rgba(0, 31, 84, 0.18);
}

.home-intro {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  max-width: 1050px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  text-align: left;
}

.home-intro-media {
  display: grid;
  place-items: center;
}

.home-intro-img {
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: var(--shadow);
}

.home-intro-copy h2 {
  margin: 0 0 14px;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(1.45rem, 2.8vw, 2.25rem);
  line-height: 1.2;
}

.home-intro-copy p {
  line-height: 1.65;
}

.philosophy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.philosophy-list span {
  padding: 7px 12px;
  border: 1px solid rgba(30, 58, 138, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
}

.service-grid,
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-card,
.trust-grid article {
  position: relative;
  min-height: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 213, 79, 0.95);
  border-radius: 18px;
  background: rgba(255,255,255,0.93);
  box-shadow: var(--shadow);
}

.service-card {
  display: flex;
  flex-direction: column;
}

.service-number {
  color: rgba(30, 58, 138, 0.32);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

.service-card h4,
.trust-grid strong,
.final-cta h3 {
  color: var(--brand);
}

.service-card h4 {
  margin: 10px 0 8px;
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 1.12rem;
}

.service-card p,
.trust-grid p,
.final-cta p {
  line-height: 1.58;
}

.service-card .btn2 {
  width: fit-content;
  margin-top: auto;
}

.event-badge {
  display: inline-flex;
  width: fit-content;
  margin: 4px 0 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 213, 79, 0.35);
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 700;
}

.trust-section {
  padding-top: 18px;
}

.faq-section {
  padding-top: 22px;
}

.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid rgba(30, 58, 138, 0.2);
}

.faq-item {
  border-bottom: 1px solid rgba(30, 58, 138, 0.2);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  color: var(--brand);
  cursor: pointer;
  font-family: "Quicksand", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: var(--brand);
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: "Inter", sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.faq-item[open] summary::after {
  color: #fff;
  background: var(--brand);
  transform: rotate(45deg);
}

.faq-item summary:focus-visible {
  outline: 3px solid rgba(30, 58, 138, 0.28);
  outline-offset: -3px;
}

.faq-answer {
  max-width: 720px;
  padding: 0 46px 20px 0;
}

.faq-answer p {
  margin: 0;
  line-height: 1.65;
}

.faq-contact {
  margin: 24px 0 0;
  text-align: center;
}

.trust-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-grid article {
  padding: 20px;
}

.trust-grid strong {
  display: block;
  margin-bottom: 8px;
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 0.98rem;
}

.reviews-cta {
  margin-top: 18px;
  text-align: center;
}

.final-cta {
  padding-top: 14px;
}

.final-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255, 213, 79, 0.22));
  box-shadow: var(--shadow);
}

.final-cta-panel h3 {
  margin: 0 0 8px;
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
}

.final-cta-panel p {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .home-intro,
  .final-cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .philosophy-list {
    justify-content: center;
  }

  .service-grid,
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .faq-item summary {
    gap: 14px;
    padding: 18px 0;
    font-size: 1rem;
  }

  .faq-answer {
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  #home .sec-head-stacked {
    text-align: left;
  }

  .hero-home {
    min-height: 78svh;
  }

  .home-hero-content {
    top: 0;
    justify-content: center;
  }

  .home-event-notice {
    align-items: flex-start;
    gap: 7px;
    padding: 8px 10px;
    font-size: 0.79rem;
  }

  .home-event-notice__label {
    padding-right: 7px;
  }

  .hero-keywords {
    font-size: 0.86rem;
  }

  .home-intro {
    padding: 24px 18px;
  }

  .home-intro-img {
    width: 170px;
    height: 170px;
  }

  .service-grid,
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .service-card,
  .trust-grid article,
  .final-cta-panel {
    border-radius: 14px;
  }
}

/* ============================
   PAGINE INTERNE - ALLINEAMENTO VISIVO
============================ */
.hero.container:not(.hero-home) {
  width: min(1100px, 92%);
  min-height: 430px;
  margin: 28px auto 0;
  border: 1px solid rgba(255, 213, 79, 0.75);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero.container:not(.hero-home)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0, 31, 84, 0.22));
  z-index: 0;
}

.hero.container:not(.hero-home) .panel {
  width: min(720px, 92%);
  padding: 28px;
  border: 1px solid rgba(255, 213, 79, 0.85);
  border-radius: 18px;
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow);
  text-align: center;
  backdrop-filter: blur(4px);
}

.hero.container:not(.hero-home) .panel h1,
.hero.container:not(.hero-home) .panel h2 {
  margin: 0 0 12px;
}

.hero.container:not(.hero-home) .panel p {
  margin-right: auto;
  margin-left: auto;
  max-width: 640px;
  line-height: 1.6;
}

#home > section.container:not(.hero):not(.final-cta):not(.newsletter-section) > .chisono,
#home > section.container:not(.hero):not(.final-cta):not(.newsletter-section) .about > .panel,
#home > section.container:not(.hero):not(.final-cta):not(.newsletter-section) .grid > .card {
  border-color: rgba(255, 213, 79, 0.95) !important;
  background: rgba(255,255,255,0.93) !important;
}

#home > section.container:not(.hero):not(.final-cta):not(.newsletter-section) {
  padding-top: 42px;
}

.newsletter-section {
  padding-top: 34px;
  padding-bottom: 14px;
}

.newsletter-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255, 213, 79, 0.22));
  box-shadow: var(--shadow);
}

.newsletter-cta .section-kicker {
  margin: 0 0 8px;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.newsletter-cta h3 {
  margin: 0 0 8px;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
}

.newsletter-cta p {
  margin-bottom: 0;
  line-height: 1.58;
}

.page-cta {
  padding-top: 14px;
}

.page-cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px;
  border: 1px solid var(--accent);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255, 213, 79, 0.2));
  box-shadow: var(--shadow);
}

.page-cta-panel h3 {
  margin: 0 0 8px;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
}

.page-cta-panel p {
  margin: 0;
  line-height: 1.58;
}

.page-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.activity-local {
  padding-top: 10px;
}

.activity-local-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  gap: 22px;
  align-items: start;
  padding: 24px;
  border: 1px solid rgba(255, 213, 79, 0.75);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.activity-local-panel h3 {
  margin: 0 0 10px;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.activity-local-panel p {
  margin: 0;
  line-height: 1.6;
}

.activity-local-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-local-list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
}

.activity-local-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.22);
}

.events-heading {
  margin-bottom: 18px;
}

.events-heading--past {
  margin-top: 38px;
}

.events-list {
  justify-content: center;
}

.events-list--upcoming {
  align-items: stretch;
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}

.events-list .evento-locandina {
  background: rgba(255,255,255,0.94);
}

.event-card-upcoming {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-card-upcoming h4 {
  min-height: 3.1em;
  margin-bottom: 0;
}

.event-page-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 90%;
  margin-top: 15px;
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.event-page-link .locandina-img {
  width: 100%;
  height: auto;
}

.event-page-link span {
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #f1f0dd;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.event-page-link:hover span,
.event-page-link:focus-visible span {
  color: #fff;
  background: var(--brand);
  transform: translateY(-2px);
}

.event-page-link:focus-visible {
  outline: 3px solid rgba(30, 58, 138, 0.28);
  outline-offset: 5px;
}

.event-card-action {
  margin-top: 18px;
}

.seminar-page {
  overflow: hidden;
}

.seminar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
  align-items: center;
  gap: clamp(28px, 6vw, 76px);
  padding-top: clamp(38px, 6vw, 72px);
  padding-bottom: clamp(34px, 5vw, 60px);
}

.seminar-eyebrow,
.seminar-note {
  margin: 0;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.seminar-hero h1 {
  max-width: 720px;
  margin: 12px 0;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: 1.15;
}

.seminar-subtitle {
  margin: 0;
  color: var(--brand-warm);
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 600;
}

.seminar-meta {
  display: grid;
  gap: 14px;
  margin: 30px 0;
}

.seminar-meta div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(30, 58, 138, 0.18);
}

.seminar-meta dt {
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.seminar-meta dd {
  margin: 0;
  line-height: 1.45;
}

.seminar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.seminar-note {
  margin-top: 24px;
  color: #a43b2d;
}

.seminar-hero-media {
  justify-self: center;
  width: min(100%, 400px);
}

.seminar-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 213, 79, 0.95);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.15);
}

.seminar-section {
  padding-top: 44px;
  padding-bottom: 44px;
}

.seminar-section .sec-head h2,
.seminar-band .sec-head h2 {
  margin: 0;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

.seminar-copy {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.7;
}

.seminar-copy p {
  margin: 0 0 18px;
}

.seminar-band {
  padding: 54px 0;
  border-top: 1px solid rgba(255, 213, 79, 0.8);
  border-bottom: 1px solid rgba(255, 213, 79, 0.8);
  background: rgba(255,255,255,0.7);
}

.seminar-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1050px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.seminar-topics li {
  padding: 20px;
  border: 1px solid rgba(255, 213, 79, 0.95);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.seminar-topics strong,
.seminar-participation h3 {
  display: block;
  margin-bottom: 9px;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: 1rem;
}

.seminar-topics span {
  display: block;
  line-height: 1.5;
}

.seminar-participation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}

.seminar-participation article {
  padding: 24px 0;
}

.seminar-participation article + article {
  padding-left: 28px;
  border-left: 1px solid rgba(30, 58, 138, 0.2);
}

.seminar-participation p,
.seminar-participation li {
  line-height: 1.62;
}

.seminar-participation ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.seminar-contact {
  padding-top: 18px;
  padding-bottom: 42px;
}

@media (max-width: 900px) {
  .seminar-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .seminar-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .seminar-meta {
    width: min(100%, 620px);
    text-align: left;
  }

  .seminar-actions {
    justify-content: center;
  }

  .seminar-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .seminar-hero {
    gap: 30px;
    padding-top: 28px;
  }

  .seminar-meta div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .seminar-hero-media {
    width: min(100%, 330px);
  }

  .seminar-section,
  .seminar-band {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .seminar-topics,
  .seminar-participation {
    grid-template-columns: 1fr;
  }

  .seminar-participation {
    gap: 0;
  }

  .seminar-participation article + article {
    padding-left: 0;
    border-top: 1px solid rgba(30, 58, 138, 0.2);
    border-left: 0;
  }
}

.document-grid {
  justify-items: center;
}

.document-card {
  width: min(100%, 320px);
  min-height: 175px;
  height: auto;
}

.document-card .actions {
  margin-top: 12px;
}

.document-card .btn2 {
  width: min(100%, 230px);
}

.content-panel {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px;
  border: 0.3px solid var(--accent);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: justify;
}

.content-panel h1 {
  margin-top: 0;
  color: var(--brand);
  font-family: "Cinzel Decorative", sans-serif;
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.2;
  text-align: center;
}

.section-kicker:empty,
.service-number:empty {
  display: none;
}

@media (max-width: 900px) {
  .newsletter-cta,
  .page-cta-panel,
  .activity-local-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .activity-local-list li {
    padding-left: 0;
  }

  .activity-local-list li::before {
    position: static;
    display: block;
    margin: 0 auto 6px;
  }
}

@media (max-width: 768px) {
  .hero.container:not(.hero-home) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 460px;
    margin-top: 18px;
    padding: 42px 14px;
    border-radius: 14px;
    overflow: visible;
    background-size: cover;
    background-position: center;
  }

  .hero.container:not(.hero-home) .panel,
  .newsletter-cta,
  .page-cta-panel,
  .activity-local-panel {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .hero.container:not(.hero-home) .panel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: rgba(255,255,255,0.94);
  }

  .hero.container:not(.hero-home) .panel h1,
  .hero.container:not(.hero-home) .panel h1 span,
  .hero.container:not(.hero-home) .panel h2,
  .hero.container:not(.hero-home) .panel h2 span {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  .hero.container:not(.hero-home) .panel p {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  #home > section.container:not(.hero):not(.final-cta):not(.newsletter-section) {
    padding-top: 28px;
  }

  #home > section.container:not(.hero):not(.final-cta):not(.newsletter-section) > .chisono,
  #home > section.container:not(.hero):not(.final-cta):not(.newsletter-section) .about > .panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  .evento-locandina {
    max-width: 100%;
  }

  .evento-locandina .lightbox-trigger {
    max-width: 100%;
  }

  .evento-locandina .locandina-img {
    width: min(100%, 260px) !important;
    height: auto !important;
    margin-right: auto;
    margin-left: auto;
  }

  .event-card-upcoming h4 {
    min-height: 0;
  }

  .evento-locandina img[style*="border-radius: 50%"],
  .evento-locandina .locandina-img[style*="border-radius: 50%"] {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover;
  }

  .expand-panel__content {
    line-height: 1.58;
  }
}