.mision {
  padding: 60px 60px;
  padding-top: 15vh;
  flex: 1;
}

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

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

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

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

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

/* Tipografía modular */
.mision .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)
}

.mision .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 .mision .bloque {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

@media (max-width: 768px) {
  .mision {
    padding: 1rem;
    margin-top: 10vh;
  }

  .mision .bloque {
    padding: 24px 16px;
    min-height: 40vh;
    background-size: cover;
    background-position: center;
  }

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

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