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

   PALAZZETTO DELLO SPORT ROMA

   STILE UNIFORME AETOS

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



:root{

  --navy:#061831;

  --blue:#075f8f;

  --light-blue:#8fd3ff;

  --text:#263044;

  --muted:#657286;

  --light:#f3f6f9;

  --white:#ffffff;

}





*{

  margin:0;

  padding:0;

  box-sizing:border-box;

}





html{

  scroll-behavior:smooth;

  scroll-padding-top:105px;

}





body{

  font-family:Arial, Helvetica, sans-serif;



  color:var(--text);



  line-height:1.7;



  background:#ffffff;



  overflow-x:hidden;

}





a{

  text-decoration:none;

}





img{

  display:block;

  max-width:100%;

}





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

   HEADER

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



.header{

  position:fixed;



  top:0;

  left:0;



  width:100%;

  min-height:100px;



  z-index:1000;



  display:flex;



  align-items:center;

  justify-content:space-between;



  padding:12px 4% 12px 2.2%;



  background:rgba(6,24,49,.94);



  backdrop-filter:blur(12px);



  box-shadow:0 5px 20px rgba(0,0,0,.15);

}





.logo{

  display:flex;



  align-items:center;



  gap:14px;



  flex-shrink:0;



  color:#ffffff;

}





.logo-image-box{

  display:flex;



  align-items:center;

  justify-content:center;



  padding:5px 8px;



  background:rgba(220,240,252,.90);



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



  border-radius:9px;

}





.logo-symbol{

  width:115px;



  height:auto;



  object-fit:contain;

}





.logo-text{

  display:flex;



  align-items:baseline;



  gap:9px;



  white-space:nowrap;

}





.logo-name{

  color:#ffffff;



  font-size:27px;



  font-weight:900;



  letter-spacing:1px;

}





.logo-sector{

  color:var(--light-blue);



  font-size:21px;



  font-weight:900;



  letter-spacing:2px;

}





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

   MENU

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



.main-nav{

  display:flex;



  align-items:center;



  gap:28px;

}





.main-nav a{

  position:relative;



  color:#ffffff;



  font-size:16px;



  font-weight:700;



  transition:color .25s ease;

}





.main-nav a::after{

  content:"";



  position:absolute;



  left:0;

  bottom:-7px;



  width:0;



  height:2px;



  background:var(--light-blue);



  transition:width .25s ease;

}





.main-nav a:hover{

  color:var(--light-blue);

}





.main-nav a:hover::after{

  width:100%;

}





.menu-button{

  display:none;



  border:0;



  background:transparent;



  color:#ffffff;



  font-size:30px;



  cursor:pointer;

}





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

   HERO

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



.hero{

  position:relative;



  min-height:100vh;



  display:flex;



  align-items:flex-end;



  overflow:hidden;



  padding:170px 7% 80px;



  color:#ffffff;



  background:var(--navy);

}





.hero-slide{

  position:absolute;



  inset:0;



  z-index:0;



  background-position:center;



  background-size:cover;



  background-repeat:no-repeat;



  opacity:0;



  transform:scale(1.06);



  transition:

    opacity 1.5s ease,

    transform 7s ease;

}





.hero-slide.active{

  opacity:1;



  transform:scale(1);

}





.hero-overlay{

  position:absolute;



  inset:0;



  z-index:1;



  background:linear-gradient(

    180deg,

    rgba(6,24,49,.10),

    rgba(6,24,49,.95)

  );

}





.hero-content{

  position:relative;



  z-index:2;



  max-width:1100px;

}





.label{

  margin-bottom:18px!important;



  color:var(--light-blue)!important;



  text-transform:uppercase;



  letter-spacing:4px;



  font-size:13px!important;



  font-weight:900;

}





.hero h1{

  margin-bottom:25px;



  font-size:clamp(48px,7vw,88px);



  line-height:1.02;

}





.hero-description{

  max-width:900px;



  color:#edf4f8;



  font-size:21px;

}





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

   PULSANTI

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



.hero-buttons{

  display:flex;



  flex-wrap:wrap;



  gap:18px;



  margin-top:32px;

}





.btn{

  display:inline-block;



  padding:15px 30px;



  background:var(--blue);



  color:#ffffff;



  border:2px solid var(--blue);



  border-radius:8px;



  font-weight:900;



  transition:

    transform .25s ease,

    background .25s ease,

    border-color .25s ease,

    color .25s ease;

}





.btn:hover{

  transform:translateY(-2px);



  background:#0b78b2;



  border-color:#0b78b2;

}





.secondary-btn{

  background:transparent;



  border-color:var(--light-blue);

}





.secondary-btn:hover{

  background:var(--light-blue);



  border-color:var(--light-blue);



  color:var(--navy);

}





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

   DATI PRINCIPALI

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



.project-info{

  display:grid;



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



  gap:1px;



  background:#d6dfe7;

}





.project-info div{

  padding:28px 7%;



  background:var(--light);

}





.project-info span{

  display:block;



  margin-bottom:6px;



  color:#758196;



  text-transform:uppercase;



  letter-spacing:2px;



  font-size:12px;

}





.project-info strong{

  color:var(--navy);



  font-size:18px;

}





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

   SEZIONI

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



.section{

  padding:95px 7%;

}





.section h2{

  max-width:1100px;



  margin-bottom:28px;



  color:var(--navy);



  font-size:clamp(36px,5vw,56px);



  line-height:1.1;

}





.section > p:not(.label){

  max-width:1050px;



  margin-bottom:18px;



  color:var(--muted);



  font-size:18px;

}





.dark{

  background:var(--navy);



  color:#ffffff;

}





.dark h2{

  color:#ffffff;

}





.dark > p:not(.label){

  color:#d9e5ec;

}





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

   NUMERI

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



.numbers{

  display:grid;



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



  gap:20px;



  margin-top:42px;

}





.numbers article{

  padding:28px;



  background:var(--light);



  border-radius:14px;



  text-align:center;



  box-shadow:0 10px 30px rgba(6,24,49,.07);



  transition:

    transform .3s ease,

    box-shadow .3s ease;

}





.numbers article:hover{

  transform:translateY(-7px);



  box-shadow:0 16px 35px rgba(6,24,49,.13);

}





.numbers strong{

  display:block;



  margin-bottom:8px;



  color:var(--blue);



  font-size:34px;

}





.numbers span{

  color:var(--muted);



  font-weight:700;

}





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

   GRIGLIA TECNICA

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



.technical-grid{

  display:grid;



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



  gap:24px;



  margin-top:38px;

}





.technical-grid article{

  padding:30px;



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



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



  border-radius:14px;



  transition:

    transform .3s ease,

    background .3s ease;

}





.technical-grid article:hover{

  transform:translateY(-8px);



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

}





.technical-grid h3{

  margin-bottom:11px;



  color:var(--light-blue);



  font-size:23px;

}





.technical-grid p{

  color:#d9e5ec;

}





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

   ATTIVITÀ E SCHEMI

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



.activities,

.structure-diagram{

  display:grid;



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



  gap:24px;



  margin-top:38px;

}





.activities article,

.structure-diagram article{

  display:grid;



  grid-template-columns:58px 1fr;



  gap:16px;



  padding:27px;



  background:var(--light);



  border-radius:14px;



  transition:

    transform .3s ease,

    box-shadow .3s ease;

}





.activities article:hover,

.structure-diagram article:hover{

  transform:translateY(-6px);



  box-shadow:0 12px 30px rgba(6,24,49,.10);

}





.activities > article > span,

.structure-diagram > article > span{

  color:var(--blue);



  font-size:29px;



  font-weight:900;

}





.activities h3,

.structure-diagram h3{

  margin-bottom:7px;



  color:var(--navy);



  font-size:22px;

}





.activities p,

.structure-diagram p{

  color:var(--muted);

}





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

   GALLERIA

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



.gallery-section{

  position:relative;



  display:block;



  background:#f3f6f9;



  opacity:1!important;



  visibility:visible!important;



  transform:none!important;

}





.gallery{

  display:grid;



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



  gap:24px;



  margin-top:35px;



  opacity:1;



  visibility:visible;

}





.gallery figure{

  display:block;



  margin:0;



  min-width:0;



  overflow:hidden;



  background:#ffffff;



  border-radius:14px;



  box-shadow:0 12px 35px rgba(6,24,49,.10);



  cursor:zoom-in;

}





.gallery figure.large{

  grid-column:span 2;

}





.gallery img{

  display:block;



  width:100%;



  height:auto;



  max-height:850px;



  object-fit:contain;



  background:#ffffff;



  opacity:1!important;



  visibility:visible!important;



  transition:transform .35s ease;

}





.gallery figure.technical-image img{

  padding:16px;



  object-fit:contain;



  background:#ffffff;

}





.gallery figure:hover img{

  transform:scale(1.012);

}





.gallery figcaption{

  padding:18px 22px;



  color:#364156;



  font-weight:700;



  border-top:1px solid #e1e6eb;

}





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

   RISULTATO

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



.result{

  background:linear-gradient(

    135deg,

    var(--blue),

    var(--navy)

  );



  color:#ffffff;

}





.result h2{

  color:#ffffff;

}





.result > p:not(.label){

  color:#e2ebf0;

}





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

   TORNA AI LAVORI

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



.back{

  padding:43px 7%;



  border-top:1px solid #d8dfe5;

}





.back a{

  color:var(--blue);



  font-weight:900;

}





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

   FOOTER

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



footer{

  padding:42px 7%;



  background:#101820;



  color:#ffffff;



  text-align:center;

}





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

   LIGHTBOX

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



.lightbox{

  position:fixed;



  inset:0;



  z-index:5000;



  display:none;



  align-items:center;



  justify-content:center;



  padding:35px;



  background:rgba(0,0,0,.95);

}





.lightbox.open{

  display:flex;

}





.lightbox img{

  max-width:96vw;



  max-height:92vh;



  object-fit:contain;

}





.lightbox-close{

  position:absolute;



  top:18px;



  right:28px;



  border:0;



  background:transparent;



  color:#ffffff;



  font-size:48px;



  cursor:pointer;

}





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

   TABLET

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



@media(max-width:1000px){



  .project-info,

  .numbers{

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

  }



}





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

   MOBILE

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



@media(max-width:900px){



  html{

    scroll-padding-top:0;

  }





  .header{

    position:relative;



    min-height:82px;



    padding:11px 5%;

  }





  .logo-symbol{

    width:88px;

  }





  .logo-name{

    font-size:21px;

  }





  .logo-sector{

    font-size:16px;

  }





  .menu-button{

    display:block;

  }





  .main-nav{

    position:absolute;



    top:100%;



    left:0;



    right:0;



    z-index:1001;



    display:none;



    flex-direction:column;



    align-items:flex-start;



    gap:15px;



    padding:22px 6%;



    background:var(--navy);

  }





  .main-nav.open{

    display:flex;

  }





  .hero{

    min-height:82vh;



    padding:100px 6% 55px;

  }





  .project-info,

  .numbers,

  .technical-grid,

  .activities,

  .structure-diagram,

  .gallery{

    grid-template-columns:1fr;

  }





  .gallery figure.large{

    grid-column:auto;

  }





  .gallery img{

    max-height:none;

  }



}





@media(max-width:600px){



  .header{

    padding:10px 4%;

  }





  .logo{

    gap:8px;

  }





  .logo-image-box{

    padding:4px 6px;

  }





  .logo-symbol{

    width:70px;

  }





  .logo-text{

    gap:5px;

  }





  .logo-name{

    font-size:17px;

  }





  .logo-sector{

    font-size:12px;



    letter-spacing:1px;

  }





  .hero h1{

    font-size:42px;

  }





  .hero-description{

    font-size:18px;

  }





  .hero-buttons{

    flex-direction:column;



    width:100%;

  }





  .btn{

    width:100%;



    text-align:center;

  }





  .section{

    padding:70px 5%;

  }



}