/* --- BASE --- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ededed;
}
a:link,
a:visited {
  text-decoration: none;
  color: #4c330e;
  font-weight: bold;
}
a:visited { color: inherit; }

/* --- CONTAINER --- */
.container {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  max-width: 100vw;
}

/* --- LAYOUT COLONNE --- */
.content2 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  max-width: 100vw;
  flex-wrap: wrap;
}
.left-box,
.right-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.left-box { align-items: flex-start; }
.right-box { align-items: center; }
.left-box h2,
.right-box h2 {
  margin-bottom: 15px;
  text-align: center;
}
.right-box p,
.left-box p {
  margin-bottom: 15px;
}

/* --- IMMAGINI PRINCIPALI --- */
.operator-image,
.phone-image,
.section-one img,
.section-two img,
.img-responsive {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto 16px auto;
  border-radius: 10px;
}
.phone-image-svizzera {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}
.operator-image-svizzera {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-bottom: 15px;
}

/* --- IMMAGINI APP & BADGE --- */
.img-app {
  max-width: 150px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 8px 12px 8px;
  box-sizing: border-box;
}
.silhouette {
  max-width: 100px;
  width: 100%;
  height: auto;
  display: inline-block;
  margin: 0 12px;
}

/* --- IMAGE CONTAINERS --- */
.image-container,
.image-container2 {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.image-container img,
.image-container2 img {
  max-width: 100%;
  height: auto;
}

/* --- STILI TESTO --- */
.info-text,
.style5 {
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: justify;
  padding: 0 10px;
  color: #4c330e;
}
.info-text strong { margin: 0 0.2em; }
.style2 { text-align: justify; padding-right: 40px; font-size: 16px; }
.style3 { text-align: center; font-weight: bold; }
.text-section .highlight {
  font-weight: bold;
  font-size: 14px;
  text-align: justify;
  color: #6C5B4C;
}

/* --- HEADER E TITOLI --- */
.header-centered {
  text-align: center;
  padding-left: 25%;
  padding-right: 25%;
}
h1 {
  font-family: Arial, sans-serif;
  font-size: 3em;
  letter-spacing: 5px;
  color: #8b4513;
  margin: 0;
  text-align: center;
}
h1::after {
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  background-color: #666;
  margin: 8px auto 0;
}
h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  color: #8b4513;
  margin-bottom: 15px;
  text-align: center;
}
.subtitle {
  font-family: 'Georgia', serif;
  font-size: 18px;
  color: #131212;
  margin-top: 10px;
}

/* --- SEZIONI --- */
.section-one,
.section-two {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 40px 0;
  max-width: 100vw;
  flex-wrap: wrap;
}
.section-one img,
.section-two img {
  width: 45%;
  max-width: 380px;
  border-radius: 10px;
  margin-right: 20px;
}
.section-one .text-section,
.section-two .text-section {
  width: 60%;
  padding-top: 0;
}

/* --- BUTTONS TAROCCHI --- */
.tarocchi-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 20px;
}
.tarocchi-list button {
  background-color: #4c330e;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: bold;
  margin: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 200px;
}
.tarocchi-list button:hover {
  background-color: #4f4337;
}

/* --- LINK INLINE --- */
.info-text a,
.text-section a,
p a {
  padding: 0;
  margin: 0 0.12em;
  font-size: inherit;
  min-width: 0;
  min-height: 0;
  display: inline;
  color: #4c330e;
  text-decoration: none;
  font-weight: bold;
  vertical-align: baseline;
}

/* --- IMMAGINI PERSONALIZZATE --- */
.img-custom1 {
  width: 30%;
  padding-left: 30%;
}
.img-custom2 {
  width: 40%;
  height: 40%;
  padding-right: 60%;
}
.img-custom3 {
  width: 20%;
  padding-left: 80%;
  position: relative;
}
.img-custom4 {
  width: 15%;
  padding-left: 85%;
}
.img-custom5 {
  width: 40%;
  height: 40%;
  padding-left: 0;
  display: inline-block;
}
.img-custom6 {
  width: 30%;
  height: 30%;
  padding-top: 10%;
  padding-left: 25%;
}

/* --- ELEMENTI NASCOSTI/DISPLAY --- */
.hidden {
  position: relative;
  top: 60px;
  border-left: 4px solid #6C5B4C;
  height: 550px;
  padding-right: 20px;
}
.hidden1 {
  display: none;
  padding-top: 80px;
  padding-bottom: 80px;
}
.hidden2 { display: block; }
.hidden3 {
  position: relative;
  padding-top: 14%;
  padding-bottom: 10%;
}
.hidden4 {}

/* --- BLOCCO SCARICA APP CON IMMAGINE RITAGLIATA E PULSANTI --- */
.image-container-download {
  text-align: center;
  margin-bottom: 30px;
}
.banner-app-img {
  max-width: 100%;
  height: auto;
  margin-bottom: 14px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.app-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.img-app {
  max-width: 180px;
  width: 100%;
  height: auto;
  transition: transform 0.2s;
}
.img-app:hover {
  transform: scale(1.06);
}

/* --- ALLINEAMENTO SCARICA APP + OPERATORE --- */
.flex-operator-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  margin-bottom: 24px;
  margin-top: 0;
}
.flex-operator-row .image-container-download {
  max-width: 350px;
  margin: 0;
}
.flex-operator-row .operator-image-svizzera {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* --- MOBILE: impila tutto verticalmente e mostra solo la sezione fondo --- */
.only-mobile { display: none; }

@media (max-width: 900px) {
  .content2 {
    flex-direction: column;
    align-items: stretch;
  }
  .flex-operator-row {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    margin-top: 0;
  }
  .flex-operator-row .image-container-download,
  .flex-operator-row .operator-image-svizzera {
    max-width: 95vw;
    margin-bottom: 12px;
  }
  .operator-image-svizzera {
    display: none !important;
  }
  .hidden2 { display: none !important; }
  .only-mobile { display: block; }
}

@media (max-width: 800px) {
  .section-one, .section-two {
    flex-direction: column;
    align-items: center;
  }
  .section-one img,
  .section-two img {
    width: 80vw;
    max-width: 95vw;
    margin-bottom: 16px;
    margin-right: 0;
  }
  .section-one .text-section,
  .section-two .text-section {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .container {
    width: 98%;
    padding: 5px;
  }
  .content2 { flex-direction: column; }
  .image-container,
  .image-container2 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .img-app { max-width: 45vw; }
  h1 { font-size: 48px; }
  h2 { font-size: 20px; margin-bottom: 10px; }
  .subtitle { font-size: 16px; text-align: center; }
  .info-text { font-size: 1em; line-height: 1.35; text-align: left; }
  .hidden {
    display: none;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hidden1 {
    display: block;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .hidden2 {
    display: none;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hidden3 {
    display: none;
    padding-top: 14%;
    padding-bottom: 10%;
    disokay:none;
  }
  .hidden4 {
    display: none;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .app-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .img-app {
    max-width: 95vw;
  }
}

@media (max-width: 600px) {
  .img-app { max-width: 110px; }
  .img-70 { width: 95%; max-width: 95vw; min-width: 0; }
  .img-responsive { width: 95vw; max-width: 98vw; }
}

@media (max-width: 480px) {
  .container { width: 100%; padding: 2px; }
  h1 { font-size: 36px; }
  h2 { font-size: 17px; margin-bottom: 8px; }
  .info-text { font-size: 0.98em; line-height: 1.28; }
  .img-app { max-width: 90vw; }
  .img-100, .img-90, .img-70, .img-30, .img-timbro { max-width: 100%; }
  .operator-image, .phone-image { max-width: 100%; }
  p { font-size: 14px; }
}

@media (max-width: 400px) {
  .img-app { max-width: 80px; }
}

/* --- UTILITY --- */
.text-justify { text-align: justify; }
.header-centered { text-align: center; padding-left: 25%; padding-right: 25%; }
.sottotitolo { color: #8B4513; text-align: center; }
.img-float-right { float: right; margin-top: 35px; }
.pt-35 { padding-top: 35px; }
.mt-20 { margin-top: 20px; }
.img-youtube { margin: 10px auto; display: block; }
.download-apps { text-align: center; margin-top: 24px; }
.app-link { display: inline-block; margin: 0 8px 12px 8px; }
.pb-5 { padding-bottom: 5px; }

hr {
  border: 2px solid #6C5B4C;
  margin: 20px 20px;
}

.operator-centered {
  display: block;
  margin: 40px auto 0 auto;
  max-width: 400px;
  width: 90vw;
  height: auto;
}

.operator-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 40px 0 0 0;
}