.vision {
  padding: 60px 60px;
  padding-top: 15vh;
}

.vision__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Bloque con imagen de fondo */
.vision .bloque {
  position: relative;
  padding: 80px 20px;
  color: var(--cge-blanco);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}

/* Imagen de fondo */
.vision .bloque[data-img="vision"] {
  background-image: url('img/vision.svg'); /* ajusta ruta */
}

.vision .bloque::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4); /* overlay para legibilidad */
}

.vision .bloque h2,
.vision .bloque p {
  position: relative;
  z-index: 1;
}

/* Tipografía modular */
.vision .bloque h2 {
  font-size: var(--font-size-h2, 2.8rem);
  font-family: var(--font-family-base, sans-serif);
  line-height: 1.2;
  color:var(--cge-blanco);
}

.vision .bloque p {
  font-size: var(--font-size-p, 1.2rem);
  font-family: var(--font-family-base, sans-serif);
  line-height: 1.6;
}

/* CONTRASTE específico */
body.contraste .vision .bloque {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

@media (max-width: 768px) {
  .vision {
    padding: 24px 16px;
    padding-top: 15vh;
  }

  .vision .bloque {
    padding: 1rem;
    min-height: 40vh;
    background-size: cover;
    background-position: center;
  }

  .vision .bloque h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  .vision .bloque p {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    line-height: 1.5;
  }
}