:root{

  --bg:#000;

  --secondary:#121212;

  --secondary-2:#1a1a1a;



  --line: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);

  --muted: rgba(255,255,255,.70);



  --shadow: 0 10px 35px rgba(0,0,0,.55);



  --radius-lg: 22px;

  --radius-md: 16px;



  --max: 1120px;

  --pad: 18px;



  --accent: 200 200 200;

}



*{ box-sizing:border-box; }

*,

*::before,

*::after{

box-sizing:border-box;

max-width:100%;

}



html,body{ height:100%; }

body{

  margin:0;

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

  color: var(--text);

  background: var(--bg);

  overflow-x:hidden;

}

a{ color:inherit; text-decoration:none; }



.container{

  width:min(var(--max), calc(100% - var(--pad)*2));

  margin:0 auto;

}



/* =========================

   HEADER (nome centrato + menu)

========================= */

header{

  position: sticky;

  top: 0;

  inset: 0 0 auto 0;

  z-index: 1000;

  padding: 12px 0;

  backdrop-filter: blur(14px);

  background: linear-gradient(to bottom, rgba(0,0,0,.86), rgba(0,0,0,.30));

  border-bottom: 1px solid rgba(255,255,255,.08);

}



.topbar{

  position: relative;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 12px;

}



/* colonne laterali per mantenere il titolo perfettamente centrato */

.topbar-side{

  display:flex;

  align-items:center;

  gap:12px;

}

.topbar-side.left{

  min-width: 40px; /* simmetria col bottone hamburger su mobile */

}

.topbar-side.right{

  justify-content:flex-end;

  flex: 1 1 auto;

}



/* Nome artista centrato */

.brand-center{

  position:absolute;

  left:50%;

  transform: translateX(-50%);

  display:inline-block;

  padding: 6px 10px;



  font-size: clamp(18px, 3.4vw, 28px);

  letter-spacing: 0.35em;

  text-transform: uppercase;

  font-weight: 500;

  text-align:center;

  white-space: nowrap;

  color: rgba(255,255,255,.95);

}



/* Hamburger (mobile) */

.menu-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width: 40px;

  height: 40px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);

  background: rgba(255,255,255,.05);

  color: var(--text);

  cursor:pointer;

}

.menu-btn:active{ transform: translateY(1px); }



/* Tabs (desktop) */

nav.tabs{

  display:flex;

  justify-content:center;

  gap:8px;

  padding:6px;



  border-radius:999px;

  border:1px solid rgba(255,255,255,.14);

  background:rgba(255,255,255,.04);

  box-shadow:0 10px 30px rgba(0,0,0,.35);

}



nav.tabs::-webkit-scrollbar{

  display:none;

}





.tab{

  padding: 10px 14px;

  border-radius: 999px;

  color: var(--muted);

  font-size: 12px;

  letter-spacing:.06em;

  text-transform: uppercase;

  border: 1px solid transparent;

  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;

  user-select:none;

  white-space: nowrap;

}

.tab:hover{

  background: rgba(255,255,255,.06);

  color: var(--text);

  transform: translateY(-1px);

}

.tab[aria-current="page"]{

  color: var(--text);

  background: var(--secondary);

  border-color: rgba(255,255,255,.18);

}



/* CTA (desktop) */

.cta{

  display:none; /* mobile-first */

  gap:10px;

  align-items:center;

}

.btn{

  padding: 10px 14px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);

  background: rgba(255,255,255,.05);

  color: var(--text);

  font-size: 13px;

  letter-spacing:.04em;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;

}

.btn:hover{

  transform: translateY(-1px);

  background: rgba(255,255,255,.08);

  border-color: rgba(255,255,255,.24);

}

.btn.primary{

  background: var(--secondary);

  border-color: rgba(255,255,255,.18);

}





/* Spaziatura pagina */

main{ padding-top: 20px; padding-bottom: 40px; }



/* =========================

   HERO (solo homepage)

========================= */

.hero{

  position: relative;

  min-height: 520px;

  height: calc(92vh - 86px); /* mobile-friendly */

  border-radius: var(--radius-lg);

  overflow:hidden;

  border: 1px solid rgba(255,255,255,.12);

  box-shadow: var(--shadow);

  background: #050505;

}

.slides{ position:absolute; inset:0; display:grid; }

.slide{

  grid-area:1/1;

  opacity:0;

  transform: scale(1.02);

  transition: opacity .8s ease, transform 1.2s ease;

  background-size: cover;

  background-position: center;

  filter: saturate(1.02) contrast(1.05);

}

.slide.active{ opacity:1; transform: scale(1); }



.hero::before{

  content:"";

  position:absolute; inset:0;

  /*background: linear-gradient(90deg, rgba(0,0,0,.80), rgba(0,0,0,.30) 55%, rgba(0,0,0,.74));*/

  z-index:2;

}

.hero-content{

  position:relative;

  z-index:3;

  height:100%;

  display:flex;

  align-items:flex-end;

  padding: 18px;

}

.hero-card{

  width: min(640px, 100%);

  padding: 18px;

  border-radius: var(--radius-lg);

  background: rgba(18,18,18,.74);

  border: 1px solid rgba(255,255,255,.14);

  backdrop-filter: blur(14px);

}

.kicker{

  display:inline-flex;

  gap:10px;

  align-items:center;

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.12);

  color: var(--muted);

  font-size: 12px;

  letter-spacing:.12em;

  text-transform: uppercase;

  margin-bottom: 10px;

}

.dot{

  width:8px; height:8px;

  border-radius:999px;

  background: rgb(var(--accent));

  box-shadow: 0 0 0 6px rgba(var(--accent),.10);

}

.hero-card h2{

  margin: 0 0 8px;

  font-size: clamp(26px, 6vw, 44px);

  line-height: 1.08;

  letter-spacing: -0.02em;

}

.hero-card p{

  margin: 0 0 14px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.6;

  max-width: 60ch;

}

.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }



/* controlli carosello */

.carousel-ui{

  position:absolute;

  inset: auto 12px 12px 12px; /* mobile: full width */

  z-index: 4;

  display:flex;

  justify-content:space-between;

  gap:10px;

  align-items:center;

  padding: 10px 12px;

  border-radius: 999px;

  background: rgba(18,18,18,.65);

  border: 1px solid rgba(255,255,255,.14);

  backdrop-filter: blur(14px);

}

.icon-btn{

  width: 38px; height: 38px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);

  background: rgba(255,255,255,.05);

  color: var(--text);

  display:grid;

  place-items:center;

  cursor:pointer;

}

.dots{ display:flex; gap:8px; padding: 0 4px; }

.dots button{

  width: 8px; height: 8px;

  border-radius:999px;

  border:0;

  cursor:pointer;

  background: rgba(255,255,255,.30);

}

.dots button[aria-current="true"]{ background: rgb(var(--accent)); }



/* =========================

   SEZIONI / GRIGLIE

========================= */

.section{

  margin-top: 22px;

  padding: 18px;

  border-radius: var(--radius-lg);

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(18,18,18,.55);

  box-shadow: 0 14px 40px rgba(0,0,0,.35);

}

.section h3{ margin:0 0 10px; font-size: 18px; letter-spacing:.02em; }

.section p.lead{

  margin: 0;

  color: var(--muted);

  line-height: 1.6;

}



.grid{

  display:grid;

  grid-template-columns: 1fr;

  gap: 12px;

  margin-top: 12px;

}

.card{

  border-radius: var(--radius-md);

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.04);

  padding: 16px;

}

.card p{ margin:6px 0 0; color: var(--muted); line-height:1.5; }



/* Sub-tabs per pagine Opere */

.subtabs-wrap{

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid rgba(255,255,255,.10);

}



nav.subtabs{

  display:flex;

  justify-content:center;

  gap:8px;

  padding:6px;



  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.03);

}



nav.subtabs::-webkit-scrollbar{

  display:none;

}



.subtab{

  padding: 9px 12px;

  border-radius:999px;

  color: var(--muted);

  font-size: 12px;

  letter-spacing:.06em;

  text-transform: uppercase;

  border: 1px solid transparent;

  white-space: nowrap;

}

.subtab:hover{ background: rgba(255,255,255,.06); color: var(--text); }

.subtab[aria-current="page"]{

  background: var(--secondary);

  border-color: rgba(255,255,255,.18);

  color: var(--text);

}



footer{

  padding: 26px 0 10px;

  color: rgba(255,255,255,.55);

  font-size: 13px;

  text-align:center;

}



/* =========================

   RESPONSIVE / DESKTOP

========================= */

@media (max-width: 899px){

  header > .container > nav.tabs{

    display:none;

  }



  .mobile-panel nav.tabs{

    display:flex;

  }

}



@media (min-width: 900px){

  :root{ --pad: 24px; }

  header{ padding: 16px 0; }

  main{ padding-top: 20px; }



  .menu-btn{ display:none; }

  .cta{ display:flex; }

  nav.tabs{ display:flex; }



  .topbar-side.left{

    min-width: 220px; /* bilancia il blocco destro */

  }



  .hero{

    height: calc(100vh - 92px);

    min-height: 580px;

    max-height: 900px;

  }

  .hero-content{ padding: 40px; }

  .hero-card{ padding: 22px; }



  .carousel-ui{

    inset: auto 16px 16px auto;

    justify-content:flex-start;

    width: auto;

  }



  .grid{ grid-template-columns: repeat(3, 1fr); }

}





/* ===== GALLERY GRID 3 COLONNE RESPONSIVE ===== */



.gallery {

  display: grid;

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

  gap: 20px;

  margin-top: 40px;

}



.gallery a {

  display: block;

  overflow: hidden;

  border-radius: 4px;

}



.gallery img {

  width: 100%;

  height: 300px; /* Altezza uniforme */

  object-fit: cover;

  display: block;

  transition: transform 0.3s ease;

}



.gallery img:hover {

  transform: scale(1.05);

}



/* Tablet */

@media (max-width: 992px) {

  .gallery {

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

  }

}



/* Mobile */

@media (max-width: 576px) {

  .gallery {

    grid-template-columns: 1fr;

  }



  .gallery img {

    height: auto;

  }

}



.mostre-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  margin-top: 40px;

}



.mostre-colonna ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.mostre-colonna li {

  margin-bottom: 10px;

  line-height: 1.5;

  font-size: 15px;

}



@media (max-width: 768px) {

  .mostre-grid {

    grid-template-columns: 1fr;

  }

}





/* videooo */



.video-grid {

  display: grid;

  gap: 40px;

}



@media (min-width: 900px) {

  .video-grid {

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

  }

}



.video-item iframe {

  width: 100%;

  aspect-ratio: 16 / 9;

  border: none;

}



.video-title {

  margin-top: 10px;

  font-size: 14px;

  opacity: 0.7;

}





@media (max-width:700px){



  nav.tabs,

  nav.subtabs{

    display:grid;

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

    gap:10px;



    padding:10px;

    border-radius:18px;

  }



  .tab,

  .subtab{

    display:flex;

    align-items:center;

    justify-content:center;



    text-align:center;

    padding:12px 10px;



    white-space:normal;

    line-height:1.3;

    min-height:44px; /* altezza uniforme */

  }



}



}





/* =========================

   MOBILE MENU FIX

========================= */

@media (max-width: 768px){



  /* MENU PRINCIPALE */

  nav.tabs{

    flex-wrap: wrap;

    gap:6px;

    max-width: 100%;

  }



  nav.tabs .tab{

    flex: 1 1 auto;

    text-align:center;

    font-size:11px;

    padding:8px 10px;

  }



  /* quando si entra nelle pagine opere il menu resta compatto */

  body:has(.subtabs) nav.tabs{

    margin-bottom:4px;

  }



  /* MENU SECONDARIO OPERE */

  nav.subtabs{

    flex-wrap: wrap;

    border-radius:16px;

    padding:8px;

  }



  nav.subtabs .subtab{

    flex: 1 1 calc(50% - 8px);

    text-align:center;

    white-space:normal;

    font-size:11px;

    padding:8px 6px;

  }



}



/* =========================

   MENU CATEGORIE MOBILE

========================= */



.subtabs-toggle{

  display:none;

}



@media (max-width:768px){



  .subtabs-toggle{

    display:block;

    margin:12px auto;

    padding:10px 18px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.05);

    color:white;

    font-size:13px;

    letter-spacing:.08em;

  }



  nav.subtabs{

    display:none;

    flex-direction:column;

    gap:8px;

    margin-top:10px;

  }



  nav.subtabs.open{

    display:flex;

  }



}





/* =========================

   MOBILE HAMBURGER MENU

========================= */



.hamburger{

display:none;

position:fixed;

top:18px;

right:18px;

width:30px;

height:22px;

z-index:1001;

background:none;

border:none;

cursor:pointer;

}



.hamburger span{

display:block;

height:3px;

width:100%;

background:white;

margin:5px 0;

transition:0.3s;

}



/* animazione hamburger -> X */



.menu-open .hamburger span:nth-child(1){

transform:rotate(45deg) translate(5px,5px);

}



.menu-open .hamburger span:nth-child(2){

opacity:0;

}



.menu-open .hamburger span:nth-child(3){

transform:rotate(-45deg) translate(6px,-6px);

}



/* overlay scuro */



.mobile-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

visibility:hidden;

transition:0.3s;

z-index:999;

}



/* menu mobile */



.mobile-menu{

position:fixed;

top:0;

right:0;

width:260px;

height:100dvh;

background:#111;

padding:90px 30px;

display:flex;

flex-direction:column;

gap:22px;

transform:translateX(100%);

transition:transform .35s ease;

z-index:1000;

}



.mobile-menu a{

color:white;

text-decoration:none;

font-size:15px;

letter-spacing:.08em;

}



/* stato aperto */



.menu-open .mobile-menu{

transform:translateX(0);

}



.menu-open .mobile-overlay{

opacity:1;

visibility:visible;

}



/* SOLO MOBILE */



@media (max-width:768px){



nav.tabs{

display:none;

}



.hamburger{

display:block;

}



}







/* =========================

   FIX BACKGROUND INDEX MOBILE

========================= */



@media (max-width:768px){



body.home{

height:100dvh;

min-height:100dvh;

overflow:hidden;

}



body.home::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100dvh;

background:inherit;

background-size:cover;

background-position:center;

z-index:-1;

}



}



/* =========================

   HERO FIX MOBILE INDEX

========================= */



@media (max-width:768px){



body.home .hero{

height: calc(100dvh - 90px);

min-height: auto;

}



}





/* =========================

   MOBILE MENU (hamburger animato)

========================= */



.hamburger{

display:none;

position:fixed;

top:18px;

right:18px;

width:30px;

height:22px;

z-index:1001;

background:none;

border:none;

cursor:pointer;

}



.hamburger span{

display:block;

height:3px;

width:100%;

background:white;

margin:5px 0;

transition:0.3s;

}



/* animazione hamburger -> X */



.menu-open .hamburger span:nth-child(1){

transform:rotate(45deg) translate(5px,5px);

}



.menu-open .hamburger span:nth-child(2){

opacity:0;

}



.menu-open .hamburger span:nth-child(3){

transform:rotate(-45deg) translate(6px,-6px);

}



/* overlay scuro */



.mobile-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

visibility:hidden;

transition:0.3s;

z-index:999;

}



/* menu laterale */



.mobile-menu{

position:fixed;

top:0;

right:-260px;

width:260px;

height:100vh;

background:#111;

padding:90px 30px;

display:flex;

flex-direction:column;

gap:22px;

transition:0.35s;

z-index:1000;

}



.mobile-menu a{

color:white;

text-decoration:none;

font-size:15px;

letter-spacing:.08em;

}



.menu-open .mobile-menu{

right:0;

}



.menu-open .mobile-overlay{

opacity:1;

visibility:visible;

}



/* =========================

   MOBILE LAYOUT

========================= */



@media (max-width:768px){



/* nasconde tabs desktop */



nav.tabs{

display:none;

}



/* hamburger visibile */



.hamburger{

display:block;

}



/* HERO FIX */



body.home .hero{

height: calc(100dvh - 90px);

min-height:auto;

}



/* griglia menu opere */



nav.subtabs{

flex-wrap:wrap;

border-radius:16px;

padding:8px;

}



nav.subtabs .subtab{

flex:1 1 calc(50% - 8px);

text-align:center;

white-space:normal;

font-size:11px;

padding:8px 6px;

}



}





@media (max-width:768px){



body.home .hero{

height: calc(100dvh - 90px);

min-height:auto;

}



}



html{

overflow-x:hidden;

}





/* =========================

   SUBTABS TABLET FIX

========================= */



@media (max-width:1100px){



nav.subtabs{

flex-wrap:wrap;

justify-content:center;

gap:6px;

}



nav.subtabs .subtab{

flex:0 1 auto;

font-size:11px;

padding:8px 10px;

}



}







.contact-minimal a{

  color:#d6d6d6;

  text-decoration:none;

  transition:all .2s ease;

}



.contact-minimal a:hover{

  color:#ffffff;

  text-decoration:underline;

}