.gender-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 100%;
  min-height: 100vh; /* Usa min-height per evitare tagli su mobile */
  gap: 4vw;
  padding: 8vh 4vw;
  background-color: var(--bg);
}

.gender-card {
  flex: 1 1 45%;
  position: relative;
  height: 80vh;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.12);
  transition: transform 0.45s cubic-bezier(.2,.9,.2,1), box-shadow 0.35s ease;
  
  /* Colore scuro di fallback nel caso l'immagine non carichi */
  background-color: #222; 
}

.gender-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  z-index: 0;
  opacity: 0.8; /* Assicura che si veda un po' di sfondo se l'immagine carica */
}

/* Immagini di sfondo */
.gender-card.uomo::before {
  background-image: url("../img/home/cardUomo.png");
  /* background-image: url("/img/imageHome_ver.png"); <--- La tua immagine originale */
}

.gender-card.donna::before {
  background-image: url("../img/home/cardDonna.png");
  /* background-image: url("/img/copilot.png"); <--- La tua immagine originale */
}

.gender-card .overlay {
  position: absolute;
  inset: 0;
  /* Gradiente più marcato per leggere meglio il testo */
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.05));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem;
  z-index: 1;
}

.gender-card h2 {
  color: #f3f1e9;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.3rem;
  z-index: 2;
}

@media (hover: hover) {
  .gender-card:hover::before { transform: scale(1.05); }
}

@media (max-width: 880px) {
  .gender-cards { flex-direction: column; gap: 2rem; }
  .gender-card { height: 40vh; width: 100%; }
}