/* ========================================
   MISIÓN — página standalone
   Reutiliza variables y clases de qs- (quienes-somos.css)
   para mantener el mismo lenguaje visual: hero claro,
   qs-section-label, qs-section-title, qs-check-list.
   ======================================== */

.mision-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #e9f1eb 0%, var(--fondo-principal) 45%, var(--fondo-principal) 100%);
    padding: 80px 0;
}

.mision-section__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.mision-section__bg svg { width: 100%; height: 100%; display: block; }

.mision-section > .container {
    position: relative;
    z-index: 1;
}

.mision-intro {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.mision-intro .qs-section-label {
    text-align: center;
}

.mision-intro p {
    font-family: var(--font-texto);
    font-size: 0.98rem;
    line-height: 1.85;
    color: var(--texto-secundario);
}

.mision-especialidades {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.mision-col {
    background: var(--blanco);
    border: 1px solid rgba(8, 64, 32, 0.08);
    border-radius: 16px;
    padding: 32px 28px;
}

.mision-col h3 {
    font-family: var(--font-titulos);
    font-size: 1.25rem;
    color: var(--verde-oscuro);
    margin-bottom: 14px;
}

.mision-col-intro {
    font-family: var(--font-texto);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--texto-secundario);
    margin-bottom: 18px;
}

.mision-nota {
    max-width: 760px;
    margin: 40px auto 0;
    text-align: center;
    font-family: var(--font-texto);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--texto-secundario);
}

@media (max-width: 1024px) {
    .mision-especialidades { grid-template-columns: 1fr; }
}