* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* FONTS */

@font-face {
    font-family: 'Mont Regular';
    src: url('../fonts/Mont-Regular.woff2') format('woff2'),
         url('../fonts/Mont-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Mont Extralight';
    src: url('../fonts/Mont-Extralight.woff2') format('woff2'),
         url('../fonts/Mont-Extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}



html,
body {
  width: 100%;
  height: 700vh;
  
  font-family: 'Mont Extralight';
  font-size: 1rem; /* 16px */
  line-height: 1.4;
  color: #808080;
}

body {
  overflow: hidden;
}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Mont Regular';
  font-weight:  500;
  color: #000;
  margin-bottom:  10px;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-weight: 700;
  margin-bottom: 5px;
}

p {
  font-family: 'Mont Extralight';
  font-size:  1rem;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.white {
  color: #fff !important;
}

strong {
  color: #000;
  font-weight: 700;
}

/* UTILITY */

.text-justify {
  text-align: justify !important;
  text-justify: inter-word; /* Distribuisce lo spazio tra le parole */
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

/* PADDING TUTTO */
.padding-small { padding: 5% !important;}
.padding-medium { padding: 10% !important; }
.padding-big { padding: 20% !important;}
.padding-extra { padding: 30% !important;}

.padding-gap { padding: 60px !important;}
.double-padding-gap { padding: 120px !important;}

/* PADDING SINGOLE DIREZIONI */
.padding-top-small { padding-top: 5% !important;}
.padding-top-medium { padding-top: 10% !important;}
.padding-top-big { padding-top: 20% !important;}
.padding-top-extra { padding-top: 30% !important;}

.padding-bottom-small { padding-bottom: 5% !important; }
.padding-bottom-medium { padding-bottom: 10% !important; }
.padding-bottom-big { padding-bottom: 20% !important; }
.padding-bottom-extra { padding-bottom: 30% !important; }

.padding-left-small { padding-left: 5% !important; }
.padding-left-medium { padding-left: 10% !important; }
.padding-left-big { padding-left: 20% !important; }
.padding-left-extra { padding-left: 30% !important; }

.padding-right-small { padding-right: 5% !important; }
.padding-right-medium { padding-right: 10% !important; }
.padding-right-big { padding-right: 20% !important; }
.padding-right-extra { padding-right: 30% !important; }


/* MARGIN TUTTO */
.margin-small { margin: 5% !important; }
.margin-medium { margin: 10% !important; }
.margin-big { margin: 20% !important; }
.margin-extra { margin: 30% !important; }

/* MARGIN SINGOLE DIREZIONI */
.margin-top-small { margin-top: 5% !important; }
.margin-top-medium { margin-top: 10% !important; }
.margin-top-big { margin-top: 20% !important; }
.margin-top-extra { margin-top: 30% !important; }

.margin-bottom-small { margin-bottom: 5% !important; }
.margin-bottom-medium { margin-bottom: 10% !important; }
.margin-bottom-big { margin-bottom: 20% !important; }
.margin-bottom-extra { margin-bottom: 30% !important; }

.margin-left-small { margin-left: 5% !important; }
.margin-left-medium { margin-left: 10% !important; }
.margin-left-big { margin-left: 20% !important; }
.margin-left-extra { margin-left: 30% !important; }
.margin-left-gap { margin-left: 60px !important; }

.margin-right-small { margin-right: 5% !important; }
.margin-right-medium { margin-right: 10% !important; }
.margin-right-big { margin-right: 20% !important; }
.margin-right-extra { margin-right: 30% !important; }


/* ========================= */
/* CLASSI RIUTILIZZABILI FLEX */
/* ========================= */

/* Allineamento verticale (asse principale) */
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-space-between { justify-content: space-between !important; }
.justify-content-space-around { justify-content: space-around !important; }
.justify-content-space-evenly { justify-content: space-evenly !important; }

/* Allineamento orizzontale (asse trasversale) */
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }
.align-items-baseline { align-items: baseline !important; }

/* ========================= */
/* CLASSI RIUTILIZZABILI PER IMG */
/* ========================= */

.object-fit-cover {
  object-fit: contain !important;
}

.object-fit-contain {
  object-fit: contain !important;
}

.object-fit-fill {
  object-fit: fill !important;
}

/* Object Position: Horizontal */
.object-left   { object-position: left !important; }
.object-center { object-position: center !important; }
.object-right  { object-position: right !important; }

/* Object Position: Vertical */
.object-top    { object-position: top !important; }
.object-middle { object-position: center !important; } /* vertical center */
.object-bottom { object-position: bottom !important; }

/* Combinazioni comuni */
.object-top-left       { object-position: left top !important; }
.object-top-center     { object-position: center top !important; }
.object-top-right      { object-position: right top !important; }

.object-middle-left    { object-position: left center !important; }
.object-middle-center  { object-position: center center !important; }
.object-middle-right   { object-position: right center !important; }

.object-bottom-left    { object-position: left bottom !important; }
.object-bottom-center  { object-position: center bottom !important; }
.object-bottom-right   { object-position: right bottom !important; }

/* ===========================
   UTILITY: ASPECT RATIO
   Usa queste classi su .cross-item o altri elementi per forzare
   una specifica proporzione dimensionale.
=========================== */

/* --- Quadrato --- */
.ar-1-1 { aspect-ratio: 1 / 1 !important; }      /* 1:1  - Perfetto per thumbnail, avatar */

/* --- Orizzontale (Landscape) --- */
.ar-3-2 { aspect-ratio: 3 / 2 !important; }      /* 3:2  - Standard fotografia 35mm */
.ar-4-3 { aspect-ratio: 4 / 3 !important; }      /* 4:3  - Standard TV classica, fotografia */
.ar-16-10 { aspect-ratio: 16 / 10 !important; }  /* 16:10 - Golden ratio (approssimato), monitor */
.ar-16-9 { aspect-ratio: 16 / 9 !important; }    /* 16:9 - Widescreen HD video, il più comune */
.ar-21-9 { aspect-ratio: 21 / 9 !important; }    /* 21:9 - Cinematico / Ultrawide */

/* --- Verticale (Portrait) --- */
.ar-2-3 { aspect-ratio: 2 / 3 !important; }      /* 2:3  - Formato foto verticale */
.ar-3-4 { aspect-ratio: 3 / 4 !important; }      /* 3:4  - Formato foto verticale classico */
.ar-10-16 { aspect-ratio: 10 / 16 !important; }  /* 10:16 - Golden ratio verticale */
.ar-9-16 { aspect-ratio: 9 / 16 !important; }    /* 9:16 - Formato video mobile (Stories, Reels) */


/* ========================= */
/* UTILITY: GRID SELF-ALIGNMENT */
/* ========================= */

.align-self-start { align-self: start !important; }   /* Allinea in alto */
.align-self-center { align-self: center !important; } /* Allinea al centro */
.align-self-end { align-self: end !important; }     /* Allinea in basso */
.align-self-stretch { align-self: stretch !important; } /* Stiracchia (default) */

/* LAYOUT */

section {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 1.5em;
  overflow: hidden;
}

.content {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  
  display:  flex;
  justify-content: center;
  align-items: center;
}

/*
img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, scale;
  transform: translateX(0) scale(1.35);
}
*/


/* INTRO */ 

section.intro {
   position: relative;

   background: #7b9fa9; 
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;

   transition: color 0.3s, background-color 0.3s;
}

.intro .content {
  background: #7b9fa9; 
}

.intro .title-product {
  font-family: "Bebas Neue", sans-serif;
  font-size: 9rem;
  font-weight: 100;
  letter-spacing:  30px;
  line-height: 9rem;
  text-align: left;

  color: #7b9fa9; /* colore iniziale come lo sfondo di sezione, quindi scritta invisibile */
}

.intro .title-product span {
  display: inline-block;
  transition: color 0.3s;
}

/* Stile per il testo LYS centrato */
.lys-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Bebas Neue", sans-serif;
  font-size: 9rem;
  font-weight: 100;
  /* Assicuriamoci che la spaziatura sia la stessa del titolo */
  letter-spacing: 30px; 
  line-height: 9rem;
  color: #ffffff;
  opacity: 0;
}

/* Nuova classe per specchiare la S */
.lys-line .mirrored-s {
  display: inline-block; /* Necessario per applicare la trasformazione */
  transform: scaleX(-1)  translateX(40px);

}

/* Stile per l'indicatore Scroll Down */
.scroll-down-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: 'Mont Regular';
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  
  transition: opacity 0.5s ease-in-out;
}

.intro .container-intro-image-product {
  width: 600px;
  height: 600px;
  /* L'opacità la gestirà solo GSAP */
}

.intro .intro-image-product {
  /* L'immagine ora si adatta al 100% del suo nuovo contenitore */
  width: 100%;
  height: 100%;
}

.intro-logos {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  padding: 0 40px; /* Spazio dai bordi laterali */
  display: flex;
  justify-content: space-between; /* Allinea i loghi ai due lati */
  align-items: center;
}

.intro-logos .logo {
  max-width: 175px; 
  height: auto;
  /* La trasformazione iniziale la gestirà GSAP, non serve qui */
}

.intro-logos .logo.lys-hubzeta {
  max-width: 250px; 
}


/* HORIZONTAL SLIDER */

section.sticky {
  background-color: #7b9fa9;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/* SLIDES a "NASTRO" */
.slides {
  position: relative;
  width: max-content; /* La larghezza è data dalla somma dei figli */
  height: 100%;
  display: flex;
  align-items: center;
  will-change: transform;
  
  /* Aggiunge padding per evitare che il primo e l'ultimo elemento tocchino i bordi */
  padding: 0 56px; 

  /* Spazio tra un elemento e l'altro (opzionale), se lo tolgo ho una striscia bianca continua, ma ci sarebbe da rivedere il padding tra gli elementi */
  gap: 80px; 
}

.slide {
  position: relative;
  flex-shrink: 0;
  height: 100%; /* Facciamo in modo che il div .slide occupi tutta l'altezza per allineare bene i contenuti */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Aggiungiamo un gap tra gli slide invece che sul contenitore .slides */
  /* margin-right: 150px; */ /* Questo crea lo spazio tra un pannello e l'altro */
}


/* Rimuove la larghezza fissa da .content quando è in uno slide */
.slide .content {
  width: auto;      /* Da 100vw a auto! */
  height: auto;     /* Da 100vh a auto! */
  min-height:  calc(100vh - 48px);
  
  /* max-height: calc(100vh - 48px); sottraggo il padding top e bottom */
  /* padding: 0 48px;*/  /* Aggiungi un padding orizzontale per distanziare i contenuti dai bordi */
}


/* ===========================
   CROSS CONTAINER (GRID)
=========================== */

.cross-container {
  width: 100%;
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 60px;
  padding: 60px;

}

/* Variante 65/35 */
.cross-container.type-65-35 {
  grid-template-columns: 0.65fr 0.35fr;
}

/* Variante 35/65 */
.cross-container.type-35-65 {
   grid-template-columns: 0.35fr 0.65fr;
}

/* Variante 60/40 */
.cross-container.type-60-40 {
  grid-template-columns: 0.60fr 0.40fr;
}

/* Variante 40/60 */
.cross-container.type-40-60 {
  grid-template-columns: 0.40fr 0.60fr;
}

/* Variante 70/30 */
.cross-container.type-70-30 {
  grid-template-columns: 0.70fr 0.30fr;
}

/* Variante 30/70 */
.cross-container.type-70-30 {
  grid-template-columns: 0.30fr 0.70fr;
}

.cross-item {
  background-color: #fff;
  width: 100%; /* L'item riempie la sua cella della griglia */
  height: auto; /* L'altezza è determinata dall'aspect-ratio o dal contenuto */
  
  aspect-ratio: 70 / 40; /* Impostata di default considerando la brochure, per variarle vedere classi utility  */

  max-height: 50vh;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  align-items: flex-start; /* default: allineato a sinistra */
  justify-content: flex-start; /* default: in alto */
  text-align: left;
}

.cross-item.has-text {
  margin: 0;
}


/* Assicura che h3 e p siano uno sotto l'altro */
.cross-item h3,
.cross-item p {
  display: block;
  width: 100%;
}

/* Immagini che riempiono completamente il contenitore */
.cross-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* riempie senza deformarsi, tagliando se necessario */
  display: block;
}


/* SLIDE 01 */

#slide-01 .content {
  width: 80vw;
}

#slide-01 .content .cross-container {
   margin: 0;
   background-color: #fff;
}

/* SLIDE 02 */

#slide-02 .content {
  width: 80vw;
}

#slide-02 .content .cross-container {
   margin: 0;
   background-color: #fff;
}

/* SLIDE 03 - 04 - 05 - 07 - 13: IMMAGINI */

/*
  Per le slide che contengono un'immagine a tutta altezza (fullspace),
  dobbiamo assicurarci che la slide stessa abbia una larghezza calcolata
  in base all'aspect ratio dell'immagine e all'altezza del viewport.
*/
#slide-03,
#slide-04,
#slide-05,
#slide-07,
#slide-13 {
  /*
    100vh = altezza del viewport.
    1485 / 1076 = aspect ratio dell'immagine (es. slide-03.jpg).
    calc() calcola la larghezza necessaria per riempire l'altezza
    del viewport mantenendo l'aspect ratio.
  */
  width: calc(100vh * (1485 / 1076));
}

/* Assicurati che il contenuto e l'immagine riempiano questo spazio */
#slide-03 .content,
#slide-04 .content,
#slide-05 .content,
#slide-07 .content,
#slide-13 .content,
#slide-03 img,
#slide-04 img,
#slide-05 img,
#slide-07 img,
#slide-13 img {
  width: 100%;
}

/*
img.parema,
img.fullspace {
  position: relative;
  width: auto;
  height: 100vh;
  object-fit: cover;
  transform: none !important;
}
*/

/*
  REGOLA MODIFICATA PER IMMAGINI A PIENO SCHERMO
*/
img.parema,
img.fullspace {
  /*
    L'immagine ora deve semplicemente riempire il suo contenitore (.content),
    che a sua volta riempie la .slide a cui abbiamo dato una larghezza calcolata.
  */
  width: 100%;
  height: 100%;

  /*
    Rimuoviamo 'height: 100vh' perché l'altezza ora è determinata
    dal contenitore. Rimuoviamo anche 'width: auto'.
  */

  object-fit: cover; /* Manteniamo questo per gestire eventuali micro-differenze di aspect ratio */
  
  /* Manteniamo queste regole se servono a sovrascrivere altri stili */
  position: relative;
  transform: none !important;
}


/* SLIDE 06 */

/*
#slide-06 .content {
  width: 80vw;
}
*/

#slide-06 .content .cross-container {
   margin: 0;
   background-color: #fff;

  /* 1. Definiamo le colonne: 40% per il testo, il resto per l'immagine */
  grid-template-columns: 40% 1fr;
  grid-template-rows: 1fr;

  /* 2. Allineiamo entrambi gli elementi in basso nelle loro celle */
  align-items: end;
  padding: 60px;
}

#slide-06 .content .cross-container .cross-item {
  aspect-ratio: auto;
  max-height: none;
}


/* SLIDE 08 */

/*
#slide-08 .content {
  width: 80vw;
}
*/

/* Griglia 2x2 con celle perfettamente uguali */
#slide-08 .content .cross-container {
  
  display: grid;

  /* Crea 2 colonne di uguale larghezza (ognuna occupa 1 frazione dello spazio) */
  grid-template-columns: repeat(2, 1fr);
  
  /* Crea 2 righe di uguale altezza (ognuna occupa 1 frazione dello spazio) */
  grid-template-rows: repeat(2, 1fr);
  
  gap: 60px; /* Lo spazio tra le celle, puoi personalizzarlo */
  
  width: 100%; /* La griglia occupa tutta la larghezza del suo contenitore */
  height: 100%; /* La griglia occupa tutta l'altezza del suo contenitore */
}


/* SLIDE 09 */
#slide-09 .content .cross-container {
   margin: 0;
   background-color: #fff;

  /* 1. Definiamo le colonne: 40% per il testo, il resto per l'immagine */
  grid-template-columns: 40% 1fr;
  grid-template-rows: 1fr;

  /* 2. Allineiamo entrambi gli elementi in basso nelle loro celle */
  align-items: end;
  padding: 60px;
}

#slide-09 .content .cross-container .cross-item {
  aspect-ratio: auto;
  max-height: none;
}

#slide-09 .content .cross-container .cross-item img.lys-title {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

/* SLIDE 10 */
#slide-10 .content {
  height: 100% /* imposta l'altezza che poi server per il cross container */
}

#slide-10 .content .cross-container {

  position: relative; /* necessario per ::after */
  height: 100%; /* ora funziona perché il genitore ha altezza definita */
   
  margin: 0;
  background-color: #fff;


  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;

  align-items: stretch;
  padding: 60px;
}

#slide-10 .content .cross-container::after {
  content: "";
  position: absolute;
  left: 50%;             /* centro tra le due colonne */
  width: 1px;             /* spessore linea */
  background-color: #000;

  top: 120px;                     /* tanto quanto il padding-top */
  bottom: 120px;                  /* tanto quanto il  padding-bottom */
}

#slide-10 .content .cross-container .cross-item {
  aspect-ratio: auto;
  max-height: none;
  
  min-height: 100%; /* almeno riempie la cella */
  height: auto;      /* ma può crescere se serve */

  justify-content: space-between; /* li distribuisce su tutta l’altezza */
}


/* SLIDE 11 */
#slide-11 .content .cross-container {
   margin: 0;
   background-color: #fff;

  /* 1. Definiamo 3 colonne  */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;

  /*
  align-items: end;
  padding: 60px;
  */
}

#slide-11 .content .cross-container .cross-item {
  aspect-ratio: auto;
  max-height: none;

  min-height: 100%; /* almeno riempie la cella */
  height: auto;      /* ma può crescere se serve */

  justify-content: space-between; /* li distribuisce su tutta l’altezza */  
}

#slide-11 .content .cross-container .cross-item h1 {
  margin-bottom: 40px;
  font-weight: 700;
}

#slide-11 .content .cross-container .cross-item img {
  margin-bottom: 40px;
}

#slide-11 .customization-data {
  margin-bottom: 20px;;
}


/* SLIDE 12 */
#slide-12 .content .cross-container {
   margin: 0;
   background-color: #fff;

  /* 1. Definiamo 3 colonne  */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;

  /*
  align-items: end;
  padding: 60px;
  */
}

#slide-12 .content .cross-container .cross-item {
  aspect-ratio: auto;
  max-height: none;

  min-height: 100%; /* almeno riempie la cella */
  height: auto;      /* ma può crescere se serve */

  justify-content: space-between; /* li distribuisce su tutta l’altezza */  
}

#slide-12 .content .cross-container .cross-item h1 {
  margin-bottom: 40px;
  font-weight: 700;
}

#slide-12 .content .cross-container .cross-item img {
  margin-bottom: 40px;
}

#slide-12 .customization-data {
  margin-bottom: 20px;;
}


/* SLIDE 14 */ 
#slide-14 .content .cross-container {
   margin: 0;
   background-color: #f1ecea;

  /* 1. Definiamo 4 colonne  */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

  /* 2. Aggiungiamo lo spazio a "croce" di 30px */
  gap: 30px;

}

#slide-14 .content .cross-container .cross-item {
  /* 4. Resettiamo l'aspect ratio per far comandare la griglia */
  aspect-ratio: auto;
  max-height: none; /* Sovrascriviamo eventuali limiti di altezza ereditati */
  padding: 0; /* Rimuoviamo eventuali padding interni se l'item contiene solo l'immagine */
}

/* 5. Regole per le immagini all'interno della griglia */
#slide-14 .content .cross-container .cross-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Riempie lo spazio senza deformare l'immagine, tagliando le parti in eccesso */
}


/* ===========================
   OUTRO / FOOTER (AGGIORNATO)
=========================== */

section.outro {
  background-color: #c1d5d8;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Aggiunta: Necessario per il posizionamento assoluto del figlio .address */
  position: relative; 
}

/* 
  Questo contenitore ora ha il solo scopo di centrare perfettamente il logo.
  L'indirizzo verrà posizionato in modo indipendente.
*/
.content-outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Contenitore per sovrapporre i loghi (invariato) */
.logo-container-outro {
  position: relative;
  width: 300px;
  height: 150px; 
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Stile comune per entrambi i loghi (invariato) */
.logo-outro {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease-in-out;
}

/* Il logo Parema è inizialmente invisibile (invariato) */
.logo-outro.logo-parema {
  opacity: 0;
}


/* ==========================================================
   Stile per l'indirizzo (MODIFICATO PER POSIZIONAMENTO FLEX/ASSOLUTO)
   ========================================================== */
.address {
  /* 1. Cambiamo il posizionamento */
  position: absolute;
  
  /* 2. Lo "incolliamo" in basso */
  bottom: 40px; /* Distanza dal fondo della sezione */

  /* 3. Lo centriamo orizzontalmente */
  left: 50%;
  transform: translateX(-50%);

  /* 4. Rimuoviamo il vecchio margine che non serve più */
  /* margin-top: 40px; */ /* <-- QUESTA RIGA VIENE ELIMINATA O COMMENTATA */

  /* Stili visuali (invariati) */
  color: #fff;
  font-family: 'Mont Regular';
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0; 
  width: 100%; /* Aggiunta opzionale per garantire che non vada a capo su schermi stretti */
  text-align: center;
}

.address span {
  color: white;
  font-weight: 600;
}

.address a {
  color: white;
  font-weight: 600;
  text-decoration: none !important;
}

/* ===========================
   OUTRO SCROLL INDICATOR (POSIZIONE IN ALTO)
=========================== */
.outro-scroll-indicator {
  position: absolute;

  /* Sostituisci 'bottom' con 'top' per spostarlo in alto */
  top: 60px; /* <-- NUOVA POSIZIONE: 60px dal bordo superiore della sezione */

  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: 'Mont Regular';
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0; /* Nascosto di default, gestito da GSAP */
  pointer-events: none; /* Non deve essere cliccabile */
}



/* LENIS */

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}



/* ============================================================= */
/*  UTILITY: Overlay per Forzare Orientamento Verticale su Mobile Landscape quando l'altezza è < 650px
/* ============================================================= */


#rotate-device-overlay {
  display: none !important; /* Nascosto di default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #7b9fa9;
  z-index: 9999;
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.rotate-device-message {
  padding: 20px;
  font-family: 'Mont Regular', sans-serif;
  color: #fff !important; /* Colore del testo e dell'icona */
  font-size: 1.2rem;
}

.rotate-device-message p {
  color: #fff !important;
}

/* 
  Puoi controllare la dimensione dell'icona qui.
  Non serve più un'animazione @keyframes.
*/
.rotate-device-message svg {
  margin-bottom: 20px;
}


/* ===========================
   RESPONSIVE MEDIA QUERIES
   =========================== */

/* 
  =============================================================
  REGOLA 1: LAYOUT VERTICALE (Il nostro "default" per schermi piccoli)
  
  Questa regola si applica a TUTTI i dispositivi che non soddisfano le condizioni per lo scroll orizzontale. La virgola (OR) è la chiave.
  =============================================================
*/

@media (max-width: 1199px), (max-height: 649px) {
  
  /* Permettiamo di nuovo lo scroll verticale sul body */
  body {
    overflow: auto; 
    height: auto; /* L'altezza non è più fissa a 700vh ma si adatta al contenuto */
  }

  /* "Sblocchiamo" la sezione sticky */
  section.sticky {
    height: auto; /* Altezza basata sul contenuto */
    overflow: visible;
  }

  /* Trasformiamo il nastro in un layout verticale */
  .slides {
    display: block; /* Da flex a block */
    width: 100%;
    padding: 0;
    gap: 0; /* Rimuoviamo il gap che non serve più */
  }

  .slide {
    width: 100%; /* Ogni pannello occupa il 100% della larghezza */
    height: auto; /* L'altezza si adatta al contenuto */
    margin: 0 auto 80px auto; /* Centrato e con margine inferiore aumentato */
    padding: 0;
  }
  
  .slide .content {
    width: 100% !important; /* Assicurati che il contenuto usi tutto lo spazio dello slide */
    min-height: auto; /* Rimuoviamo l'altezza minima legata alla viewport */
    height: auto;
  }

  /* Adattiamo le griglie per il mobile (tutto in una colonna) */
  .cross-container {
    grid-template-columns: 1fr !important; /* Forza una singola colonna */
    grid-template-rows: auto;
    padding: 30px; /* Riduciamo un po' il padding su mobile */
    gap: 30px;
  }

  .cross-item {
    aspect-ratio: auto;
    max-height: none;
  }  

  /* Aggiunta: le immagini a piena altezza non hanno più senso */
  img.fullspace {
    width: 100%;
    height: auto; /* Adatta l'altezza mantenendo le proporzioni */
  }

  /* REGOLE SPECIFICHE SULLE SLIDES */

  /* INTRO */
  .intro .content {
	  flex-direction: column;
    height: 100vh;
  }

/* SLIDE 2 */

  #slide-02 .cross-container > :nth-child(3) {
    grid-column: 1;
    grid-row: 1;
  }

  /* SLIDES CON IMMAGINE FULLSPACE */

  #slide-03, #slide-04, #slide-05, #slide-07, #slide-13 {
	  width: auto;
  }

  /* SLIDE 8 - 10 */

  #slide-08 .content .cross-container {
	  grid-template-rows: auto !important;
  }

  #slide-08 img,
  #slide-10 img {
    margin-left: 0px !important;
    object-fit: initial !important;
    height: auto !important;
  }

  /* SLIDE 10: nascondiamo la linea divisoria su mobile */
  #slide-10 .content .cross-container::after {
    display: none;
  }  


  #slide-10 .data-container div {
    margin-bottom: 20px;
  }


  /* SLIDE 14 */

  #slide-14 .content .cross-container {
	  grid-template-rows: auto ;
  }  

  #slide-14 .content .cross-container > :nth-child(1) { grid-row: 1; } /* Cella 1 */
  #slide-14 .content .cross-container > :nth-child(2) { grid-row: 3; } /* Cella 2 va dopo la 3 */
  #slide-14 .content .cross-container > :nth-child(3) { grid-row: 2; } /* Cella 3 sale al 2° posto */
  #slide-14 .content .cross-container > :nth-child(4) { grid-row: 4; } /* Cella 4 resta ultima */   

  /* OUTRO */ 

  .address {
    padding-right: 5px;
    padding-left: 5px;
  }

}

/* 
  =============================================================
  REGOLA 2: OVERLAY "RUOTA DISPOSITIVO"
  
  Questa regola si sovrappone alla precedente. Si attiva se un dispositivo è in landscape MA rientra comunque nelle condizioni del layout verticale.
  =============================================================
*/
@media screen and (max-width: 1199px) and (orientation: landscape) {
  
  /* Mostra l'overlay */
  #rotate-device-overlay {
    display: flex !important;
  }

  /* Nascondi tutto il resto del sito per evitare interazioni strane */
  .intro, .sticky, .outro {
    display: none !important; /* Usiamo !important per sicurezza */
  }
}



/* ============================================================= */
/*  MOBILE: Telefoni Piccoli e Standard (fino a 575px)
/*  Stili di base per la visualizzazione a colonna singola.
/* ============================================================= */

@media screen and (max-width: 575.98px) {

  .slide {
    margin: 0 auto 40px auto;
  }

  .double-padding-gap {
    padding: 30px !important;
  }  

  p {
   color: #2e2e2e; /* scurito percheè sul telefono il font sottile si legge poco con il colore nativo */
  }

  /* INTRO */

  .intro .title-product {
	  font-size: 4rem;
    letter-spacing: 15px;
    line-height: 4rem;
    margin-top: 5%;
  }

  .intro .container-intro-image-product {
    width: 80%;
    height: auto;
  }

  .intro-logos {
    padding: 0 10px;
    bottom: 100px;
  }

  .intro-logos .logo.lys-hubzeta {
    max-width: 120px;
  }

  .intro-logos .logo {
	  max-width: 100px;
  }

  .scroll-down-indicator {
    top: 50px !important;
    font-size: 0.8rem;
  }

 .lys-line {
	font-size: 7rem;
	letter-spacing: 20px;
	line-height: 7rem;
  } 

  .lys-line .mirrored-s {
	  transform: scaleX(-1) translateX(25px);
  }

  

}

/* ============================================================= */
/*  MOBILE: Telefoni Landscape / Tablet piccoli Portrait
/*  (Larghezza: 576px - 767px)
/* ============================================================= */

@media screen and (min-width: 576px) and (max-width: 767px) {

  .slide {
    margin: 0 auto 40px auto;
  }

  .double-padding-gap {
    padding: 30px !important;
  }  

  p {
   color: #2e2e2e; /* scurito percheè sul telefono il font sottile si legge poco con il colore nativo */
  }

  /* INTRO */

  .intro .title-product {
	  font-size: 6rem;
    letter-spacing: 15px;
    line-height: 6rem;
    margin-top: 0;
  }

  .intro .container-intro-image-product {
    width: 80%;
    height: auto;
  }

  .intro-logos {
    padding: 0 10px;
    bottom: 120px;
  }

  .intro-logos .logo.lys-hubzeta {
    max-width: 150px;
  }

  .intro-logos .logo {
	  max-width: 120px;
  }

  .scroll-down-indicator {
    bottom: 120px !important;
    font-size: 0.8rem;
  }

 .lys-line {
	font-size: 8rem;
	letter-spacing: 20px;
	line-height: 8rem;
  } 

  .lys-line .mirrored-s {
	  transform: scaleX(-1) translateX(25px);
  }  

}


/* ============================================================= */
/*  TABLET: Tablet Standard in Portrait
/*  (Larghezza: 768px - 1199px)
/* ============================================================= */

@media screen and (min-width: 768px) and (max-width: 1199px) {

  .slide {
    margin: 0 auto 60px auto;
  }

  .double-padding-gap {
    padding: 30px !important;
  }  

  p {
   color: #2e2e2e; /* scurito percheè sul telefono il font sottile si legge poco con il colore nativo */
  }

  /* INTRO */

  .intro .title-product {
	  font-size: 7.5rem;
    letter-spacing: 15px;
    line-height: 7.5rem;
    margin-top: 0;
  }

  .intro .container-intro-image-product {
    width: 75%;
    height: auto;
  }

  .intro-logos {
    padding: 0 10px;
    bottom: 120px;
  }

  .intro-logos .logo.lys-hubzeta {
    max-width: 150px;
  }

  .intro-logos .logo {
	  max-width: 120px;
  }

  .scroll-down-indicator {
    bottom: 120px !important;
    font-size: 0.8rem;
  }

  /*
 .lys-line {
	font-size: 9rem;
	letter-spacing: 20px;
	line-height: 9rem;
  } 

  .lys-line .mirrored-s {
	  transform: scaleX(-1) translateX(25px);
  }  
  */
  
}


/* ============================================================= */
/*  RESPONSIVE: Landscape - Laptop "Compatti"
/*  (Larghezza: 1200px - 1439px, Altezza Viewport: 620px - 720px)
/*  Es. Laptop 1366x768
/* ============================================================= */
@media screen 
  and (min-width: 1200px) and (max-width: 1439px)
  and (min-height: 650px) and (max-height: 720px)
  and (orientation: landscape) {
  
  /* 
    REGOLE PER SPAZI VERTICALI RIDOTTI
    Questo è il tuo scenario più "stretto". Qui devi essere aggressivo nel ridurre padding e gap verticali.
  */

  h1 {
    font-size: 1.8rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 0.938rem;
  }  

  p {
  font-size: 0.9rem;
  }

  .double-padding-gap {
    padding: 60px !important;
  }  

  /* INTRO */
 .intro .title-product {
	  font-size: 8rem;
    line-height: 8rem;
  }  
    
  /* SLIDES */

  #slide-06 .content, 
  #slide-08 .content, 
  #slide-09 .content,
  #slide-10 .content {
    width: 80vw;
  }

  #slide-10 .content .cross-container::after {
    top: 60px;
    bottom: 60px;
  }  

  #slide-11 .content,
  #slide-12 .content,
  #slide-14 .content {
    width: 75vw;
  }


}


/* ============================================================= */
/*  RESPONSIVE: Landscape - Laptop Moderni
/*  (Larghezza: 1200px - 1439px, Altezza Viewport: 721px - 900px)
/*  Es. MacBook Pro 14", iPad Pro 12.9"
/* ============================================================= */
@media screen 
  and (min-width: 1200px) and (max-width: 1439px)
  and (min-height: 721px) and (max-height: 900px)
  and (orientation: landscape) {

  /* 
    REGOLE PER SPAZI INTERMEDI
    Qui hai più margine di manovra.
  */

  /* INTRO */ 
  
 .intro .title-product {
	  font-size: 8rem;
    line-height: 8rem;
  }  

}


/* ============================================================= */
/*  RESPONSIVE: Landscape - Laptop "Widescreen"
/*  (Larghezza: 1440px - 1599px, Altezza Viewport: 650px - 900px)
/*  Es. Laptop 1600x900
/* ============================================================= */
@media screen 
  and (min-width: 1440px) and (max-width: 1599px)
  and (min-height: 650px) and (max-height: 900px)
  and (orientation: landscape) {

  /* 
    REGOLE PER SPAZI INTERMEDI/GENEROSI
    Qui la larghezza non è un problema, quindi puoi concentrarti solo
    sull'adattare gli spazi verticali in base all'altezza.
    Spesso le regole del Gruppo 2 possono andare bene anche qui.
  */



}