:root{

  --blue-900:#0d47a1;

  --blue-800:#1565c0;

  --blue-700:#1976d2;

  --blue-600:#1e88e5;

  --blue-500:#2196f3;

  --blue-400:#42a5f5;

  --border:rgba(255,255,255,.15);

  --text:#fff;

}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  background: linear-gradient(180deg,var(--blue-700),var(--blue-600) 40%, var(--blue-500));

  color: var(--text);

}



/* topbar */

.topbar{

  display:flex;align-items:center;justify-content:space-between;

  gap:.75rem;padding:.45rem 1rem;background:var(--blue-900);font-size:.92rem;border-bottom:1px solid var(--border)

}

.topbar a, .topbar span{color:var(--text);opacity:.95;text-decoration:none}



/* header + nav */

.header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg, #ffffff 0%, #ffffff 35%, #1976d2 70%, #0d47a1 100%);border-bottom:1px solid var(--border)}

.header-inner{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;max-width:1200px;margin:0 auto}

.brand img{height:65px;display:block}

.search{Flex-grow: 1;

    max-width: 600px;

    margin-left: auto;

    display: flex;

    justify-content: space-between;}

.search input{width:100%;padding:10px 20px;border-radius:.75rem;border:1px solid var(--border);background:#ffffff;color:#0d47a1;outline:none}

.actions{display:flex;gap:.75rem}

.actions a{color:var(--text);text-decoration:none;opacity:.95}



/* nav */



.nav-inner {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 0.5rem;       /* margine interno coerente con il flusso */

  width: 100%;              /* fa sì che il contenitore occupi tutto lo spazio disponibile */

  display: flex;

  justify-content: flex-start; /* allinea a sinistra */

  gap: 1rem;

}



@media (max-width: 700px) {

  .nav-inner {

    flex-wrap: wrap;     /*  le voci vanno a capo */

    justify-content: center;  /* o flex-start, se preferisci */

  }

}



.nav{

  display:flex;gap:1rem;padding:.5rem 1rem;background:var(--blue-700);

  overflow:visible;justify-content:flex-start

}

.nav a{color:#fff;text-decoration:none;padding:.6rem .8rem;border-radius:.5rem;white-space:nowrap;font-weight:600}

.nav a:hover{background:rgba(255,255,255,.12)}





/* hero */

.hero{background:linear-gradient(160deg,var(--blue-700),var(--blue-800));border-bottom:1px solid var(--border)}

.hero-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;max-width:1200px;margin:0 auto;padding:3rem 1.25rem}

.hero h1{font-size:2.4rem;line-height:1.15;margin:.25rem 0 .75rem}

.hero p{opacity:.95;max-width:60ch;margin:0 0 1.25rem}

.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap}

.btn{display:inline-block;background:#fff;color:var(--blue-800);padding:.8rem 1rem;border-radius:.75rem;border:0;font-weight:700;text-decoration:none}

.btn.alt{background:transparent;color:#fff;border:1px solid var(--border)}

.hero-visual{border-radius:1rem;border:1px solid var(--border);overflow:hidden;background:rgba(255,255,255,.06)}

.hero-visual img{width:100%;height:auto;display:block}



/* sections */

.section{max-width:1200px;margin:0 auto;padding:2rem 1.25rem}

.section h2{font-size:1.6rem;margin:0 0 1rem}

.grid-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}

.tile{

  background:var(--blue-700);border:1px solid var(--border);border-radius:1rem;padding:1.25rem;min-height:110px;

  display:flex;align-items:flex-end;justify-content:flex-start;background-size:cover;background-position:center

}

.tile h3{margin:0}

.tile a{color:#fff;text-decoration:none;font-weight:700}



/* cards */

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}

.card{background:var(--blue-700);border:1px solid var(--border);border-radius:1rem;overflow:hidden}

.card img{width:100%;height:150px;object-fit:cover;display:block}

.card .content{padding:1rem}

.card .content h3{margin:.2rem 0 .5rem;font-size:1.1rem}

.card .content p{opacity:.95;margin:0}



/* gallery */

.gallery {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1rem;

}



.gallery a {

  position: relative;

  display: block;

  width: 350px;

  height: 250px;

  border-radius: 12px;

  overflow: hidden;

  flex-shrink: 0;

  box-shadow: 0 3px 9px rgba(0,0,0,0.8);

}



.gallery img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  transition: transform 0.3s ease;

}



.gallery img:hover {

  transform: scale(1.02);

}



/* --- Effetto testo al passaggio del mouse --- */

.gallery-item {

  position: relative;

  display: inline-block;

  overflow: hidden;

  border-radius: 12px;

}



.gallery-item img {

  width: 100%;

  height: auto;

  display: block;

  transition: transform 0.3s ease;

}



/* sovrapposizione del testo */

.gallery-item .caption {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 1rem 0;

  background: rgba(0,0,0,0.6);

  color: #fff;

  font-weight: 500;

  font-size: 1.1rem;

  text-align: center;

  opacity: 0;

  transform: translateY(100%);

  transition: all 0.3s ease;

}



/* effetto al passaggio del mouse */

.gallery-item:hover img {

  transform: scale(1.05);

}



.gallery-item:hover .caption {

  opacity: 1;

  transform: translateY(0);

}



/* footer */

.footer{background:var(--blue-900);border-top:1px solid var(--border);margin-top:2rem}

.footer-inner{max-width:1200px;margin:0 auto;padding:2rem 1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}

.footer h4{margin:.25rem 0 .75rem}

.footer a{color:#fff;opacity:.9;text-decoration:none;display:block;margin:.25rem 0}

.footer-bottom{border-top:1px solid var(--border);padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;opacity:.9}



/* === FILIGRANA DI SFONDO CENTRATA === */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  background: url("assets/filigrana.svg") no-repeat center center;

  background-size: 80%;

  opacity: 0.4;

  filter: brightness(0) invert(1);

  pointer-events: none;

  z-index: 0;

}



/* Assicura che il contenuto resti sopra la filigrana */

body > * {

  position: relative;

  z-index: 1;

}





[id] {

  scroll-margin-top: 140px; /* oppure regola a piacere, es. 120px */

}





/* responsive */

@media (max-width: 900px){

  .hero-inner{grid-template-columns:1fr}

}



.actions{display:none !important}



.back-link {

  color: #fff !important;

}

.back-link:hover {

  color: #ddd !important;

}



.grid-tiles {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 4 colonne adattive */

  gap: 20px;

}

.tile {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  height: 170px;

  background-size: cover;

  background-position: center;

  color: white;

  text-decoration: none;

  border-radius: 10px;

  overflow: hidden;

  transition: transform 0.4s ease, opacity 0.4s ease;

}



/* effetto zoom: */

.tile:hover {

  transform: scale(1.05);

  opacity: 0.9; /* effetto "illuminazione" */

}



/* Effetto glow sul testo */

.tile h3 {

  font-size: 1.5rem;

  text-shadow: 0 0 15px rgba(0,0,0,0.2);

  transition: text-shadow 0.3s ease, color 0.3s ease;

}



.tile:hover h3 {

  text-shadow:

    0 0 10px rgba(255, 0, 0, 0.7),

    0 0 20px rgba(255, 0, 0, 0.8),

    0 0 30px rgba(255, 0, 0, 0.9);

}