/*
========================================
quienes.css
Colegio Madrid de Veracruz
========================================
*/

/* ENCABEZADO */

.pagina-encabezado{
    padding:45px 20px 20px;
    text-align:center;
}

.pagina-encabezado h1{
    color:#1d5ca8;
    font:700 48px/48px "Open Sans",sans-serif;
    margin-bottom:12px;
}

.pagina-encabezado p{
    color:#1d70b8;
    font:400 16px/16px "Open Sans",sans-serif;
    text-transform:uppercase;
}

/* QUIÉNES SOMOS */

.quienes-somos{
    padding:10px 20px 50px;
}

.dos-columnas{
    width:98%;
    max-width:900px;
    margin:0 auto;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:35px;
}

.texto{
    flex:1.1;
}

.texto h2{
    margin-bottom:18px;
    color:#222222;
    font:700 30px/34px "Open Sans",sans-serif;
}

.texto p{
    margin-bottom:18px;
    color:#333333;
    font:400 16px/20px "Open Sans",sans-serif;
    text-align:justify;
}

.imagen{
    flex:.9;
    text-align:center;
}

.imagen img{
    width:100%;
    max-width:420px;
    display:block;
    margin:0 auto;
}

/* MISIÓN Y VALORES */

.mision,
.valores{
    padding:0 20px 50px;
}

.mision .contenedor,
.valores .contenedor{
    width:98%;
    max-width:900px;
    margin:0 auto;
}

.mision h2,
.valores h2{
    color:#1d5ca8;
    text-align:center;
    font:700 46px/46px "Open Sans",sans-serif;
    margin-bottom:22px;
}

.mision p,
.valores p{
    color:#333333;
    font:400 16px/20px "Open Sans",sans-serif;
    text-align:justify;
}

/* RESPONSIVE */

@media (max-width:900px){

    .pagina-encabezado h1{
        font-size:40px;
        line-height:40px;
    }

    .pagina-encabezado p{
        font-size:15px;
        line-height:15px;
    }

    .dos-columnas{
        flex-direction:column;
        gap:30px;
    }

    .texto,
    .imagen{
        flex:1;
    }

    .imagen{
        order:-1;
    }

    .imagen img{
        max-width:340px;
    }

    .texto h2{
        font-size:28px;
        line-height:32px;
    }

    .texto p,
    .mision p,
    .valores p{
        font-size:16px;
        line-height:24px;
    }

    .mision h2,
    .valores h2{
        font-size:40px;
        line-height:40px;
    }

}

@media (max-width:600px){

    .pagina-encabezado{
        padding:35px 15px 20px;
    }

    .pagina-encabezado h1{
        font-size:32px;
        line-height:34px;
    }

    .pagina-encabezado p{
        font-size:14px;
        line-height:14px;
    }

    .quienes-somos,
    .mision,
    .valores{
        padding-bottom:40px;
    }

    .imagen img{
        max-width:280px;
    }

}