/* =====================================================================
   11 · MISIÓN (id="mision")
   Frase grande sobre una foto que queda fija al hacer scroll (parallax).
   Para cambiar la foto: reemplaza img/mision-interior.jpg
   ===================================================================== */

.mision {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url("../../img/fondo-mision.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* efecto parallax */
}

.mision__capa { position: absolute; inset: 0; background: rgba(8, 6, 5, .64); }

.mision__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  max-width: 1100px;
}

.mision__frase {
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mision__firma { font-size: 18px; }


/* ---------- Tablet y celular ---------- */
/* En celulares background-attachment: fixed no funciona bien, se desactiva */
@media (max-width: 1024px) {
  .mision { min-height: 560px; background-attachment: scroll; }
  .mision__contenido { gap: 28px; }
}