@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');







:root {



  --bg: #111111;



  --panel: #1b1b1b;



  --panel-2: #252525;



  --text: #f2f2f2;



  --muted: #aaaaaa;



  --line: #333333;



  --accent: #ffffff;



  --danger: #d74c4c;



  --overlay: rgba(0, 0, 0, 0.78);



  --radius: 12px;



  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);



  --nav-h: 72px;



}







* {



  box-sizing: border-box;



}







html,



body {



  margin: 0;



  padding: 0;



  min-height: 100%;



}







body {



  font-family: 'Montserrat', sans-serif;



  background: var(--bg);



  color: var(--text);



  line-height: 1.5;



}







body.modal-open {



  overflow: hidden;



}







a {



  color: inherit;



  text-decoration: none;



}







img,



video {



  max-width: 100%;



  display: block;



}







.hidden {



  display: none !important;



}







.muted {



  color: var(--muted);



}







.mt {



  margin-top: 1rem;



}







.padded {



  padding: 2rem 1rem;



}







.container {



  width: min(1200px, calc(100% - 2rem));



  margin: 0 auto;



}







.large-text {



  font-size: 1.1rem;



}







.row {



  display: flex;



  align-items: center;



}







.gap {



  gap: 1rem;



}







.grid2 {



  display: grid;



  grid-template-columns: repeat(2, minmax(0, 1fr));



  gap: 1rem;



}







.grid3 {



  display: grid;



  grid-template-columns: repeat(3, minmax(0, 1fr));



  gap: 1rem;



}







/* ================= NAV ================= */







.nav {



  position: sticky;



  top: 0;



  z-index: 1000;



  min-height: var(--nav-h);



  display: flex;



  justify-content: space-between;



  align-items: center;



  gap: 0.75rem;



  padding: 0.8rem 1rem;



  background: rgba(17, 17, 17, 0.94);



  backdrop-filter: blur(8px);



  border-bottom: 1px solid var(--line);



  overflow-x: auto;



  overflow-y: hidden;



  flex-wrap: nowrap;



}







.nav-left,



.nav-right {



  display: flex;



  align-items: center;



  gap: 0.75rem;



  flex-wrap: nowrap;



  white-space: nowrap;



}







.nav-left {



  flex: 0 0 auto;



}







.nav-right {



  flex: 1 1 auto;



  justify-content: flex-end;



  min-width: max-content;



}







#navLogo {



  height: 36px;



  width: auto;



  object-fit: contain;



}







.nav-link {



  position: relative;



  padding-bottom: 4px;



  opacity: 0.9;



}







.nav-link:hover {



  opacity: 1;



}







.search-box {



  display: flex;



  align-items: center;



  gap: 0.5rem;



}







/* ================= INPUT / BUTTONS ================= */







.in {



  width: 100%;



  padding: 0.7rem 0.85rem;



  border-radius: 10px;



  border: 1px solid var(--line);



  background: var(--panel);



  color: var(--text);



  outline: none;



}







.in:focus {



  border-color: #666;



}







textarea.in {



  resize: vertical;



  min-height: 110px;



}







.chip {



  border: 1px solid var(--line);



  background: var(--panel-2);



  color: var(--text);



  border-radius: 10px;



  padding: 0.65rem 1rem;



  cursor: pointer;



  font-weight: 600;



  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;



}







.chip:hover {



  transform: translateY(-1px);



}







.chip.primary {



  background: var(--accent);



  color: #111;



  border-color: transparent;



}







.chip.danger {



  background: var(--danger);



  border-color: transparent;



  color: white;



}







.chip.file {



  position: relative;



  overflow: hidden;



}







.chip.file input[type="file"] {



  position: absolute;



  inset: 0;



  opacity: 0;



  cursor: pointer;



}







/* ================= MAIN / PAGES ================= */







main {
  min-height: auto;
}

.page {
  min-height: auto;
}







#page-home {
  position: relative;
  height: calc(100vh - var(--nav-h) - 24px) !important;
  min-height: 0 !important;
  overflow: hidden;
}

.home-wrap {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.home-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: brightness(0.45);
}
.home-text {
  max-width: 900px;
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}







#page-about #aboutText {



  text-align: justify;



}







/* ================= BOXES ================= */







.box {



  background: var(--panel);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  padding: 1rem;



  box-shadow: var(--shadow);



}







/* ================= PROJECT GRID ================= */







.filter-bar {



  margin-bottom: 1rem;



}







#projectsGrid {



  margin-top: 1rem;



}







.card {



  background: var(--panel);



  border: 1px solid var(--line);



  border-radius: var(--radius);



  overflow: hidden;



  cursor: pointer;



  transition: transform 0.18s ease, box-shadow 0.18s ease;



  box-shadow: var(--shadow);



}







.card:hover {



  transform: translateY(-4px);



}







.card .cover {



  background: #000;



  aspect-ratio: 16 / 10;



  overflow: hidden;



}







.card .cover img {



  width: 100%;



  height: 100%;



  object-fit: cover;



}







.card .content {



  padding: 1rem;



}







.card h3 {



  margin: 0 0 0.35rem;



  font-size: 1.05rem;



}







.meta {



  color: var(--muted);



  font-size: 0.9rem;



}







/* ================= CONTACTS ================= */







#page-contacts ul {



  list-style: none;



  padding: 0;



  margin: 0;



}







#page-contacts li + li {



  margin-top: 0.45rem;



}







#mapFrame {



  width: 100%;



  min-height: 280px;



  border: 0;



  border-radius: 10px;



  background: #000;



}







/* ================= MODALS ================= */







.modal {



  position: fixed;



  inset: 0;



  z-index: 3000;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 1rem;



  background: var(--overlay);



}







.modal-content {



  width: min(100%, 900px);



  max-height: 92vh;



  overflow-y: auto;



  background: var(--panel);



  border: 1px solid var(--line);



  border-radius: 16px;



  box-shadow: var(--shadow);



  position: relative;



}







.modal-content.large {



  width: min(100%, 1100px);



}







.modal-content.wide {



  width: min(100%, 1280px);



}







.close-btn {



  position: absolute;



  top: 1rem;



  right: 1rem;



  z-index: 4;



}







.modal-gallery {



  position: relative;



  width: 100%;



  aspect-ratio: 16 / 9;



  background: #000;



  overflow: hidden;



  border-top-left-radius: 16px;



  border-top-right-radius: 16px;



}







.content-element,



#modalImage,



#modalVideo {



  width: 100%;



  height: 100%;



  object-fit: contain;



  background: #000;



}







.nav-img {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  z-index: 3;



  border: none;



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



  color: white;



  font-size: 2rem;



  line-height: 1;



  padding: 0.65rem 0.85rem;



  cursor: pointer;



  border-radius: 12px;



}







.nav-img.left {



  left: 0.75rem;



}







.nav-img.right {



  right: 0.75rem;



}







.nav-img[hidden] {



  display: none !important;



}







.modal-info {



  padding: 1.25rem 1.25rem 1.5rem;



}







/* ================= ADMIN ================= */







.tabs {



  display: flex;



  flex-wrap: wrap;



  gap: 0.75rem;



  margin-bottom: 1rem;



}







.tab {



  border: 1px solid var(--line);



  background: var(--panel-2);



  color: var(--text);



  border-radius: 10px;



  padding: 0.65rem 1rem;



  cursor: pointer;



  font-weight: 600;



}







.tab.active {



  background: white;



  color: #111;



  border-color: transparent;



}







.tabpanel {



  display: none;



}







#adminProjectsList {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));



  gap: 1rem;



  margin-top: 1rem;



}







.project-item {



  background: var(--panel);



  border: 1px solid var(--line);



  border-radius: 14px;



  padding: 1rem;



  box-shadow: var(--shadow);



}







.project-item h4 {



  margin: 0 0 0.3rem;



}







.editor-preview {



  display: grid;



  grid-template-columns: auto 1fr auto;



  gap: 0.75rem;



  align-items: center;



  background: #000;



  border-radius: 12px;



  padding: 0.75rem;



  margin-top: 1rem;



}







.editor-preview img,



.editor-preview video {



  width: 100%;



  max-height: 360px;



  object-fit: contain;



  background: #000;



  border-radius: 10px;



}







#adminEditPrev,



#adminEditNext {



  border: none;



  background: rgba(255, 255, 255, 0.12);



  color: white;



  font-size: 1.25rem;



  width: 42px;



  height: 42px;



  border-radius: 50%;



  cursor: pointer;



}







.thumbs,



#adminEditThumbs {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(90px, 90px));



  gap: 10px;



  align-items: start;



}







.media-item {



  width: 90px;



  background: var(--panel-2);



  border: 1px solid var(--line);



  border-radius: 8px;



  padding: 6px;



}







.media-item img,



.media-item video {



  width: 100%;



  height: 60px;



  object-fit: cover;



  border-radius: 6px;



  cursor: pointer;



  background: #000;



}







.remove-btn {



  width: 100%;



  margin-top: 6px;



  border: none;



  background: var(--danger);



  color: white;



  border-radius: 6px;



  padding: 4px 6px;



  cursor: pointer;



  font-weight: 600;



  font-size: 11px;



}















/* ================= COOKIE ================= */







.cookie-banner {



  position: fixed;



  left: 0;



  right: 0;



  bottom: 0;



  z-index: 5000;



  display: flex;



  justify-content: center;



  padding: 1rem;



}







.cookie-inner {



  width: min(100%, 760px);



  background: var(--panel);



  border: 1px solid var(--line);



  border-radius: 14px;



  box-shadow: var(--shadow);



  padding: 1rem;



}







.cookie-buttons {



  display: flex;



  gap: 0.75rem;



  margin-top: 0.75rem;



}







/* ================= FOOTER ================= */







.foot {
  border-top: 1px solid var(--line);
  padding: 0;
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
}







/* ================= RESPONSIVE ================= */







  .nav-right {



    flex-wrap: wrap;



  }



}







@media (max-width: 640px) {



  .grid3 {



    grid-template-columns: 1fr;



  }







  .modal {



    padding: 0.5rem;



  }







  .modal-content.large,



  .modal-content.wide,



  .modal-content {



    width: 100%;



  }







  .nav-img {



    font-size: 1.5rem;



    padding: 0.55rem 0.7rem;



  }







  .editor-preview {



    grid-template-columns: 1fr;



  }







  #adminEditPrev,



  #adminEditNext {



    width: 100%;



    border-radius: 10px;



  }







  .cookie-buttons {



    flex-direction: column;



  }



}







.nav-left a {



  display: flex;



  align-items: center;



  gap: 0.75rem;



  font-weight: 700;



  font-size: 1.1rem;



}







#navLogo {



  height: 36px;



  width: auto;



  object-fit: contain;



}







/* ===== PREVIEW EDIT PROGETTO ===== */







#adminEditImage,



#adminEditVideo {



  max-width: 100%;



  width: auto;



  max-height: 300px;



  height: auto;



  display: block;



  margin: 0 auto;



  border-radius: 10px;



  background: #000;



}







/* contenitore preview */



#adminProjectEditModal .preview {



  display: flex;



  justify-content: center;



  align-items: center;



  min-height: 320px;



}







#adminEditImage {



  max-height: 300px !important;



  width: auto !important;



}







#adminEditVideo {



  max-height: 300px !important;



  width: auto !important;



}











/* ===== PREVIEW EDIT PROGETTO ===== */



.editor-preview {



  display: grid !important;



  grid-template-columns: 44px minmax(0, 1fr) 44px !important;



  align-items: center !important;



  gap: 12px;



  min-height: 220px;



  max-height: 320px;



  padding: 12px;



  background: #000;



  border-radius: 12px;



  overflow: hidden;



}







#adminEditImage,



#adminEditVideo {



  display: block;



  width: 100% !important;



  max-width: 520px !important;



  height: 220px !important;



  max-height: 220px !important;



  margin: 0 auto !important;



  object-fit: contain !important;



  background: #000;



  border-radius: 8px;



}







#adminEditPrev,



#adminEditNext {



  width: 44px;



  height: 44px;



  border: none;



  border-radius: 50%;



  background: rgba(255,255,255,0.14);



  color: white;



  font-size: 1.2rem;



  cursor: pointer;



  flex: 0 0 auto;



}







@media (max-width: 640px) {



  .nav {



    gap: 0.5rem;



    padding: 0.65rem 0.75rem;



  }







  .nav-left a {



    font-size: 0.98rem;



    gap: 0.5rem;



  }







  #navLogo {



    height: 28px;



  }







  .nav-right {



    gap: 0.45rem;



  }







  .nav-link {



    font-size: 0.88rem;



  }







  .search-box {



    display: flex;



    align-items: center;



    gap: 0.35rem;



    min-width: 170px;



  }







  .search-box .in {



    min-width: 90px;



    padding: 0.55rem 0.65rem;



  }







  .chip {



    padding: 0.5rem 0.75rem;



    font-size: 0.85rem;



  }



}

.home-text {
  max-width: 650px;
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ===== CONTATTI COMPATTI SENZA FASCIA GRANDE ===== */

#page-contacts {
  min-height: calc(100vh - var(--nav-h) - 24px) !important;
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
}

#page-contacts .container {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}

#page-contacts .box {
  padding: 0.75rem;
}

#page-contacts .grid2 {
  gap: 0.75rem;
}

#page-contacts .mt {
  margin-top: 0.5rem;
}

#mapFrame {
  min-height: 200px !important;
  height: 200px !important;
}

.foot {
  height: 24px;
  line-height: 24px;
  padding: 0;
}

/* ===== TESTO CENTRATO INLINE ===== */

.text-center-inline {
  display: block;
  width: 100%;
  text-align: center;
}