/* ================= RESET & BASE ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: #111;
  background: #fff;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Page Wrapper per le sezioni standard (1200px) */
.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Spaziatura uniforme tra le sezioni */
section {
  padding: 60px 0;
}

/* ================= SCROLL FRECCIA SU ================= */
html {
  scroll-behavior: smooth;
}

/* Opzionale: aggiungi un margine superiore quando atterri sulla sezione 
   per evitare che l'header copra il titolo della sezione */
section {
  scroll-margin-top: 80px;
}

/* ================== Stile del pulsante Torna Su =================*/
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  /* SPOSTATO A DESTRA */
  width: 50px;
  height: 50px;
  background-color: #0074c1;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Quando l'utente scorre la pagina */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: #004979;
  transform: translateY(-5px);
}

/* Adattamento per Mobile */
@media (max-width: 768px) {
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
    /* ANCHE SU MOBILE A DESTRA */
  }
}

/* ================= HEADER STYLE COMPLETO ================= */
.header {
  padding: 15px 0;
  background-color: #ffffff;

  /* --- MODIFICHE PER SPOSTARE VERSO IL BASSO --- */
  position: relative;
  top: 20px;
  /* Aumenta questo valore per portarlo più giù */

  z-index: 1000;
  /*border-bottom: 1px solid #eeeeee;*/
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.logo-img {
  max-width: 255px;
  height: auto;
  display: block;
}

/* Gruppo Menu + Bottone (Desktop) */
.header-right {
  display: flex;
  align-items: center;
  gap: 35px;
}

.nav-list {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: #0074c1;
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.nav-list a:hover {
  font-weight: 700;
}

.btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background-color: #e50013;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* ================= GESTIONE HAMBURGER (LOGICA E VISIBILITÀ) ================= */

/* Nascondi sempre il checkbox */
.menu-toggle {
  display: none !important;
}

/* Hamburger (Invisibile su Desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 1100;
}

/* Le 3 linee blu */
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #0074c1;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

/* ================= MOBILE RESPONSIVE (Sotto 992px) ================= */
@media (max-width: 992px) {
  .hamburger {
    display: flex;
    /* Appare l'hamburger */
  }

  .header-right {
    display: none;
    /* Nasconde il menu standard */
    flex-direction: column;
    position: absolute;
    top: 100%;
    /* Si attacca sotto l'header */
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 30px 20px;
    gap: 25px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #eee;
    z-index: 999;
  }

  /* Logica di apertura: quando il checkbox è cliccato */
  .menu-toggle:checked ~ .header-right {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .nav-list a {
    font-size: 18px;
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

  .btn-primary {
    width: 100%;
    text-align: center;
  }

  /* Animazione Hamburger -> X */
  .menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }

  .menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }
}

/* ================= SEZIONE 2: HERO(page-page wrapper) 
.hero { padding: 40px 0; text-align: center; padding-bottom: 0; }
.hero-img { width: 100%; max-width: 1200px; border-radius: 16px; display: block; margin: 0 auto; margin-bottom: 0;} ================= */

/* ================= SEZIONE 2: HERO ================= */
.hero-container-new {
  margin-top: 40px;
  width: 100%;
  min-height: 700px;
  background-image: url("assets/hero/hero_background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  /* Necessario per ancorare il partner */
  padding: 120px 0;
  /* Gestisce lo spazio sopra e sotto i layer */
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

/* Rimuoviamo ogni flex dal wrapper della hero per lasciarlo agire come quello delle altre sezioni */
.hero-layers {
  display: block;
  /* Flusso normale, segue il bordo sinistro del page-wrapper */
  text-align: left;
}

.hero-layer {
  display: block;
  /* Mette le immagini una sotto l'altra */
  height: auto;
  margin-left: 0;
  /* Forza l'allineamento a sinistra */
  margin-right: auto;
  margin-bottom: 20px;
}

/* --- LOGO PARTNER: ANCORATO AL BOTTOM DELLA SECTION --- */
.hero-partner-container {
  position: absolute;
  bottom: 0;
  /* Attaccato al fondo della sezione */
  right: 50%;
  /* Centro dello schermo */
  transform: translateX(600px);
  /* Sposta a destra di 600px (metà del wrapper da 1200px) */
  line-height: 0;
}

/* Se il tuo monitor è più piccolo di 1200px, allinealo al bordo destro con padding */
@media (max-width: 1248px) {
  .hero-partner-container {
    right: 24px;
    transform: none;
  }
}

.hero-partner-img {
  width: 600px;
  height: auto;
  display: block;
}

/* --- DIMENSIONI PERSONALIZZABILI --- */
.hero-date {
  margin-top: 10px;
  width: 280px;
}

.hero-edition {
  margin-top: 20px;
  width: 300px;
}

.hero-main-title {
  width: 540px;
}

.hero-subtitle {
  margin-top: 30px;
  width: 580px;
}

/* Responsive Mobile */
@media (max-width: 768px) {
  .hero-container-new {
    padding: 60px 0;
  }

  .hero-layer {
    width: 80%;
  }

  .hero-partner-container {
    position: relative;
    transform: none;
    right: 0;
    text-align: right;
    padding: 20px;
  }

  .hero-partner-img {
    width: 350px;
    display: inline-block;
  }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1200px) {
  .hero-partner-container {
    right: 24px;
    transform: none;
  }
}

@media (max-width: 992px) {
  .hero-partner-container {
    position: static;
    margin-top: 40px;
    text-align: right;
    width: 100%;
    padding-right: 24px;
  }

  .hero-partner-img {
    width: 450px;
    display: inline-block;
    padding-right: 24px;
  }
}

/* ================= SEZIONE INTRO (Sotto Hero) ================= */
.section-intro {
  padding-top: 50px;
  /* Spazio minimo tra Hero e Titolo */
  padding-bottom: 40px;
  /* Mantieni lo spazio generoso sotto */
  background-color: #ffffff;
}

.intro-title {
  margin-top: 0;
  /* Rimuove lo spazio extra sopra il titolo */
  padding-top: 0;
  /* Sicurezza aggiuntiva */
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: #000000;
  /*text-transform: uppercase;*/
  margin-bottom: 24px;
}

.intro-subtitle {
  font-size: 20px;
  line-height: 1.5;
  /* Leggermente ridotto per una lettura più fluida */
  color: #000000;
  text-align: left;
  max-width: 1200px;
}

/* --- RESPONSIVE PER SCHERMI PICCOLI --- */

/* Tablet (sotto 992px) */
@media (max-width: 992px) {
  .section-intro {
    padding: 40px 0;
  }

  .intro-title {
    font-size: 28px;
  }
}

/* Smartphone (sotto 768px) */
@media (max-width: 768px) {
  .intro-title {
    font-size: 24px;
    /* Ridotto per non andare a capo in modo brusco */
    margin-bottom: 16px;
  }

  .intro-subtitle {
    font-size: 16px;
    line-height: 1.6;
    /* Rimosso il padding specifico: usiamo quello del page-wrapper per coerenza */
  }
}

/* Smartphone Small (sotto 480px) */
@media (max-width: 480px) {
  .intro-title {
    font-size: 22px;
  }
}

/* ================= SEZIONE 4: PROGRAMMA (VERSIONE FULL-WIDTH) ================= */
.section-programma.full-width-programma {
  width: 100%;
  background-color: #e5f6fe;
  /* Il colore azzurro ora copre tutto lo schermo */
  padding: 90px 0;
  /* Aumentato il padding per dare respiro */
  box-shadow: none;
}

/* Contenitore che mantiene i testi allineati al resto del sito (1200px) */
.programma-inner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.programma-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
  gap: 20px;
}

.programma-header h2 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  margin: 0;
  color: #111111;
}

.btn-blue {
  background-color: #e50013;
  color: #ffffff !important;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  transition: all 0.3s;
  white-space: nowrap;
  display: inline-block;
}

.resp-flex {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

/* Smartphone */
@media (max-width: 768px) {
  .resp-flex {
    display: block;
  }
}

.btn-blue:hover {
  opacity: 0.9;
}

/* Agenda */
.agenda-container {
  display: flex;
  flex-direction: column;
}

.agenda-item {
  display: flex;
  gap: 40px;
  padding: 30px 0;
  align-items: flex-start;
}

.agenda-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.agenda-time {
  flex: 0 0 160px;
  font-size: 18px;
  font-weight: 700;
  color: #0074c1;
  padding: 0px 12px;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}

.agenda-main-title {
  font-size: 18px;
  color: #0074c1;
  font-weight: 700;
  margin-bottom: 0px;
  line-height: 1.4;
}

.agenda-moderator {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 20px;
}

.agenda-details p {
  font-size: 15px;
  color: #000000;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* Adattamento Responsive */
@media (max-width: 768px) {
  .programma-header {
    flex-direction: column;
    text-align: center;
  }

  .btn-blue {
    width: 100%;
  }

  .agenda-item {
    flex-direction: column;
    gap: 15px;
  }

  .agenda-time {
    width: fit-content;
    min-width: 140px;
    justify-content: flex-start;
    padding-left: 0;
  }
}

/* ================= SEZIONE 5: SPEAKERS (LEFT ALIGNED) ================= */
.section-speakers {
  padding: 60px 0;
  text-align: left;
  /* Allinea il testo di base a sinistra */
}

.section-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 50px;
  text-align: left;
  /* Titolo a sinistra */
  width: 100%;
}

.speakers-grid {
  display: grid;
  /* 4 colonne su desktop */
  grid-template-columns: repeat(4, 1fr);
  /* Spazio tra righe (20px) e colonne (40px) */
  gap: 40px 145px;
  margin: 0;
  /* Rimosso auto, così si attacca a sinistra */
  width: 100%;
}

.speaker-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Allinea foto e testi a sinistra dentro la card */
  text-align: left;
  /* Forza il testo a sinistra */
}

.speaker-card img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1/1;
  /*border-radius: 8px; */
  object-fit: cover;
  margin-bottom: 8px;
  /* Spazio ridotto verso il nome */
  margin-left: 0;
  /* Assicura che la foto non sia centrata */
}

.speaker-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px 0;
  line-height: 1.2;
  color: #111;
}

.job-title {
  font-size: 14px;
  color: #000000;
  /*font-weight: 100;*/
  margin: 0;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
  .speakers-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 colonne su tablet */
    gap: 20px 30px;
  }
}

@media (max-width: 768px) {
  .speakers-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 colonne su smartphone */
  }
}

@media (max-width: 480px) {
  .speakers-grid {
    grid-template-columns: 1fr;
    /* 1 colonna su smartphone piccoli */
  }
}

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

/* Tablet (Sotto 992px): 3 colonne */
@media (max-width: 992px) {
  .speakers-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 30px;
  }
}

/* Smartphone Large (Sotto 768px): 2 colonne */
@media (max-width: 768px) {
  .speakers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }

  .section-title {
    font-size: 26px;
  }
}

/* Smartphone Small (Sotto 480px): 1 colonna */
@media (max-width: 480px) {
  .speakers-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .speaker-card img {
    max-width: 180px;
    /* Ridimensiona leggermente l'immagine */
  }
}

/* ================= SEZIONE 6: ADV MARKET REPORT ================= */
.section-adv {
  padding: 10px 0;
  /* Spazio sopra e sotto la sezione */
}

.adv-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #c6e8f8;
  border-radius: 24px;
  overflow: hidden;
  padding: 50px;
  position: relative;
}

.adv-content {
  /* Su desktop diamo più respiro: 60% al testo, il resto all'immagine */
  flex: 0 0 60%;
  max-width: 60%;
  z-index: 2;
}

.adv-title {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #004979;
  /* Spostamento controllato solo su desktop */
  transform: translateX(30px);
}

.adv-subtitle {
  font-size: 17px;
  color: #000000;
  margin-bottom: 30px;
  transform: translateX(30px);
}

.adv-content .btn-primary.blue {
  display: inline-block;
  background-color: #e50013;
  color: #ffffff !important;
  padding: 15px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transform: translateX(30px);
}

.adv-image {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
}

.adv-image img {
  max-width: 130%;
  /* Leggermente più grande per l'effetto visivo */
  height: auto;
  display: block;
  /* Spostamento immagine verso l'esterno su desktop */
  transform: translateX(0px);
}

/* ================= RESPONSIVE PERFETTO (Sotto 992px) ================= */
@media (max-width: 992px) {
  .adv-box {
    flex-direction: column;
    /* Allineamento verticale */
    text-align: center;
    /* Testo centrato */
    padding: 40px 20px;
    /* Padding ridotto per schermi piccoli */
    gap: 30px;
    /* Spazio tra testo e immagine */
  }

  .adv-content {
    flex: 0 0 100%;
    max-width: 100%;
    /* Il testo occupa tutta la larghezza */
  }

  /* RESET DEGLI SPOSTAMENTI: Fondamentale per la centratura */
  .adv-title,
  .adv-subtitle,
  .adv-content .btn-primary.blue,
  .adv-image img {
    transform: translate(0, 0) !important;
    margin-left: 0;
    margin-right: 0;
  }

  .adv-title {
    font-size: 22px;
    /* Ridotto leggermente per mobile */
  }

  .adv-image {
    width: 100%;
    order: 2;
    /* Mette l'immagine sotto il testo (facoltativo) */
  }

  .adv-image img {
    max-width: 80%;
    /* Evita che l'immagine sia troppo enorme su mobile */
    margin: 0 auto;
  }
}

/* ================= SEZIONE 7: LOCATION (FIX POSIZIONAMENTO) ================= */
.section-location {
  padding: 60px 0;
  /* Spazio complessivo sopra e sotto la sezione */
}

.location-container {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.location-info {
  flex: 1;
}

/* 1. SPOSTA IL TITOLO "LA LOCATION" SU E GIÙ */
.location-info h2 {
  margin-top: 0;
  /* Aumenta per abbassare il titolo dal top */
  margin-bottom: 30px;
  /* Distanza tra il titolo e "Torre Gioia 22" */
  font-size: 32px;
  font-weight: 700;
  color: #000;
  text-align: left;
}

.location-text {
  margin-top: 0;
  margin-bottom: 0px;
  font-size: 20px;
}

/* 2. SPOSTA "Torre Gioia 22" */
.location-name {
  margin-top: 80px;
  display: block;
  font-weight: 700;
  color: #000;
  font-size: 27px;
  line-height: 1.6;
}

/* 3. SPOSTA L'INDIRIZZO RISPETTO A "Torre Gioia 22" */
.location-address {
  margin-top: 0px;
  /* Aumenta questo valore per allontanarlo dal nome torre */
  display: block;
  color: #000;
  font-size: 20px;
  line-height: 1;
}

.location-map {
  flex: 1.5;
  height: 450px;
  /* Ho alzato leggermente per un look più moderno */
  /*border-radius: 12px;*/
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Responsive */
@media (max-width: 992px) {
  .location-container {
    flex-direction: column;
    gap: 30px;
  }

  .location-info h2 {
    margin-top: 0;
    /* Reset su mobile */
    font-size: 26px;
  }

  .location-name {
    margin-top: 80px;
    font-size: 24px;
  }

  .location-map {
    width: 100%;
    height: 300px;
  }
}

/* ================= SEZIONE 8: PARTNERS ================= */
.section-partners {
  padding: 80px 0 80px 0;
  background-color: #ffffff;
}

.partners-title {
  font-size: 32px;
  font-weight: 800;
  color: #111111;
  text-align: left;
  /* Allineato a sinistra */
  margin-bottom: 40px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Riduciamo il gap o lo azzeriamo se necessario per l'allineamento */
  gap: 30px;
  width: 100%;
}

.partner-card {
  display: flex;
  /* IMPORTANTE: Allinea il contenuto della card a sinistra 
     così il primo logo tocca il bordo della griglia */
  justify-content: flex-start;
  align-items: center;
}

.partner-card img {
  max-width: 100%;
  height: auto;
  max-height: 50px;
  /* Uniforma l'altezza dei loghi */
  object-fit: contain;
}

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

@media (max-width: 768px) {
  .partners-title {
    /* Su mobile avevi chiesto di centrare il titolo */
    font-size: 26px;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .partner-card {
    /* Su mobile centriamo anche i loghi per coerenza col titolo */
    justify-content: center;
  }
}

/* ================= SEZIONE 9: GALLERY FULL-WIDTH ================= */
.section-gallery.full-width-gallery {
  background-color: #e5f6fe;
  /* DISTANZA DALLA SEZIONE PRECEDENTE (PARTNERS) */
  padding: 60px 0;
  margin-top: 30px;
  width: 100%;
}

/* TITOLO PERFETTAMENTE ALLINEATO */
.section-gallery .gallery-title {
  /* GESTIONE FONT-SIZE */
  font-size: 32px;
  font-weight: 800;
  color: #000000;
  text-align: left;

  /* Reset margini per allineamento al wrapper */
  margin-left: 0;
  margin-right: 0;
  padding: 0;

  /* DISTANZA TRA TITOLO E FOTO */
  margin-bottom: 50px;
}

/* CONTENITORE CAROSELLO */
.gallery-container {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.gallery-track-container {
  width: 100%;
  overflow: hidden;
}

.gallery-track {
  display: flex;
  /* DISTANZA TRA LE FOTO */
  gap: 20px;
  padding: 0 40px;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none;
  /* Nasconde scrollbar su Firefox */
}

.gallery-track::-webkit-scrollbar {
  display: none;
  /* Nasconde scrollbar su Chrome/Safari */
}

.gallery-item {
  flex: 0 0 25%;
  min-width: 320px;
}

.gallery-item img {
  width: 100%;
  /* ALTEZZA FISSA DELLE FOTO */
  height: 300px;
  object-fit: cover;
  /*border-radius: 12px;*/
  transition: transform 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.02);
}

/* FRECCE DI NAVIGAZIONE */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-arrow.prev {
  left: 20px;
}

.gallery-arrow.next {
  right: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .section-gallery {
    padding: 60px 0;
  }

  .section-gallery .gallery-title {
    /* GESTIONE FONT-SIZE */
    font-size: 26px;
  }

  .gallery-item {
    flex: 0 0 75%;
    /* Foto più grandi su mobile */
  }
}

/* ================= SEZIONE 10: SIGNUP CON SFONDO IMMAGINE ================= */

.section-signup.full-width-signup {
  width: 100%;
  background-image: url("assets/form/back_iscrizioni_v2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 1. STACCO DALLA SEZIONE 9 (GALLERY) */
  /* Aumenta questo valore per creare un vuoto bianco tra le due sezioni */
  margin-top: 60px;

  /* Mantieni questi padding per la cornice dell'immagine */
  padding-top: 80px;
  padding-bottom: 100px;
}

.signup-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 24px;
  overflow: hidden;
  padding: 50px;
  position: relative;
}

.signup-content {
  text-align: left;

  /* 2. SPOSTAMENTO VERTICALE DEL FORM */
  /* Usa margin-top positivo per spingere il form verso il BASSO */
  /* Usa margin-top negativo (es. -40px) per tirare il form verso l'ALTO */
  margin-top: -40px;
  flex: 0 0 60%;
  max-width: 60%;
  z-index: 2;
}

.signup-image {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: auto;
}

.signup-title {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 15px;
  margin-left: 0;
}

.signup-subtitle {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.9;
  margin-bottom: 40px;
  max-width: 500px;
  line-height: 1.5;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
}

.signup-form input {
  width: 82%;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 16px;
  background-color: #ffffff;
  box-sizing: border-box;
  /* Assicura allineamento millimetrico */
}

@media (max-width: 992px) {
  .signup-box {
    flex-direction: column; /* Allineamento verticale */
    text-align: center; /* Testo centrato */
    padding: 40px 20px; /* Padding ridotto per schermi piccoli */
    gap: 30px; /* Spazio tra testo e immagine */
  }

  .signup-content {
    flex: 0 0 100%;
    max-width: 100%; /* Il testo occupa tutta la larghezza */
  }

  .signup-image {
    flex: 0 0 100%;
    max-width: 100%; /* Il testo occupa tutta la larghezza */
    flex-direction: row;
    margin-left: -80px;
  }
}

/* --- ALLINEAMENTO CHECKBOX --- */
.checkbox-group {
  margin: 10px 0 30px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #ffffff;
  cursor: pointer;
  margin: 0;
}

.checkbox-container input[type="checkbox"] {
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
}

.checkbox-text {
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.checkbox-text-media {
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}

.checkbox-text a {
  color: #ffffff;
  text-decoration: underline;
}

/* BOTTONE */
.btn-signup {
  align-self: flex-start;
  background-color: #e50013;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
  padding: 18px 45px;
}

.btn-signup:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .signup-title {
    font-size: 26px;
  }
}

/* ================= COLORE PLACEHOLDER ================= */

/* Chrome, Firefox, Opera, Safari */
.signup-form input::placeholder {
  color: #aeaeae;
  /* Cambia questo con il colore che preferisci */
  opacity: 1;
  /* Necessario per Firefox */
}

/* Internet Explorer 10-11 */
.signup-form input:-ms-input-placeholder {
  color: #aeaeae;
}

/* Microsoft Edge */
.signup-form input::-ms-input-placeholder {
  color: #aeaeae;
}

/* ================= SEZIONE 11: FOOTER ================= */
.footer-section {
  width: 100%;
  background-color: #e5f6fe;
  padding: 40px 0;
  border-top: 1px solid rgba(0, 116, 193, 0.1);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Logo a sinistra, il resto a destra */
}

.footer-logo img {
  max-width: 235px;
  /* Logo leggermente più piccolo nel footer */
  height: auto;
  display: block;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 40px;
  /* Spazio tra menu e icona LinkedIn */
}

.footer-list {
  display: flex;
  gap: 25px;
  /* Spazio tra le due voci del menu */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Stile base dei link nel footer */
.footer-list a {
  text-decoration: none;
  color: #0074c1;
  font-size: 14px;
  font-weight: 400;
  /* Peso normale/medio */
  transition: font-weight 0.2s ease;
  /* Transizione fluida */
  display: inline-block;
  /* Aiuta la stabilità del testo */
}

/* Stato Hover: Trasformazione in BOLD */
.footer-list a:hover {
  font-weight: 600;
  /* Trasforma il testo in grassetto */
  text-decoration: none;
  /* Rimuoviamo la sottolineatura se preferisci solo il bold */
}

.social-icon {
  width: 24px;
  height: 24px;
  display: block;
  transition: transform 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  /* Piccolo effetto al passaggio del mouse */
}

/* --- RESPONSIVE FOOTER --- */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .footer-right {
    flex-direction: column;
    gap: 20px;
  }

  .footer-list {
    flex-direction: column;
    gap: 15px;
  }
}

/* =================================================V
   MODALI (Privacy, Cookie, Media)
   ================================================= */

/* 1. Sfondo oscurato (Overlay) */
.modal {
  display: none;
  /* Nascosto di default */
  position: fixed;
  z-index: 9999;
  /* Sopra a tutto */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Sfondo scuro */
  backdrop-filter: blur(4px);
  /* Effetto sfocato sullo sfondo */
  padding: 20px;
  box-sizing: border-box;
}

/* 2. Box bianco del Modale */
.modal-content {
  background-color: #ffffff;
  margin: 2% auto;
  /* Distanza dall'alto */
  padding: 40px;
  border-radius: 16px;
  width: 100%;
  max-width: 750px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* Logica per lo scorrimento */
  max-height: 85vh;
  /* Altezza massima: 85% dello schermo */
  display: flex;
  flex-direction: column;
}

/* 3. Pulsante di chiusura (X) */
.close,
.close-modal,
.close-modal-media {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 32px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
  z-index: 100;
}

.close:hover,
.close-modal:hover,
.close-modal-media:hover {
  color: #0074c1;
}

/* 4. Titolo dentro il modale */
.modal-title {
  font-size: 24px;
  font-weight: 800;
  color: #111;
  margin-bottom: 20px;
  padding-right: 40px;
  /* Spazio per non sovrapporsi alla X */
  flex-shrink: 0;
  /* Il titolo non deve rimpicciolirsi */
}

/* 5. Area testo scorrevole */
.modal-text {
  overflow-y: auto;
  /* Attiva lo scroll verticale */
  padding-right: 15px;
  /* Spazio per la barra di scorrimento */
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

/* Spaziatura paragrafi nel modale */
.modal-text p {
  margin-bottom: 15px;
}

.modal-text strong {
  color: #111;
  display: block;
  margin-top: 20px;
}

/* 6. Personalizzazione della barra di scorrimento (Scrollbar) */
.modal-text::-webkit-scrollbar {
  width: 6px;
}

.modal-text::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.modal-text::-webkit-scrollbar-thumb {
  background: #0074c1;
  border-radius: 10px;
}

/* 7. Adattamento Mobile */
@media (max-width: 768px) {
  .modal-content {
    padding: 30px 20px;
    margin: 5% auto;
    width: 95%;
    max-height: 90vh;
  }

  .modal-title {
    font-size: 20px;
  }

  .close {
    top: 15px;
    right: 15px;
    font-size: 28px;
  }

  /* ===== MODALE SUCCESSO ===== */
  .success-modal {
    text-align: center;
    max-width: 380px;
  }

  .success-modal .modal-title {
    font-size: 25px;
    color: #0074c1;
    margin-bottom: 15px;
    text-align: center;
  }

  .success-modal .modal-text {
    font-size: 20px;
    color: #333;
    text-align: center;
    margin-top: 10px;
    line-height: 1.6;
  }

  /* ===== LOADING STATE BOTTONE ISCRIVITI ===== */

  .btn-signup {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Stato loading */
  .btn-signup.loading {
    opacity: 0.8;
    pointer-events: none;
  }

  .btn-signup.loading .btn-text {
    content: "Invio in corso…";
  }

  .btn-signup.loading .btn-spinner {
    display: inline-block;
  }
}