/* === BLOCCO INFOGRAFICHE SETTORI (RIFINITO) === */

/* Struttura comune */
.infografica-settore {
  /* fallback per --fInk se non fosse definita in css.css */
  --ink: var(--fInk, #063a33);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  border-radius: 20px;
  padding: 2rem;
  margin: 2rem auto;
  width: 90%;
  max-width: 900px;

  color: var(--ink);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.infografica-settore:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 25px rgba(0,0,0,0.15);
}

.infografica-settore h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.infografica-settore p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #063a33; /* resta leggibile su tutti i gradienti */
}

/* CTA */
.infografica-settore .cta {
  display: inline-block;                /* evita che sembri un link semplice */
  background-color: var(--ink);
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.25s ease;
}
.infografica-settore .cta:hover { background-color: #111; }

/* Mobile tuning */
@media (max-width: 640px) {
  .infografica-settore { padding: 1.25rem; }
  .infografica-settore h2 { font-size: 1.5rem; }
  .infografica-settore p { font-size: 1rem; }
}

/* === VARIANTI COLORE === */

/* Palestre (modello base) */
.settore-palestre {
  background: linear-gradient(180deg, #a3f5d2 0%, #00c896 100%);
}

/* Yoga */
.settore-yoga {
  background: linear-gradient(180deg, #fff2c2 0%, #f0c040 100%);
}

/* Pilates */
.settore-pilates {
  background: linear-gradient(180deg, #e3d3ff 0%, #a07cf0 100%);
}

/* Estetica */
.settore-estetica {
  background: linear-gradient(180deg, #ffd1e3 0%, #f07cb1 100%);
}

/* Massoterapia */
.settore-massoterapia {
  background: linear-gradient(180deg, #c8e3ff 0%, #6fb1f0 100%);
}

/* Accessibilità: meno movimento per chi lo preferisce */
@media (prefers-reduced-motion: reduce) {
  .infografica-settore { transition: none; }
  .infografica-settore:hover { transform: none; }
}