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

   BASE / RESET ESSENZIALE

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

html, body {

  margin: 0;

  padding: 0;

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

  scroll-behavior: smooth;

  box-sizing: border-box;

}



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

    INTRO SCHEDA (ferma)

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

.scheda-intro {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  background-color: #dadada;

  padding: 2% 0 0 0; 

  z-index: 50;

  opacity: 1;

  transition: opacity 1.5s ease;

}



body.scrolled .scheda-intro,

body.intro-hidden .scheda-intro {

  opacity: 0;

  pointer-events: none;

}



.scheda-text,

.scheda-image {

  margin: 0 auto;

  text-align: center;

  max-width: 70%;

  z-index: 51;

color: #000000;

}



.scheda-text h1 {

  font-size: 3rem;

  margin: 1rem 0 1rem 0;

  font-weight: 300;

  line-height: 1.2;

}



.scheda-text p {

  font-size: 1.4rem;

  line-height: 1.4;

  margin-bottom: 1.8rem;

}



.scheda-image {

  margin-top: 3rem;

}



.scheda-image img {

  width: 100%;

  height: auto;

  border-radius: 6px;

  display: block;

}



.scheda-intro-spacer {

  height: 100vh; /* spazio per scroll */

}





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

   REVEAL WHITE dati+immagini

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

.info-generali {

  background: #ffffff;

  color: #000;

  padding: 4% 8%;

}



.info-grid {

  display: grid;

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

  gap: 2rem 3rem;

  max-width: 1200px;

  margin: 0 auto;

}



.info-item {

  display: flex;

  flex-direction: column;

}



.info-label {

  font-size: 0.95rem;

  color: #777;

  font-style: italic;

  margin-bottom: 0.3rem;

}



.info-value {

  font-size: 1.1rem;

  line-height: 1.4;

  color: #111;

}





/* === SEZIONE PREMIO === */

.premio {

  text-align: center;

  padding: 4% 1.5rem;

  background: #fff;

  display: flex;

  justify-content: space-around; /* Distanza tra gli elementi */

  align-items: flex-start; /* Allinea gli elementi in alto */

}



.premio p {

  font-size: 1.1rem;

  line-height: 1.6;

  color: #111;

  margin-bottom: 1.5rem;

}



.premio img {

  width: 200px;

  height: auto;

  display: inline-block;

  opacity: 1;

  transition: opacity 0.3s;

}



.premio-item {

  text-align: center; /* Centra testo e immagine all'interno del div */

}





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

   SCHEDE CONTENT grigio + video

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

.scheda-content {

  padding: 5rem 0 5rem 0;

  background: #eeeeee;           

  color: #000000; 

}



.scheda-content-inner {

  max-width: 80%;

  margin: 0 auto;

}



.scheda-content p {

  font-size: 1.2rem;

  line-height: 1.4;

  margin-bottom: 0.5rem;

}



.scheda-content-info p {

  color: #4f4f4f;                /* info secondarie leggermente più scure */

  font-style: italic;

  margin-bottom: 0;

  line-height: 1.5;

}



.scheda-content-video {

  position: relative;

  max-width: 100%;

  margin: 0;

  opacity: 1;

  transition: opacity 2s ease 0.5s;

}



.scheda-content-video.visible {

  opacity: 1;

}



.scheda-content-video video {

  width: 100%;

  height: auto;

  display: block;

  padding-top: 3rem;

}





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

   SCHEDE APPROFONDIMENTI

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

.scheda-fade {

  padding: 3rem 1rem;

  background: #fff;

}



.scheda-fade-inner {

  max-width: 80%;

  margin: 0 auto;

  text-align: center;

}



.scheda-fade h2 {

  font-size: 1.8rem;

  margin-top: 2.5rem;

  margin-bottom: 0;

  color: #111;

}



.scheda-fade p {

  font-size: 1.2rem;

  line-height: 1.4;

  color: #333;

  margin: 0 0 1.5rem 0;

}



.scheda-fade-img {

  text-align: center;

  margin-bottom: 3rem;

  opacity: 0;

  transform: translateY(20px);

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

}



.scheda-fade-img img {

  max-width: 100%;

  height: auto;

  display: inline-block;

}



/* Classe per attivare il fade */

.scheda-fade-img.visible {

  opacity: 1;

  transform: translateY(0);

}





/* === IMMAGINI NELLA SEZIONE CONTENT (FADE-IN) ======= */

.scheda-content-image {

  width: 45%;                   /* più piccole, circa metà del contenitore */

  margin: 2rem 0 5rem auto;     /* allineate a destra */

  opacity: 0;

  transform: translateY(50px);

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

  text-align: right;

}



.scheda-content-image.visible {

  opacity: 1;

  transform: translateY(0);

}



.scheda-content-image img {

  width: 100%;

  height: auto;

  border-radius: 6px;

  display: block;

  box-shadow: none; /* niente ombra */

}





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

   INFO DISEGNI - griglia semplice 3 colonne

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

.info-disegni {

  display: grid;

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

  gap: 2rem;

  max-width: 90%;

  margin: 2rem auto;

  padding: 0 1%;

}



.info-disegni img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 6px;

}





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

   CAROUSEL SLIDE MINIMALE

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

.carousel {

  position: relative;

  width: 100%;

  overflow: hidden;

  margin: 4rem 0 0 0;

}



.carousel-inner {

  display: flex;

  transition: transform 0.6s ease;

}



.carousel-item {

  flex: 0 0 100%;

}



.carousel-item img {

  width: 100%;

  height: auto;

  display: block;

}



/* Frecce di navigazione (visibili solo su desktop) */

.carousel-prev,

.carousel-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

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

  border: none;

  color: #cecece;

  font-size: 5rem;

  cursor: pointer;

  padding: 40% 2rem 40% 2rem;

  border-radius: 5px;

  transition: background 0.3s;

  z-index: 10;

}



.carousel-prev:hover,

.carousel-next:hover {

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

}



.carousel-prev { left: 0; }

.carousel-next { right: 0; }



/* Pulsante di pausa (visibile solo su desktop) */

.carousel-pause {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  font-size: 2rem;

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

  border: none;

  color: #cecece;

  padding: 1rem 50% 1rem 50%;

  border-radius: 0;

  cursor: pointer;

  z-index: 10;

  transition: background 0.3s;

}



.carousel-pause:hover {

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

}





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

   SCHEDE DETTAGLI

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

.dettagli {

  padding: 50px 0;

  background-color: #f4f4f4;

}



.dettagli-inner {

  max-width: 95%;

  margin: 0 auto;

  padding: 20px;

  text-align: center;



}



.dettagli h2 {

  font-size: 1.8rem;         

  margin-top: 2.5rem;       

  margin-bottom: 1rem;      

  color: #111;  

}



.dettagli p {

  font-size: 1.2rem;

  line-height: 1.4;

  color: #333;

  margin: 0 0 1.5rem 0;

}



/* Contenitore per le immagini sulla stessa riga */

.dettagli-img {

  display: flex; /* Flexbox per allineare le immagini sulla stessa riga */

  gap: 20px;     /* Spazio tra le immagini */

  justify-content: center; /* Allinea al centro */

  align-items: flex-start; /* Allinea le immagini verticalmente in alto */

}



/* Gestione delle immagini */

.dettagli-img .img-left,

.dettagli-img .img-right {

  max-width: 100%; /* Assicura che le immagini non escano dal contenitore */

  height: auto;    /* Manteniamo le proporzioni originali */

  display: block;  /* Rende le immagini elementi a blocco */

}



.dettagli-img .img-left {

  width: 33.33%; 

}



.dettagli-img .img-right {

  width: 66.66%; 

}



.dettagli-img img {

  object-fit: contain; 

  width: 100%;         

  height: auto;       

}



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

   RESPONSIVE 

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



/* ---- TABLET (max-width: 1024px) ---- */

@media (max-width: 1024px) {



  /* Scheda intro */

  .scheda-intro {

    padding: 10% 0 0 0;

  }

  .scheda-text h1 {

    font-size: 2.2rem;

  }

  .scheda-text p {

    font-size: 1.1rem;

    line-height: 1.4;

  }



  /* Schede fade */

  .scheda-fade-inner h2 {

    font-size: 1.6rem;

  }

  .scheda-fade-inner p {

    font-size: 1rem;

    line-height: 1.5;

  }



  /* Scheda content */

  .scheda-content-inner {

    max-width: 90%;

    text-align: center;

  }

  .scheda-content-image {

    width: 70%;

    margin: 1.5rem auto 3rem auto;

    text-align: center;

  }



  /* Info generali */

  .info-grid {

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

  }



  /* Premio */

  .premio {

    padding: 2.5rem 1rem;

  }

  .premio p {

    font-size: 1rem;

  }

  .premio img {

    width: 140px;

  }



  /* Info disegni */

  .info-disegni {

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

  }



  /* Carousel: nascondo frecce e pulsante */

  .carousel-prev,

  .carousel-next,

  .carousel-pause {

    display: none;

  }



  /* Schede dettagli immagini */

  .dettagli-img .img-left,

  .dettagli-img .img-right {

    width: 50%;

  }

}



/* ---- MOBILE (max-width: 600px) ---- */

@media (max-width: 600px) {



  /* Scheda intro */

  .scheda-intro {

    padding: 15% 0 0 0;

  }

  .scheda-text h1 {

    font-size: 1.8rem;

  }

  .scheda-text p {

    font-size: 1.2rem;

    line-height: 1.4;

  }



  /* Schede fade */

  .scheda-fade-inner h2 {

    font-size: 1.4rem;

  }

  .scheda-fade-inner p {

    font-size: 1.1rem;

    line-height: 1.4;

  }



  /* Scheda content */

  .scheda-content-inner {

    max-width: 100%;

  }

  .scheda-content-image {

    width: 95%;

    margin: 0.2rem auto 2rem auto;

  }

  .scheda-content-inner p {

    font-size: 1.1rem;

    line-height: 1.5;

    padding: 1rem;

  }



  /* Info generali */

  .info-grid {

    grid-template-columns: 1fr;

  }

  .info-generali {

    padding: 10% 6%;

  }

  .info-value {

    font-size: 1.1rem;

  }



  /* Info disegni */

  .info-disegni {

    grid-template-columns: 1fr;

  }



  /* Schede dettagli immagini: colonna unica */



  .dettagli-img {

    flex-direction: column;

    gap: 10px;

  }

  .dettagli-img .img-left,

  .dettagli-img .img-right {

    width: 100%;

  }

.dettagli h2 {

    font-size: 1.5rem;

margin: 0.5rem;

  }

    .dettagli p {

    font-size: 1.1rem;

    line-height: 1.4;

  }



}